overview-components 1.1.0 → 1.1.11

package/dist/components/lit-attachments-tab.js

@@ -9,14 +9,18 @@ import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { msg } from '@lit/localize';
+import { isEmpty } from 'lodash';
+import { saveAs } from 'file-saver';
 // components
 import '../shared/lit-icon.js';
 import '../shared/lit-icon-button.js';
 import '../shared/lit-select.js';
 import '../shared/lit-overflow-tooltip.js';
-import '../assets/ilustration/no-preview.js';
+import '../assets/illustration/no-preview.js';
+import '../assets/illustration/not-found.js';
 import '../shared/lit-loading-bar.js';
 import '../components/lit-section-tab.js';
+import './components-settings/attachments-tab-settings.js';
 // pdf.js
 import * as pdfjsLib from 'pdfjs-dist';
 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).toString();
@@ -26,15 +30,17 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.hideTabWhen = false;
         this.documents = [];
         this.type = 'compact';
-        // @property({ type: Array }) additionalLabels?: any[] = [];
         this.scale = 1;
-        this.isDocumentLoading = true;
+        this.isDocumentLoading = false;
+        this.enableSettings = false;
+        this.onSettingsChanged = () => { };
         this.selectedId = '';
         this.pageNumber = 1;
         this.pageCount = 1;
         this.isChecked = {};
         this.preview = true;
         this.documentData = null;
+        this.isOpenModal = false;
         this.canvas = null;
         this.ctx = null;
         this.outerContainer = null;
@@ -52,14 +58,6 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
                 reader.readAsArrayBuffer(buffer);
         });
     }
-    async connectedCallback() {
-        super.connectedCallback();
-        this.type = this.type || 'compact';
-        this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
-        if (!this.hideTabWhen && this.documents) {
-            this.handleDocumentClick(this.selectedId);
-        }
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.abortController.abort();
@@ -68,6 +66,10 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
             this.documentData = null;
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.localScale = this.scale;
+    }
     async firstUpdated() {
         this.canvas = this.shadowRoot?.querySelector('canvas') ?? null;
         this.ctx = this.canvas?.getContext('2d');
@@ -78,7 +80,9 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         super.updated(_changedProperties);
         if (_changedProperties.has('documents')) {
             this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
-            if (!this.hideTabWhen && typeof this.documents !== 'undefined') {
+            if (!this.hideTabWhen &&
+                typeof this.documents !== 'undefined' &&
+                !isEmpty(this.documents)) {
                 this.handleDocumentClick(this.selectedId);
             }
         }
@@ -122,7 +126,6 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
                 this.preview = false;
             }
             this.pageNumber = 1;
-            this.scale = 1;
             await this.renderPage();
         }
         catch (error) {
@@ -131,6 +134,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     }
     async handleDocumentClick(id) {
         this.selectedId = id;
+        this.localScale = this.scale;
         if (this.onClick) {
             try {
                 this.isDocumentLoading = true;
@@ -150,32 +154,55 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
                 throw new Error('Document not found');
             }
             const src = document.dmsf_src;
+            if (!src)
+                throw new Error('Missing source URL');
             const buffer = await fetch(src).then((res) => res.arrayBuffer());
             this.loadDocumentData(buffer);
         }
     }
     async renderPage() {
-        if (!this.selectedDocument || !this.canvas || !this.ctx)
+        if (!this.selectedDocument || !this.canvas || !this.ctx || !this.outerContainer)
             return;
         this.canvas.style.display = this.preview ? 'block' : 'none';
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         try {
+            const userScale = this.localScale ?? 1;
+            const containerWidth = this.outerContainer.offsetWidth;
+            const dpr = window.devicePixelRatio || 1;
             if (this.preview && 'getPage' in this.selectedDocument) {
                 const page = await this.selectedDocument.getPage(this.pageNumber ?? 1);
-                const viewport = page.getViewport({ scale: (this.scale ?? 1) * 2.5 });
-                this.canvas.height = viewport.height;
-                this.canvas.width = viewport.width;
-                const renderContext = {
+                // viewport pri mierke 1
+                const viewportBase = page.getViewport({ scale: 1 });
+                const fitScale = containerWidth / viewportBase.width;
+                // logický scale voči fitnutému rozmeru
+                const logicalScale = fitScale * userScale;
+                // rozlíšenie sa renderuje vždy ako keby scale bolo aspoň 1
+                const renderScale = fitScale * Math.max(userScale, 1);
+                const renderViewport = page.getViewport({ scale: renderScale * dpr });
+                // renderuj do veľkého canvasu
+                this.canvas.width = renderViewport.width;
+                this.canvas.height = renderViewport.height;
+                // zobrazenie podľa požadovaného scale
+                this.canvas.style.width = `${viewportBase.width * logicalScale}px`;
+                this.canvas.style.height = 'auto';
+                await page.render({
                     canvasContext: this.ctx,
-                    viewport: viewport,
+                    viewport: renderViewport,
                     signal: this.abortController.signal,
-                };
-                await page.render(renderContext).promise;
+                }).promise;
             }
             else if (this.preview && this.selectedDocument instanceof HTMLImageElement) {
-                this.canvas.width = this.selectedDocument.width;
-                this.canvas.height = this.selectedDocument.height;
-                this.ctx.drawImage(this.selectedDocument, 0, 0, this.canvas.width, this.canvas.height);
+                const img = this.selectedDocument;
+                const fitScale = containerWidth / img.naturalWidth;
+                const logicalScale = fitScale * userScale;
+                const renderScale = fitScale * Math.max(userScale, 1);
+                const renderWidth = img.naturalWidth * renderScale * dpr;
+                const renderHeight = img.naturalHeight * renderScale * dpr;
+                this.canvas.width = renderWidth;
+                this.canvas.height = renderHeight;
+                this.canvas.style.width = `${img.naturalWidth * logicalScale}px`;
+                this.canvas.style.height = 'auto';
+                this.ctx.drawImage(img, 0, 0, renderWidth, renderHeight);
             }
         }
         catch (error) {
@@ -186,7 +213,12 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     }
     getSelectedDocumentName() {
         const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
-        return selectedDoc?.name || 'Unknown Document';
+        if (isEmpty(this.documents)) {
+            return '';
+        }
+        else {
+            return selectedDoc?.name || 'Unknown Document';
+        }
     }
     handlePageChange(next) {
         const newPage = next ? (this.pageNumber ?? 1) + 1 : (this.pageNumber ?? 1) - 1;
@@ -204,25 +236,26 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
             const documentData = await this.onClick(this.selectedId);
             const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
             const blob = new Blob([documentData.data], { type: selectedDoc?.file_type });
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = selectedDoc?.name || 'document';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
+            saveAs(blob, selectedDoc?.name || 'document');
+            // const url = URL.createObjectURL(blob);
+            // const link = document.createElement('a');
+            // link.href = url;
+            // link.download = selectedDoc?.name || 'document';
+            // document.body.appendChild(link);
+            // link.click();
+            // document.body.removeChild(link);
+            // URL.revokeObjectURL(url);
         }
         catch (error) {
             console.error('Error downloading document:', error);
         }
     }
     handleZoom(increase) {
-        this.scale = increase ? (this.scale ?? 1) * 1.1 : (this.scale ?? 1) / 1.1;
+        this.localScale = increase ? (this.localScale ?? 1) * 1.1 : (this.localScale ?? 1) / 1.1;
         this.renderPage();
     }
     handleMouseDown(e) {
-        if ((this.scale ?? 1) <= 1)
+        if ((this.localScale ?? 1) <= 1)
             return;
         this.isDragging = true;
         this.clickX = e.clientX;
@@ -245,250 +278,337 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     handleMouseUp() {
         this.isDragging = false;
     }
+    toggleModal() {
+        this.isOpenModal = !this.isOpenModal;
+    }
+    async onSettingsChangedCallback(value) {
+        if (value?.scale !== undefined) {
+            this.scale = value.scale;
+            this.localScale = value.scale;
+        }
+        if (value?.type !== undefined) {
+            this.type = value.type;
+        }
+        await this.renderPage();
+        if (this.onSettingsChanged) {
+            this.dispatchEvent(new CustomEvent('onSettingsChanged', {
+                bubbles: true,
+                composed: true,
+                detail: value,
+            }));
+            this.onSettingsChanged?.(value);
+        }
+    }
     render() {
         if (this.hideTabWhen)
             return null;
-        return html `
-            ${this.type === 'compact'
-            ? html ` ${this.documents?.map((doc, index) => html `
-                          <div
-                              class="document-label ${this.selectedId == doc.id
+        return html `
+            <div class="attachments-container">
+                <div class="documents-list-section">
+                    ${this.type === 'compact'
+            ? html ` ${this.documents?.map((doc, index) => html `
+                                  <div
+                                      class="document-label ${this.selectedId == doc.id
                 ? 'selected'
-                : null}"
-                              @click=${() => this.handleDocumentClick(doc.id)}
-                          >
-                              <div class="document-item" id="${doc.id}">
-                                  <lit-overflow-tooltip
-                                      label="${doc.name || `Document ${index + 1}`}"
-                                  >
-                                      ${doc.name || `Document ${index + 1}`}
-                                  </lit-overflow-tooltip>
-                              </div>
-
-                              ${this.selectedId == doc.id
-                ? html `
-                                        <div class="document-checked">
-                                            <span>${msg('Zobrazen náhled')}</span>
-                                        </div>
-                                    `
-                : html `
-                                        <div class="document-unchecked">
-                                            <lit-icon icon="reading" size="1rem"></lit-icon>
-                                            <span>${msg('Zobrazit náhled')}</span>
-                                        </div>
-                                    `}
-                          </div>
-                      `)}`
-            : html `
-                      <lit-select
-                          .value="${this.selectedId}"
-                          .options="${this.documents?.map((doc) => ({
+                : null}"
+                                      @click=${() => doc.id && this.handleDocumentClick(doc.id)}
+                                  >
+                                      <div class="document-item" id="${doc.id}">
+                                          <lit-overflow-tooltip
+                                              label="${doc.name || `Document ${index + 1}`}"
+                                          >
+                                              ${doc.name || `Document ${index + 1}`}
+                                          </lit-overflow-tooltip>
+                                      </div>
+
+                                      ${this.selectedId == doc.id
+                ? html `
+                                                <div class="document-checked">
+                                                    <span>${msg('Zobrazen náhled')}</span>
+                                                </div>
+                                            `
+                : html `
+                                                <div class="document-unchecked">
+                                                    <lit-icon icon="reading" size="1rem"></lit-icon>
+                                                    <span>${msg('Zobrazit náhled')}</span>
+                                                </div>
+                                            `}
+                                  </div>
+                              `)}`
+            : html `
+                              <lit-select
+                                  id="document-select"
+                                  .value="${this.selectedId}"
+                                  .options="${this.documents?.map((doc) => ({
                 value: doc.id,
                 label: doc.name,
-            }))}"
-                          .onChange="${(selectedValue) => {
+            }))}"
+                                  .onChange="${(selectedValue) => {
                 this.handleDocumentClick(selectedValue);
-            }}"
-                          .disableClearButton="${true}"
-                      ></lit-select>
-                  `}
-            <div style="height: 0.1875rem">
-                ${this.isDocumentLoading ? html ` <lit-loading-bar></lit-loading-bar> ` : null}
-            </div>
-            <div class="document">
-                <div class="document-box">
-                    <div class="document-selected">
-                        <lit-overflow-tooltip label="${this.getSelectedDocumentName()}">
-                            ${this.getSelectedDocumentName()}
-                        </lit-overflow-tooltip>
-                    </div>
-                    <div class="action-buttons">
-                        ${this.preview
-            ? html `
-                                  <lit-icon
-                                      style="cursor: pointer"
-                                      icon="chevronLeftFilled"
-                                      size="1rem"
-                                      @click=${() => this.handlePageChange(false)}
-                                  ></lit-icon>
-                                  <span>page ${this.pageNumber} / ${this.pageCount}</span>
-                                  <lit-icon
-                                      style="cursor: pointer"
-                                      icon="chevronRightFilled"
-                                      size="1rem"
-                                      @click=${() => this.handlePageChange(true)}
-                                  ></lit-icon>
-                                  <lit-icon-button
-                                      icon="zoomout"
-                                      variant="text"
-                                      size="small"
-                                      @click=${() => this.handleZoom(false)}
-                                  ></lit-icon-button>
-                                  <lit-icon-button
-                                      icon="zoomIn"
-                                      variant="text"
-                                      size="small"
-                                      @click=${() => this.handleZoom(true)}
-                                  ></lit-icon-button>
+            }}"
+                                  .disableClearButton="${true}"
+                              ></lit-select>
+                          `}
+                    <div style="height: 0.1875rem">
+                        ${this.isDocumentLoading
+            ? html ` <lit-loading-bar></lit-loading-bar> `
+            : null}
+                    </div>
+                </div>
+                <div class="document">
+                    <div class="document-box">
+                        <div class="document-selected">
+                            <lit-overflow-tooltip label="${this.getSelectedDocumentName()}">
+                                ${this.getSelectedDocumentName()}
+                            </lit-overflow-tooltip>
+                        </div>
+                        ${!isEmpty(this.documents)
+            ? html `
+                                  <div class="action-buttons">
+                                      ${this.preview
+                ? html `
+                                                <lit-icon
+                                                    style="cursor: pointer"
+                                                    icon="chevronLeftFilled"
+                                                    size="1rem"
+                                                    @click=${() => this.handlePageChange(false)}
+                                                ></lit-icon>
+                                                <span
+                                                    >page ${this.pageNumber} /
+                                                    ${this.pageCount}</span
+                                                >
+                                                <lit-icon
+                                                    style="cursor: pointer"
+                                                    icon="chevronRightFilled"
+                                                    size="1rem"
+                                                    @click=${() => this.handlePageChange(true)}
+                                                ></lit-icon>
+                                                <lit-icon-button
+                                                    icon="zoomout"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(false)}
+                                                ></lit-icon-button>
+                                                <lit-icon-button
+                                                    icon="zoomIn"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(true)}
+                                                ></lit-icon-button>
+                                            `
+                : null}
+
+                                      <lit-icon-button
+                                          icon="download"
+                                          variant="text"
+                                          size="small"
+                                          @click=${this.handleDownload}
+                                      ></lit-icon-button>
+                                  </div>
+                              `
+            : null}
+                    </div>
+                    <div
+                        class="document-container"
+                        @mousemove=${this.handleMouseMove}
+                        @mouseup=${this.handleMouseUp}
+                        @mouseleave=${this.handleMouseUp}
+                    >
+                        ${!isEmpty(this.documents)
+            ? html `
+                                  <canvas
+                                      style=${styleMap({
+                cursor: (this.scale ?? 1) > 1 ? 'grab' : 'default',
+            })}
+                                      @mousedown=${this.handleMouseDown}
+                                  >
+                                  </canvas>
+                              `
+            : null}
+                        ${!this.preview
+            ? html `
+                                  <div class="not-supported__format">
+                                      <div style="max-height: 7.125rem; max-width: 7.125rem">
+                                          <no-preview></no-preview>
+                                      </div>
+                                      ${msg('Náhled dokumentu není možný vzhledem k typu dokumentu.')}
+                                  </div>
                               `
-            : null}
-
-                        <lit-icon-button
-                            icon="download"
-                            variant="text"
-                            size="small"
-                            @click=${this.handleDownload}
-                        ></lit-icon-button>
-                    </div>
-                </div>
-                <div
-                    class="document-container"
-                    @mousemove=${this.handleMouseMove}
-                    @mouseup=${this.handleMouseUp}
-                    @mouseleave=${this.handleMouseUp}
-                >
-                    <canvas
-                        style=${styleMap({
-            cursor: (this.scale ?? 1) > 1 ? 'grab' : 'default',
-            transform: `scale(${this.scale})`,
-        })}
-                        @mousedown=${this.handleMouseDown}
-                    >
-                    </canvas>
-                    ${!this.preview
-            ? html `
-                              <div class="not-supported__format">
-                                  <div style="max-height: 7.125rem; max-width: 7.125rem">
-                                      <no-preview></no-preview>
-                                  </div>
-                                  ${msg('Náhled dokumentu není možný vzhledem k typu dokumentu.')}
-                              </div>
-                          `
-            : null}
-                </div>
-            </div>
+            : null}
+                        ${!this.documents || isEmpty(this.documents)
+            ? html `
+                                  <div class="not-supported__format">
+                                      <div style="max-height: 7.125rem; max-width: 7.125rem">
+                                          <not-found></not-found>
+                                      </div>
+                                      ${msg('Nic dalšího tu není')}
+                                  </div>
+                              `
+            : null}
+                    </div>
+                </div>
+
+                ${this.enableSettings
+            ? html `<div class="footer">
+                          <lit-icon-button
+                              icon="administration"
+                              @click="${this.toggleModal}"
+                              variant="dashed"
+                              style="display: inline-block"
+                          ></lit-icon-button>
+                          <attachments-tab-settings
+                              .onClose="${() => {
+                this.isOpenModal = false;
+            }}"
+                              .isOpenModal="${this.isOpenModal}"
+                              .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
+                              .type="${this.type}"
+                              .scale="${this.scale}"
+                          ></attachments-tab-settings>
+                      </div>`
+            : null}
+            </div>
         `;
     }
 };
 LitAttachmentsTab.styles = [
-    css `
-            .document-label {
-                line-height: 2.125rem;
-                gap: 0.25rem;
-                display: flex;
-                justify-content: space-between;
-                flex-direction: row;
-                align-items: center;
-                position: relative;
-                font-weight: 500;
-                font-size: 0.8125rem;
-                padding: 0.125rem 0 0.125rem 1rem;
-                background: var(--background-paper, #ffffff);
-                color: var(--color-secondary-main, #111827);
-                border-radius: 0.5rem;
-                cursor: pointer;
-            }
-
-            .document-item {
-                font-weight: 500;
-                font-size: 0.8125rem;
-                color: var(--color-secondary-main, #111827);
-                display: flex;
-
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-
-            .document-label:hover {
-                background: var(--color-primary-light, #f0fadf);
-            }
-
-            .selected {
-                background: var(--color-primary-light, #f0fadf);
-            }
-
-            .document-checked {
-                padding: 0 1rem 0 1rem;
-                font-size: 0.75rem;
-                color: var(--color-primary-dark, #5f9402);
-                white-space: nowrap;
-            }
-            .document-unchecked {
-                display: none;
-                padding: 0 1rem 0 1rem;
-                font-size: 0.75rem;
-                align-items: center;
-                gap: 0.5rem;
-                white-space: nowrap;
-            }
-
-            .document-label:hover .document-unchecked {
-                display: flex;
-            }
-
-            .document {
-                height: 100%;
-                background: var(--background-default, #eff3f4);
-                border-radius: 0.25rem;
-                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
-            }
-
-            .document-box {
-                display: flex;
-                align-items: center;
-                max-height: 2rem;
-                justify-content: space-between;
-                padding: 0 0.75rem 0.75rem 0.75rem;
-            }
-
-            .action-buttons {
-                display: flex;
-                align-items: center;
-                font-size: 0.8125rem;
-                gap: 0.75rem;
-                white-space: nowrap;
-            }
-
-            .document-selected {
-                color: var(--color-secondary-main, #111827);
-                font-size: 0.8125rem;
-                font-weight: 500;
-                max-width: 100%;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                display: flex;
-            }
-
-            .document-container {
-                position: relative;
-                width: 100%;
-                height: 100%;
-
-                overflow: auto;
-                justify-content: center;
-                align-items: center;
-            }
-
-            canvas {
-                display: block;
-                margin: 0 auto;
-                transform-origin: 0 0;
-                width: 100%;
-                height: 100%;
-            }
-
-            .not-supported__format {
-                min-height: 40vh;
-                font-size: 0.875rem;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-                margin: 1rem 0 1rem 0;
-            }
+    css `
+            .document-label {
+                line-height: 2.125rem;
+                gap: 0.25rem;
+                display: flex;
+                justify-content: space-between;
+                flex-direction: row;
+                align-items: center;
+                position: relative;
+                font-weight: 500;
+                font-size: 0.8125rem;
+                padding: 0.125rem 0 0.125rem 1rem;
+                background: var(--background-paper, #ffffff);
+                color: var(--color-secondary-main, #111827);
+                border-radius: 0.5rem;
+                cursor: pointer;
+            }
+
+            .document-item {
+                font-weight: 500;
+                font-size: 0.8125rem;
+                color: var(--color-secondary-main, #111827);
+                display: flex;
+
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .document-label:hover {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .selected {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .document-checked {
+                padding: 0 1rem 0 1rem;
+                font-size: 0.75rem;
+                color: var(--color-primary-dark, #5f9402);
+                white-space: nowrap;
+            }
+            .document-unchecked {
+                display: none;
+                padding: 0 1rem 0 1rem;
+                font-size: 0.75rem;
+                align-items: center;
+                gap: 0.5rem;
+                white-space: nowrap;
+            }
+
+            .document-label:hover .document-unchecked {
+                display: flex;
+            }
+
+            .document {
+                background: var(--background-default, #eff3f4);
+                border-radius: 0.25rem;
+                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+
+                flex: 1; /* Zaberie všetok dostupný priestor */
+                min-height: 0;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .document-box {
+                display: flex;
+                align-items: center;
+                max-height: 2rem;
+                justify-content: space-between;
+                padding: 0 0.75rem 0.75rem 0.75rem;
+            }
+
+            .action-buttons {
+                display: flex;
+                align-items: center;
+                font-size: 0.8125rem;
+                gap: 0.75rem;
+                white-space: nowrap;
+            }
+
+            .document-selected {
+                color: var(--color-secondary-main, #111827);
+                font-size: 0.8125rem;
+                font-weight: 500;
+                max-width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: flex;
+            }
+
+            .document-container {
+                position: relative;
+                width: 100%;
+                flex: 1;
+                min-height: 0;
+                overflow: auto;
+                justify-content: center;
+                align-items: center;
+            }
+
+            canvas {
+                display: block;
+                margin: 0 auto;
+                transform-origin: 0 0;
+            }
+
+            .not-supported__format {
+                min-height: 40vh;
+                font-size: 0.875rem;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                margin: 1rem 0 1rem 0;
+            }
+            .attachments-container {
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .documents-list-section {
+                flex-shrink: 0;
+            }
+
+            .footer {
+                flex-shrink: 0;
+                justify-content: end;
+                display: flex;
+                margin-top: 0.5rem;
+            }
         `,
 ];
 __decorate([
@@ -510,8 +630,14 @@ __decorate([
     property({ type: Function })
 ], LitAttachmentsTab.prototype, "onClick", void 0);
 __decorate([
-    state()
+    property({ type: Boolean })
 ], LitAttachmentsTab.prototype, "isDocumentLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableSettings", void 0);
+__decorate([
+    property({ attribute: false })
+], LitAttachmentsTab.prototype, "onSettingsChanged", void 0);
 __decorate([
     state()
 ], LitAttachmentsTab.prototype, "selectedDocument", void 0);
@@ -539,6 +665,12 @@ __decorate([
 __decorate([
     state()
 ], LitAttachmentsTab.prototype, "documentData", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isOpenModal", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "localScale", void 0);
 LitAttachmentsTab = __decorate([
     customElement('lit-attachments-tab')
 ], LitAttachmentsTab);