overview-components 0.2.3 → 0.2.5

package/dist/components/lit-attachments-tab.d.ts

@@ -5,15 +5,21 @@ 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-loader.js';
+import '../shared/lit-loading-bar.js';
 import '../components/lit-section-tab.js';
 import * as pdfjsLib from 'pdfjs-dist';
+type Document = {
+    id: string;
+    name: string;
+    dmsf_src: string;
+    file_type: string;
+};
 export type AttachmentsTabProps = {
     hideTabWhen?: boolean;
     additionalLabels?: any[];
     type?: 'compact' | 'select';
     initialSelection?: string;
-    documents?: any[];
+    documents?: Document[];
     selectedDocument?: {};
     selectedId?: string;
     pageNumber?: string;
@@ -28,7 +34,7 @@ export type AttachmentsTabProps = {
 export declare class LitAttachmentsTab extends LitElement {
     hideTabWhen?: boolean;
     initialSelection?: string;
-    documents?: any[];
+    documents?: Document[];
     type?: 'compact' | 'select';
     scale?: number;
     onClick?: (documentId: string) => Promise<any>;
@@ -41,6 +47,7 @@ export declare class LitAttachmentsTab extends LitElement {
     isEllipsisActive?: {};
     isHoveredLabel?: string;
     private preview;
+    private documentData;
     private canvas;
     private ctx;
     private outerContainer;
@@ -50,7 +57,6 @@ export declare class LitAttachmentsTab extends LitElement {
     private prevScrollLeft;
     private prevScrollTop;
     private abortController;
-    private documentData;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     firstUpdated(): Promise<void>;
@@ -74,4 +80,5 @@ declare global {
         'lit-attachments-tab': LitAttachmentsTab;
     }
 }
+export {};
 //# sourceMappingURL=lit-attachments-tab.d.ts.map

package/dist/components/lit-attachments-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lit-attachments-tab.d.ts","sourceRoot":"","sources":["../../src/components/lit-attachments-tab.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"lit-attachments-tab.d.ts","sourceRoot":"","sources":["../../src/components/lit-attachments-tab.ts"],"names":[],"mappings":"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"}

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

@@ -16,7 +16,7 @@ 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-loader.js';
+import '../shared/lit-loading-bar.js';
 import '../components/lit-section-tab.js';
 // pdf.js
 import * as pdfjsLib from 'pdfjs-dist';
@@ -35,6 +35,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.pageCount = 1;
         this.isChecked = {};
         this.preview = true;
+        this.documentData = null;
         this.canvas = null;
         this.ctx = null;
         this.outerContainer = null;
@@ -44,7 +45,6 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.prevScrollLeft = 0;
         this.prevScrollTop = 0;
         this.abortController = new AbortController();
-        this.documentData = null;
         this.handleReadFile = (buffer) => new Promise((resolve, reject) => {
             const reader = new FileReader();
             reader.onload = () => resolve(reader);
@@ -56,7 +56,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     async connectedCallback() {
         super.connectedCallback();
         this.type = this.type || 'compact';
-        this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? null);
+        this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
         if (!this.hideTabWhen && this.documents) {
             this.handleDocumentClick(this.selectedId);
         }
@@ -66,6 +66,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.abortController.abort();
         if (this.documentData && this.documentData.cancel) {
             this.documentData.cancel();
+            this.documentData = null;
         }
     }
     async firstUpdated() {
@@ -77,7 +78,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     updated(_changedProperties) {
         super.updated(_changedProperties);
         if (_changedProperties.has('documents')) {
-            this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? null);
+            this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
             if (!this.hideTabWhen && typeof this.documents !== 'undefined') {
                 this.handleDocumentClick(this.selectedId);
             }
@@ -85,6 +86,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         if (_changedProperties.has('selectedId')) {
             if (this.documentData && this.documentData.cancel) {
                 this.documentData.cancel();
+                this.documentData = null;
             }
         }
     }
@@ -202,7 +204,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         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 blob = new Blob([documentData.data], { type: selectedDoc?.file_type });
             const url = URL.createObjectURL(blob);
             const link = document.createElement('a');
             link.href = url;
@@ -247,248 +249,245 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
     render() {
         if (this.hideTabWhen)
             return null;
-        return html `
+        return html `
             ${this.type === 'compact'
-            ? html ` ${this.documents?.map((doc, index) => html `
-                          <div
+            ? 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>
-
+                : 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-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 `
+                                        <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}"
+            : html `
+                      <lit-select
+                          .value="${this.selectedId}"
                           .options="${this.documents?.map((doc) => ({
                 value: doc.id,
                 label: doc.name,
-            }))}"
+            }))}"
                           .onChange="${(selectedValue) => {
                 this.handleDocumentClick(selectedValue);
-            }}"
-                          .disableClearButton="${true}"
-                      ></lit-select>
-                  `}
-
-            <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">
+            }}"
+                          .disableClearButton="${true}"
+                      ></lit-select>
+                  `}
+            ${this.isDocumentLoading ? html ` <lit-loading-bar></lit-loading-bar> ` : null}
+            <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>
+            ? 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}
-                >
-                    ${this.isDocumentLoading
-            ? html `<lit-section-tab .sx="${{ height: '40vh' }}">
-                              <lit-loader></lit-loader>
-                          </lit-section-tab> `
-            : html ` <canvas
-                              style=${styleMap({
-                cursor: (this.scale ?? 1) > 1 ? 'grab' : 'default',
-                transform: `scale(${this.scale})`,
-            })}
-                              @mousedown=${this.handleMouseDown}
-                          >
-                          </canvas>`}
+            : 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>
+            ? 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}
+                </div>
+            </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;
-            }
-
-            .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 {
+                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([
@@ -536,6 +535,9 @@ __decorate([
 __decorate([
     state()
 ], LitAttachmentsTab.prototype, "preview", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "documentData", void 0);
 LitAttachmentsTab = __decorate([
     customElement('lit-attachments-tab')
 ], LitAttachmentsTab);