From 68ed024aaa055da333a3da9b50b9c0a6ac6010a8 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 3 Apr 2026 20:27:50 +0000
Subject: [PATCH] feat(dees-pdf-viewer): add configurable sidebar position
 support

---
 changelog.md                                               | 6 ++++++
 ts_web/00_commitinfo_data.ts                               | 2 +-
 ts_web/elements/00group-media/dees-pdf-viewer/component.ts | 7 +++++--
 ts_web/elements/00group-media/dees-pdf-viewer/styles.ts    | 7 +++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index 224197c..6b0168c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
+add configurable sidebar position support
+
+- introduces a sidebarPosition property with left and right options
+- updates viewer layout and footer alignment when the sidebar is displayed on the right
+
 ## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
 add top scroll offset when navigating to a page in the PDF viewer
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index f44a9e6..ad6c719 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/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.'
 }
diff --git a/ts_web/elements/00group-media/dees-pdf-viewer/component.ts b/ts_web/elements/00group-media/dees-pdf-viewer/component.ts
index 50d5b74..54b2711 100644
--- a/ts_web/elements/00group-media/dees-pdf-viewer/component.ts
+++ b/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">
diff --git a/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts b/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
index 96a3e54..6301445 100644
--- a/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
+++ b/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 {