feat(dees-pdf-viewer): add configurable sidebar position support

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.52.5',
+  version: '3.53.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-media/dees-pdf-viewer/component.ts

@@ -34,6 +34,9 @@ export class DeesPdfViewer extends DeesElement {
   @property({ type: Boolean })
   accessor showSidebar: boolean = false;
 
+  @property({ type: String })
+  accessor sidebarPosition: 'left' | 'right' = 'left';
+
   @property({ type: Number })
   accessor currentPage: number = 1;
 
@@ -89,7 +92,7 @@ export class DeesPdfViewer extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <dees-tile class="${this.showSidebar ? 'with-sidebar' : ''}">
+      <dees-tile class="${this.showSidebar ? 'with-sidebar' : ''} sidebar-${this.sidebarPosition}">
         ${this.showToolbar ? html`
           <div slot="header" class="toolbar">
             <div class="toolbar-group">
@@ -251,7 +254,7 @@ export class DeesPdfViewer extends DeesElement {
               <span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
             ` : ''}
           </div>
-          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar ? '100px' : '0'}">
+          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === 'left' ? '100px' : this.showSidebar && this.sidebarPosition === 'right' ? '-100px' : '0'}">
             <span>Page ${this.currentPage} of ${this.totalPages}</span>
           </div>
           <div class="pdf-footer-right">

ts_web/elements/00group-media/dees-pdf-viewer/styles.ts

@@ -144,6 +144,13 @@ export const viewerStyles = [
       flex-direction: column;
       height: 100%;
       overflow: hidden;
+      order: 0;
+    }
+
+    .sidebar-right .sidebar {
+      border-right: none;
+      border-left: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      order: 1;
     }
 
     .sidebar-header {