overview-components 1.1.161 → 1.1.165

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

@@ -0,0 +1,2044 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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';
+import { formatDate } from '../utils/date.js';
+// components
+import './lit-badge.js';
+import '../shared/lit-icon.js';
+import '../shared/lit-icon-button.js';
+import '../shared/lit-select.js';
+import '../shared/lit-overflow-tooltip.js';
+import '../shared/lit-document-thumbnail.js';
+import '../shared/lit-filter-input.js';
+import '../shared/lit-menu.js';
+import '../shared/lit-menu-item.js';
+import '../shared/lit-checkbox.js';
+import '../shared/lit-toggle.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';
+// Set worker source for PDF.js 5.x - compatible with webpack bundlers
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString();
+export class LitAttachmentsTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hideTabWhen = false;
+        this.documents = [];
+        this.type = 'compact';
+        this.scale = 1;
+        this.isDocumentLoading = false;
+        this.enableSettings = false;
+        this.enableThumbnails = true;
+        this.thumbnailSize = 40;
+        this.enableAdditionalInformation = true;
+        this.enableThumbnailDetail = true;
+        this.thumbnailPreviewMaxWidth = 300;
+        this.thumbnailPreviewMaxHeight = 300;
+        this.enableSearchInDocuments = true;
+        this.enableComparison = true;
+        this.userLang = 'cs';
+        this.dateFormat = null;
+        this.onSettingsChanged = () => { };
+        this.selectedId = '';
+        this.pageNumber = 1;
+        this.pageCount = 1;
+        this.preview = true;
+        this.documentData = null;
+        this.isOpenModal = false;
+        this.filterText = '';
+        this.focusedIndex = 0;
+        this.isWideLayout = false;
+        // Comparison modal state
+        this.comparisonModalOpen = false;
+        this.comparisonDocumentLeft = '';
+        this.comparisonDocumentRight = '';
+        this.pageNumberLeft = 1;
+        this.pageNumberRight = 1;
+        this.pageCountLeft = 1;
+        this.pageCountRight = 1;
+        this.isDocumentLoadingLeft = false;
+        this.isDocumentLoadingRight = false;
+        // Context menu with mobile support
+        this.contextMenuOpen = false;
+        this.contextMenuPosition = null;
+        this.contextMenuDocumentId = null;
+        // Comparison settings
+        this.syncZoom = true;
+        this.handleSyncZoomChange = (e) => {
+            this.syncZoom = e.target.checked;
+        };
+        this.canvas = null;
+        this.ctx = null;
+        this.outerContainer = null;
+        // Track active PDF render tasks to avoid "same canvas during multiple render()" error
+        this.activeRenderTask = null;
+        this.activeRenderTaskLeft = null;
+        this.activeRenderTaskRight = null;
+        this.isDragging = false;
+        this.clickX = 0;
+        this.clickY = 0;
+        this.prevScrollLeft = 0;
+        this.prevScrollTop = 0;
+        this.abortController = new AbortController();
+        this.resizeObserver = null;
+        this.longPressTimer = null;
+        // Track blob URLs for cleanup
+        this.blobUrls = new Set();
+        // Gesture state for pinch zoom
+        this.touchStartDistance = 0;
+        this.touchStartScale = 1;
+        this.isGesturing = false;
+        // Double-tap detection
+        this.lastTapTime = 0;
+        this.doubleTapThreshold = 300; // ms
+        this.handleReadFile = (buffer) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader);
+            reader.onerror = reject;
+            if (buffer !== null)
+                reader.readAsArrayBuffer(buffer);
+        });
+        // Pinch zoom handlers for main viewer
+        this.handleTouchStartCanvas = (e) => {
+            if (e.touches.length === 2) {
+                // Prevent default to stop page zoom
+                e.preventDefault();
+                this.isGesturing = true;
+                this.touchStartScale = this.localScale ?? 1;
+                // Calculate initial distance between two touches
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                this.touchStartDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+            }
+            else if (e.touches.length === 1) {
+                // Double-tap detection
+                const currentTime = Date.now();
+                const tapGap = currentTime - this.lastTapTime;
+                if (tapGap < this.doubleTapThreshold && tapGap > 0) {
+                    // Double-tap detected - reset zoom
+                    e.preventDefault();
+                    this.localScale = 1;
+                    this.renderPage();
+                }
+                this.lastTapTime = currentTime;
+            }
+        };
+        this.handleTouchMoveCanvas = (e) => {
+            if (e.touches.length === 2 && this.isGesturing) {
+                e.preventDefault();
+                // Calculate current distance between touches
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+                // Calculate scale based on distance change
+                const scale = (currentDistance / this.touchStartDistance) * this.touchStartScale;
+                // Apply constraints (min 0.5x, max 5x)
+                this.localScale = Math.max(0.5, Math.min(5, scale));
+                this.renderPage();
+            }
+        };
+        this.handleTouchEndCanvas = (e) => {
+            if (e.touches.length < 2) {
+                this.isGesturing = false;
+            }
+        };
+        // Pinch zoom handlers for comparison panels
+        this.handleTouchStartComparison = (e, side) => {
+            if (e.touches.length === 2) {
+                e.preventDefault();
+                this.isGesturing = true;
+                if (this.syncZoom) {
+                    // When sync is enabled, use left scale as reference for both
+                    this.touchStartScale = this.localScaleLeft ?? 1;
+                }
+                else {
+                    // Independent zoom per side
+                    this.touchStartScale =
+                        (side === 'left' ? this.localScaleLeft : this.localScaleRight) ?? 1;
+                }
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                this.touchStartDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+            }
+            else if (e.touches.length === 1) {
+                // Double-tap to reset
+                const currentTime = Date.now();
+                const tapGap = currentTime - this.lastTapTime;
+                if (tapGap < this.doubleTapThreshold && tapGap > 0) {
+                    e.preventDefault();
+                    if (this.syncZoom) {
+                        // Reset both panels
+                        this.localScaleLeft = 1;
+                        this.localScaleRight = 1;
+                        this.renderComparisonPage('left');
+                        this.renderComparisonPage('right');
+                    }
+                    else {
+                        // Reset only this side
+                        if (side === 'left') {
+                            this.localScaleLeft = 1;
+                            this.renderComparisonPage('left');
+                        }
+                        else {
+                            this.localScaleRight = 1;
+                            this.renderComparisonPage('right');
+                        }
+                    }
+                }
+                this.lastTapTime = currentTime;
+            }
+        };
+        this.handleTouchMoveComparison = (e, side) => {
+            if (e.touches.length === 2 && this.isGesturing) {
+                e.preventDefault();
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+                const scale = (currentDistance / this.touchStartDistance) * this.touchStartScale;
+                const constrainedScale = Math.max(0.5, Math.min(5, scale));
+                if (this.syncZoom) {
+                    // Zoom both panels together
+                    this.localScaleLeft = constrainedScale;
+                    this.localScaleRight = constrainedScale;
+                    this.renderComparisonPage('left');
+                    this.renderComparisonPage('right');
+                }
+                else {
+                    // Zoom only active panel
+                    if (side === 'left') {
+                        this.localScaleLeft = constrainedScale;
+                        this.renderComparisonPage('left');
+                    }
+                    else {
+                        this.localScaleRight = constrainedScale;
+                        this.renderComparisonPage('right');
+                    }
+                }
+            }
+        };
+        this.handleTouchEndComparison = (e) => {
+            if (e.touches.length < 2) {
+                this.isGesturing = false;
+            }
+        };
+        // Mouse wheel zoom handlers
+        this.handleWheelZoom = (e) => {
+            // Only zoom if Ctrl/Cmd key is pressed (standard UX pattern)
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out or in
+                const currentScale = this.localScale ?? 1;
+                this.localScale = Math.max(0.5, Math.min(5, currentScale * delta));
+                this.renderPage();
+            }
+        };
+        this.handleWheelZoomComparison = (e, side) => {
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? 0.9 : 1.1;
+                if (this.syncZoom) {
+                    const currentScale = this.localScaleLeft ?? 1;
+                    const newScale = Math.max(0.5, Math.min(5, currentScale * delta));
+                    this.localScaleLeft = newScale;
+                    this.localScaleRight = newScale;
+                    this.renderComparisonPage('left');
+                    this.renderComparisonPage('right');
+                }
+                else {
+                    const currentScale = (side === 'left' ? this.localScaleLeft : this.localScaleRight) ?? 1;
+                    const newScale = Math.max(0.5, Math.min(5, currentScale * delta));
+                    if (side === 'left') {
+                        this.localScaleLeft = newScale;
+                        this.renderComparisonPage('left');
+                    }
+                    else {
+                        this.localScaleRight = newScale;
+                        this.renderComparisonPage('right');
+                    }
+                }
+            }
+        };
+        this.handleKeyDown = (e) => {
+            // ESC key to close comparison modal
+            if (e.key === 'Escape' && this.comparisonModalOpen) {
+                e.preventDefault();
+                this.closeComparisonModal();
+                return;
+            }
+            // ESC key to close context menu
+            if (e.key === 'Escape' && this.contextMenuOpen) {
+                e.preventDefault();
+                this.closeContextMenu();
+                return;
+            }
+            // Only handle keyboard navigation in compact mode and when modal is not open
+            if (this.type !== 'compact' || this.comparisonModalOpen)
+                return;
+            const filteredDocs = this.getFilteredDocuments();
+            if (!filteredDocs.length)
+                return;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.focusedIndex = Math.min(this.focusedIndex + 1, filteredDocs.length - 1);
+                    this.scrollToFocusedItem();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                    this.scrollToFocusedItem();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    const focusedDoc = filteredDocs[this.focusedIndex];
+                    if (focusedDoc?.id) {
+                        this.handleDocumentClick(focusedDoc.id);
+                    }
+                    break;
+            }
+        };
+        // Context menu handlers
+        this.handleContextMenu = (e, docId) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Don't show context menu if comparison is disabled
+            if (!this.enableComparison)
+                return;
+            // Don't show context menu if it would be empty (same document selected)
+            // Allow default browser context menu by not preventing default
+            if (docId === this.selectedId) {
+                return;
+            }
+            // Only prevent default when we're actually showing our custom menu
+            this.contextMenuDocumentId = docId;
+            this.contextMenuPosition = { x: e.clientX, y: e.clientY };
+            this.contextMenuOpen = true;
+            // Add listeners to close context menu on scroll or click outside
+            this.addContextMenuListeners();
+        };
+        this.closeContextMenu = () => {
+            this.contextMenuOpen = false;
+            this.contextMenuPosition = null;
+            this.contextMenuDocumentId = null;
+            // Remove listeners
+            this.removeContextMenuListeners();
+        };
+        this.handleContextMenuScroll = () => {
+            if (this.contextMenuOpen) {
+                this.closeContextMenu();
+            }
+        };
+        this.handleContextMenuClickOutside = (e) => {
+            if (this.contextMenuOpen) {
+                const contextMenu = this.shadowRoot?.querySelector('.context-menu');
+                if (contextMenu && !contextMenu.contains(e.target)) {
+                    this.closeContextMenu();
+                }
+            }
+        };
+        this.addContextMenuListeners = () => {
+            // Listen to scroll events on the document list section
+            const scrollContainer = this.shadowRoot?.querySelector('.documents-list-section');
+            if (scrollContainer) {
+                scrollContainer.addEventListener('scroll', this.handleContextMenuScroll);
+            }
+            // Listen to window scroll
+            window.addEventListener('scroll', this.handleContextMenuScroll, true);
+            // Listen to clicks outside
+            setTimeout(() => {
+                document.addEventListener('click', this.handleContextMenuClickOutside);
+            }, 0);
+        };
+        this.removeContextMenuListeners = () => {
+            const scrollContainer = this.shadowRoot?.querySelector('.documents-list-section');
+            if (scrollContainer) {
+                scrollContainer.removeEventListener('scroll', this.handleContextMenuScroll);
+            }
+            window.removeEventListener('scroll', this.handleContextMenuScroll, true);
+            document.removeEventListener('click', this.handleContextMenuClickOutside);
+        };
+        // Mobile touch handlers for long press
+        this.handleTouchStart = (e, docId) => {
+            if (!this.enableComparison)
+                return;
+            // Don't show context menu if it would be empty (same document selected)
+            if (docId === this.selectedId) {
+                return;
+            }
+            this.longPressTimer = window.setTimeout(() => {
+                const touch = e.touches[0];
+                this.handleContextMenu(new MouseEvent('contextmenu', {
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                }), docId);
+            }, 500); // 500ms for long press
+        };
+        this.handleTouchEnd = () => {
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+        };
+        this.cancelLongPress = () => {
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+        };
+        // Comparison modal methods
+        this.openComparisonModal = (leftId, rightId) => {
+            // Close context menu first
+            this.closeContextMenu();
+            this.comparisonDocumentLeft = leftId;
+            this.comparisonDocumentRight = rightId;
+            this.comparisonModalOpen = true;
+            this.isDocumentLoadingLeft = false;
+            this.isDocumentLoadingRight = false;
+            // Prevent body scroll
+            document.body.style.overflow = 'hidden';
+            // Load both documents
+            this.loadComparisonDocuments();
+        };
+        this.closeComparisonModal = () => {
+            this.comparisonModalOpen = false;
+            this.comparisonDocumentLeft = '';
+            this.comparisonDocumentRight = '';
+            this.selectedDocumentLeftCanvas = null;
+            this.selectedDocumentRightCanvas = null;
+            this.isDocumentLoadingLeft = false;
+            this.isDocumentLoadingRight = false;
+            // Restore body scroll
+            document.body.style.overflow = '';
+        };
+        this.handleBackdropClick = (e) => {
+            // Only close if clicking the backdrop itself, not its children
+            if (e.target === e.currentTarget) {
+                this.closeComparisonModal();
+            }
+        };
+        this.swapComparisonSides = () => {
+            const temp = this.comparisonDocumentLeft;
+            this.comparisonDocumentLeft = this.comparisonDocumentRight;
+            this.comparisonDocumentRight = temp;
+            const tempDoc = this.selectedDocumentLeftCanvas;
+            this.selectedDocumentLeftCanvas = this.selectedDocumentRightCanvas;
+            this.selectedDocumentRightCanvas = tempDoc;
+            const tempPage = this.pageNumberLeft;
+            this.pageNumberLeft = this.pageNumberRight;
+            this.pageNumberRight = tempPage;
+            const tempCount = this.pageCountLeft;
+            this.pageCountLeft = this.pageCountRight;
+            this.pageCountRight = tempCount;
+            const tempScale = this.localScaleLeft;
+            this.localScaleLeft = this.localScaleRight;
+            this.localScaleRight = tempScale;
+            // Re-render both canvases
+            this.renderComparisonPage('left');
+            this.renderComparisonPage('right');
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.abortController.abort();
+        if (this.documentData && this.documentData.cancel) {
+            this.documentData.cancel();
+            this.documentData = null;
+        }
+        // Cancel any in-progress PDF render tasks
+        if (this.activeRenderTask) {
+            this.activeRenderTask.cancel();
+            this.activeRenderTask = null;
+        }
+        if (this.activeRenderTaskLeft) {
+            this.activeRenderTaskLeft.cancel();
+            this.activeRenderTaskLeft = null;
+        }
+        if (this.activeRenderTaskRight) {
+            this.activeRenderTaskRight.cancel();
+            this.activeRenderTaskRight = null;
+        }
+        this.removeEventListener('keydown', this.handleKeyDown);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        // Clean up blob URLs
+        this.revokeBlobUrls();
+        // Remove context menu listeners
+        this.removeContextMenuListeners();
+    }
+    /**
+     * Revoke all tracked blob URLs to prevent memory leaks
+     */
+    revokeBlobUrls() {
+        this.blobUrls.forEach((url) => URL.revokeObjectURL(url));
+        this.blobUrls.clear();
+    }
+    /**
+     * Create and track a blob URL for cleanup
+     */
+    createTrackedBlobUrl(blob) {
+        const url = URL.createObjectURL(blob);
+        this.blobUrls.add(url);
+        return url;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.localScale = this.scale;
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    async firstUpdated() {
+        this.canvas = this.shadowRoot?.querySelector('canvas') ?? null;
+        this.ctx = this.canvas?.getContext('2d');
+        this.outerContainer = this.shadowRoot?.querySelector('.document-container') || null;
+        // Setup ResizeObserver for container width tracking
+        const container = this.shadowRoot?.querySelector('.attachments-container');
+        if (container) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    this.isWideLayout = entry.contentRect.width >= 1000;
+                }
+            });
+            this.resizeObserver.observe(container);
+        }
+        await this.renderPage();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('documents')) {
+            // Clean up blob URLs when documents change
+            this.revokeBlobUrls();
+            const newSelectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
+            if (isEmpty(this.documents)) {
+                // Reset state when no documents
+                this.selectedDocument = null;
+                this.preview = true;
+                this.pageNumber = 1;
+                this.pageCount = 1;
+                this.selectedId = '';
+                if (this.documentData && this.documentData.cancel) {
+                    this.documentData.cancel();
+                    this.documentData = null;
+                }
+            }
+            else if (!this.hideTabWhen) {
+                // Force reset and reload when documents change
+                this.selectedDocument = null;
+                this.preview = true;
+                if (this.documentData && this.documentData.cancel) {
+                    this.documentData.cancel();
+                    this.documentData = null;
+                }
+                this.selectedId = newSelectedId;
+                this.focusedIndex = 0;
+                this.handleDocumentClick(this.selectedId);
+            }
+        }
+        if (_changedProperties.has('filterText')) {
+            // Reset focused index when filter changes
+            this.focusedIndex = 0;
+        }
+        if (_changedProperties.has('selectedId')) {
+            if (this.documentData && this.documentData.cancel) {
+                this.documentData.cancel();
+                this.documentData = null;
+            }
+        }
+    }
+    /**
+     * Shared method to fetch document data from either onClick handler or URL
+     */
+    async fetchDocumentData(docId) {
+        if (this.onClick) {
+            const documentData = await this.onClick(docId);
+            const reader = await this.handleReadFile(documentData);
+            return reader.result;
+        }
+        else {
+            const document = this.documents?.find((doc) => doc.id === docId);
+            if (!document?.dmsf_src) {
+                throw new Error('Document not found or missing source URL');
+            }
+            return await fetch(document.dmsf_src).then((res) => res.arrayBuffer());
+        }
+    }
+    async loadDocumentData(documentData) {
+        try {
+            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') {
+                // PDF.js 3.x - simpler API that works with webpack bundlers
+                const loadingTask = pdfjsLib.getDocument(documentData);
+                this.selectedDocument = await loadingTask.promise;
+                if (this.selectedDocument) {
+                    this.pageCount = this.selectedDocument.numPages;
+                }
+                this.preview = true;
+            }
+            else if (selectedDoc.file_type?.startsWith('image/')) {
+                const img = new Image();
+                img.onload = () => {
+                    this.selectedDocument = img;
+                    this.pageCount = 1;
+                    this.preview = true;
+                    this.renderPage();
+                };
+                const blob = new Blob([documentData], { type: selectedDoc.file_type });
+                img.src = this.createTrackedBlobUrl(blob);
+                return;
+            }
+            else {
+                this.selectedDocument = documentData;
+                this.preview = false;
+            }
+            this.pageNumber = 1;
+            await this.renderPage();
+        }
+        catch (error) {
+            console.error('Error loading document data:', error);
+        }
+    }
+    async handleDocumentClick(id) {
+        this.selectedId = id;
+        this.localScale = this.scale;
+        // Update focused index to match the clicked document
+        const filteredDocs = this.getFilteredDocuments();
+        const clickedIndex = filteredDocs.findIndex((doc) => doc.id === id);
+        if (clickedIndex !== -1) {
+            this.focusedIndex = clickedIndex;
+        }
+        try {
+            this.isDocumentLoading = true;
+            const documentData = await this.fetchDocumentData(id);
+            this.isDocumentLoading = false;
+            this.loadDocumentData(documentData);
+        }
+        catch (error) {
+            console.error('Error fetching document:', error);
+            this.isDocumentLoading = false;
+        }
+    }
+    /**
+     * Shared rendering method for both main viewer and comparison panels
+     */
+    async renderDocumentToCanvas(canvas, ctx, container, document, pageNumber, userScale, abortSignal, onRenderTask) {
+        const containerWidth = container.offsetWidth;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        try {
+            if ('getPage' in document) {
+                // PDF rendering
+                const page = await document.getPage(pageNumber);
+                const viewportBase = page.getViewport({ scale: 1 });
+                const fitScale = containerWidth / viewportBase.width;
+                const logicalScale = fitScale * userScale;
+                const renderScale = fitScale * Math.max(userScale, 1);
+                const renderViewport = page.getViewport({ scale: renderScale * dpr });
+                canvas.width = renderViewport.width;
+                canvas.height = renderViewport.height;
+                canvas.style.width = `${viewportBase.width * logicalScale}px`;
+                canvas.style.height = 'auto';
+                const renderOptions = {
+                    canvasContext: ctx,
+                    viewport: renderViewport,
+                };
+                if (abortSignal) {
+                    renderOptions.signal = abortSignal;
+                }
+                const renderTask = page.render(renderOptions);
+                onRenderTask?.(renderTask);
+                await renderTask.promise;
+                onRenderTask?.(null);
+            }
+            else if (document instanceof HTMLImageElement) {
+                // Image rendering
+                const img = document;
+                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;
+                canvas.width = renderWidth;
+                canvas.height = renderHeight;
+                canvas.style.width = `${img.naturalWidth * logicalScale}px`;
+                canvas.style.height = 'auto';
+                ctx.drawImage(img, 0, 0, renderWidth, renderHeight);
+            }
+        }
+        catch (error) {
+            onRenderTask?.(null);
+            // Ignore cancellation – it's expected when a new render supersedes this one
+            if (error instanceof Error &&
+                error.name !== 'AbortError' &&
+                error.name !== 'RenderingCancelledException') {
+                console.error('Error rendering document:', error);
+            }
+            throw error;
+        }
+    }
+    async renderPage() {
+        if (!this.selectedDocument)
+            return;
+        // Cancel any in-progress render on this canvas before starting a new one
+        if (this.activeRenderTask) {
+            this.activeRenderTask.cancel();
+            this.activeRenderTask = null;
+        }
+        // Ensure canvas elements are initialized
+        if (!this.canvas || !this.ctx || !this.outerContainer) {
+            this.canvas = this.shadowRoot?.querySelector('canvas') ?? null;
+            this.ctx = this.canvas?.getContext('2d');
+            this.outerContainer = this.shadowRoot?.querySelector('.document-container') || null;
+        }
+        if (!this.canvas || !this.ctx || !this.outerContainer)
+            return;
+        this.canvas.style.display = this.preview ? 'block' : 'none';
+        if (!this.preview)
+            return;
+        try {
+            await this.renderDocumentToCanvas(this.canvas, this.ctx, this.outerContainer, this.selectedDocument, this.pageNumber ?? 1, this.localScale ?? 1, this.abortController.signal, (task) => {
+                this.activeRenderTask = task;
+            });
+        }
+        catch (error) {
+            // Error already logged in renderDocumentToCanvas (cancellations are silently ignored)
+        }
+    }
+    getSelectedDocumentName() {
+        if (isEmpty(this.documents))
+            return '';
+        const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+        return selectedDoc?.name || msg('Neznámý dokument');
+    }
+    handlePageChange(next) {
+        const newPage = next ? (this.pageNumber ?? 1) + 1 : (this.pageNumber ?? 1) - 1;
+        if (newPage >= 1 && newPage <= (this.pageCount ?? 1)) {
+            this.pageNumber = newPage;
+            this.renderPage();
+        }
+    }
+    async handleDownload() {
+        if (!this.selectedDocument) {
+            console.error('No document selected for download.');
+            return;
+        }
+        const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+        if (!selectedDoc) {
+            console.error('Selected document not found.');
+            return;
+        }
+        try {
+            let blob;
+            const filename = selectedDoc.name || 'document';
+            if (this.onClick) {
+                // Fetch document via onClick handler
+                const documentData = await this.onClick(this.selectedId);
+                blob = new Blob([documentData.data || documentData], {
+                    type: selectedDoc.file_type || 'application/octet-stream',
+                });
+            }
+            else if (selectedDoc.dmsf_src) {
+                // Fetch document from URL
+                const response = await fetch(selectedDoc.dmsf_src);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch document: ${response.statusText}`);
+                }
+                blob = await response.blob();
+            }
+            else {
+                console.error('No download method available for document.');
+                return;
+            }
+            // Use FileSaver to download
+            saveAs(blob, filename);
+        }
+        catch (error) {
+            console.error('Error downloading document:', error);
+        }
+    }
+    handleZoom(increase) {
+        const currentScale = this.localScale ?? 1;
+        this.localScale = increase ? currentScale * 1.1 : currentScale / 1.1;
+        this.renderPage();
+    }
+    handleMouseDown(e) {
+        if ((this.localScale ?? 1) <= 1)
+            return;
+        this.isDragging = true;
+        this.clickX = e.clientX;
+        this.clickY = e.clientY;
+        if (this.outerContainer) {
+            this.prevScrollLeft = this.outerContainer.scrollLeft;
+            this.prevScrollTop = this.outerContainer.scrollTop;
+        }
+    }
+    handleMouseMove(e) {
+        if (!this.isDragging)
+            return;
+        const deltaX = e.clientX - this.clickX;
+        const deltaY = e.clientY - this.clickY;
+        if (this.outerContainer) {
+            this.outerContainer.scrollLeft = this.prevScrollLeft - deltaX;
+            this.outerContainer.scrollTop = this.prevScrollTop - deltaY;
+        }
+    }
+    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;
+        }
+        if (value?.enableThumbnails !== undefined) {
+            this.enableThumbnails = value.enableThumbnails;
+        }
+        if (value?.thumbnailSize !== undefined) {
+            this.thumbnailSize = value.thumbnailSize;
+        }
+        if (value?.enableAdditionalInformation !== undefined) {
+            this.enableAdditionalInformation = value.enableAdditionalInformation;
+        }
+        if (value?.enableThumbnailDetail !== undefined) {
+            this.enableThumbnailDetail = value.enableThumbnailDetail;
+        }
+        if (value?.enableSearchInDocuments !== undefined) {
+            this.enableSearchInDocuments = value.enableSearchInDocuments;
+        }
+        // Force re-render after property changes
+        this.requestUpdate();
+        await this.renderPage();
+        this.dispatchEvent(new CustomEvent('onSettingsChanged', {
+            bubbles: true,
+            composed: true,
+            detail: value,
+        }));
+        this.onSettingsChanged?.(value);
+    }
+    getThumbnailUrl(doc) {
+        return doc.thumbnail;
+    }
+    getFilteredDocuments() {
+        if (!this.documents)
+            return [];
+        if (!this.filterText.trim())
+            return this.documents;
+        const searchTerm = this.filterText.toLowerCase().trim();
+        return this.documents.filter((doc) => {
+            const nameMatch = doc.name?.toLowerCase().includes(searchTerm);
+            const metaMatch = Array.isArray(doc.meta) && doc.meta.some((meta) => meta.toLowerCase().includes(searchTerm));
+            const userMatch = doc.userName?.toLowerCase().includes(searchTerm);
+            return nameMatch || metaMatch || userMatch;
+        });
+    }
+    scrollToFocusedItem() {
+        requestAnimationFrame(() => {
+            const focusedElement = this.shadowRoot?.querySelector(`.document-label[data-index="${this.focusedIndex}"]`);
+            if (focusedElement) {
+                focusedElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+        });
+    }
+    async loadComparisonDocuments() {
+        // Load both documents in parallel
+        const promises = [];
+        if (this.comparisonDocumentLeft) {
+            promises.push(this.loadComparisonDocument(this.comparisonDocumentLeft, 'left'));
+        }
+        if (this.comparisonDocumentRight) {
+            promises.push(this.loadComparisonDocument(this.comparisonDocumentRight, 'right'));
+        }
+        // Wait for both documents to load
+        await Promise.all(promises);
+    }
+    async loadComparisonDocument(docId, side) {
+        try {
+            // Set loading state
+            if (side === 'left') {
+                this.isDocumentLoadingLeft = true;
+            }
+            else {
+                this.isDocumentLoadingRight = true;
+            }
+            const documentData = await this.fetchDocumentData(docId);
+            await this.loadComparisonDocumentData(documentData, docId, side);
+        }
+        catch (error) {
+            console.error(`Error loading comparison document ${docId}:`, error);
+        }
+        finally {
+            // Clear loading state
+            if (side === 'left') {
+                this.isDocumentLoadingLeft = false;
+            }
+            else {
+                this.isDocumentLoadingRight = false;
+            }
+        }
+    }
+    async loadComparisonDocumentData(documentData, docId, side) {
+        const doc = this.documents?.find((d) => d.id === docId);
+        if (!doc)
+            return;
+        try {
+            if (doc.file_type === 'application/pdf') {
+                const loadingTask = pdfjsLib.getDocument({ data: documentData });
+                const pdfDoc = await loadingTask.promise;
+                if (side === 'left') {
+                    this.selectedDocumentLeftCanvas = pdfDoc;
+                    this.pageCountLeft = pdfDoc.numPages;
+                    this.pageNumberLeft = 1;
+                    this.localScaleLeft = this.scale;
+                }
+                else {
+                    this.selectedDocumentRightCanvas = pdfDoc;
+                    this.pageCountRight = pdfDoc.numPages;
+                    this.pageNumberRight = 1;
+                    this.localScaleRight = this.scale;
+                }
+            }
+            else if (doc.file_type?.startsWith('image/')) {
+                const img = new Image();
+                const blob = new Blob([documentData], { type: doc.file_type });
+                img.src = this.createTrackedBlobUrl(blob);
+                await new Promise((resolve) => {
+                    img.onload = () => {
+                        if (side === 'left') {
+                            this.selectedDocumentLeftCanvas = img;
+                            this.pageCountLeft = 1;
+                            this.pageNumberLeft = 1;
+                            this.localScaleLeft = this.scale;
+                        }
+                        else {
+                            this.selectedDocumentRightCanvas = img;
+                            this.pageCountRight = 1;
+                            this.pageNumberRight = 1;
+                            this.localScaleRight = this.scale;
+                        }
+                        resolve(true);
+                    };
+                });
+            }
+            // Render the canvas after loading
+            await this.renderComparisonPage(side);
+        }
+        catch (error) {
+            console.error(`Error loading document data for ${side}:`, error);
+        }
+    }
+    async renderComparisonPage(side) {
+        // Cancel any in-progress render on this side's canvas before starting a new one
+        if (side === 'left') {
+            if (this.activeRenderTaskLeft) {
+                this.activeRenderTaskLeft.cancel();
+                this.activeRenderTaskLeft = null;
+            }
+        }
+        else {
+            if (this.activeRenderTaskRight) {
+                this.activeRenderTaskRight.cancel();
+                this.activeRenderTaskRight = null;
+            }
+        }
+        const canvas = this.shadowRoot?.querySelector(`#comparison-canvas-${side}`);
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const document = side === 'left' ? this.selectedDocumentLeftCanvas : this.selectedDocumentRightCanvas;
+        if (!document)
+            return;
+        const pageNumber = side === 'left' ? this.pageNumberLeft : this.pageNumberRight;
+        const userScale = (side === 'left' ? this.localScaleLeft : this.localScaleRight) ?? 1;
+        const container = this.shadowRoot?.querySelector(`#comparison-${side}-container`);
+        if (!container)
+            return;
+        try {
+            await this.renderDocumentToCanvas(canvas, ctx, container, document, pageNumber, userScale, undefined, (task) => {
+                if (side === 'left') {
+                    this.activeRenderTaskLeft = task;
+                }
+                else {
+                    this.activeRenderTaskRight = task;
+                }
+            });
+        }
+        catch (error) {
+            // Cancellations are silently ignored inside renderDocumentToCanvas
+            if (error instanceof Error &&
+                error.name !== 'AbortError' &&
+                error.name !== 'RenderingCancelledException') {
+                console.error(`Error rendering comparison page for ${side}:`, error);
+            }
+        }
+    }
+    handleComparisonPageChange(side, next) {
+        const pageNumber = side === 'left' ? this.pageNumberLeft : this.pageNumberRight;
+        const pageCount = side === 'left' ? this.pageCountLeft : this.pageCountRight;
+        const newPage = next ? pageNumber + 1 : pageNumber - 1;
+        if (newPage >= 1 && newPage <= pageCount) {
+            if (side === 'left') {
+                this.pageNumberLeft = newPage;
+            }
+            else {
+                this.pageNumberRight = newPage;
+            }
+            this.renderComparisonPage(side);
+        }
+    }
+    handleComparisonZoom(side, increase) {
+        const delta = increase ? 1.1 : 1 / 1.1;
+        if (this.syncZoom) {
+            // Apply to both sides
+            this.localScaleLeft = (this.localScaleLeft ?? 1) * delta;
+            this.localScaleRight = (this.localScaleRight ?? 1) * delta;
+            this.renderComparisonPage('left');
+            this.renderComparisonPage('right');
+        }
+        else {
+            // Apply only to active side
+            if (side === 'left') {
+                this.localScaleLeft = (this.localScaleLeft ?? 1) * delta;
+                this.renderComparisonPage('left');
+            }
+            else {
+                this.localScaleRight = (this.localScaleRight ?? 1) * delta;
+                this.renderComparisonPage('right');
+            }
+        }
+    }
+    render() {
+        if (this.hideTabWhen)
+            return null;
+        return html `
+            <div
+                class="attachments-container ${this.type === 'compact' && this.isWideLayout
+            ? 'compact-layout'
+            : ''}"
+                tabindex="0"
+            >
+                <div class="documents-list-section">
+                    ${this.type === 'compact'
+            ? html ` ${this.enableSearchInDocuments
+                ? html `
+                                    <lit-filter-input
+                                        .value="${this.filterText}"
+                                        .placeholder="${msg('Hledat dokumenty...')}"
+                                        .onChange="${(value) => {
+                    this.filterText = value;
+                }}"
+                                    ></lit-filter-input>
+                                `
+                : null}
+                          ${this.getFilteredDocuments().length === 0 &&
+                this.filterText &&
+                this.enableSearchInDocuments
+                ? html `
+                                    <div class="no-results-message">
+                                        <lit-icon icon="search" size="1.5rem"></lit-icon>
+                                        <span>${msg('Žádné dokumenty nenalezeny')}</span>
+                                    </div>
+                                `
+                : this.getFilteredDocuments().map((doc, index) => html `
+                                        <div
+                                            class="document-label ${this.selectedId == doc.id
+                    ? 'selected'
+                    : ''} ${this.focusedIndex === index
+                    ? 'focused'
+                    : ''}"
+                                            data-index="${index}"
+                                            @click=${() => doc.id && this.handleDocumentClick(doc.id)}
+                                            @contextmenu="${(e) => this.handleContextMenu(e, doc.id)}"
+                                            @touchstart="${(e) => this.handleTouchStart(e, doc.id)}"
+                                            @touchend="${this.handleTouchEnd}"
+                                            @touchmove="${this.cancelLongPress}"
+                                        >
+                                            <div class="document-item" id="${doc.id}">
+                                                ${this.enableThumbnails
+                    ? html `
+                                                          <lit-document-thumbnail
+                                                              .thumbnail="${this.getThumbnailUrl(doc)}"
+                                                              .fileType="${doc.file_type}"
+                                                              .size="${this.thumbnailSize}"
+                                                              .enableThumbnailDetail="${this
+                        .enableThumbnailDetail}"
+                                                              .previewMaxWidth="${this
+                        .thumbnailPreviewMaxWidth}"
+                                                              .previewMaxHeight="${this
+                        .thumbnailPreviewMaxHeight}"
+                                                          ></lit-document-thumbnail>
+                                                      `
+                    : null}
+                                                <div class="document-item-content">
+                                                    <div class="document-name">
+                                                        <span class="document-name-text">
+                                                            <lit-overflow-tooltip
+                                                                label="${doc.name ||
+                    `${msg('Dokument')} ${index + 1}`}"
+                                                            >
+                                                                ${doc.name ||
+                    `${msg('Dokument')} ${index + 1}`}
+                                                            </lit-overflow-tooltip>
+                                                        </span>
+                                                        ${doc.meta && doc.meta.length > 0
+                    ? doc.meta.map((metaItem) => html `<lit-badge
+                                                                          content="neutral"
+                                                                          .text=${metaItem}
+                                                                      ></lit-badge>`)
+                    : null}
+                                                    </div>
+                                                    ${this.enableAdditionalInformation &&
+                    (doc.dateOfUpload || doc.userName)
+                    ? html `
+                                                              <div class="document-info">
+                                                                  ${doc.dateOfUpload
+                        ? html `${formatDate(doc.dateOfUpload, this.userLang || 'cs', true, this.dateFormat)}`
+                        : null}
+                                                                  ${doc.dateOfUpload && doc.userName
+                        ? html ` • `
+                        : null}
+                                                                  ${doc.userName
+                        ? html `${doc.userName}`
+                        : null}
+                                                              </div>
+                                                          `
+                    : null}
+                                                </div>
+                                            </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,
+                meta: doc.meta,
+                fileType: doc.file_type,
+                thumbnail: this.getThumbnailUrl(doc),
+                dateOfUpload: doc.dateOfUpload,
+                userName: doc.userName,
+            }))}"
+                                  .renderOption="${(option, _isActive, _isSelected) => html `
+                                      <span
+                                          style="display: flex; align-items: center; gap: 0.5rem; width: 100%;"
+                                          @contextmenu="${(e) => this.handleContextMenu(e, option.value)}"
+                                          @touchstart="${(e) => this.handleTouchStart(e, option.value)}"
+                                          @touchend="${this.handleTouchEnd}"
+                                          @touchmove="${this.cancelLongPress}"
+                                      >
+                                          ${this.enableThumbnails
+                ? html `
+                                                    <lit-document-thumbnail
+                                                        .thumbnail="${option.thumbnail}"
+                                                        .fileType="${option.fileType}"
+                                                        .size="${this.thumbnailSize || 40}"
+                                                        .enableHoverPreview="${true}"
+                                                        .enableThumbnailDetail="${this
+                    .enableThumbnailDetail}"
+                                                        .previewMaxWidth="${this
+                    .thumbnailPreviewMaxWidth}"
+                                                        .previewMaxHeight="${this
+                    .thumbnailPreviewMaxHeight}"
+                                                    ></lit-document-thumbnail>
+                                                `
+                : null}
+                                          <span
+                                              style="flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0;"
+                                          >
+                                              <span
+                                                  style="display: flex; align-items: center; gap: 0.5rem; overflow: hidden;"
+                                              >
+                                                  <span
+                                                      style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+                                                  >
+                                                      ${option.label}
+                                                  </span>
+                                                  ${option.meta?.map((metaItem) => html `
+                                                          <lit-badge
+                                                              content="neutral"
+                                                              .text=${metaItem}
+                                                          ></lit-badge>
+                                                      `) ?? ''}
+                                              </span>
+                                              ${this.enableAdditionalInformation &&
+                (option.dateOfUpload || option.userName)
+                ? html `
+                                                        <span
+                                                            style="font-size: 0.6875rem; font-weight: 400; color: var(--text-secondary, #6b7280); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+                                                        >
+                                                            ${option.dateOfUpload
+                    ? formatDate(option.dateOfUpload, this.userLang || 'cs', true, this.dateFormat)
+                    : ''}
+                                                            ${option.dateOfUpload && option.userName
+                    ? ' • '
+                    : ''}
+                                                            ${option.userName || ''}
+                                                        </span>
+                                                    `
+                : null}
+                                          </span>
+                                      </span>
+                                  `}"
+                                  .onChange="${(selectedValue) => {
+                this.handleDocumentClick(selectedValue);
+            }}"
+                                  .disableClearButton="${true}"
+                              ></lit-select>
+                          `}
+                </div>
+
+                <div class="document">
+                    <span style="height: 0.1875rem; top: -12px; position: relative;">
+                        ${this.isDocumentLoading
+            ? html ` <lit-loading-bar></lit-loading-bar> `
+            : null}
+                    </span>
+                    <div class="document-box">
+                        <div
+                            class="document-selected"
+                            @contextmenu="${(e) => this.selectedId && this.handleContextMenu(e, this.selectedId)}"
+                            @touchstart="${(e) => this.selectedId && this.handleTouchStart(e, this.selectedId)}"
+                            @touchend="${this.handleTouchEnd}"
+                            @touchmove="${this.cancelLongPress}"
+                        >
+                            <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
+                                                    >${msg('stránka')} ${this.pageNumber} /
+                                                    ${this.pageCount}</span
+                                                >
+                                                <lit-icon
+                                                    style="cursor: pointer"
+                                                    icon="chevronRightFilled"
+                                                    size="1rem"
+                                                    @click=${() => this.handlePageChange(true)}
+                                                ></lit-icon>
+                                                <lit-icon-button
+                                                    color="secondary"
+                                                    icon="zoomout"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(false)}
+                                                ></lit-icon-button>
+                                                <lit-icon-button
+                                                    color="secondary"
+                                                    icon="zoomIn"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(true)}
+                                                ></lit-icon-button>
+                                            `
+                : null}
+
+                                      <lit-icon-button
+                                          color="secondary"
+                                          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}
+                        @wheel=${this.handleWheelZoom}
+                    >
+                        ${!isEmpty(this.documents)
+            ? html `
+                                  <canvas
+                                      style=${styleMap({
+                cursor: (this.localScale ?? 1) > 1 ? 'grab' : 'default',
+            })}
+                                      @mousedown=${this.handleMouseDown}
+                                      @touchstart=${this.handleTouchStartCanvas}
+                                      @touchmove=${this.handleTouchMoveCanvas}
+                                      @touchend=${this.handleTouchEndCanvas}
+                                  >
+                                  </canvas>
+                              `
+            : null}
+                        ${!this.preview && (this.documents || !isEmpty(this.documents))
+            ? 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}
+                        ${!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
+                              color="secondary"
+                              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}"
+                              .enableThumbnails="${this.enableThumbnails}"
+                              .thumbnailSize="${this.thumbnailSize}"
+                              .enableAdditionalInformation="${this.enableAdditionalInformation}"
+                              .enableThumbnailDetail="${this.enableThumbnailDetail}"
+                              .enableSearchInDocuments="${this.enableSearchInDocuments}"
+                              .userLang="${this.userLang}"
+                          ></attachments-tab-settings>
+                      </div>`
+            : null}
+            </div>
+
+            <!-- Context Menu -->
+            ${this.contextMenuOpen && this.contextMenuPosition && this.enableComparison
+            ? html `
+                      <div
+                          class="context-menu"
+                          style="left: ${this.contextMenuPosition.x}px; top: ${this
+                .contextMenuPosition.y}px;"
+                          @click="${(e) => e.stopPropagation()}"
+                      >
+                          <lit-menu>
+                              ${this.contextMenuDocumentId !== this.selectedId
+                ? html `
+                                        <lit-menu-item
+                                            icon="duplicate"
+                                            .onClick="${() => this.openComparisonModal(this.selectedId, this.contextMenuDocumentId || '')}"
+                                        >
+                                            ${msg('Porovnat s tímto')}
+                                        </lit-menu-item>
+                                    `
+                : null}
+                          </lit-menu>
+                      </div>
+                  `
+            : null}
+
+            <!-- Comparison Modal -->
+            ${this.comparisonModalOpen
+            ? html `
+                      <div class="comparison-modal" @click="${this.handleBackdropClick}">
+                          <div
+                              class="comparison-modal-content"
+                              @click="${(e) => e.stopPropagation()}"
+                          >
+                              <!-- Modal Header -->
+                              <div class="comparison-modal-header">
+                                  <div class="header-title">
+                                      <lit-icon
+                                          icon="duplicate"
+                                          size="1.25rem"
+                                          .isActive=${true}
+                                      ></lit-icon>
+                                      <span>${msg('Porovnání dokumentů')}</span>
+                                  </div>
+
+                                  <div class="header-controls">
+                                      <lit-toggle
+                                          .checked="${this.syncZoom}"
+                                          .onChange="${this.handleSyncZoomChange}"
+                                          .label="${msg('Synchronizovat přiblížení')}"
+                                          size="small"
+                                          .inline="${true}"
+                                      ></lit-toggle>
+
+                                      <lit-icon-button
+                                          icon="totakedelegate"
+                                          color="secondary"
+                                          variant="text"
+                                          size="small"
+                                          @click="${this.swapComparisonSides}"
+                                          title="${msg('Prohodit strany')}"
+                                      ></lit-icon-button>
+
+                                      <lit-icon-button
+                                          icon="close"
+                                          color="secondary"
+                                          variant="text"
+                                          size="small"
+                                          @click="${this.closeComparisonModal}"
+                                      ></lit-icon-button>
+                                  </div>
+                              </div>
+
+                              <!-- Comparison Grid -->
+                              <div class="comparison-grid">
+                                  ${this.renderComparisonPanel('left')}
+                                  ${this.renderComparisonPanel('right')}
+                              </div>
+                          </div>
+                      </div>
+                  `
+            : null}
+        `;
+    }
+    renderComparisonPanel(side) {
+        const docId = side === 'left' ? this.comparisonDocumentLeft : this.comparisonDocumentRight;
+        const doc = this.documents?.find((d) => d.id === docId);
+        const pageNumber = side === 'left' ? this.pageNumberLeft : this.pageNumberRight;
+        const pageCount = side === 'left' ? this.pageCountLeft : this.pageCountRight;
+        const hasPages = pageCount > 1;
+        const isLoading = side === 'left' ? this.isDocumentLoadingLeft : this.isDocumentLoadingRight;
+        return html `
+            <div class="comparison-panel">
+                <!-- Loading Bar -->
+                ${isLoading
+            ? html `
+                          <span style="height: 0.1875rem; position: relative; display: block;">
+                              <lit-loading-bar></lit-loading-bar>
+                          </span>
+                      `
+            : ''}
+
+                <!-- Panel Header -->
+                <div class="comparison-panel-header">
+                    <span class="comparison-panel-title"> ${doc?.name || msg('Dokument')} </span>
+                </div>
+
+                <!-- Panel Controls -->
+                <div class="comparison-panel-controls">
+                    ${hasPages
+            ? html `
+                              <lit-icon-button
+                                  icon="chevronLeftFilled"
+                                  color="secondary"
+                                  variant="text"
+                                  size="small"
+                                  @click="${() => this.handleComparisonPageChange(side, false)}"
+                              ></lit-icon-button>
+                              <span style="font-size: 0.875rem;">
+                                  ${msg('stránka')} ${pageNumber} / ${pageCount}
+                              </span>
+                              <lit-icon-button
+                                  icon="chevronRightFilled"
+                                  color="secondary"
+                                  variant="text"
+                                  size="small"
+                                  @click="${() => this.handleComparisonPageChange(side, true)}"
+                              ></lit-icon-button>
+                          `
+            : null}
+
+                    <lit-icon-button
+                        icon="zoomout"
+                        color="secondary"
+                        variant="text"
+                        size="small"
+                        @click="${() => this.handleComparisonZoom(side, false)}"
+                    ></lit-icon-button>
+
+                    <lit-icon-button
+                        icon="zoomIn"
+                        color="secondary"
+                        variant="text"
+                        size="small"
+                        @click="${() => this.handleComparisonZoom(side, true)}"
+                    ></lit-icon-button>
+
+                    <lit-icon-button
+                        icon="download"
+                        color="secondary"
+                        variant="text"
+                        size="small"
+                        @click="${() => this.handleDownloadComparison(side)}"
+                    ></lit-icon-button>
+                </div>
+
+                <!-- Document Container -->
+                <div
+                    class="comparison-document-container"
+                    id="comparison-${side}-container"
+                    @wheel="${(e) => this.handleWheelZoomComparison(e, side)}"
+                >
+                    <canvas
+                        id="comparison-canvas-${side}"
+                        @touchstart="${(e) => this.handleTouchStartComparison(e, side)}"
+                        @touchmove="${(e) => this.handleTouchMoveComparison(e, side)}"
+                        @touchend="${this.handleTouchEndComparison}"
+                    ></canvas>
+                </div>
+            </div>
+        `;
+    }
+    handleDownloadComparison(side) {
+        const docId = side === 'left' ? this.comparisonDocumentLeft : this.comparisonDocumentRight;
+        if (docId) {
+            // Temporarily set selectedId to trigger download for this document
+            const originalSelectedId = this.selectedId;
+            this.selectedId = docId;
+            this.handleDownload();
+            this.selectedId = originalSelectedId;
+        }
+    }
+}
+LitAttachmentsTab.styles = [
+    css `
+            .no-results-message {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                padding: 2rem 1rem;
+                color: var(--text-secondary, #6b7280);
+                font-size: 0.875rem;
+                text-align: center;
+            }
+
+            .document-label {
+                min-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.375rem 0.5rem;
+                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;
+                align-items: center;
+                gap: 0.75rem;
+                overflow: hidden;
+                flex: 1;
+            }
+
+            .document-item-content {
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                flex: 1;
+            }
+
+            .document-name {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                min-width: 0;
+            }
+
+            .document-name-text {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                flex-shrink: 1;
+                min-width: 0;
+                height: 20px;
+            }
+
+            .document-info {
+                font-size: 0.6875rem;
+                font-weight: 400;
+                color: var(--text-secondary, #6b7280);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .document-label:hover {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .selected {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .focused {
+                outline: 1px solid var(--color-primary-main, #7ab800);
+                outline-offset: -1px;
+            }
+
+            .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.5rem;
+                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+
+                flex: 1;
+                min-height: 0;
+                min-width: 0;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+            }
+
+            .document-box {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 0.75rem 0.75rem 0.75rem;
+                flex-shrink: 0;
+            }
+
+            .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;
+            }
+
+            canvas {
+                display: block;
+                margin: 0 auto;
+                transform-origin: 0 0;
+                touch-action: none; /* Prevent default touch behaviors */
+            }
+
+            .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;
+                outline: none;
+                container-type: inline-size;
+                container-name: attachments;
+            }
+
+            .compact-layout {
+                flex-direction: row;
+                gap: 0.5rem;
+            }
+
+            .compact-layout .documents-list-section {
+                flex-shrink: 0;
+                width: 25rem;
+                position: sticky;
+                top: 0;
+                max-height: 70vh;
+                overflow: auto;
+            }
+
+            .compact-layout .document {
+                flex: 1;
+            }
+
+            .documents-list-section {
+                max-height: 15.625rem;
+                overflow: auto;
+                flex-shrink: 0;
+            }
+
+            .footer {
+                flex-shrink: 0;
+                justify-content: end;
+                display: flex;
+                margin-top: 0.5rem;
+            }
+
+            /* Comparison Modal Styles */
+            .comparison-modal {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 99999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: rgba(0, 0, 0, 0.75);
+            }
+
+            .comparison-modal-content {
+                background: var(--background-paper, #ffffff);
+                border-radius: 0.5rem;
+                width: 95vw;
+                height: 95vh;
+                max-width: 1400px;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                box-shadow:
+                    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            }
+
+            .comparison-modal-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.5rem 0.75rem;
+                border-bottom: 1px solid var(--color-divider, #e5e7eb);
+                background: var(--background-paper, #ffffff);
+            }
+
+            .comparison-modal-header .header-title {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.875rem;
+                font-weight: 400;
+                color: var(--color-secondary-main, #111827);
+            }
+
+            .comparison-modal-header .header-controls {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+            }
+
+            .comparison-grid {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 0.5rem;
+                flex: 1;
+                overflow: hidden;
+                padding: 0rem 0.5rem 0.5rem 0.5rem;
+            }
+
+            .comparison-panel {
+                display: flex;
+                flex-direction: column;
+                background: var(--background-default, #eff3f4);
+                border-radius: 0.5rem;
+                overflow: hidden;
+            }
+
+            .comparison-panel-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.5rem 0.75rem;
+                background: var(--background-paper, #ffffff);
+                border-bottom: 1px solid var(--color-divider, #e5e7eb);
+            }
+
+            .comparison-panel-title {
+                font-size: 0.875rem;
+                font-weight: 500;
+                color: var(--color-secondary-main, #111827);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .comparison-panel-controls {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                padding: 0.5rem 0.75rem;
+                background: var(--background-paper, #ffffff);
+                border-bottom: 1px solid var(--color-divider, #e5e7eb);
+            }
+
+            .comparison-document-container {
+                flex: 1;
+                overflow: auto;
+                display: flex;
+            }
+
+            .comparison-document-container canvas {
+                display: block;
+                margin: auto;
+                max-width: max-content;
+                max-height: max-content;
+                touch-action: none; /* Prevent default touch behaviors */
+            }
+
+            /* Context Menu Styles */
+            .context-menu {
+                position: fixed;
+                z-index: 100000;
+                background: var(--background-paper, #ffffff);
+                border-radius: 0.5rem;
+                padding: 0.375rem;
+                box-shadow:
+                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                min-width: 200px;
+            }
+
+            @media (max-width: 800px) {
+                .comparison-grid {
+                    grid-template-columns: 1fr;
+                    grid-template-rows: 1fr 1fr;
+                }
+
+                .comparison-modal-content {
+                    width: 95vw;
+                    height: 95vh;
+                }
+            }
+        `,
+];
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "hideTabWhen", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "initialSelection", void 0);
+__decorate([
+    property({ type: Array })
+], LitAttachmentsTab.prototype, "documents", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "type", void 0);
+__decorate([
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "scale", void 0);
+__decorate([
+    property({ type: Function })
+], LitAttachmentsTab.prototype, "onClick", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "isDocumentLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableSettings", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableThumbnails", void 0);
+__decorate([
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "thumbnailSize", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableAdditionalInformation", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableThumbnailDetail", void 0);
+__decorate([
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "thumbnailPreviewMaxWidth", void 0);
+__decorate([
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "thumbnailPreviewMaxHeight", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableSearchInDocuments", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableComparison", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "userLang", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "dateFormat", void 0);
+__decorate([
+    property({ attribute: false })
+], LitAttachmentsTab.prototype, "onSettingsChanged", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedDocument", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedId", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageNumber", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageCount", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "preview", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "documentData", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isOpenModal", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "localScale", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "filterText", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "focusedIndex", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isWideLayout", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "comparisonModalOpen", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "comparisonDocumentLeft", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "comparisonDocumentRight", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedDocumentLeftCanvas", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedDocumentRightCanvas", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageNumberLeft", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageNumberRight", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageCountLeft", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageCountRight", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "localScaleLeft", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "localScaleRight", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isDocumentLoadingLeft", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isDocumentLoadingRight", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "contextMenuOpen", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "contextMenuPosition", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "contextMenuDocumentId", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "syncZoom", void 0);
+if (!window.customElements.get('lit-attachments-tab')) {
+    window.customElements.define('lit-attachments-tab', LitAttachmentsTab);
+}
+//# sourceMappingURL=lit-attachments-tab.js.map