overview-components 0.9.0 → 1.0.1

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

@@ -14,22 +14,28 @@ import '../shared/lit-icon.js';
 import '../shared/lit-icon-button.js';
 import '../shared/lit-tooltip.js';
 import '../shared/lit-select.js';
+import '../shared/lit-overflow-tooltip.js';
 import '../assets/ilustration/no-preview.js';
+import '../shared/lit-loading-bar.js';
+import '../components/lit-section-tab.js';
 // pdf.js
 import * as pdfjsLib from 'pdfjs-dist';
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).toString();
 let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     constructor() {
         super(...arguments);
         this.hideTabWhen = false;
         this.documents = [];
         this.type = 'compact';
+        // @property({ type: Array }) additionalLabels?: any[] = [];
+        this.scale = 1;
+        this.isDocumentLoading = true;
+        this.selectedId = '';
         this.pageNumber = 1;
         this.pageCount = 1;
-        this.scale = 1;
         this.isChecked = {};
-        this.additionalLabels = [];
         this.preview = true;
+        this.documentData = null;
         this.canvas = null;
         this.ctx = null;
         this.outerContainer = null;
@@ -39,13 +45,28 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.prevScrollLeft = 0;
         this.prevScrollTop = 0;
         this.abortController = new AbortController();
+        this.handleReadFile = (buffer) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader);
+            reader.onerror = (err) => reject(err);
+            if (buffer !== null)
+                reader.readAsArrayBuffer(buffer);
+        });
     }
     async connectedCallback() {
         super.connectedCallback();
         this.type = this.type || 'compact';
-        this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? null);
-        if (!this.hideTabWhen) {
-            await this.loadDocument();
+        this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
+        if (!this.hideTabWhen && this.documents) {
+            this.handleDocumentClick(this.selectedId);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.abortController.abort();
+        if (this.documentData && this.documentData.cancel) {
+            this.documentData.cancel();
+            this.documentData = null;
         }
     }
     async firstUpdated() {
@@ -54,56 +75,93 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.outerContainer = this.shadowRoot?.querySelector('.document-container') || null;
         await this.renderPage();
     }
-    async loadDocument(id) {
-        const doc = id
-            ? this.documents?.find((d) => d.id === id)
-            : this.documents?.find((d) => d.id === this.initialSelection) || this.documents?.[0];
-        if (!doc?.src)
-            return;
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('documents')) {
+            this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
+            if (!this.hideTabWhen && typeof this.documents !== 'undefined') {
+                this.handleDocumentClick(this.selectedId);
+            }
+        }
+        if (_changedProperties.has('selectedId')) {
+            if (this.documentData && this.documentData.cancel) {
+                this.documentData.cancel();
+                this.documentData = null;
+            }
+        }
+    }
+    async loadDocumentData(documentData) {
         try {
-            if (doc.file_type === 'application/pdf') {
-                // Načítanie PDF
-                const loadingTask = pdfjsLib.getDocument(doc.src);
+            // Find the document in the documents array using the selectedId
+            const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+            if (!selectedDoc) {
+                console.error('Selected document not found in documents array.');
+                return;
+            }
+            if (selectedDoc.file_type === 'application/pdf') {
+                const loadingTask = pdfjsLib.getDocument(documentData);
                 this.selectedDocument = await loadingTask.promise;
                 if (this.selectedDocument) {
                     this.pageCount = this.selectedDocument.numPages;
                 }
                 this.preview = true;
             }
-            else if (doc.file_type === 'image/jpeg' || doc.file_type === 'image/png') {
-                // Načítanie obrázku
+            else if (selectedDoc.file_type === 'image/jpeg' ||
+                selectedDoc.file_type === 'image/png') {
                 const img = new Image();
                 img.onload = () => {
                     this.selectedDocument = img;
-                    this.pageCount = 1; // Obrázky majú iba jednu "stránku"
+                    this.pageCount = 1;
                     this.preview = true;
                     this.renderPage();
                 };
-                img.src = doc.src;
+                img.src = URL.createObjectURL(new Blob([documentData], { type: selectedDoc.file_type }));
                 return;
             }
             else {
-                this.selectedDocument = doc;
+                this.selectedDocument = documentData;
                 this.preview = false;
             }
             this.pageNumber = 1;
             this.scale = 1;
-            this.selectedId = doc.id;
             await this.renderPage();
         }
         catch (error) {
-            console.error('Error loading document:', error);
+            console.error('Error loading document data:', error);
+        }
+    }
+    async handleDocumentClick(id) {
+        this.selectedId = id;
+        if (this.onClick) {
+            try {
+                this.isDocumentLoading = true;
+                this.documentData = await this.onClick(id);
+                this.isDocumentLoading = false;
+                let readerPromise = this.handleReadFile(this.documentData);
+                let reader = await Promise.resolve(readerPromise);
+                this.loadDocumentData(reader.result);
+            }
+            catch (error) {
+                console.error('Error fetching document:', error);
+            }
+        }
+        else {
+            const document = this.documents?.find((doc) => doc.id === id);
+            if (!document) {
+                throw new Error('Document not found');
+            }
+            const src = document.dmsf_src;
+            const buffer = await fetch(src).then((res) => res.arrayBuffer());
+            this.loadDocumentData(buffer);
         }
     }
     async renderPage() {
         if (!this.selectedDocument || !this.canvas || !this.ctx)
             return;
-        // Skryť canvas, ak je dokument nepodporovaný
         this.canvas.style.display = this.preview ? 'block' : 'none';
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         try {
             if (this.preview && 'getPage' in this.selectedDocument) {
-                // Spracovanie PDF
                 const page = await this.selectedDocument.getPage(this.pageNumber ?? 1);
                 const viewport = page.getViewport({ scale: (this.scale ?? 1) * 2.5 });
                 this.canvas.height = viewport.height;
@@ -116,7 +174,6 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
                 await page.render(renderContext).promise;
             }
             else if (this.preview && this.selectedDocument instanceof HTMLImageElement) {
-                // Spracovanie obrázku
                 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);
@@ -128,10 +185,6 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
             }
         }
     }
-    handleDocumentClick(id) {
-        this.selectedId = id;
-        this.loadDocument(id);
-    }
     getSelectedDocumentName() {
         const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
         return selectedDoc?.name || 'Unknown Document';
@@ -143,23 +196,27 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
             this.renderPage();
         }
     }
-    handleDownload() {
-        if (!this.selectedDocument) {
-            console.error('No document selected for download.');
+    async handleDownload() {
+        if (!this.selectedDocument || !this.onClick) {
+            console.error('No document selected for download or onClick handler missing.');
             return;
         }
-        const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
-        if (!selectedDoc || !selectedDoc.src) {
-            console.error('Document source not found.');
-            return;
+        try {
+            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);
+        }
+        catch (error) {
+            console.error('Error downloading document:', error);
         }
-        // Vytvorenie odkazu pre stiahnutie
-        const link = document.createElement('a');
-        link.href = selectedDoc.src; // Cesta k PDF
-        link.download = selectedDoc.name || 'document.pdf'; // Názov pre stiahnutý súbor
-        document.body.appendChild(link); // Pridanie do DOM
-        link.click(); // Simulácia kliknutia
-        document.body.removeChild(link); // Odstránenie odkazu
     }
     handleZoom(increase) {
         this.scale = increase ? (this.scale ?? 1) * 1.1 : (this.scale ?? 1) / 1.1;
@@ -192,278 +249,249 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     render() {
         if (this.hideTabWhen)
             return null;
-        return html `
-            ${this.titleLabel
-            ? html `
-                      <div class="section-header">
-                          <div class="section-title">${this.titleLabel}</div>
-                      </div>
-                  `
-            : ''}
-            <div class="section-tab">
-                ${this.type === 'compact'
-            ? html ` ${this.documents?.map((doc, index) => html `
-                              <div
-                                  class="document-label ${this.selectedId == doc.id
+        return html `
+            ${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}">
-                                      ${doc.name || `Document ${index + 1}`}
-                                  </div>
-
-                                  ${this.selectedId == doc.id
-                ? html `
-                                            <div class="document-checked">
-                                                <span>Zobrazen náhled</span>
-                                            </div>
-                                        `
-                : html `
-                                            <div class="document-unchecked">
-                                                <lit-icon icon="reading" size="1rem"></lit-icon>
-                                                <span>Zobrazit náhled</span>
-                                            </div>
-                                        `}
-                              </div>
-                          `)}`
-            : html `
-                          <lit-select
-                              .value="${this.selectedId}"
-                              .options="${this.documents?.map((doc) => ({
+                : 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) => ({
                 value: doc.id,
                 label: doc.name,
-            }))}"
-                              .onChange="${(selectedValue) => {
+            }))}"
+                          .onChange="${(selectedValue) => {
                 this.handleDocumentClick(selectedValue);
-            }}"
-                          ></lit-select>
-                      `}
-
-                <div class="document">
-                    <div class="document-box">
-                        <div class="document-selected">${this.getSelectedDocumentName()}</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="zoomIn"
-                                          variant="text"
-                                          size="small"
-                                          @click=${() => this.handleZoom(true)}
-                                      ></lit-icon-button>
-                                      <lit-icon-button
-                                          icon="zoomout"
-                                          variant="text"
-                                          size="small"
-                                          @click=${() => this.handleZoom(false)}
-                                      ></lit-icon-button>
-                                  `
-            : 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({
+            }}"
+                          .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>
+                              `
+            : 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>
-            </div>
+        })}
+                        @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>
         `;
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.abortController.abort();
-    }
 };
 LitAttachmentsTab.styles = [
-    css `
-            .section-tab {
-                background: var(--background-paper, #ffffff);
-                border-radius: 0.75rem;
-                padding: var(--section-padding, 0.75rem 1rem);
-                box-sizing: border-box;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                width: 100%;
-                min-width: 20.3125rem;
-            }
-
-            .section-header {
-                display: flex;
-                align-items: center;
-                padding: 0.625rem 1rem 0.625rem 1rem;
-                text-transform: uppercase;
-            }
-
-            .section-title {
-                font-size: 0.6875rem;
-                color: var(--text-secondary, #5d6371);
-                font-weight: 600 !important;
-                margin-left: 0.5rem;
-            }
-
-            .document-label {
-                line-height: 2rem;
-                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);
-
-                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-success-main, #76b703);
-                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;
-            }
-
-            .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 {
-                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 {
+                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;
+            }
         `,
 ];
-__decorate([
-    property({ type: String })
-], LitAttachmentsTab.prototype, "titleLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], LitAttachmentsTab.prototype, "hideTabWhen", void 0);
@@ -473,39 +501,45 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], LitAttachmentsTab.prototype, "documents", void 0);
-__decorate([
-    property({ type: String })
-], LitAttachmentsTab.prototype, "selectedId", void 0);
 __decorate([
     property({ type: String })
 ], LitAttachmentsTab.prototype, "type", void 0);
 __decorate([
-    property({ type: Object })
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "scale", void 0);
+__decorate([
+    property({ type: Function })
+], LitAttachmentsTab.prototype, "onClick", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isDocumentLoading", void 0);
+__decorate([
+    state()
 ], LitAttachmentsTab.prototype, "selectedDocument", void 0);
 __decorate([
-    property({ type: Number })
+    state()
+], LitAttachmentsTab.prototype, "selectedId", void 0);
+__decorate([
+    state()
 ], LitAttachmentsTab.prototype, "pageNumber", void 0);
 __decorate([
-    property({ type: Number })
+    state()
 ], LitAttachmentsTab.prototype, "pageCount", void 0);
 __decorate([
-    property({ type: Number })
-], LitAttachmentsTab.prototype, "scale", void 0);
-__decorate([
-    property({ type: Object })
+    state()
 ], LitAttachmentsTab.prototype, "isChecked", void 0);
 __decorate([
-    property({ type: Array })
-], LitAttachmentsTab.prototype, "additionalLabels", void 0);
-__decorate([
-    property({ type: Object })
+    state()
 ], LitAttachmentsTab.prototype, "isEllipsisActive", void 0);
 __decorate([
-    property({ type: String })
+    state()
 ], LitAttachmentsTab.prototype, "isHoveredLabel", void 0);
 __decorate([
     state()
 ], LitAttachmentsTab.prototype, "preview", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "documentData", void 0);
 LitAttachmentsTab = __decorate([
     customElement('lit-attachments-tab')
 ], LitAttachmentsTab);