@servicemind.tis/angular-image-and-file-picker 1.0.0

package/fesm2022/servicemind.tis-angular-image-and-file-picker.mjs

@@ -0,0 +1,3658 @@
+import * as i0 from '@angular/core';
+import { Injectable, ViewChild, Input, ChangeDetectionStrategy, Component, Inject, Pipe, signal, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1 from 'ngx-extended-pdf-viewer';
+import { NgxExtendedPdfViewerComponent, NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
+import * as i4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject, interval, takeUntil as takeUntil$1, map, shareReplay } from 'rxjs';
+import * as i3$4 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import * as i3$3 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$3 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import imageCompression from 'browser-image-compression';
+import { takeUntil, take, timeout } from 'rxjs/operators';
+import * as i4$2 from 'angularx-qrcode';
+import { QRCodeComponent } from 'angularx-qrcode';
+import * as i7 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i10 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i6 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+
+class AngularImageAndFilePickerService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AngularPdfViewerComponent {
+    cdRef;
+    loading = true;
+    isError = false;
+    src;
+    pdfViewer;
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            console.log('Pdf Viewer: src changed: ', changes['src']);
+        }
+    }
+    destroyPdfViewer() {
+        this.pdfViewer.ngOnDestroy();
+    }
+    loadingFinished(ev) {
+        console.log('PDF Loaded', ev);
+        this.loading = false;
+        this.cdRef.detectChanges();
+        this.pdfViewer.height = 'auto';
+    }
+    loadingError(ev) {
+        console.log('PDF Loading Error:', ev);
+        this.isError = true;
+        this.loading = false;
+        this.cdRef.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularPdfViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularPdfViewerComponent, isStandalone: false, selector: "angular-pdf-viewer", inputs: { src: "src" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: NgxExtendedPdfViewerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isError) {\n  <div class=\"flex angular-justify-content-center py-4\">\n    <h3> Some Error Occurred in Loading PDF File. Please Try again. </h3>\n  </div>\n} \n\n@if (!isError) {\n  <div class=\"angular-extended-pdf-viewer\">\n    @if(loading) {\n      <div class=\"loading\">\n        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"50\"></mat-progress-spinner>\n      </div>\n    }\n    <ngx-extended-pdf-viewer [src]=\"src\"\n      [showToolbar]=\"true\"\n      [showSidebarButton]=\"true\"\n      [showFindButton]=\"false\"\n      [showPagingButtons]=\"true\"\n      [showDrawEditor]=\"false\"\n      [showStampEditor]=\"false\"\n      [showTextEditor]=\"false\"\n      [showZoomButtons]=\"true\"\n      [showPresentationModeButton]=\"false\"\n      [showOpenFileButton]=\"false\"\n      [showPrintButton]=\"true\"\n      [showDownloadButton]=\"true\"\n      [showSecondaryToolbarButton]=\"false\"\n      [showRotateButton]=\"true\"\n      [showHandToolButton]=\"false\"\n      [showScrollingButton]=\"true\"\n      [showSpreadButton]=\"false\"\n      [showPropertiesButton]=\"false\"\n      [zoom]=\"'page-fit'\"\n      (pdfDownloaded)=\"loadingFinished($event)\"\n      (pdfLoaded)=\"loadingFinished($event)\"\n      (pdfLoadingFailed)=\"loadingError($event)\"\n    >\n    </ngx-extended-pdf-viewer>\n  </div>\n}\n  \n    ", styles: ["::ng-deep .angular-extended-pdf-viewer{position:relative}::ng-deep .angular-extended-pdf-viewer .loading{height:98vh;background-color:#9e9e9e3d;width:100%;position:absolute;top:0;z-index:1;display:flex;justify-content:center;align-items:center}::ng-deep .angular-extended-pdf-viewer .zoom{height:98vh!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer{background-color:var(--angular-primary)!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-toggle-sidebar pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerMiddle pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight pdf-shy-button .toolbarButton{display:flex;align-items:center!important;justify-content:center!important;color:#fff!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-toggle-sidebar pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerMiddle pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight pdf-shy-button .always-in-secondary-menu{display:none!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area .paging-left,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area .paging-right{display:inline-flex!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-page-number #pageNumber{margin:6px 0!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight #editorModeButtons{display:inline-flex!important}\n"], dependencies: [{ kind: "component", type: i1.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "forceUsingLegacyES5", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindCurrentPageOnly", "showFindPageRange", "showFindEntireWord", "showFindEntirePhrase", "showFindMatchDiacritics", "showFindFuzzySearch", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularPdfViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-pdf-viewer', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isError) {\n  <div class=\"flex angular-justify-content-center py-4\">\n    <h3> Some Error Occurred in Loading PDF File. Please Try again. </h3>\n  </div>\n} \n\n@if (!isError) {\n  <div class=\"angular-extended-pdf-viewer\">\n    @if(loading) {\n      <div class=\"loading\">\n        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"50\"></mat-progress-spinner>\n      </div>\n    }\n    <ngx-extended-pdf-viewer [src]=\"src\"\n      [showToolbar]=\"true\"\n      [showSidebarButton]=\"true\"\n      [showFindButton]=\"false\"\n      [showPagingButtons]=\"true\"\n      [showDrawEditor]=\"false\"\n      [showStampEditor]=\"false\"\n      [showTextEditor]=\"false\"\n      [showZoomButtons]=\"true\"\n      [showPresentationModeButton]=\"false\"\n      [showOpenFileButton]=\"false\"\n      [showPrintButton]=\"true\"\n      [showDownloadButton]=\"true\"\n      [showSecondaryToolbarButton]=\"false\"\n      [showRotateButton]=\"true\"\n      [showHandToolButton]=\"false\"\n      [showScrollingButton]=\"true\"\n      [showSpreadButton]=\"false\"\n      [showPropertiesButton]=\"false\"\n      [zoom]=\"'page-fit'\"\n      (pdfDownloaded)=\"loadingFinished($event)\"\n      (pdfLoaded)=\"loadingFinished($event)\"\n      (pdfLoadingFailed)=\"loadingError($event)\"\n    >\n    </ngx-extended-pdf-viewer>\n  </div>\n}\n  \n    ", styles: ["::ng-deep .angular-extended-pdf-viewer{position:relative}::ng-deep .angular-extended-pdf-viewer .loading{height:98vh;background-color:#9e9e9e3d;width:100%;position:absolute;top:0;z-index:1;display:flex;justify-content:center;align-items:center}::ng-deep .angular-extended-pdf-viewer .zoom{height:98vh!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer{background-color:var(--angular-primary)!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-toggle-sidebar pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerMiddle pdf-shy-button .toolbarButton,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight pdf-shy-button .toolbarButton{display:flex;align-items:center!important;justify-content:center!important;color:#fff!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-toggle-sidebar pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerMiddle pdf-shy-button .always-in-secondary-menu,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight pdf-shy-button .always-in-secondary-menu{display:none!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area .paging-left,::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area .paging-right{display:inline-flex!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerLeft pdf-paging-area pdf-page-number #pageNumber{margin:6px 0!important}::ng-deep .angular-extended-pdf-viewer .zoom pdf-toolbar .toolbar #toolbarContainer #toolbarViewer #toolbarViewerRight #editorModeButtons{display:inline-flex!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pdfViewer: [{
+                type: ViewChild,
+                args: [NgxExtendedPdfViewerComponent, { static: false }]
+            }] } });
+
+class AngularExcelFileViewerComponent {
+    sanitizer;
+    src;
+    baseUrl = `https://view.officeapps.live.com/op/embed.aspx?src=`;
+    iframeSrc = null;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            console.log('Url Received', this.src);
+            const src = this.baseUrl + this.src;
+            this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+            console.log('Iframe src:', this.iframeSrc);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularExcelFileViewerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AngularExcelFileViewerComponent, isStandalone: false, selector: "angular-excel-file-viewer", inputs: { src: "src" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-slate-900 w-full h-5\">\n    \n</div>\n<div class=\"aspect-w-16 aspect-h-9\">\n    <iframe class=\"w-full h-full\" [src]=\"iframeSrc\" frameborder='0'>This is an embedded <a target='_blank'\n        href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank'\n        href='http://office.com/webapps'>Office Online</a>.</iframe>\n</div>", styles: ["iframe{height:95vh}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularExcelFileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-excel-file-viewer', standalone: false, template: "<div class=\"bg-slate-900 w-full h-5\">\n    \n</div>\n<div class=\"aspect-w-16 aspect-h-9\">\n    <iframe class=\"w-full h-full\" [src]=\"iframeSrc\" frameborder='0'>This is an embedded <a target='_blank'\n        href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank'\n        href='http://office.com/webapps'>Office Online</a>.</iframe>\n</div>", styles: ["iframe{height:95vh}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class AngularVideoComponent {
+    src;
+    type;
+    constructor() { }
+    ngOnInit() {
+        if (this.src) {
+            this.type = this.getFileType(String(this.src));
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            console.log('Pdf Viewer: src changed: ', changes['src']);
+            this.type = this.getFileType(changes['src'].currentValue);
+        }
+    }
+    getFileType(text) {
+        let txtArr = text.split('.');
+        let fileType = txtArr[txtArr.length - 1];
+        return fileType.toLocaleLowerCase() == 'mov' ? 'mp4' : fileType.toLocaleLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AngularVideoComponent, isStandalone: false, selector: "angular-video", inputs: { src: "src" }, usesOnChanges: true, ngImport: i0, template: "<video controls autoplay style=\"min-width: 300px; max-width: 90vw; min-height: 300px; max-height: 90vh;\">\n    <source [src]=\"src\" type=\"video/{{type}}\">\n    Your browser does not support the video tag.\n</video>", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-video', standalone: false, template: "<video controls autoplay style=\"min-width: 300px; max-width: 90vw; min-height: 300px; max-height: 90vh;\">\n    <source [src]=\"src\" type=\"video/{{type}}\">\n    Your browser does not support the video tag.\n</video>" }]
+        }], ctorParameters: () => [], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class AngularFileViewerComponent {
+    dialogRef;
+    data;
+    sanitizer;
+    safeUrl;
+    pdfViewer;
+    constructor(dialogRef, data, sanitizer) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.sanitizer = sanitizer;
+        console.log('File Viewer Data:', data);
+        this.safeUrl = this.data.src;
+        console.log('FileViewer SafeUrl:', this.safeUrl);
+        dialogRef.beforeClosed().subscribe((result) => {
+            console.log('The dialog is about to be closed');
+            // Here's the interesting bit:
+            if (this.pdfViewer) {
+                this.pdfViewer.destroyPdfViewer();
+                console.log('PDF Viewer Destroyed.');
+            }
+        });
+    }
+    downloadFile() {
+        var el = document.createElement("a");
+        el.setAttribute("href", this.safeUrl);
+        el.setAttribute("download", 'Video-' + new Date().valueOf());
+        document.body.appendChild(el);
+        el.click();
+        el.remove();
+    }
+    onClose(status) {
+        this.dialogRef.close(status);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularFileViewerComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularFileViewerComponent, isStandalone: false, selector: "angular-file-viewer", viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: AngularPdfViewerComponent, descendants: true }], ngImport: i0, template: "@if(safeUrl) {\n    <div class=\"angular-pdf-viewer\">\n        @if(data.fileType == 'video') {\n            <mat-icon class=\"download-btn\" (click)=\"downloadFile()\" matTooltip=\"Download\">download</mat-icon>\n            <!-- <button mat-icon-button color=\"primary\" class=\"download-btn\" >\n                <mat-icon>download</mat-icon>\n            </button> -->\n        }\n        @else {\n            <button mat-mini-fab color=\"primary\" class=\"close-btn\" (click)=\"onClose(null)\" matTooltip=\"Close\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if(data.fileType == 'pdf') {\n            <angular-pdf-viewer [src]=\"safeUrl\"></angular-pdf-viewer>\n        }\n        @else if(data.fileType == 'excel') {\n            <angular-excel-file-viewer [src]=\"safeUrl\"></angular-excel-file-viewer>\n        }\n        @else if(data.fileType == 'video') {\n            <angular-video [src]=\"safeUrl\"></angular-video>\n        }\n    </div>\n}\n", styles: [".angular-pdf-viewer{position:relative!important;height:100%}.angular-pdf-viewer .close-btn{position:absolute!important;bottom:10px!important;right:10px!important;z-index:1!important}.angular-pdf-viewer .download-btn{color:var(--angular-primary);cursor:pointer;position:absolute!important;top:10px!important;right:10px!important;z-index:1!important}\n"], dependencies: [{ kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: AngularExcelFileViewerComponent, selector: "angular-excel-file-viewer", inputs: ["src"] }, { kind: "component", type: AngularPdfViewerComponent, selector: "angular-pdf-viewer", inputs: ["src"] }, { kind: "component", type: AngularVideoComponent, selector: "angular-video", inputs: ["src"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularFileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-file-viewer', standalone: false, template: "@if(safeUrl) {\n    <div class=\"angular-pdf-viewer\">\n        @if(data.fileType == 'video') {\n            <mat-icon class=\"download-btn\" (click)=\"downloadFile()\" matTooltip=\"Download\">download</mat-icon>\n            <!-- <button mat-icon-button color=\"primary\" class=\"download-btn\" >\n                <mat-icon>download</mat-icon>\n            </button> -->\n        }\n        @else {\n            <button mat-mini-fab color=\"primary\" class=\"close-btn\" (click)=\"onClose(null)\" matTooltip=\"Close\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if(data.fileType == 'pdf') {\n            <angular-pdf-viewer [src]=\"safeUrl\"></angular-pdf-viewer>\n        }\n        @else if(data.fileType == 'excel') {\n            <angular-excel-file-viewer [src]=\"safeUrl\"></angular-excel-file-viewer>\n        }\n        @else if(data.fileType == 'video') {\n            <angular-video [src]=\"safeUrl\"></angular-video>\n        }\n    </div>\n}\n", styles: [".angular-pdf-viewer{position:relative!important;height:100%}.angular-pdf-viewer .close-btn{position:absolute!important;bottom:10px!important;right:10px!important;z-index:1!important}.angular-pdf-viewer .download-btn{color:var(--angular-primary);cursor:pointer;position:absolute!important;top:10px!important;right:10px!important;z-index:1!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.DomSanitizer }], propDecorators: { pdfViewer: [{
+                type: ViewChild,
+                args: [AngularPdfViewerComponent, { static: false }]
+            }] } });
+
+class AngularPreviewImageComponent {
+    dialogRef;
+    data;
+    width = 850;
+    height = 650;
+    isLoading = true;
+    isLandscape;
+    orientation;
+    imageWidth;
+    imageHeight;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        if (this.data.url) {
+            setTimeout(() => {
+                this.checkImageOrientation(this.data.url);
+            }, 500);
+        }
+    }
+    checkImageOrientation(imageUrl) {
+        const img = new Image();
+        img.src = imageUrl;
+        this.isLoading = true;
+        img.onload = () => {
+            this.imageWidth = img.naturalWidth;
+            this.imageHeight = img.naturalHeight;
+            this.isLandscape = img.naturalWidth > img.naturalHeight;
+            this.orientation = this.isLandscape ? 'landscape-image' : 'portrait-image';
+            this.isLoading = false;
+        };
+        img.onerror = () => {
+            console.error('Failed to load image.');
+            this.isLoading = false;
+        };
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularPreviewImageComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularPreviewImageComponent, isStandalone: false, selector: "angular-preview-image", ngImport: i0, template: "@if(isLoading){\n    <div style=\"width: 350px; height: 350px; display: flex; justify-content: center; align-items: center\">\n        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"80\"></mat-progress-spinner>\n    </div>\n}\n@else{\n    <div class=\"w-100 dialog-container\" appScrolling style=\"--img-width: {{(imageWidth && imageWidth < 700) ? imageWidth : 650}}px; --img-height: {{(imageHeight && imageHeight < 600) ? imageHeight : 600}}px\">\n        <mat-icon\n        class=\"close-icon\"\n        (click)=\"onClose()\">cancel</mat-icon>\n        <img \n        *ngIf=\"data.url\" \n        [src]=\"data.url\" \n        alt=\"preview-image\" \n        class=\"preview-image {{orientation}}\">\n    </div>\n}", styles: ["::ng-deep .mat-p-0 .mat-dialog-container{padding:0!important}.dialog-container{overflow:auto;max-height:calc(100vh - 15px);display:flex;justify-content:center;align-items:center}.landscape-image{width:var(--img-width);max-width:95vw;object-fit:contain}.portrait-image{height:var(--img-height);max-height:95vh;object-fit:contain}.close-icon{color:var(--angular-cancel, #bb333b);position:absolute;top:10px;right:10px;z-index:99;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularPreviewImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-preview-image', standalone: false, template: "@if(isLoading){\n    <div style=\"width: 350px; height: 350px; display: flex; justify-content: center; align-items: center\">\n        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"80\"></mat-progress-spinner>\n    </div>\n}\n@else{\n    <div class=\"w-100 dialog-container\" appScrolling style=\"--img-width: {{(imageWidth && imageWidth < 700) ? imageWidth : 650}}px; --img-height: {{(imageHeight && imageHeight < 600) ? imageHeight : 600}}px\">\n        <mat-icon\n        class=\"close-icon\"\n        (click)=\"onClose()\">cancel</mat-icon>\n        <img \n        *ngIf=\"data.url\" \n        [src]=\"data.url\" \n        alt=\"preview-image\" \n        class=\"preview-image {{orientation}}\">\n    </div>\n}", styles: ["::ng-deep .mat-p-0 .mat-dialog-container{padding:0!important}.dialog-container{overflow:auto;max-height:calc(100vh - 15px);display:flex;justify-content:center;align-items:center}.landscape-image{width:var(--img-width);max-width:95vw;object-fit:contain}.portrait-image{height:var(--img-height);max-height:95vh;object-fit:contain}.close-icon{color:var(--angular-cancel, #bb333b);position:absolute;top:10px;right:10px;z-index:99;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class AngularErrorDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularErrorDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AngularErrorDialogComponent, isStandalone: false, selector: "angular-error-dialog", ngImport: i0, template: "<h1 mat-dialog-title>\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    {{data?.title}}\n</h1>\n<div mat-dialog-content>\n    {{data?.message}}\n</div>\n<div mat-dialog-actions>\n  <button mat-button class=\"angular-text-upper {{data?.buttonClass ?? 'angular-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularErrorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-error-dialog', standalone: false, template: "<h1 mat-dialog-title>\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    {{data?.title}}\n</h1>\n<div mat-dialog-content>\n    {{data?.message}}\n</div>\n<div mat-dialog-actions>\n  <button mat-button class=\"angular-text-upper {{data?.buttonClass ?? 'angular-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+// Maximum file size after compression (4MB)
+const MAX_COMPRESSED_FILE_SIZE_MB = 4;
+const MAX_COMPRESSED_FILE_SIZE_BYTES = MAX_COMPRESSED_FILE_SIZE_MB * 1024 * 1024;
+// Quality levels for iterative compression (95%, 90%, 85%, ... down to 10%)
+const QUALITY_LEVELS = [0.95, 0.90, 0.85, 0.80, 0.75, 0.70, 0.65, 0.60, 0.55, 0.50, 0.45, 0.40, 0.35, 0.30, 0.25, 0.20, 0.15, 0.10];
+class AngularHelperService {
+    snackBar;
+    dialog;
+    http;
+    constructor(snackBar, dialog, http) {
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.http = http;
+    }
+    showHttpErrorMsg(error, duration = 5000) {
+        console.log('httpError: ', error);
+        let errorMessage = 'Some Unknown Error Occurred.';
+        let errorCode = 'Unknown Error';
+        const httpError = error;
+        if (httpError.status >= 400) {
+            const errorFromServer = httpError.error?.errors || httpError.error || [];
+            if (Array.isArray(errorFromServer) && errorFromServer.length > 0) {
+                errorMessage = errorFromServer[0].message;
+                errorCode = errorFromServer[0].code;
+            }
+        }
+        else if (httpError.status < 100) {
+            errorMessage = httpError.message;
+            errorCode = httpError.statusText;
+        }
+        if (errorCode == "VALIDATION_ERROR" || errorCode == "NOT_FOUND_ERROR" || errorCode == "THIRD_PARTY_API_ERROR") {
+            let confirmBoxData = {
+                title: "Error !",
+                message: errorMessage,
+                icon: "error",
+                iconClass: "angular-text-danger",
+                buttonText: "Ok",
+                buttonClass: "angular-btn-primary",
+            };
+            const dialogRef = this.dialog.open(AngularErrorDialogComponent, {
+                width: "550px",
+                panelClass: ['angular-simple-confirmation'],
+                data: confirmBoxData,
+                disableClose: false,
+            });
+            return dialogRef;
+        }
+        else {
+            const snackbarRef = this.snackBar.open(errorMessage, 'Error', { duration: duration });
+            return snackbarRef;
+        }
+    }
+    showSuccessMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    showErrorMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    /**
+     * Compresses an image file to ensure it's under MAX_COMPRESSED_FILE_SIZE_MB.
+     * Uses iterative compression with decreasing quality levels while maintaining aspect ratio.
+     * @param image - Data URL string or File object
+     * @param mimeType - The MIME type of the image (e.g., 'image/jpeg', 'image/png')
+     * @returns Promise<Blob> - The compressed image as a Blob
+     */
+    async compressFile(image, mimeType) {
+        const startTime = performance.now();
+        let file;
+        console.log('[ImageCompression] Starting compression process...');
+        console.log('[ImageCompression] Input type:', typeof image === 'string' ? 'DataURL' : image?.constructor?.name);
+        console.log('[ImageCompression] MIME type:', mimeType);
+        // Convert data URL to File if necessary
+        if (typeof image === 'string' && image.startsWith('data:')) {
+            const blob = this.dataURItoBlob(image.split(',')[1], mimeType);
+            file = new File([blob], 'image.' + this.getExtensionFromMimeType(mimeType), { type: mimeType });
+            console.log('[ImageCompression] Converted DataURL to File');
+        }
+        else if (image instanceof File) {
+            file = image;
+            console.log('[ImageCompression] Input is already a File:', file.name);
+        }
+        else if (image instanceof Blob) {
+            file = new File([image], 'image.' + this.getExtensionFromMimeType(mimeType), { type: mimeType });
+            console.log('[ImageCompression] Converted Blob to File');
+        }
+        else {
+            console.error('[ImageCompression] Invalid input type:', typeof image);
+            throw new Error('Invalid image input: expected data URL string, File, or Blob');
+        }
+        const originalSizeBytes = file.size;
+        const originalSizeKB = originalSizeBytes / 1024;
+        const originalSizeMB = originalSizeKB / 1024;
+        console.log('[ImageCompression] ═══════════════════════════════════════');
+        console.log('[ImageCompression] Original file size:', this.formatFileSize(originalSizeBytes));
+        console.log('[ImageCompression] Max allowed size:', `${MAX_COMPRESSED_FILE_SIZE_MB}MB`);
+        console.log('[ImageCompression] ═══════════════════════════════════════');
+        // If file is already under the limit, return as-is
+        if (file.size <= MAX_COMPRESSED_FILE_SIZE_BYTES) {
+            const elapsed = (performance.now() - startTime).toFixed(2);
+            console.log('[ImageCompression] ✓ File already under limit, no compression needed');
+            console.log(`[ImageCompression] Time elapsed: ${elapsed}ms`);
+            return file;
+        }
+        // Check if the file is an image that can be compressed
+        if (!this.isCompressibleImage(mimeType)) {
+            console.warn(`[ImageCompression] ⚠ File type ${mimeType} cannot be compressed. Returning original file.`);
+            return file;
+        }
+        console.log('[ImageCompression] Starting iterative compression...');
+        console.log('[ImageCompression] Quality levels to try:', QUALITY_LEVELS.map(q => `${q * 100}%`).join(', '));
+        // Iteratively compress with decreasing quality until under size limit
+        let compressedFile = file;
+        let attemptCount = 0;
+        for (const quality of QUALITY_LEVELS) {
+            attemptCount++;
+            try {
+                const options = {
+                    maxSizeMB: MAX_COMPRESSED_FILE_SIZE_MB,
+                    maxWidthOrHeight: undefined, // Maintain original dimensions (aspect ratio preserved)
+                    useWebWorker: true,
+                    initialQuality: quality,
+                    preserveExif: true,
+                    fileType: mimeType,
+                };
+                console.log(`[ImageCompression] Attempt ${attemptCount}: Quality ${quality * 100}%...`);
+                const attemptStart = performance.now();
+                compressedFile = await imageCompression(file, options);
+                const attemptTime = (performance.now() - attemptStart).toFixed(2);
+                const compressedSizeBytes = compressedFile.size;
+                const reductionPercent = ((1 - compressedSizeBytes / originalSizeBytes) * 100).toFixed(1);
+                console.log(`[ImageCompression]   → Result: ${this.formatFileSize(compressedSizeBytes)} (${reductionPercent}% reduction) in ${attemptTime}ms`);
+                // If compressed file is under the limit, we're done
+                if (compressedFile.size <= MAX_COMPRESSED_FILE_SIZE_BYTES) {
+                    const totalTime = (performance.now() - startTime).toFixed(2);
+                    console.log('[ImageCompression] ═══════════════════════════════════════');
+                    console.log('[ImageCompression] ✓ COMPRESSION SUCCESSFUL');
+                    console.log(`[ImageCompression]   Original size:   ${this.formatFileSize(originalSizeBytes)}`);
+                    console.log(`[ImageCompression]   Compressed size: ${this.formatFileSize(compressedFile.size)}`);
+                    console.log(`[ImageCompression]   Size reduction:  ${reductionPercent}%`);
+                    console.log(`[ImageCompression]   Final quality:   ${quality * 100}%`);
+                    console.log(`[ImageCompression]   Attempts:        ${attemptCount}`);
+                    console.log(`[ImageCompression]   Total time:      ${totalTime}ms`);
+                    console.log('[ImageCompression] ═══════════════════════════════════════');
+                    return compressedFile;
+                }
+            }
+            catch (error) {
+                console.error(`[ImageCompression] ✗ Attempt ${attemptCount} failed at quality ${quality * 100}%:`, error);
+            }
+        }
+        // If we've exhausted all quality levels, return the best we could achieve
+        const totalTime = (performance.now() - startTime).toFixed(2);
+        const finalReduction = ((1 - compressedFile.size / originalSizeBytes) * 100).toFixed(1);
+        console.log('[ImageCompression] ═══════════════════════════════════════');
+        console.warn('[ImageCompression] ⚠ COMPRESSION LIMIT REACHED');
+        console.log(`[ImageCompression]   Original size:   ${this.formatFileSize(originalSizeBytes)}`);
+        console.log(`[ImageCompression]   Final size:      ${this.formatFileSize(compressedFile.size)}`);
+        console.log(`[ImageCompression]   Size reduction:  ${finalReduction}%`);
+        console.log(`[ImageCompression]   Target was:      ${MAX_COMPRESSED_FILE_SIZE_MB}MB`);
+        console.log(`[ImageCompression]   Attempts:        ${attemptCount}`);
+        console.log(`[ImageCompression]   Total time:      ${totalTime}ms`);
+        console.warn(`[ImageCompression]   Could not compress below ${MAX_COMPRESSED_FILE_SIZE_MB}MB, returning best result`);
+        console.log('[ImageCompression] ═══════════════════════════════════════');
+        return compressedFile;
+    }
+    /**
+     * Formats file size in human-readable format
+     */
+    formatFileSize(bytes) {
+        if (bytes < 1024) {
+            return `${bytes} B`;
+        }
+        else if (bytes < 1024 * 1024) {
+            return `${(bytes / 1024).toFixed(2)} KB`;
+        }
+        else {
+            return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+        }
+    }
+    /**
+     * Checks if the given MIME type is a compressible image format
+     */
+    isCompressibleImage(mimeType) {
+        const compressibleTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp'];
+        return compressibleTypes.includes(mimeType.toLowerCase());
+    }
+    /**
+     * Gets file extension from MIME type
+     */
+    getExtensionFromMimeType(mimeType) {
+        const mimeToExt = {
+            'image/jpeg': 'jpg',
+            'image/jpg': 'jpg',
+            'image/png': 'png',
+            'image/webp': 'webp',
+            'image/gif': 'gif',
+            'image/bmp': 'bmp',
+            'image/svg+xml': 'svg',
+        };
+        return mimeToExt[mimeType.toLowerCase()] || 'bin';
+    }
+    dataURItoBlob(dataURI, mimeType) {
+        const byteString = window.atob(dataURI);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const int8Array = new Uint8Array(arrayBuffer);
+        for (let i = 0; i < byteString.length; i++) {
+            int8Array[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([int8Array], { type: mimeType });
+        return blob;
+    }
+    getDataUrlFromFile(file) {
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.onload = (e) => {
+                resolve(e.target.result);
+            };
+            reader.onerror = (e) => {
+                reject(e.target.error);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    getUploadUrl(url, filename, mimeType, type) {
+        return this.http.post(url, { filename, mimeType, type });
+    }
+    attachFilesToEntity(url, data, limit) {
+        return this.http.post(`${url}?limit=${limit}`, data);
+    }
+    updateTag(url, data) {
+        return this.http.post(url, data);
+    }
+    updateSequence(url, data) {
+        return this.http.post(url, data);
+    }
+    putFile(url, file, contentType) {
+        const resolvedContentType = contentType || (file instanceof Blob ? file.type : '') || 'binary/octet-stream';
+        const byteLength = file instanceof ArrayBuffer
+            ? file.byteLength
+            : file.size;
+        const fileName = file instanceof File ? file.name : '(blob/arraybuffer)';
+        // Debug: inspect payload before AWS PUT (do not put file bytes in headers —
+        // S3 signed URLs reject unsigned headers, and headers can't carry binary bodies).
+        console.log('[putFile] Uploading to AWS', {
+            url,
+            fileName,
+            contentType: resolvedContentType,
+            byteLength,
+            bodyType: file?.constructor?.name,
+            isEmpty: byteLength === 0,
+        });
+        const headers = new HttpHeaders({
+            'content-type': resolvedContentType,
+        }).set('X-Skip-Auth-Interceptor', '');
+        return this.http.put(url, file, { headers });
+    }
+    deleteUploadedFile(url, data) {
+        return this.http.post(url, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularHelperService, deps: [{ token: i1$3.MatSnackBar }, { token: i1$2.MatDialog }, { token: i3$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularHelperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$3.MatSnackBar }, { type: i1$2.MatDialog }, { type: i3$3.HttpClient }] });
+
+class AngularConfirmationDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.dialogRef.addPanelClass(['md-angular-w-400-px']);
+    }
+    onClose(status) {
+        this.dialogRef.close(status);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularConfirmationDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularConfirmationDialogComponent, isStandalone: false, selector: "angular-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--angular-cancel, #bb333b)\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content style=\"padding: 20px 24px; padding-top: 0px;\">\n    @if(data?.html){\n        <h5 class=\"title\">{{data?.message}}</h5>\n        <div [innerHTML]=\"data.html\">\n        </div>\n    }\n    @else {\n        <span>{{data?.message}}</span>\n    }\n</div>\n<div mat-dialog-actions>\n    <button mat-button class=\"{{data?.cancelButtonClass}}\" style=\"color: var(--angular-primary, var(--mat-sys-primary))\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"{{data?.approveButtonClass}}\" style=\"color: var(--angular-cancel, #bb333b)\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-confirmation-dialog', standalone: false, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--angular-cancel, #bb333b)\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content style=\"padding: 20px 24px; padding-top: 0px;\">\n    @if(data?.html){\n        <h5 class=\"title\">{{data?.message}}</h5>\n        <div [innerHTML]=\"data.html\">\n        </div>\n    }\n    @else {\n        <span>{{data?.message}}</span>\n    }\n</div>\n<div mat-dialog-actions>\n    <button mat-button class=\"{{data?.cancelButtonClass}}\" style=\"color: var(--angular-primary, var(--mat-sys-primary))\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"{{data?.approveButtonClass}}\" style=\"color: var(--angular-cancel, #bb333b)\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+const DEFAULT_PAIRING_TTL = 24 * 60 * 60 * 1000; // 24 hours
+const DEFAULT_STORAGE_KEY = 'angular-remote-upload-session';
+const DEFAULT_QR_EXPIRY = 300; // 5 minutes
+const HEALTH_CHECK_INTERVAL = 30000; // 30 seconds
+class AngularRemoteUploadService {
+    http;
+    static COMPONENT = 'AngularRemoteUploadService';
+    static MOBILE_CONNECTION_KEY = 'angular-mobile-connection';
+    // ponytail: read/migrate old localStorage key; remove after all clients refresh
+    static LEGACY_MOBILE_CONNECTION_KEY = 'tis-mobile-connection';
+    destroy$ = new Subject();
+    channelSubscription = null;
+    healthCheckSubscription = null;
+    config = null;
+    socketAdapter = null;
+    // Cached values
+    deviceId = '';
+    userId = '';
+    apiUrl = '';
+    channelName = '';
+    // State observables
+    pairingSession$ = new BehaviorSubject(null);
+    connectionStatus$ = new BehaviorSubject('disconnected');
+    mobileConnection$ = new BehaviorSubject(null);
+    remoteUpload$ = new Subject();
+    error$ = new Subject();
+    // Pending files from mobile - waiting for user to accept/reject
+    pendingFiles$ = new BehaviorSubject([]);
+    // Flag to track if we're waiting for mobile upload
+    isWaitingForUpload$ = new BehaviorSubject(false);
+    // Current field request info
+    currentFieldRequest$ = new BehaviorSubject(null);
+    // Device online status - 'checking' means initial check in progress (blinking dot)
+    devicesStatus$ = new BehaviorSubject(null);
+    isCheckingStatus$ = new BehaviorSubject(false);
+    constructor(http) {
+        this.http = http;
+        // Restore mobile connection from storage on init
+        this.restoreMobileConnection();
+    }
+    // ===========================================================================
+    // Configuration
+    // ===========================================================================
+    /**
+     * Configure the remote upload service
+     */
+    async configure(config) {
+        this.config = config;
+        this.socketAdapter = config.socketAdapter || null;
+        if (config.enabled && this.socketAdapter) {
+            // Get device ID, user ID, and API URL from adapter
+            this.deviceId = await Promise.resolve(this.socketAdapter.getDeviceId());
+            this.userId = this.socketAdapter.getUserId
+                ? await Promise.resolve(this.socketAdapter.getUserId())
+                : '';
+            this.apiUrl = this.socketAdapter.getApiUrl?.() || '';
+            this.channelName = `tis-mobile-upload-w-dev-${this.deviceId}`;
+            // Subscribe to socket connection status
+            this.socketAdapter.connectionStatus$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(connected => {
+                if (connected) {
+                    // Always subscribe to our channel when connected
+                    this.subscribeToChannel(this.channelName);
+                    // If we have a restored connection, start health check
+                    if (this.isConnectedToMobile()) {
+                        this.startHealthCheck();
+                    }
+                }
+            });
+            // Subscribe to channel immediately if already connected
+            if (this.socketAdapter.isConnected()) {
+                this.subscribeToChannel(this.channelName);
+                // If we have a restored connection, start health check
+                if (this.isConnectedToMobile()) {
+                    this.startHealthCheck();
+                }
+            }
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] Configured:`, {
+                deviceId: this.deviceId,
+                userId: this.userId,
+                channel: this.channelName
+            });
+        }
+    }
+    // ===========================================================================
+    // Public Getters
+    // ===========================================================================
+    /**
+     * Get desktop device ID
+     */
+    getDesktopDeviceId() {
+        return this.deviceId;
+    }
+    /**
+     * Get current mobile connection info
+     */
+    getMobileConnection() {
+        return this.mobileConnection$.asObservable();
+    }
+    /**
+     * Get current mobile device ID (if connected)
+     */
+    getMobileDeviceId() {
+        return this.mobileConnection$.value?.mobileDeviceId || null;
+    }
+    /**
+     * Get current pairing session
+     */
+    getPairingSession() {
+        return this.pairingSession$.asObservable();
+    }
+    /**
+     * Get connection status
+     */
+    getConnectionStatus() {
+        return this.connectionStatus$.asObservable();
+    }
+    /**
+     * Get remote upload events
+     */
+    getRemoteUploads() {
+        return this.remoteUpload$.asObservable();
+    }
+    /**
+     * Get error events
+     */
+    getErrors() {
+        return this.error$.asObservable();
+    }
+    /**
+     * Check if remote upload is available (configured and socket connected)
+     */
+    isAvailable() {
+        return !!(this.config?.enabled &&
+            this.socketAdapter &&
+            this.socketAdapter.isConnected());
+    }
+    /**
+     * Check if currently connected to a mobile device
+     */
+    isConnectedToMobile() {
+        return this.connectionStatus$.value === 'connected' && !!this.mobileConnection$.value;
+    }
+    /**
+     * Alias for isConnectedToMobile - Check if paired with mobile
+     */
+    isPaired() {
+        return this.isConnectedToMobile();
+    }
+    /**
+     * Get devices online status (both desktop and mobile)
+     */
+    getDevicesStatus() {
+        return this.devicesStatus$.asObservable();
+    }
+    /**
+     * Get current devices status value
+     */
+    getDevicesStatusValue() {
+        return this.devicesStatus$.value;
+    }
+    /**
+     * Check if currently verifying connection status (for blinking indicator)
+     */
+    getIsCheckingStatus() {
+        return this.isCheckingStatus$.asObservable();
+    }
+    /**
+     * Check if both devices are online and ready for transfer
+     */
+    isReadyForTransfer() {
+        return this.devicesStatus$.value?.isReadyForTransfer ?? false;
+    }
+    /**
+     * Get pending files from mobile (waiting to be accepted/rejected)
+     */
+    getPendingFiles() {
+        return this.pendingFiles$.asObservable();
+    }
+    /**
+     * Get current pending files value
+     */
+    getPendingFilesValue() {
+        return this.pendingFiles$.value;
+    }
+    /**
+     * Check if waiting for mobile upload
+     */
+    getIsWaitingForUpload() {
+        return this.isWaitingForUpload$.asObservable();
+    }
+    /**
+     * Get current field request info
+     */
+    getCurrentFieldRequest() {
+        return this.currentFieldRequest$.asObservable();
+    }
+    /**
+     * Accept a pending file (emit to remoteUpload$ and call onFileAccept callback)
+     */
+    acceptPendingFile(file) {
+        // Remove from pending
+        const currentPending = this.pendingFiles$.value;
+        this.pendingFiles$.next(currentPending.filter(f => f !== file));
+        // Emit to remoteUpload$ so component can add it
+        this.remoteUpload$.next(file);
+        // Call onFileAccept callback if provided
+        if (this.config?.onFileAccept) {
+            this.config.onFileAccept(file.file);
+        }
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] File accepted:`, file.file.fileName);
+    }
+    /**
+     * Reject/delete a pending file
+     */
+    rejectPendingFile(file) {
+        const currentPending = this.pendingFiles$.value;
+        this.pendingFiles$.next(currentPending.filter(f => f !== file));
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] File rejected:`, file.file.fileName);
+    }
+    /**
+     * Clear all pending files
+     */
+    clearPendingFiles() {
+        this.pendingFiles$.next([]);
+    }
+    // ===========================================================================
+    // QR Code Generation (New Flow)
+    // ===========================================================================
+    /**
+     * Generate QR code data for mobile app
+     * Flow:
+     * 1. Call API to get a short-lived link token (UUID)
+     * 2. Build QR URL with: apiUrl, deviceId, userId, token
+     */
+    async generateQrCode() {
+        if (!this.isAvailable()) {
+            throw new Error('Remote upload is not available. Check configuration and socket connection.');
+        }
+        if (!this.apiUrl) {
+            throw new Error('API URL not configured in socket adapter');
+        }
+        try {
+            // Step 1: Get link token from backend
+            const endpoint = this.config?.apiEndpoints?.generateMobileLinkToken
+                || `${this.apiUrl}/ease-of-access/mobile-upload-link-token`;
+            const apiResponse = await this.callHttpApi(endpoint, { deviceId: this.deviceId, userId: this.userId });
+            // Unwrap the data from API response
+            const response = apiResponse.data || apiResponse;
+            const expirySeconds = this.config?.qrCode?.expirySeconds || DEFAULT_QR_EXPIRY;
+            const expiresAt = response.expiresAt || Date.now() + expirySeconds * 1000;
+            // Step 2: Build QR URL
+            const mobileUrl = this.config?.qrCode?.mobileUploadUrl || '';
+            const qrData = this.buildQrUrl(mobileUrl, {
+                token: response.token,
+                deviceId: this.deviceId,
+                userId: this.userId,
+                apiUrl: this.apiUrl
+            });
+            // Update pairing session
+            const session = {
+                pairingCode: response.token,
+                desktopDeviceId: this.deviceId,
+                channel: this.channelName,
+                createdAt: Date.now(),
+                expiresAt,
+                status: 'pending'
+            };
+            this.pairingSession$.next(session);
+            this.connectionStatus$.next('pending');
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] QR code generated, waiting for mobile...`);
+            return { qrData, expiresAt };
+        }
+        catch (error) {
+            const msg = `Failed to generate QR code: ${error.message}`;
+            console.error(`[${AngularRemoteUploadService.COMPONENT}]`, msg);
+            this.error$.next(msg);
+            throw error;
+        }
+    }
+    /**
+     * Build QR URL with minimal parameters
+     */
+    buildQrUrl(baseUrl, params) {
+        const url = new URL(baseUrl);
+        url.searchParams.set('token', params.token);
+        url.searchParams.set('deviceId', params.deviceId);
+        url.searchParams.set('userId', params.userId);
+        url.searchParams.set('apiUrl', encodeURIComponent(params.apiUrl));
+        return url.toString();
+    }
+    // ===========================================================================
+    // Mobile Communication (via API calls)
+    // ===========================================================================
+    /**
+     * Call API via socket with timeout - helper method
+     */
+    callApiWithTimeout(route, body, timeoutMs = 10000) {
+        return new Promise((resolve, reject) => {
+            if (!this.socketAdapter?.callApiViaSocket) {
+                reject(new Error('callApiViaSocket not available'));
+                return;
+            }
+            const timeout = setTimeout(() => reject(new Error(`API call timeout: ${route}`)), timeoutMs);
+            const callApi = this.socketAdapter.callApiViaSocket.bind(this.socketAdapter);
+            callApi(route, body).pipe(take(1)).subscribe({
+                next: (res) => {
+                    clearTimeout(timeout);
+                    resolve(res);
+                },
+                error: (err) => {
+                    clearTimeout(timeout);
+                    reject(err);
+                }
+            });
+        });
+    }
+    /**
+     * Send field request to mobile - tells mobile to show upload UI for this field
+     */
+    async sendFieldRequest(fieldInfo) {
+        if (!this.isConnectedToMobile()) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Not connected to mobile, cannot send field request`);
+            return;
+        }
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        const requestId = `field-${Date.now()}`;
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Sending field request to mobile:`, fieldInfo);
+        // Set waiting state and store field request info
+        this.isWaitingForUpload$.next(true);
+        this.currentFieldRequest$.next({
+            ...fieldInfo,
+            requestId,
+            requestedAt: Date.now()
+        });
+        try {
+            const response = await this.callApiWithTimeout('tis-image-mobile-uploader/field-request', {
+                desktopDeviceId: this.deviceId,
+                mobileDeviceId: mobileDeviceId,
+                channel: this.channelName,
+                field: fieldInfo,
+                requestId
+            });
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] Field request sent:`, response);
+        }
+        catch (error) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Field request failed:`, error);
+            // Reset waiting state on error
+            this.isWaitingForUpload$.next(false);
+            this.currentFieldRequest$.next(null);
+        }
+    }
+    /**
+     * Cancel current field request
+     */
+    async cancelFieldRequest() {
+        // Reset waiting state
+        this.isWaitingForUpload$.next(false);
+        this.currentFieldRequest$.next(null);
+        if (!this.isConnectedToMobile()) {
+            return;
+        }
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Canceling field request`);
+        try {
+            await this.callApiWithTimeout('tis-image-mobile-uploader/cancel-field-request', {
+                desktopDeviceId: this.deviceId,
+                mobileDeviceId: mobileDeviceId,
+                channel: this.channelName
+            });
+        }
+        catch (error) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Cancel field request failed:`, error);
+        }
+    }
+    /**
+     * Accept mobile connection - update local state
+     * Note: Backend already broadcasts mobile-link-established to both parties
+     */
+    acceptMobileConnection(mobileDeviceId) {
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Accepting mobile connection:`, mobileDeviceId);
+        // Save mobile connection
+        const connectionInfo = {
+            mobileDeviceId,
+            connectedAt: Date.now(),
+            lastActivity: Date.now()
+        };
+        this.mobileConnection$.next(connectionInfo);
+        this.saveMobileConnection(connectionInfo);
+        // Update status
+        this.connectionStatus$.next('connected');
+        // Update session
+        const session = this.pairingSession$.value;
+        if (session) {
+            const updatedSession = {
+                ...session,
+                mobileDeviceId,
+                status: 'connected',
+                lastActivity: Date.now()
+            };
+            this.pairingSession$.next(updatedSession);
+        }
+    }
+    /**
+     * Disconnect from mobile device - call API and clear local state
+     */
+    async disconnect() {
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Disconnecting from mobile...`);
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        // Call disconnect API via socket
+        if (this.socketAdapter?.callApiViaSocket && mobileDeviceId) {
+            try {
+                const callApi = this.socketAdapter.callApiViaSocket.bind(this.socketAdapter);
+                const response = await new Promise((resolve, reject) => {
+                    const timeout = setTimeout(() => reject(new Error('Disconnect API timeout')), 10000);
+                    callApi('tis-image-mobile-uploader/disconnect-mobile-link', {
+                        desktopDeviceId: this.deviceId,
+                        mobileDeviceId: mobileDeviceId,
+                        initiatedBy: 'desktop'
+                    }).pipe(take(1)).subscribe({
+                        next: (res) => {
+                            clearTimeout(timeout);
+                            resolve(res);
+                        },
+                        error: (err) => {
+                            clearTimeout(timeout);
+                            reject(err);
+                        }
+                    });
+                });
+                console.log(`[${AngularRemoteUploadService.COMPONENT}] Disconnect API response:`, response);
+            }
+            catch (error) {
+                console.warn(`[${AngularRemoteUploadService.COMPONENT}] Disconnect API call failed:`, error);
+                // Continue with local cleanup anyway
+            }
+        }
+        // Clear state
+        this.mobileConnection$.next(null);
+        this.connectionStatus$.next('disconnected');
+        this.pairingSession$.next(null);
+        this.clearMobileConnection();
+        // Stop health check
+        this.stopHealthCheck();
+    }
+    /**
+     * Handle disconnect initiated from remote (mobile) side
+     */
+    handleRemoteDisconnect(data) {
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Mobile disconnected:`, data);
+        // Clear state without calling API (mobile already initiated)
+        this.mobileConnection$.next(null);
+        this.connectionStatus$.next('disconnected');
+        this.pairingSession$.next(null);
+        this.clearMobileConnection();
+        // Stop health check when disconnected
+        this.stopHealthCheck();
+    }
+    // ===========================================================================
+    // Device Health Check
+    // ===========================================================================
+    /**
+     * Start periodic health check for device online status
+     * Should be called when connection is established
+     */
+    startHealthCheck() {
+        // Stop any existing health check
+        this.stopHealthCheck();
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        if (!mobileDeviceId || !this.deviceId) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Cannot start health check - missing device IDs`, {
+                mobileDeviceId,
+                desktopDeviceId: this.deviceId
+            });
+            return;
+        }
+        if (!this.socketAdapter?.callApiViaSocket) {
+            console.error(`[${AngularRemoteUploadService.COMPONENT}] Cannot start health check - socketAdapter.callApiViaSocket not available`);
+            return;
+        }
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Starting health check (every ${HEALTH_CHECK_INTERVAL / 1000}s)`, {
+            mobileDeviceId,
+            desktopDeviceId: this.deviceId
+        });
+        // Set initial checking state (blinking)
+        this.isCheckingStatus$.next(true);
+        // Run first check immediately
+        this.checkDevicesOnline().catch(err => {
+            console.error(`[${AngularRemoteUploadService.COMPONENT}] Initial health check failed:`, err);
+        });
+        // Then run periodically
+        this.healthCheckSubscription = interval(HEALTH_CHECK_INTERVAL)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.checkDevicesOnline().catch(err => {
+                console.error(`[${AngularRemoteUploadService.COMPONENT}] Periodic health check failed:`, err);
+            });
+        });
+    }
+    /**
+     * Stop health check
+     */
+    stopHealthCheck() {
+        if (this.healthCheckSubscription) {
+            this.healthCheckSubscription.unsubscribe();
+            this.healthCheckSubscription = null;
+        }
+        this.devicesStatus$.next(null);
+        this.isCheckingStatus$.next(false);
+    }
+    /**
+     * Check if both devices are online via API
+     */
+    async checkDevicesOnline() {
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        if (!mobileDeviceId || !this.deviceId) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Cannot check devices - missing device IDs`, {
+                mobileDeviceId,
+                desktopDeviceId: this.deviceId
+            });
+            return null;
+        }
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Checking devices online status...`, {
+            desktopDeviceId: this.deviceId,
+            mobileDeviceId: mobileDeviceId
+        });
+        try {
+            const response = await this.callApiWithTimeout('tis-image-mobile-uploader/check-devices-online', {
+                desktopDeviceId: this.deviceId,
+                mobileDeviceId: mobileDeviceId
+            }, 15000);
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] Check devices response:`, response);
+            // Response structure: { body: { data: { desktop: {...}, mobile: {...} } } }
+            const data = response?.body?.data || response?.data || response;
+            const status = {
+                desktop: {
+                    isOnline: data.desktop?.isOnline ?? false,
+                    deviceId: data.desktop?.deviceId || this.deviceId,
+                    lastPing: data.desktop?.lastPing,
+                    connectionId: data.desktop?.connectionId
+                },
+                mobile: {
+                    isOnline: data.mobile?.isOnline ?? false,
+                    deviceId: data.mobile?.deviceId || mobileDeviceId,
+                    lastPing: data.mobile?.lastPing,
+                    connectionId: data.mobile?.connectionId
+                },
+                lastChecked: Date.now(),
+                isReadyForTransfer: (data.desktop?.isOnline ?? false) && (data.mobile?.isOnline ?? false)
+            };
+            this.devicesStatus$.next(status);
+            this.isCheckingStatus$.next(false); // Stop blinking after first successful check
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] Devices status:`, {
+                desktop: status.desktop.isOnline ? '🟢' : '🔴',
+                mobile: status.mobile.isOnline ? '🟢' : '🔴',
+                readyForTransfer: status.isReadyForTransfer
+            });
+            // If desktop device (this device) is offline, send immediate ping to update status
+            if (!status.desktop.isOnline && this.socketAdapter) {
+                console.log(`[${AngularRemoteUploadService.COMPONENT}] Desktop detected as offline, sending immediate ping...`);
+                this.callApiWithTimeout('ping', { timestamp: Date.now() }, 5000)
+                    .then(() => {
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] Immediate ping sent, rechecking status...`);
+                    // Recheck status after a short delay
+                    setTimeout(() => this.checkDevicesOnline(), 1000);
+                })
+                    .catch((err) => {
+                    console.warn(`[${AngularRemoteUploadService.COMPONENT}] Immediate ping failed:`, err);
+                });
+            }
+            return status;
+        }
+        catch (error) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Health check failed:`, error.message);
+            // On error, mark both as unknown/offline
+            const status = {
+                desktop: { isOnline: false, deviceId: this.deviceId },
+                mobile: { isOnline: false, deviceId: mobileDeviceId },
+                lastChecked: Date.now(),
+                isReadyForTransfer: false
+            };
+            this.devicesStatus$.next(status);
+            this.isCheckingStatus$.next(false);
+            return status;
+        }
+    }
+    /**
+     * Force an immediate health check
+     */
+    async refreshDevicesStatus() {
+        this.isCheckingStatus$.next(true);
+        return this.checkDevicesOnline();
+    }
+    // ===========================================================================
+    // Channel Subscription & Message Handling
+    // ===========================================================================
+    /**
+     * Subscribe to channel for receiving messages from mobile
+     */
+    subscribeToChannel(channel) {
+        if (this.channelSubscription) {
+            this.channelSubscription.unsubscribe();
+        }
+        if (!this.socketAdapter) {
+            return;
+        }
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Subscribing to channel:`, channel);
+        this.channelSubscription = this.socketAdapter.subscribeToChannel(channel)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (message) => this.handleChannelMessage(message),
+            error: (error) => {
+                console.error(`[${AngularRemoteUploadService.COMPONENT}] Channel error:`, error);
+                this.error$.next(`Channel subscription error: ${error.message}`);
+            }
+        });
+    }
+    /**
+     * Handle incoming channel messages from mobile
+     */
+    handleChannelMessage(message) {
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Received:`, message);
+        // Extract message type and data - handle nested payload structure
+        const payload = message.payload || message.data || message;
+        const type = payload.type || message.type;
+        const data = payload;
+        switch (type) {
+            case 'connectionState':
+                this.handleConnectionState(data);
+                break;
+            case 'mobile-link-established':
+                this.handleMobileLinkEstablished(data);
+                break;
+            case 'file-uploaded':
+            case 'image-uploaded':
+            case 'upload_complete':
+                this.handleUploadComplete(message);
+                break;
+            case 'disconnect':
+            case 'mobile-link-disconnected':
+                this.handleMobileDisconnect(data);
+                break;
+            default:
+                // Check if it's an upload event
+                if (data.file || data.fileName || data.fileUrl) {
+                    this.handleUploadComplete(message);
+                }
+                else {
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] Unknown message type:`, type);
+                }
+        }
+    }
+    /**
+     * Handle mobile-link-established message
+     * This is sent when mobile successfully connects via the backend
+     */
+    handleMobileLinkEstablished(data) {
+        const mobileDeviceId = data.mobileDeviceId;
+        const mobileConnectionId = data.mobileConnectionId;
+        const userId = data.userId;
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Mobile link established:`, {
+            mobileDeviceId,
+            mobileConnectionId,
+            userId
+        });
+        if (mobileDeviceId) {
+            // Save mobile connection
+            const connectionInfo = {
+                mobileDeviceId,
+                connectedAt: Date.now(),
+                lastActivity: Date.now()
+            };
+            this.mobileConnection$.next(connectionInfo);
+            this.saveMobileConnection(connectionInfo);
+            // Update status to connected
+            this.connectionStatus$.next('connected');
+            // Update session
+            const session = this.pairingSession$.value;
+            if (session) {
+                const updatedSession = {
+                    ...session,
+                    mobileDeviceId,
+                    status: 'connected',
+                    lastActivity: Date.now()
+                };
+                this.pairingSession$.next(updatedSession);
+            }
+            // Start health check to monitor device online status
+            this.startHealthCheck();
+            console.log(`[${AngularRemoteUploadService.COMPONENT}] Connection established with mobile device:`, mobileDeviceId);
+        }
+    }
+    /**
+     * Handle connection state messages from mobile
+     */
+    handleConnectionState(data) {
+        const state = data.state || data.connectionState;
+        const mobileDeviceId = data.mobileDeviceId;
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Connection state:`, state, 'from:', mobileDeviceId);
+        if (state === 'INITIATED' && mobileDeviceId) {
+            // Mobile is initiating connection - accept it
+            this.acceptMobileConnection(mobileDeviceId);
+        }
+    }
+    /**
+     * Handle upload complete from mobile
+     * Files are either auto-accepted or added to pending queue based on config
+     */
+    handleUploadComplete(message) {
+        const data = message.data || message.payload || message;
+        // Handle both single file and files array
+        const files = data.files || (data.file ? [data.file] : [data]);
+        for (const file of files) {
+            if (file && (file.s3Url || file.s3Path || file.resourceUrl)) {
+                // Normalize the file object
+                const normalizedFile = {
+                    s3Url: file.s3Url || file.resourceUrl || file.uploadData?.resourceUrl || '',
+                    fileName: file.fileName || file.filename || file.name || file.title || file.uploadData?.fileName || file.uploadData?.photoFilename || 'unknown',
+                    mimeType: file.mimeType || file.type || 'application/octet-stream',
+                    size: file.size || 0,
+                    thumbnailUrl: file.thumbnailUrl,
+                    metadata: file.metadata,
+                    uploadData: file.uploadData
+                };
+                const event = {
+                    file: normalizedFile,
+                    mobileDeviceId: data.mobileDeviceId || this.mobileConnection$.value?.mobileDeviceId || 'unknown',
+                    timestamp: data.timestamp || Date.now(),
+                    sessionId: data.sessionId
+                };
+                // Check if auto-accept is enabled
+                if (this.config?.autoAcceptFiles) {
+                    // Auto-accept: emit to remoteUpload$ (component will show in UI and attach to form)
+                    this.remoteUpload$.next(event);
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] File auto-accepted (showing in UI):`, normalizedFile.fileName);
+                    // Call onFileAccept callback if provided
+                    if (this.config?.onFileAccept) {
+                        this.config.onFileAccept(normalizedFile);
+                    }
+                }
+                else {
+                    // Auto-accept OFF: Only call callback, don't show in UI or attach to form
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] File received (not auto-accepting, callback only):`, normalizedFile.fileName);
+                    // Call onFileAccept callback if provided (host app handles display/processing)
+                    if (this.config?.onFileAccept) {
+                        this.config.onFileAccept(normalizedFile);
+                    }
+                    // Note: File is NOT added to pending queue or emitted to remoteUpload$
+                    // The host app's onFileAccept callback is responsible for handling the file
+                }
+            }
+        }
+        // Update last activity
+        const conn = this.mobileConnection$.value;
+        if (conn) {
+            const updated = { ...conn, lastActivity: Date.now() };
+            this.mobileConnection$.next(updated);
+            this.saveMobileConnection(updated);
+        }
+        // Reset waiting state - files received
+        this.isWaitingForUpload$.next(false);
+    }
+    /**
+     * Handle mobile disconnect
+     */
+    handleMobileDisconnect(data) {
+        console.log(`[${AngularRemoteUploadService.COMPONENT}] Mobile disconnected:`, data);
+        this.mobileConnection$.next(null);
+        this.connectionStatus$.next('disconnected');
+        this.clearMobileConnection();
+        // Update session
+        const session = this.pairingSession$.value;
+        if (session) {
+            this.pairingSession$.next({
+                ...session,
+                status: 'disconnected',
+                lastActivity: Date.now()
+            });
+        }
+    }
+    // ===========================================================================
+    // Storage
+    // ===========================================================================
+    /**
+     * Save mobile connection to localStorage
+     */
+    saveMobileConnection(info) {
+        try {
+            localStorage.setItem(AngularRemoteUploadService.MOBILE_CONNECTION_KEY, JSON.stringify(info));
+        }
+        catch (e) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Failed to save connection:`, e);
+        }
+    }
+    /**
+     * Restore mobile connection from localStorage
+     */
+    restoreMobileConnection() {
+        try {
+            const stored = localStorage.getItem(AngularRemoteUploadService.MOBILE_CONNECTION_KEY) ??
+                localStorage.getItem(AngularRemoteUploadService.LEGACY_MOBILE_CONNECTION_KEY);
+            if (stored) {
+                const info = JSON.parse(stored);
+                // Only restore if connected within last 24 hours
+                if (Date.now() - info.lastActivity < DEFAULT_PAIRING_TTL) {
+                    this.mobileConnection$.next(info);
+                    // Also restore connection status so UI shows connected state
+                    this.connectionStatus$.next('connected');
+                    // Migrate legacy key if present
+                    this.saveMobileConnection(info);
+                    localStorage.removeItem(AngularRemoteUploadService.LEGACY_MOBILE_CONNECTION_KEY);
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] Restored mobile connection from localStorage:`, info.mobileDeviceId);
+                }
+                else {
+                    console.log(`[${AngularRemoteUploadService.COMPONENT}] Stored connection expired, clearing`);
+                    this.clearMobileConnection();
+                }
+            }
+        }
+        catch (e) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Failed to restore connection:`, e);
+        }
+    }
+    /**
+     * Clear mobile connection from localStorage
+     */
+    clearMobileConnection() {
+        try {
+            localStorage.removeItem(AngularRemoteUploadService.MOBILE_CONNECTION_KEY);
+            localStorage.removeItem(AngularRemoteUploadService.LEGACY_MOBILE_CONNECTION_KEY);
+        }
+        catch (e) {
+            console.warn(`[${AngularRemoteUploadService.COMPONENT}] Failed to clear connection:`, e);
+        }
+    }
+    // ===========================================================================
+    // HTTP API
+    // ===========================================================================
+    /**
+     * Call HTTP API endpoint
+     */
+    callHttpApi(endpoint, data) {
+        return new Promise((resolve, reject) => {
+            this.http.post(endpoint, data)
+                .pipe(take(1), timeout(30000))
+                .subscribe({
+                next: resolve,
+                error: reject
+            });
+        });
+    }
+    // ===========================================================================
+    // Cleanup
+    // ===========================================================================
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.channelSubscription) {
+            this.channelSubscription.unsubscribe();
+        }
+        if (this.healthCheckSubscription) {
+            this.healthCheckSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularRemoteUploadService, deps: [{ token: i3$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularRemoteUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularRemoteUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i3$3.HttpClient }] });
+
+class AngularQrCodeDialogComponent {
+    dialogRef;
+    data;
+    remoteUploadService;
+    qrData = '';
+    expiresAt = 0;
+    remainingTime = '';
+    isLoading = true;
+    isExpired = false;
+    isConnected = false;
+    errorMessage = null;
+    connectionStatus = 'disconnected';
+    // Device IDs
+    desktopDeviceId = '';
+    mobileDeviceId = null;
+    // Device online status
+    devicesStatus = null;
+    isCheckingStatus = false; // For blinking indicator
+    destroy$ = new Subject();
+    countdownSubscription = null;
+    constructor(dialogRef, data, remoteUploadService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.remoteUploadService = remoteUploadService;
+    }
+    ngOnInit() {
+        // Get desktop device ID
+        this.desktopDeviceId = this.remoteUploadService.getDesktopDeviceId();
+        // Subscribe to events first
+        this.subscribeToEvents();
+        // Check if already connected to mobile
+        this.checkExistingConnection();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.countdownSubscription) {
+            this.countdownSubscription.unsubscribe();
+        }
+    }
+    /**
+     * Check if there's an existing mobile connection
+     */
+    checkExistingConnection() {
+        this.mobileDeviceId = this.remoteUploadService.getMobileDeviceId();
+        if (this.remoteUploadService.isConnectedToMobile()) {
+            this.isConnected = true;
+            this.connectionStatus = 'connected';
+            this.isLoading = false;
+        }
+        else {
+            // No existing connection, generate QR code
+            this.generateQrCode();
+        }
+    }
+    async generateQrCode() {
+        this.isLoading = true;
+        this.errorMessage = null;
+        this.isExpired = false;
+        try {
+            const result = await this.remoteUploadService.generateQrCode();
+            this.qrData = result.qrData;
+            this.expiresAt = result.expiresAt;
+            this.isLoading = false;
+            this.startCountdown();
+        }
+        catch (error) {
+            this.isLoading = false;
+            this.errorMessage = error.message || 'Failed to generate QR code';
+        }
+    }
+    subscribeToEvents() {
+        // Connection status
+        this.remoteUploadService.getConnectionStatus()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(status => {
+            this.connectionStatus = status;
+            this.isConnected = status === 'connected';
+        });
+        // Mobile connection changes
+        this.remoteUploadService.getMobileConnection()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(connection => {
+            this.mobileDeviceId = connection?.mobileDeviceId || null;
+        });
+        // Device online status
+        this.remoteUploadService.getDevicesStatus()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(status => {
+            this.devicesStatus = status;
+        });
+        // Checking status (for blinking indicator)
+        this.remoteUploadService.getIsCheckingStatus()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(checking => {
+            this.isCheckingStatus = checking;
+        });
+        // Errors
+        this.remoteUploadService.getErrors()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(error => {
+            console.error('[AngularQrCodeDialog] Error:', error);
+        });
+    }
+    startCountdown() {
+        if (this.countdownSubscription) {
+            this.countdownSubscription.unsubscribe();
+        }
+        this.countdownSubscription = interval(1000)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            const now = Date.now();
+            const remaining = Math.max(0, this.expiresAt - now);
+            if (remaining <= 0) {
+                this.isExpired = true;
+                this.remainingTime = 'Expired';
+                this.countdownSubscription?.unsubscribe();
+            }
+            else {
+                const minutes = Math.floor(remaining / 60000);
+                const seconds = Math.floor((remaining % 60000) / 1000);
+                this.remainingTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+            }
+        });
+    }
+    // ---------------------------------------------------------------------------
+    // Public Methods
+    // ---------------------------------------------------------------------------
+    /**
+     * Format device ID for display
+     */
+    formatDeviceId(id) {
+        if (!id)
+            return '---';
+        if (id.length > 16) {
+            return `${id.slice(0, 8)}...${id.slice(-4)}`;
+        }
+        return id;
+    }
+    /**
+     * Refresh QR code
+     */
+    refreshQrCode() {
+        this.isExpired = false;
+        this.generateQrCode();
+    }
+    /**
+     * Connect to mobile (show QR if disconnected)
+     */
+    connectToMobile() {
+        this.generateQrCode();
+    }
+    /**
+     * Disconnect from mobile
+     */
+    disconnect() {
+        this.remoteUploadService.disconnect();
+        this.mobileDeviceId = null;
+        this.isConnected = false;
+        this.connectionStatus = 'disconnected';
+        this.devicesStatus = null;
+    }
+    /**
+     * Refresh device status
+     */
+    refreshStatus() {
+        this.remoteUploadService.refreshDevicesStatus();
+    }
+    /**
+     * Get desktop online status indicator class
+     * Returns: 'online' (green), 'offline' (red), 'checking' (blinking yellow)
+     */
+    getDesktopStatusClass() {
+        if (this.isCheckingStatus && !this.devicesStatus) {
+            return 'checking';
+        }
+        return this.devicesStatus?.desktop?.isOnline ? 'online' : 'offline';
+    }
+    /**
+     * Get mobile online status indicator class
+     * Returns: 'online' (green), 'offline' (red), 'checking' (blinking yellow)
+     */
+    getMobileStatusClass() {
+        if (this.isCheckingStatus && !this.devicesStatus) {
+            return 'checking';
+        }
+        return this.devicesStatus?.mobile?.isOnline ? 'online' : 'offline';
+    }
+    /**
+     * Check if ready for transfer (both devices online)
+     */
+    isReadyForTransfer() {
+        return this.devicesStatus?.isReadyForTransfer ?? false;
+    }
+    /**
+     * Close dialog
+     */
+    close() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularQrCodeDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: AngularRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AngularQrCodeDialogComponent, isStandalone: false, selector: "angular-qr-code-dialog", ngImport: i0, template: "<div class=\"qr-dialog-container\">\n  <!-- Header -->\n  <div class=\"qr-dialog-header\">\n    <h2 class=\"qr-dialog-title\">{{ data.title || 'Upload from Mobile' }}</h2>\n    <p class=\"qr-dialog-subtitle\">{{ data.subtitle || 'Scan this QR code with your mobile device to upload images' }}</p>\n    <button mat-icon-button class=\"close-btn\" (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"qr-dialog-content\">\n    <!-- Loading State -->\n    <div *ngIf=\"isLoading\" class=\"loading-container\">\n      <mat-spinner diameter=\"48\"></mat-spinner>\n      <p>Generating QR Code...</p>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"errorMessage && !isLoading\" class=\"error-container\">\n      <mat-icon class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"refreshQrCode()\">\n        Try Again\n      </button>\n    </div>\n\n    <!-- Main Content -->\n    <div *ngIf=\"!isLoading && !errorMessage\" class=\"qr-content\">\n      \n      <!-- Device Info Card -->\n      <div class=\"device-info-card\">\n        <div class=\"device-row\">\n          <div class=\"device-status-dot\" [ngClass]=\"getDesktopStatusClass()\"></div>\n          <mat-icon class=\"device-icon desktop\">computer</mat-icon>\n          <div class=\"device-details\">\n            <span class=\"device-label\">THIS DEVICE</span>\n            <span class=\"device-id\" [title]=\"desktopDeviceId\">{{ formatDeviceId(desktopDeviceId) }}</span>\n          </div>\n        </div>\n        \n        <div class=\"connection-line\" *ngIf=\"mobileDeviceId\">\n          <mat-icon>sync_alt</mat-icon>\n        </div>\n        \n        <div class=\"device-row\" *ngIf=\"mobileDeviceId\">\n          <div class=\"device-status-dot\" [ngClass]=\"getMobileStatusClass()\"></div>\n          <mat-icon class=\"device-icon mobile\">smartphone</mat-icon>\n          <div class=\"device-details\">\n            <span class=\"device-label\">CONNECTED MOBILE</span>\n            <span class=\"device-id\" [title]=\"mobileDeviceId\">{{ formatDeviceId(mobileDeviceId) }}</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Transfer Status -->\n      <div *ngIf=\"isConnected && devicesStatus\" class=\"transfer-status\" [ngClass]=\"{'ready': isReadyForTransfer(), 'not-ready': !isReadyForTransfer()}\">\n        <mat-icon>{{ isReadyForTransfer() ? 'check_circle' : 'warning' }}</mat-icon>\n        <span *ngIf=\"isReadyForTransfer()\">Ready for transfer</span>\n        <span *ngIf=\"!isReadyForTransfer()\">\n          {{ !devicesStatus.mobile?.isOnline ? 'Mobile device is offline' : 'Desktop device is offline' }}\n        </span>\n        <button mat-icon-button class=\"refresh-status-btn\" (click)=\"refreshStatus()\" [disabled]=\"isCheckingStatus\" title=\"Refresh status\">\n          <mat-icon [class.spinning]=\"isCheckingStatus\">refresh</mat-icon>\n        </button>\n      </div>\n\n      <!-- Connected State -->\n      <div *ngIf=\"isConnected\" class=\"connected-state\">\n        <div class=\"connected-indicator\">\n          <mat-icon class=\"success-icon\">check_circle</mat-icon>\n          <span>Mobile Connected!</span>\n        </div>\n        <p class=\"connected-message\">\n          Your mobile device is now paired with this desktop. Click <strong>\"Done\"</strong> below to close this dialog, \n          then click <strong>\"Upload from Mobile\"</strong> whenever you want to upload files.\n        </p>\n      </div>\n\n      <!-- QR Code (only show when not connected) -->\n      <div *ngIf=\"!isConnected\" class=\"qr-section\">\n        <!-- Connection Status -->\n        <div class=\"connection-status\" [ngClass]=\"connectionStatus\">\n          <div class=\"status-indicator\"></div>\n          <span *ngIf=\"connectionStatus === 'disconnected'\">Waiting for mobile...</span>\n          <span *ngIf=\"connectionStatus === 'pending'\">Waiting for connection...</span>\n        </div>\n\n        <!-- QR Code -->\n        <div class=\"qr-code-wrapper\" [class.expired]=\"isExpired\">\n          <qrcode \n            *ngIf=\"qrData\"\n            [qrdata]=\"qrData\" \n            [width]=\"data.qrSize || 200\" \n            [errorCorrectionLevel]=\"'M'\"\n            [elementType]=\"'canvas'\"\n            [cssClass]=\"'qr-canvas'\"\n          ></qrcode>\n          \n          <!-- Expired Overlay -->\n          <div *ngIf=\"isExpired\" class=\"expired-overlay\">\n            <mat-icon>refresh</mat-icon>\n            <p>QR Code Expired</p>\n            <button mat-raised-button color=\"primary\" (click)=\"refreshQrCode()\">\n              Generate New Code\n            </button>\n          </div>\n        </div>\n\n        <!-- Countdown Timer -->\n        <div class=\"countdown\" *ngIf=\"data.showCountdown !== false && !isExpired\">\n          <mat-icon>timer</mat-icon>\n          <span>Expires in {{ remainingTime }}</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"qr-dialog-footer\" *ngIf=\"!isLoading\">\n    <button mat-button style=\"width: 100%;\" *ngIf=\"!isConnected\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button style=\"width: 100%;\" *ngIf=\"isConnected\" color=\"primary\" (click)=\"close()\">\n      Done\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;width:100%;background:#fff;border-radius:16px;overflow:hidden}.qr-dialog-header{position:relative;padding:24px 24px 16px;text-align:center;border-bottom:1px solid #f0f0f0}.qr-dialog-title{margin:0 0 8px;font-size:20px;font-weight:600;color:#1a1a1a}.qr-dialog-subtitle{margin:0;font-size:14px;color:#666;line-height:1.4}.close-btn{position:absolute;top:12px;right:12px;color:#999}.qr-dialog-content{padding:24px;display:flex;flex-direction:column;align-items:center;min-height:300px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:250px;color:#666}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:250px;text-align:center}.error-icon{font-size:48px;width:48px;height:48px;color:#f44336}.error-message{color:#666;margin:0}.qr-content{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.qr-section{gap:10px;display:flex;flex-direction:column}.device-info-section{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;margin-bottom:8px}.device-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;background:#fff;border-radius:10px;min-width:120px;box-shadow:0 2px 8px #0000000f;transition:all .3s ease}.device-card.this-device{border:2px solid #2196f3}.device-card.connected-device{border:2px dashed #9e9e9e}.device-card.connected-device.active{border:2px solid #4caf50}.device-label{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.device-card.this-device .device-label{color:#2196f3}.device-card.connected-device .device-label{color:#9e9e9e}.device-card.connected-device.active .device-label{color:#4caf50}.device-label mat-icon{font-size:14px;width:14px;height:14px}.device-id{font-family:SF Mono,Monaco,Courier New,monospace;font-size:13px;font-weight:600;color:#333;letter-spacing:.5px}.device-id.waiting{color:#9e9e9e;font-style:italic;font-weight:400}.connection-line{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 8px}.connection-line .line{width:40px;height:2px;background:#e0e0e0;border-radius:1px;position:relative;overflow:hidden}.connection-line.waiting .line:after{content:\"\";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,#2196f3,transparent);animation:shimmer 1.5s infinite}.connection-line.connected .line{background:#4caf50}.connection-line mat-icon{font-size:16px;width:16px;height:16px;color:#9e9e9e}.connection-line.waiting mat-icon{color:#ff9800;animation:blink 1s infinite}.connection-line.connected mat-icon{color:#4caf50}@keyframes shimmer{0%{left:-100%}to{left:200%}}.connection-status{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500}.connection-status .status-indicator{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.connection-status.disconnected{background:#f5f5f5;color:#666}.connection-status.disconnected .status-indicator{background:#999}.connection-status.pending{background:#fff3e0;color:#e65100}.connection-status.pending .status-indicator{background:#ff9800}.connection-status.connected{background:#e8f5e9;color:#2e7d32}.connection-status.connected .status-indicator{background:#4caf50;animation:none}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.qr-code-wrapper{position:relative;padding:16px;background:#f8f9fa;border-radius:12px;border:2px solid #e0e0e0;transition:all .3s ease}.qr-code-wrapper.expired{opacity:.5}.qr-code-wrapper.connected{border-color:#4caf50;background:#f1f8f4}.qr-canvas{display:block;width:200px;height:200px}.expired-overlay,.connected-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fffffff2;border-radius:10px}.expired-overlay mat-icon{font-size:40px;width:40px;height:40px;color:#999}.expired-overlay p{margin:0;color:#666;font-weight:500}.connected-overlay .success-icon{font-size:56px;width:56px;height:56px;color:#4caf50}.connected-overlay p{margin:0;color:#2e7d32;font-size:16px;font-weight:600}.pairing-code-section{text-align:center}.pairing-label{margin:0 0 8px;font-size:13px;color:#666}.pairing-code{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f5f5f5;border-radius:8px;cursor:pointer;transition:background .2s ease}.pairing-code:hover{background:#eee}.pairing-code .code{font-family:SF Mono,Monaco,Courier New,monospace;font-size:18px;font-weight:600;letter-spacing:2px;color:#1a1a1a}.pairing-code .copy-icon{font-size:18px;width:18px;height:18px;color:#666}.countdown{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}.countdown mat-icon{font-size:18px;width:18px;height:18px}.qr-dialog-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #f0f0f0;background:#fafafa}.device-info-card{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;margin-bottom:8px}.device-info-card .device-row{display:flex;align-items:center;gap:10px;flex:0 0 auto}.device-info-card .device-icon{font-size:24px;width:24px;height:24px}.device-info-card .device-icon.desktop{color:#1976d2}.device-info-card .device-icon.mobile{color:#7b1fa2}.device-info-card .device-details{display:flex;flex-direction:column;gap:2px}.device-info-card .device-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#666}.device-info-card .device-id{font-family:SF Mono,Monaco,Courier New,monospace;font-size:12px;font-weight:500;color:#333;cursor:default}.device-info-card .connection-line{display:flex;align-items:center;padding:0 4px}.device-info-card .connection-line mat-icon{font-size:18px;width:18px;height:18px;color:#4caf50}@media (max-width: 400px){.qr-dialog-container{min-width:100%;border-radius:0}.qr-canvas{width:180px;height:180px}.device-info-section,.device-info-card{flex-direction:column;gap:8px}.device-info-card .connection-line,.connection-line{transform:rotate(90deg)}.device-card{min-width:100%}}.device-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.device-status-dot.online{background-color:#4caf50;box-shadow:0 0 6px #4caf5080}.device-status-dot.offline{background-color:#f44336;box-shadow:0 0 6px #f4433680}.device-status-dot.checking{background-color:#ff9800;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.transfer-status{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500}.transfer-status.ready{background-color:#e8f5e9;color:#2e7d32}.transfer-status.ready mat-icon{color:#4caf50}.transfer-status.not-ready{background-color:#fff3e0;color:#e65100}.transfer-status.not-ready mat-icon{color:#ff9800}.refresh-status-btn{margin-left:auto;width:28px;height:28px;line-height:28px;padding:2px}.refresh-status-btn mat-icon{font-size:18px;width:18px;height:18px}.refresh-status-btn mat-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connected-indicator{display:flex;justify-content:start;align-items:center;gap:5px;margin-bottom:10px;margin-left:-2px}\n"], dependencies: [{ kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularQrCodeDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-qr-code-dialog', standalone: false, template: "<div class=\"qr-dialog-container\">\n  <!-- Header -->\n  <div class=\"qr-dialog-header\">\n    <h2 class=\"qr-dialog-title\">{{ data.title || 'Upload from Mobile' }}</h2>\n    <p class=\"qr-dialog-subtitle\">{{ data.subtitle || 'Scan this QR code with your mobile device to upload images' }}</p>\n    <button mat-icon-button class=\"close-btn\" (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"qr-dialog-content\">\n    <!-- Loading State -->\n    <div *ngIf=\"isLoading\" class=\"loading-container\">\n      <mat-spinner diameter=\"48\"></mat-spinner>\n      <p>Generating QR Code...</p>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"errorMessage && !isLoading\" class=\"error-container\">\n      <mat-icon class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"refreshQrCode()\">\n        Try Again\n      </button>\n    </div>\n\n    <!-- Main Content -->\n    <div *ngIf=\"!isLoading && !errorMessage\" class=\"qr-content\">\n      \n      <!-- Device Info Card -->\n      <div class=\"device-info-card\">\n        <div class=\"device-row\">\n          <div class=\"device-status-dot\" [ngClass]=\"getDesktopStatusClass()\"></div>\n          <mat-icon class=\"device-icon desktop\">computer</mat-icon>\n          <div class=\"device-details\">\n            <span class=\"device-label\">THIS DEVICE</span>\n            <span class=\"device-id\" [title]=\"desktopDeviceId\">{{ formatDeviceId(desktopDeviceId) }}</span>\n          </div>\n        </div>\n        \n        <div class=\"connection-line\" *ngIf=\"mobileDeviceId\">\n          <mat-icon>sync_alt</mat-icon>\n        </div>\n        \n        <div class=\"device-row\" *ngIf=\"mobileDeviceId\">\n          <div class=\"device-status-dot\" [ngClass]=\"getMobileStatusClass()\"></div>\n          <mat-icon class=\"device-icon mobile\">smartphone</mat-icon>\n          <div class=\"device-details\">\n            <span class=\"device-label\">CONNECTED MOBILE</span>\n            <span class=\"device-id\" [title]=\"mobileDeviceId\">{{ formatDeviceId(mobileDeviceId) }}</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Transfer Status -->\n      <div *ngIf=\"isConnected && devicesStatus\" class=\"transfer-status\" [ngClass]=\"{'ready': isReadyForTransfer(), 'not-ready': !isReadyForTransfer()}\">\n        <mat-icon>{{ isReadyForTransfer() ? 'check_circle' : 'warning' }}</mat-icon>\n        <span *ngIf=\"isReadyForTransfer()\">Ready for transfer</span>\n        <span *ngIf=\"!isReadyForTransfer()\">\n          {{ !devicesStatus.mobile?.isOnline ? 'Mobile device is offline' : 'Desktop device is offline' }}\n        </span>\n        <button mat-icon-button class=\"refresh-status-btn\" (click)=\"refreshStatus()\" [disabled]=\"isCheckingStatus\" title=\"Refresh status\">\n          <mat-icon [class.spinning]=\"isCheckingStatus\">refresh</mat-icon>\n        </button>\n      </div>\n\n      <!-- Connected State -->\n      <div *ngIf=\"isConnected\" class=\"connected-state\">\n        <div class=\"connected-indicator\">\n          <mat-icon class=\"success-icon\">check_circle</mat-icon>\n          <span>Mobile Connected!</span>\n        </div>\n        <p class=\"connected-message\">\n          Your mobile device is now paired with this desktop. Click <strong>\"Done\"</strong> below to close this dialog, \n          then click <strong>\"Upload from Mobile\"</strong> whenever you want to upload files.\n        </p>\n      </div>\n\n      <!-- QR Code (only show when not connected) -->\n      <div *ngIf=\"!isConnected\" class=\"qr-section\">\n        <!-- Connection Status -->\n        <div class=\"connection-status\" [ngClass]=\"connectionStatus\">\n          <div class=\"status-indicator\"></div>\n          <span *ngIf=\"connectionStatus === 'disconnected'\">Waiting for mobile...</span>\n          <span *ngIf=\"connectionStatus === 'pending'\">Waiting for connection...</span>\n        </div>\n\n        <!-- QR Code -->\n        <div class=\"qr-code-wrapper\" [class.expired]=\"isExpired\">\n          <qrcode \n            *ngIf=\"qrData\"\n            [qrdata]=\"qrData\" \n            [width]=\"data.qrSize || 200\" \n            [errorCorrectionLevel]=\"'M'\"\n            [elementType]=\"'canvas'\"\n            [cssClass]=\"'qr-canvas'\"\n          ></qrcode>\n          \n          <!-- Expired Overlay -->\n          <div *ngIf=\"isExpired\" class=\"expired-overlay\">\n            <mat-icon>refresh</mat-icon>\n            <p>QR Code Expired</p>\n            <button mat-raised-button color=\"primary\" (click)=\"refreshQrCode()\">\n              Generate New Code\n            </button>\n          </div>\n        </div>\n\n        <!-- Countdown Timer -->\n        <div class=\"countdown\" *ngIf=\"data.showCountdown !== false && !isExpired\">\n          <mat-icon>timer</mat-icon>\n          <span>Expires in {{ remainingTime }}</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"qr-dialog-footer\" *ngIf=\"!isLoading\">\n    <button mat-button style=\"width: 100%;\" *ngIf=\"!isConnected\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button style=\"width: 100%;\" *ngIf=\"isConnected\" color=\"primary\" (click)=\"close()\">\n      Done\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;width:100%;background:#fff;border-radius:16px;overflow:hidden}.qr-dialog-header{position:relative;padding:24px 24px 16px;text-align:center;border-bottom:1px solid #f0f0f0}.qr-dialog-title{margin:0 0 8px;font-size:20px;font-weight:600;color:#1a1a1a}.qr-dialog-subtitle{margin:0;font-size:14px;color:#666;line-height:1.4}.close-btn{position:absolute;top:12px;right:12px;color:#999}.qr-dialog-content{padding:24px;display:flex;flex-direction:column;align-items:center;min-height:300px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:250px;color:#666}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:250px;text-align:center}.error-icon{font-size:48px;width:48px;height:48px;color:#f44336}.error-message{color:#666;margin:0}.qr-content{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.qr-section{gap:10px;display:flex;flex-direction:column}.device-info-section{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;margin-bottom:8px}.device-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;background:#fff;border-radius:10px;min-width:120px;box-shadow:0 2px 8px #0000000f;transition:all .3s ease}.device-card.this-device{border:2px solid #2196f3}.device-card.connected-device{border:2px dashed #9e9e9e}.device-card.connected-device.active{border:2px solid #4caf50}.device-label{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.device-card.this-device .device-label{color:#2196f3}.device-card.connected-device .device-label{color:#9e9e9e}.device-card.connected-device.active .device-label{color:#4caf50}.device-label mat-icon{font-size:14px;width:14px;height:14px}.device-id{font-family:SF Mono,Monaco,Courier New,monospace;font-size:13px;font-weight:600;color:#333;letter-spacing:.5px}.device-id.waiting{color:#9e9e9e;font-style:italic;font-weight:400}.connection-line{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 8px}.connection-line .line{width:40px;height:2px;background:#e0e0e0;border-radius:1px;position:relative;overflow:hidden}.connection-line.waiting .line:after{content:\"\";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,#2196f3,transparent);animation:shimmer 1.5s infinite}.connection-line.connected .line{background:#4caf50}.connection-line mat-icon{font-size:16px;width:16px;height:16px;color:#9e9e9e}.connection-line.waiting mat-icon{color:#ff9800;animation:blink 1s infinite}.connection-line.connected mat-icon{color:#4caf50}@keyframes shimmer{0%{left:-100%}to{left:200%}}.connection-status{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500}.connection-status .status-indicator{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.connection-status.disconnected{background:#f5f5f5;color:#666}.connection-status.disconnected .status-indicator{background:#999}.connection-status.pending{background:#fff3e0;color:#e65100}.connection-status.pending .status-indicator{background:#ff9800}.connection-status.connected{background:#e8f5e9;color:#2e7d32}.connection-status.connected .status-indicator{background:#4caf50;animation:none}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.qr-code-wrapper{position:relative;padding:16px;background:#f8f9fa;border-radius:12px;border:2px solid #e0e0e0;transition:all .3s ease}.qr-code-wrapper.expired{opacity:.5}.qr-code-wrapper.connected{border-color:#4caf50;background:#f1f8f4}.qr-canvas{display:block;width:200px;height:200px}.expired-overlay,.connected-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fffffff2;border-radius:10px}.expired-overlay mat-icon{font-size:40px;width:40px;height:40px;color:#999}.expired-overlay p{margin:0;color:#666;font-weight:500}.connected-overlay .success-icon{font-size:56px;width:56px;height:56px;color:#4caf50}.connected-overlay p{margin:0;color:#2e7d32;font-size:16px;font-weight:600}.pairing-code-section{text-align:center}.pairing-label{margin:0 0 8px;font-size:13px;color:#666}.pairing-code{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f5f5f5;border-radius:8px;cursor:pointer;transition:background .2s ease}.pairing-code:hover{background:#eee}.pairing-code .code{font-family:SF Mono,Monaco,Courier New,monospace;font-size:18px;font-weight:600;letter-spacing:2px;color:#1a1a1a}.pairing-code .copy-icon{font-size:18px;width:18px;height:18px;color:#666}.countdown{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}.countdown mat-icon{font-size:18px;width:18px;height:18px}.qr-dialog-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #f0f0f0;background:#fafafa}.device-info-card{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;margin-bottom:8px}.device-info-card .device-row{display:flex;align-items:center;gap:10px;flex:0 0 auto}.device-info-card .device-icon{font-size:24px;width:24px;height:24px}.device-info-card .device-icon.desktop{color:#1976d2}.device-info-card .device-icon.mobile{color:#7b1fa2}.device-info-card .device-details{display:flex;flex-direction:column;gap:2px}.device-info-card .device-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#666}.device-info-card .device-id{font-family:SF Mono,Monaco,Courier New,monospace;font-size:12px;font-weight:500;color:#333;cursor:default}.device-info-card .connection-line{display:flex;align-items:center;padding:0 4px}.device-info-card .connection-line mat-icon{font-size:18px;width:18px;height:18px;color:#4caf50}@media (max-width: 400px){.qr-dialog-container{min-width:100%;border-radius:0}.qr-canvas{width:180px;height:180px}.device-info-section,.device-info-card{flex-direction:column;gap:8px}.device-info-card .connection-line,.connection-line{transform:rotate(90deg)}.device-card{min-width:100%}}.device-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.device-status-dot.online{background-color:#4caf50;box-shadow:0 0 6px #4caf5080}.device-status-dot.offline{background-color:#f44336;box-shadow:0 0 6px #f4433680}.device-status-dot.checking{background-color:#ff9800;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.transfer-status{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500}.transfer-status.ready{background-color:#e8f5e9;color:#2e7d32}.transfer-status.ready mat-icon{color:#4caf50}.transfer-status.not-ready{background-color:#fff3e0;color:#e65100}.transfer-status.not-ready mat-icon{color:#ff9800}.refresh-status-btn{margin-left:auto;width:28px;height:28px;line-height:28px;padding:2px}.refresh-status-btn mat-icon{font-size:18px;width:18px;height:18px}.refresh-status-btn mat-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connected-indicator{display:flex;justify-content:start;align-items:center;gap:5px;margin-bottom:10px;margin-left:-2px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: AngularRemoteUploadService }] });
+
+class TimeAgoPipe {
+    transform(timestamp, format = 'short') {
+        if (!timestamp) {
+            return 'Never';
+        }
+        const secondsAgo = Math.floor((Date.now() - timestamp) / 1000);
+        if (format === 'long') {
+            // For connection duration
+            const minutes = Math.floor(secondsAgo / 60);
+            const hours = Math.floor(minutes / 60);
+            if (hours > 0) {
+                const remainingMinutes = minutes % 60;
+                return `${hours}h ${remainingMinutes}m`;
+            }
+            else if (minutes > 0) {
+                return `${minutes}m`;
+            }
+            else {
+                return 'Just now';
+            }
+        }
+        else {
+            // For last ping
+            if (secondsAgo < 10) {
+                return 'Just now';
+            }
+            else if (secondsAgo < 60) {
+                return `${secondsAgo}s ago`;
+            }
+            else {
+                const minutesAgo = Math.floor(secondsAgo / 60);
+                return `${minutesAgo}m ago`;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: TimeAgoPipe, isStandalone: false, name: "timeAgo" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TimeAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeAgo',
+                    standalone: false,
+                    pure: true
+                }]
+        }] });
+
+class AngularViewConnectionDialogComponent {
+    dialogRef;
+    data;
+    remoteUploadService;
+    destroy$ = new Subject();
+    mobileConnection = null;
+    devicesStatus = null;
+    isCheckingStatus = false;
+    disconnecting = false;
+    constructor(dialogRef, data, remoteUploadService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.remoteUploadService = remoteUploadService;
+    }
+    ngOnInit() {
+        // Subscribe to mobile connection info
+        this.remoteUploadService.getMobileConnection()
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(connection => {
+            this.mobileConnection = connection;
+            // If connection is lost, close dialog
+            if (!connection) {
+                this.dialogRef.close('disconnected');
+            }
+        });
+        // Subscribe to devices status
+        this.remoteUploadService.getDevicesStatus()
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(status => {
+            this.devicesStatus = status;
+        });
+        // Subscribe to checking status
+        this.remoteUploadService.getIsCheckingStatus()
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(checking => {
+            this.isCheckingStatus = checking;
+        });
+        // Refresh status on open
+        this.refreshStatus();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Refresh device online status
+     */
+    async refreshStatus() {
+        await this.remoteUploadService.refreshDevicesStatus();
+    }
+    /**
+     * Disconnect from mobile device
+     */
+    async disconnect() {
+        this.disconnecting = true;
+        try {
+            await this.remoteUploadService.disconnect();
+            this.dialogRef.close('disconnected');
+        }
+        catch (error) {
+            console.error('Disconnect failed:', error);
+            this.disconnecting = false;
+        }
+    }
+    /**
+     * Close dialog without disconnecting
+     */
+    close() {
+        this.dialogRef.close();
+    }
+    /**
+     * Truncate device ID to show first 8 and last 8 characters
+     */
+    truncateDeviceId(deviceId) {
+        if (!deviceId || deviceId.length <= 20) {
+            return deviceId;
+        }
+        return `${deviceId.substring(0, 8)}...${deviceId.substring(deviceId.length - 8)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularViewConnectionDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: AngularRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularViewConnectionDialogComponent, isStandalone: false, selector: "angular-view-connection-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h2 mat-dialog-title>{{ data.title || 'Mobile Connection' }}</h2>\n    <button mat-icon-button class=\"close-btn\" (click)=\"close()\" tabindex=\"-1\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (mobileConnection) {\n      <!-- Connection Info Card -->\n      <div class=\"connection-card elevation-card\">\n        <div class=\"connection-header\">\n          <div class=\"status-indicator\" [class.online]=\"devicesStatus?.isReadyForTransfer\" [class.blinking]=\"isCheckingStatus\">\n            <mat-icon>{{ devicesStatus?.isReadyForTransfer ? 'check_circle' : 'error' }}</mat-icon>\n            <span class=\"status-text\">\n              {{ devicesStatus?.isReadyForTransfer ? 'Connected' : 'Connection Issue' }}\n            </span>\n          </div>\n          <button \n            mat-stroked-button\n            color=\"primary\" \n            class=\"refresh-btn\"\n            (click)=\"refreshStatus()\"\n            [disabled]=\"isCheckingStatus\">\n            <mat-icon [class.spinning]=\"isCheckingStatus\">refresh</mat-icon>\n            <span class=\"refresh-text\">Refresh</span>\n          </button>\n        </div>\n\n        <div class=\"connection-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Mobile Device ID</span>\n            <span class=\"detail-value\">{{ truncateDeviceId(mobileConnection.mobileDeviceId) }}</span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Connected For</span>\n            <span class=\"detail-value\">{{ mobileConnection.connectedAt | timeAgo:'long' }}</span>\n          </div>\n          @if (mobileConnection.connectedAt) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Connected At</span>\n              <span class=\"detail-value\">{{ mobileConnection.connectedAt | date:'short' }}</span>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Devices Status Card -->\n      @if (devicesStatus) {\n        <div class=\"devices-status-card elevation-card\">\n          <h3 class=\"card-title\">Device Status</h3>\n          \n          <div class=\"device-status-row\">\n            <div class=\"device-info\">\n              <mat-icon class=\"device-icon\">computer</mat-icon>\n              <div class=\"device-details\">\n                <div class=\"device-name\">Desktop</div>\n                <div class=\"device-id\">{{ truncateDeviceId(devicesStatus.desktop.deviceId) }}</div>\n              </div>\n            </div>\n            <div class=\"device-status-info\">\n              <div class=\"status-badge\" [class.online]=\"devicesStatus.desktop.isOnline\">\n                <mat-icon>{{ devicesStatus.desktop.isOnline ? 'circle' : 'cancel' }}</mat-icon>\n                <span>{{ devicesStatus.desktop.isOnline ? 'Online' : 'Offline' }}</span>\n              </div>\n              @if (devicesStatus.desktop.lastPing) {\n                <div class=\"last-ping\">{{ devicesStatus.desktop.lastPing | timeAgo }}</div>\n              }\n            </div>\n          </div>\n\n          <mat-divider></mat-divider>\n\n          <div class=\"device-status-row\">\n            <div class=\"device-info\">\n              <mat-icon class=\"device-icon\">smartphone</mat-icon>\n              <div class=\"device-details\">\n                <div class=\"device-name\">Mobile</div>\n                <div class=\"device-id\">{{ truncateDeviceId(devicesStatus.mobile.deviceId) }}</div>\n              </div>\n            </div>\n            <div class=\"device-status-info\">\n              <div class=\"status-badge\" [class.online]=\"devicesStatus.mobile.isOnline\">\n                <mat-icon>{{ devicesStatus.mobile.isOnline ? 'circle' : 'cancel' }}</mat-icon>\n                <span>{{ devicesStatus.mobile.isOnline ? 'Online' : 'Offline' }}</span>\n              </div>\n              @if (devicesStatus.mobile.lastPing) {\n                <div class=\"last-ping\">{{ devicesStatus.mobile.lastPing | timeAgo }}</div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Warning Message -->\n      @if (devicesStatus && !devicesStatus.isReadyForTransfer) {\n        <div class=\"warning-message\">\n          <mat-icon>warning</mat-icon>\n          <span>File uploads may not work properly when devices are offline.</span>\n        </div>\n      }\n    } @else {\n      <!-- No Connection -->\n      <div class=\"no-connection\">\n        <mat-icon>link_off</mat-icon>\n        <p>No mobile device connected</p>\n      </div>\n    }\n  </mat-dialog-content>\n\n  <mat-dialog-actions align=\"end\" class=\"dialog-actions\">\n    <button \n      mat-button \n      (click)=\"close()\"\n      [disabled]=\"disconnecting\">\n      Close\n    </button>\n    @if (mobileConnection) {\n      <button \n        mat-raised-button \n        color=\"warn\" \n        (click)=\"disconnect()\"\n        [disabled]=\"disconnecting\">\n        <mat-icon *ngIf=\"!disconnecting\">link_off</mat-icon>\n        <mat-spinner *ngIf=\"disconnecting\" diameter=\"18\"></mat-spinner>\n        <span>{{ disconnecting ? 'Disconnecting...' : 'Disconnect' }}</span>\n      </button>\n    }\n  </mat-dialog-actions>\n</div>\n", styles: [".dialog-container{min-width:500px;max-width:600px}@media (max-width: 600px){.dialog-container{min-width:unset;width:100vw;max-width:100vw}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 0}@media (max-width: 600px){.dialog-header{padding:12px 16px 0}}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#1a1a1a}@media (max-width: 600px){.dialog-header h2{font-size:18px}}.close-btn{margin-right:-12px}.dialog-content{padding:16px 24px!important;display:flex;flex-direction:column;gap:16px}@media (max-width: 600px){.dialog-content{padding:12px 16px!important;gap:12px}}.dialog-actions{padding:8px 16px 16px!important}.elevation-card{box-shadow:0 2px 8px #0000001a;transition:box-shadow .3s ease}.elevation-card:hover{box-shadow:0 4px 12px #00000026}.connection-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:20px;border:1px solid rgba(0,0,0,.05)}@media (max-width: 600px){.connection-card{padding:16px;border-radius:8px}}.connection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}@media (max-width: 600px){.connection-header{margin-bottom:16px}}.status-indicator{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:8px 16px;border-radius:8px;background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 600px){.status-indicator{font-size:14px;padding:6px 12px;gap:8px}}.status-indicator mat-icon{font-size:28px;width:28px;height:28px}@media (max-width: 600px){.status-indicator mat-icon{font-size:24px;width:24px;height:24px}}.status-indicator.online{color:#2e7d32;background:#4caf5026;border:1px solid rgba(76,175,80,.3)}.status-indicator:not(.online){color:#c62828;background:#f4433626;border:1px solid rgba(244,67,54,.3)}.status-indicator.blinking mat-icon{animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.refresh-btn{min-width:auto;font-weight:500}.refresh-btn mat-icon{margin-right:6px}@media (max-width: 600px){.refresh-btn .refresh-text{display:none}.refresh-btn mat-icon{margin-right:0}}.refresh-btn mat-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-details{display:flex;flex-direction:column;gap:12px}.detail-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}.detail-row:last-child{border-bottom:none}@media (max-width: 600px){.detail-row{font-size:13px;flex-direction:column;gap:4px;padding:10px 0}}.detail-label{color:#616161;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 600px){.detail-label{font-size:11px}}.detail-value{color:#1a1a1a;font-family:Courier New,monospace;font-weight:500;font-size:14px}@media (max-width: 600px){.detail-value{font-size:13px;word-break:break-all}}.devices-status-card{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:20px;background:#fff}@media (max-width: 600px){.devices-status-card{padding:16px;border-radius:8px}}.card-title{margin:0 0 20px;font-size:16px;font-weight:600;color:#1a1a1a;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 600px){.card-title{font-size:14px;margin:0 0 16px}}.device-status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}@media (max-width: 600px){.device-status-row{flex-wrap:wrap;gap:12px;padding:12px 0}}.device-info{display:flex;align-items:center;gap:16px;flex:1;min-width:0}@media (max-width: 600px){.device-info{gap:12px;flex:1 1 100%}}.device-icon{font-size:36px;width:36px;height:36px;color:#1976d2;flex-shrink:0}@media (max-width: 600px){.device-icon{font-size:32px;width:32px;height:32px}}.device-details{flex:1;min-width:0}.device-name{font-weight:600;font-size:15px;color:#1a1a1a;margin-bottom:4px}@media (max-width: 600px){.device-name{font-size:14px}}.device-id{font-size:12px;color:#757575;font-family:Courier New,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 600px){.device-id{font-size:11px}}.device-status-info{display:flex;flex-direction:column;align-items:flex-end;gap:6px}@media (max-width: 600px){.device-status-info{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center}}.status-badge{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;background:#ffebee;color:#c62828;border:1px solid rgba(198,40,40,.2);box-shadow:0 2px 4px #0000001a}@media (max-width: 600px){.status-badge{font-size:12px;padding:5px 12px}}.status-badge.online{background:#e8f5e9;color:#2e7d32;border:1px solid rgba(46,125,50,.2)}.status-badge mat-icon{font-size:16px;width:16px;height:16px}.last-ping{font-size:12px;color:#9e9e9e;font-weight:500;white-space:nowrap}@media (max-width: 600px){.last-ping{font-size:11px}}mat-divider{margin:12px 0}@media (max-width: 600px){mat-divider{margin:8px 0}}.warning-message{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-left:4px solid #ff9800;border-radius:8px;color:#e65100;font-size:14px;font-weight:500;box-shadow:0 2px 6px #ff980026}@media (max-width: 600px){.warning-message{font-size:13px;padding:12px 14px;gap:10px}}.warning-message mat-icon{font-size:24px;width:24px;height:24px;flex-shrink:0}@media (max-width: 600px){.warning-message mat-icon{font-size:20px;width:20px;height:20px}}.no-connection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center;color:#bdbdbd;background:#fafafa;border-radius:12px;border:2px dashed #e0e0e0}@media (max-width: 600px){.no-connection{padding:40px 20px}}.no-connection mat-icon{font-size:72px;width:72px;height:72px;margin-bottom:20px;opacity:.4}@media (max-width: 600px){.no-connection mat-icon{font-size:56px;width:56px;height:56px;margin-bottom:16px}}.no-connection p{margin:0;font-size:16px;font-weight:500;color:#757575}@media (max-width: 600px){.no-connection p{font-size:14px}}.dialog-actions button{margin-left:8px}.dialog-actions button mat-spinner{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i3$2.DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularViewConnectionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-view-connection-dialog', standalone: false, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h2 mat-dialog-title>{{ data.title || 'Mobile Connection' }}</h2>\n    <button mat-icon-button class=\"close-btn\" (click)=\"close()\" tabindex=\"-1\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (mobileConnection) {\n      <!-- Connection Info Card -->\n      <div class=\"connection-card elevation-card\">\n        <div class=\"connection-header\">\n          <div class=\"status-indicator\" [class.online]=\"devicesStatus?.isReadyForTransfer\" [class.blinking]=\"isCheckingStatus\">\n            <mat-icon>{{ devicesStatus?.isReadyForTransfer ? 'check_circle' : 'error' }}</mat-icon>\n            <span class=\"status-text\">\n              {{ devicesStatus?.isReadyForTransfer ? 'Connected' : 'Connection Issue' }}\n            </span>\n          </div>\n          <button \n            mat-stroked-button\n            color=\"primary\" \n            class=\"refresh-btn\"\n            (click)=\"refreshStatus()\"\n            [disabled]=\"isCheckingStatus\">\n            <mat-icon [class.spinning]=\"isCheckingStatus\">refresh</mat-icon>\n            <span class=\"refresh-text\">Refresh</span>\n          </button>\n        </div>\n\n        <div class=\"connection-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Mobile Device ID</span>\n            <span class=\"detail-value\">{{ truncateDeviceId(mobileConnection.mobileDeviceId) }}</span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Connected For</span>\n            <span class=\"detail-value\">{{ mobileConnection.connectedAt | timeAgo:'long' }}</span>\n          </div>\n          @if (mobileConnection.connectedAt) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Connected At</span>\n              <span class=\"detail-value\">{{ mobileConnection.connectedAt | date:'short' }}</span>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Devices Status Card -->\n      @if (devicesStatus) {\n        <div class=\"devices-status-card elevation-card\">\n          <h3 class=\"card-title\">Device Status</h3>\n          \n          <div class=\"device-status-row\">\n            <div class=\"device-info\">\n              <mat-icon class=\"device-icon\">computer</mat-icon>\n              <div class=\"device-details\">\n                <div class=\"device-name\">Desktop</div>\n                <div class=\"device-id\">{{ truncateDeviceId(devicesStatus.desktop.deviceId) }}</div>\n              </div>\n            </div>\n            <div class=\"device-status-info\">\n              <div class=\"status-badge\" [class.online]=\"devicesStatus.desktop.isOnline\">\n                <mat-icon>{{ devicesStatus.desktop.isOnline ? 'circle' : 'cancel' }}</mat-icon>\n                <span>{{ devicesStatus.desktop.isOnline ? 'Online' : 'Offline' }}</span>\n              </div>\n              @if (devicesStatus.desktop.lastPing) {\n                <div class=\"last-ping\">{{ devicesStatus.desktop.lastPing | timeAgo }}</div>\n              }\n            </div>\n          </div>\n\n          <mat-divider></mat-divider>\n\n          <div class=\"device-status-row\">\n            <div class=\"device-info\">\n              <mat-icon class=\"device-icon\">smartphone</mat-icon>\n              <div class=\"device-details\">\n                <div class=\"device-name\">Mobile</div>\n                <div class=\"device-id\">{{ truncateDeviceId(devicesStatus.mobile.deviceId) }}</div>\n              </div>\n            </div>\n            <div class=\"device-status-info\">\n              <div class=\"status-badge\" [class.online]=\"devicesStatus.mobile.isOnline\">\n                <mat-icon>{{ devicesStatus.mobile.isOnline ? 'circle' : 'cancel' }}</mat-icon>\n                <span>{{ devicesStatus.mobile.isOnline ? 'Online' : 'Offline' }}</span>\n              </div>\n              @if (devicesStatus.mobile.lastPing) {\n                <div class=\"last-ping\">{{ devicesStatus.mobile.lastPing | timeAgo }}</div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Warning Message -->\n      @if (devicesStatus && !devicesStatus.isReadyForTransfer) {\n        <div class=\"warning-message\">\n          <mat-icon>warning</mat-icon>\n          <span>File uploads may not work properly when devices are offline.</span>\n        </div>\n      }\n    } @else {\n      <!-- No Connection -->\n      <div class=\"no-connection\">\n        <mat-icon>link_off</mat-icon>\n        <p>No mobile device connected</p>\n      </div>\n    }\n  </mat-dialog-content>\n\n  <mat-dialog-actions align=\"end\" class=\"dialog-actions\">\n    <button \n      mat-button \n      (click)=\"close()\"\n      [disabled]=\"disconnecting\">\n      Close\n    </button>\n    @if (mobileConnection) {\n      <button \n        mat-raised-button \n        color=\"warn\" \n        (click)=\"disconnect()\"\n        [disabled]=\"disconnecting\">\n        <mat-icon *ngIf=\"!disconnecting\">link_off</mat-icon>\n        <mat-spinner *ngIf=\"disconnecting\" diameter=\"18\"></mat-spinner>\n        <span>{{ disconnecting ? 'Disconnecting...' : 'Disconnect' }}</span>\n      </button>\n    }\n  </mat-dialog-actions>\n</div>\n", styles: [".dialog-container{min-width:500px;max-width:600px}@media (max-width: 600px){.dialog-container{min-width:unset;width:100vw;max-width:100vw}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 0}@media (max-width: 600px){.dialog-header{padding:12px 16px 0}}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#1a1a1a}@media (max-width: 600px){.dialog-header h2{font-size:18px}}.close-btn{margin-right:-12px}.dialog-content{padding:16px 24px!important;display:flex;flex-direction:column;gap:16px}@media (max-width: 600px){.dialog-content{padding:12px 16px!important;gap:12px}}.dialog-actions{padding:8px 16px 16px!important}.elevation-card{box-shadow:0 2px 8px #0000001a;transition:box-shadow .3s ease}.elevation-card:hover{box-shadow:0 4px 12px #00000026}.connection-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:20px;border:1px solid rgba(0,0,0,.05)}@media (max-width: 600px){.connection-card{padding:16px;border-radius:8px}}.connection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}@media (max-width: 600px){.connection-header{margin-bottom:16px}}.status-indicator{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:8px 16px;border-radius:8px;background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 600px){.status-indicator{font-size:14px;padding:6px 12px;gap:8px}}.status-indicator mat-icon{font-size:28px;width:28px;height:28px}@media (max-width: 600px){.status-indicator mat-icon{font-size:24px;width:24px;height:24px}}.status-indicator.online{color:#2e7d32;background:#4caf5026;border:1px solid rgba(76,175,80,.3)}.status-indicator:not(.online){color:#c62828;background:#f4433626;border:1px solid rgba(244,67,54,.3)}.status-indicator.blinking mat-icon{animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.refresh-btn{min-width:auto;font-weight:500}.refresh-btn mat-icon{margin-right:6px}@media (max-width: 600px){.refresh-btn .refresh-text{display:none}.refresh-btn mat-icon{margin-right:0}}.refresh-btn mat-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-details{display:flex;flex-direction:column;gap:12px}.detail-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}.detail-row:last-child{border-bottom:none}@media (max-width: 600px){.detail-row{font-size:13px;flex-direction:column;gap:4px;padding:10px 0}}.detail-label{color:#616161;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 600px){.detail-label{font-size:11px}}.detail-value{color:#1a1a1a;font-family:Courier New,monospace;font-weight:500;font-size:14px}@media (max-width: 600px){.detail-value{font-size:13px;word-break:break-all}}.devices-status-card{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:20px;background:#fff}@media (max-width: 600px){.devices-status-card{padding:16px;border-radius:8px}}.card-title{margin:0 0 20px;font-size:16px;font-weight:600;color:#1a1a1a;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 600px){.card-title{font-size:14px;margin:0 0 16px}}.device-status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}@media (max-width: 600px){.device-status-row{flex-wrap:wrap;gap:12px;padding:12px 0}}.device-info{display:flex;align-items:center;gap:16px;flex:1;min-width:0}@media (max-width: 600px){.device-info{gap:12px;flex:1 1 100%}}.device-icon{font-size:36px;width:36px;height:36px;color:#1976d2;flex-shrink:0}@media (max-width: 600px){.device-icon{font-size:32px;width:32px;height:32px}}.device-details{flex:1;min-width:0}.device-name{font-weight:600;font-size:15px;color:#1a1a1a;margin-bottom:4px}@media (max-width: 600px){.device-name{font-size:14px}}.device-id{font-size:12px;color:#757575;font-family:Courier New,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 600px){.device-id{font-size:11px}}.device-status-info{display:flex;flex-direction:column;align-items:flex-end;gap:6px}@media (max-width: 600px){.device-status-info{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center}}.status-badge{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;background:#ffebee;color:#c62828;border:1px solid rgba(198,40,40,.2);box-shadow:0 2px 4px #0000001a}@media (max-width: 600px){.status-badge{font-size:12px;padding:5px 12px}}.status-badge.online{background:#e8f5e9;color:#2e7d32;border:1px solid rgba(46,125,50,.2)}.status-badge mat-icon{font-size:16px;width:16px;height:16px}.last-ping{font-size:12px;color:#9e9e9e;font-weight:500;white-space:nowrap}@media (max-width: 600px){.last-ping{font-size:11px}}mat-divider{margin:12px 0}@media (max-width: 600px){mat-divider{margin:8px 0}}.warning-message{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-left:4px solid #ff9800;border-radius:8px;color:#e65100;font-size:14px;font-weight:500;box-shadow:0 2px 6px #ff980026}@media (max-width: 600px){.warning-message{font-size:13px;padding:12px 14px;gap:10px}}.warning-message mat-icon{font-size:24px;width:24px;height:24px;flex-shrink:0}@media (max-width: 600px){.warning-message mat-icon{font-size:20px;width:20px;height:20px}}.no-connection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center;color:#bdbdbd;background:#fafafa;border-radius:12px;border:2px dashed #e0e0e0}@media (max-width: 600px){.no-connection{padding:40px 20px}}.no-connection mat-icon{font-size:72px;width:72px;height:72px;margin-bottom:20px;opacity:.4}@media (max-width: 600px){.no-connection mat-icon{font-size:56px;width:56px;height:56px;margin-bottom:16px}}.no-connection p{margin:0;font-size:16px;font-weight:500;color:#757575}@media (max-width: 600px){.no-connection p{font-size:14px}}.dialog-actions button{margin-left:8px}.dialog-actions button mat-spinner{display:inline-block;margin-right:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: AngularRemoteUploadService }] });
+
+class AngularCameraCaptureDialogComponent {
+    dialogRef;
+    data;
+    videoElement;
+    canvasElement;
+    currentStream;
+    currentDeviceIndex = 0;
+    isCapturing = signal(false);
+    isSwitching = signal(false);
+    showFlash = signal(false);
+    hasMultipleCameras = false;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.currentStream = data.stream;
+        this.hasMultipleCameras = (data.videoDevices?.length ?? 0) > 1;
+    }
+    ngOnInit() {
+        // Wait for view to initialize before setting video source
+        setTimeout(() => {
+            if (this.videoElement) {
+                this.videoElement.nativeElement.srcObject = this.currentStream;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.stopStream();
+    }
+    async switchCamera() {
+        if (!this.data.videoDevices || this.data.videoDevices.length <= 1) {
+            return;
+        }
+        this.isSwitching.set(true);
+        try {
+            // Stop current stream
+            this.stopStream();
+            // Move to next camera
+            this.currentDeviceIndex = (this.currentDeviceIndex + 1) % this.data.videoDevices.length;
+            // Get new stream
+            const newStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    deviceId: this.data.videoDevices[this.currentDeviceIndex].deviceId,
+                    width: { ideal: 1920 },
+                    height: { ideal: 1080 }
+                }
+            });
+            this.currentStream = newStream;
+            if (this.videoElement) {
+                this.videoElement.nativeElement.srcObject = newStream;
+            }
+        }
+        catch (error) {
+            console.error('Error switching camera:', error);
+            // Could emit an error event here if needed
+        }
+        finally {
+            // Add a small delay to show the switching state
+            setTimeout(() => {
+                this.isSwitching.set(false);
+            }, 500);
+        }
+    }
+    async capturePhoto() {
+        this.isCapturing.set(true);
+        this.showFlash.set(true);
+        // Wait for flash animation
+        setTimeout(async () => {
+            this.showFlash.set(false);
+            const video = this.videoElement.nativeElement;
+            const canvas = this.canvasElement.nativeElement;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                this.isCapturing.set(false);
+                return;
+            }
+            // Set canvas dimensions to match video
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            // Draw video frame to canvas
+            ctx.drawImage(video, 0, 0);
+            // Convert canvas to blob
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    const file = new File([blob], `camera-capture-${Date.now()}.jpg`, {
+                        type: 'image/jpeg',
+                        lastModified: Date.now()
+                    });
+                    const result = {
+                        action: 'capture',
+                        file
+                    };
+                    this.dialogRef.close(result);
+                }
+                this.isCapturing.set(false);
+            }, 'image/jpeg', 0.9);
+        }, 300);
+    }
+    openUpload() {
+        const result = {
+            action: 'upload'
+        };
+        this.dialogRef.close(result);
+    }
+    cancel() {
+        const result = {
+            action: 'cancel'
+        };
+        this.dialogRef.close(result);
+    }
+    stopStream() {
+        if (this.currentStream) {
+            this.currentStream.getTracks().forEach(track => track.stop());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularCameraCaptureDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularCameraCaptureDialogComponent, isStandalone: true, selector: "angular-camera-capture-dialog", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoElement"], descendants: true }, { propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], ngImport: i0, template: "<div class=\"camera-modal-overlay\">\n  <div class=\"camera-modal-container\">\n    <div class=\"video-container\">\n      <!-- Video element -->\n      <video\n        #videoElement\n        autoplay\n        playsinline\n        class=\"camera-video\">\n      </video>\n\n      <!-- Hidden canvas for capturing -->\n      <canvas #canvasElement style=\"display: none;\"></canvas>\n\n      <!-- Flash overlay for capture effect -->\n      @if (showFlash()) {\n        <div class=\"flash-overlay\"></div>\n      }\n\n      <!-- Camera switch button (only if multiple cameras) -->\n      @if (hasMultipleCameras) {\n        <button\n          mat-mini-fab\n          class=\"switch-camera-btn\"\n          (click)=\"switchCamera()\"\n          [disabled]=\"isSwitching()\"\n          aria-label=\"Switch camera\">\n          @if (isSwitching()) {\n            <mat-spinner diameter=\"20\"></mat-spinner>\n          } @else {\n            <mat-icon>cameraswitch</mat-icon>\n          }\n        </button>\n      }\n    </div>\n\n    <!-- Action buttons -->\n    <div class=\"action-buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"action-btn capture-btn\"\n        (click)=\"capturePhoto()\"\n        [disabled]=\"isCapturing()\">\n        <mat-icon>photo_camera</mat-icon>\n        @if (!data.isMobile) {\n          <span>Capture</span>\n        }\n      </button>\n\n      <button\n        mat-raised-button\n        color=\"accent\"\n        class=\"action-btn upload-btn\"\n        (click)=\"openUpload()\">\n        <mat-icon>photo_library</mat-icon>\n        @if (!data.isMobile) {\n          <span>Upload</span>\n        }\n      </button>\n\n      <button\n        mat-stroked-button\n        class=\"action-btn cancel-btn\"\n        (click)=\"cancel()\">\n        <mat-icon>close</mat-icon>\n        @if (!data.isMobile) {\n          <span>Cancel</span>\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".camera-modal-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#000c,#14141ef2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}.camera-modal-container{background:#1a1b1f;border:1px solid rgba(255,255,255,.08);border-radius:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px;max-width:800px;width:100%;display:flex;flex-direction:column;gap:20px;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.video-container{position:relative;width:100%;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden}.camera-video{width:100%;max-width:600px;height:auto;max-height:70vh;border-radius:12px;object-fit:cover;display:block}.flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;border-radius:12px;animation:flash .3s ease-out;pointer-events:none;z-index:10}.switch-camera-btn{position:absolute;top:16px;right:16px;background:#0009!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;transition:all .3s ease}.switch-camera-btn:hover:not([disabled]){background:#000c!important;transform:scale(1.05)}.switch-camera-btn:disabled{opacity:.7}.action-buttons{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.action-btn{min-width:100px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:25px!important;padding:14px 20px!important;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease}.action-btn mat-icon{font-size:20px;width:20px;height:20px;margin:0}.capture-btn{background:linear-gradient(135deg,#007aff,#0051d5);color:#fff!important;border:none;padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;box-shadow:#007aff66 0 4px 20px;transform:scale(1)}.capture-btn:hover:not([disabled]){transform:scale(1.05);box-shadow:0 8px 25px #3f51b599}.upload-btn{background:linear-gradient(135deg,#34c759,#248a3d);color:#fff!important;border:none;padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;box-shadow:#34c75966 0 4px 20px;transform:scale(1)}.upload-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px #ff408199}.cancel-btn{background:#ffffff1a;color:#fff!important;border:2px solid rgba(255,255,255,.3);padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1)}.cancel-btn:hover{background:#fff3!important;transform:scale(1.05)}@media (max-width: 768px){.camera-modal-container{padding:16px}.action-btn{min-width:50px;padding:12px!important}.action-btn span{display:none}.action-btn mat-icon{margin:0}.switch-camera-btn{width:40px;height:40px}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularCameraCaptureDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-camera-capture-dialog', standalone: true, imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule
+                    ], template: "<div class=\"camera-modal-overlay\">\n  <div class=\"camera-modal-container\">\n    <div class=\"video-container\">\n      <!-- Video element -->\n      <video\n        #videoElement\n        autoplay\n        playsinline\n        class=\"camera-video\">\n      </video>\n\n      <!-- Hidden canvas for capturing -->\n      <canvas #canvasElement style=\"display: none;\"></canvas>\n\n      <!-- Flash overlay for capture effect -->\n      @if (showFlash()) {\n        <div class=\"flash-overlay\"></div>\n      }\n\n      <!-- Camera switch button (only if multiple cameras) -->\n      @if (hasMultipleCameras) {\n        <button\n          mat-mini-fab\n          class=\"switch-camera-btn\"\n          (click)=\"switchCamera()\"\n          [disabled]=\"isSwitching()\"\n          aria-label=\"Switch camera\">\n          @if (isSwitching()) {\n            <mat-spinner diameter=\"20\"></mat-spinner>\n          } @else {\n            <mat-icon>cameraswitch</mat-icon>\n          }\n        </button>\n      }\n    </div>\n\n    <!-- Action buttons -->\n    <div class=\"action-buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"action-btn capture-btn\"\n        (click)=\"capturePhoto()\"\n        [disabled]=\"isCapturing()\">\n        <mat-icon>photo_camera</mat-icon>\n        @if (!data.isMobile) {\n          <span>Capture</span>\n        }\n      </button>\n\n      <button\n        mat-raised-button\n        color=\"accent\"\n        class=\"action-btn upload-btn\"\n        (click)=\"openUpload()\">\n        <mat-icon>photo_library</mat-icon>\n        @if (!data.isMobile) {\n          <span>Upload</span>\n        }\n      </button>\n\n      <button\n        mat-stroked-button\n        class=\"action-btn cancel-btn\"\n        (click)=\"cancel()\">\n        <mat-icon>close</mat-icon>\n        @if (!data.isMobile) {\n          <span>Cancel</span>\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".camera-modal-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#000c,#14141ef2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}.camera-modal-container{background:#1a1b1f;border:1px solid rgba(255,255,255,.08);border-radius:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px;max-width:800px;width:100%;display:flex;flex-direction:column;gap:20px;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.video-container{position:relative;width:100%;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden}.camera-video{width:100%;max-width:600px;height:auto;max-height:70vh;border-radius:12px;object-fit:cover;display:block}.flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffc;border-radius:12px;animation:flash .3s ease-out;pointer-events:none;z-index:10}.switch-camera-btn{position:absolute;top:16px;right:16px;background:#0009!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;transition:all .3s ease}.switch-camera-btn:hover:not([disabled]){background:#000c!important;transform:scale(1.05)}.switch-camera-btn:disabled{opacity:.7}.action-buttons{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.action-btn{min-width:100px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:25px!important;padding:14px 20px!important;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease}.action-btn mat-icon{font-size:20px;width:20px;height:20px;margin:0}.capture-btn{background:linear-gradient(135deg,#007aff,#0051d5);color:#fff!important;border:none;padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;box-shadow:#007aff66 0 4px 20px;transform:scale(1)}.capture-btn:hover:not([disabled]){transform:scale(1.05);box-shadow:0 8px 25px #3f51b599}.upload-btn{background:linear-gradient(135deg,#34c759,#248a3d);color:#fff!important;border:none;padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;box-shadow:#34c75966 0 4px 20px;transform:scale(1)}.upload-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px #ff408199}.cancel-btn{background:#ffffff1a;color:#fff!important;border:2px solid rgba(255,255,255,.3);padding:14px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;width:auto;min-width:100px;transition:.3s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1)}.cancel-btn:hover{background:#fff3!important;transform:scale(1.05)}@media (max-width: 768px){.camera-modal-container{padding:16px}.action-btn{min-width:50px;padding:12px!important}.action-btn span{display:none}.action-btn mat-icon{margin:0}.switch-camera-btn{width:40px;height:40px}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }], propDecorators: { videoElement: [{
+                type: ViewChild,
+                args: ['videoElement', { static: false }]
+            }], canvasElement: [{
+                type: ViewChild,
+                args: ['canvasElement', { static: false }]
+            }] } });
+
+const generateRandomString = (length) => {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+};
+class AngularImageAndFilePickerComponent {
+    dialog;
+    helper;
+    breakpointObserver;
+    remoteUploadService;
+    changeSubject = new BehaviorSubject(false);
+    destroy$ = new Subject();
+    urlConfig;
+    entityType;
+    entityId;
+    viewType = 'card';
+    type = 'image';
+    label = null;
+    disabled = false;
+    data;
+    hint = null;
+    accept = '';
+    isValidateMimeType = true;
+    selectedId = null;
+    options = null;
+    required = false;
+    previewOnly = false;
+    previewInFlex = false;
+    imageItemClass = '';
+    isAddUploadedFileInLastNode = false;
+    isEnableDeleteConfirmation = true;
+    isEnableCapture = false;
+    deleteConfirmationMsg;
+    dialogConfig;
+    enableDragNDropForUpload = false;
+    // Remote Upload Configuration
+    remoteUploadConfig = null;
+    uploadInProgress = new EventEmitter();
+    onUploaded = new EventEmitter();
+    onFileSelect = new EventEmitter();
+    onFileRemoved = new EventEmitter();
+    onError = new EventEmitter();
+    onRemoteUpload = new EventEmitter();
+    isShowImageSequence = false;
+    enableDragNDrop = false;
+    editTagButtonWhenDisabled = false;
+    showDeleteButtonWhenDisabled = false;
+    dataSequenceChange = new EventEmitter();
+    isMobile = false;
+    isTab = false;
+    // Mobile upload state
+    isWaitingForMobileUpload = false;
+    mobileUploadFieldLabel = '';
+    // Pending files from mobile (waiting to be accepted/rejected)
+    pendingFiles = [];
+    isHandset$;
+    isTab$;
+    config = {
+        isCompressed: false,
+        hiddenDeleteBtn: false,
+        hiddenPreview: false,
+        selectionMode: false,
+        isStoredDb: false,
+        isMultiple: false,
+        limit: 10,
+        cols: 5,
+        colsForTab: 5,
+        colsForMobile: 3,
+        height: '130px',
+        selectorId: generateRandomString(10),
+        enableImageTags: false,
+        useAdvancedCamera: true // Enable advanced camera modal by default
+    };
+    isSliderLoaded = true;
+    filesArray = [
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg?Content-Type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152621Z&X-Amz-Expires=900&X-Amz-Signature=4004cfb10a740b9623d486de992a06f53b458ed6fc151c092eea88a3059eae8f&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "f7a32cd0-d0c1-474a-838e-47402d80527a.jpeg",
+    //       "fileName": "1452664590074.jpeg",
+    //       "uploadPath": "/survey_orders/f7a32cd0-d0c1-474a-838e-47402d80527a.jpeg",
+    //       "resourceUrl": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg"
+    //   }
+    // },
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/31033a2a-5db6-450d-a541-58a94654dd0c.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql?Content-Type=application%2Fsql&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152641Z&X-Amz-Expires=900&X-Amz-Signature=bcdf347df2a6495615bf48d619492e1deac2264231161da5dc3becaa7f45a796&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "6c537889-c72a-48ca-9134-638e8d6a1aac.sql",
+    //       "fileName": "eccom_bermuda.sql",
+    //       "uploadPath": "/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql",
+    //       "resourceUrl": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql"
+    //   }
+    // },
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/b8424185-30c6-4f44-ba1e-ff616dfd6576.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf?Content-Type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152656Z&X-Amz-Expires=900&X-Amz-Signature=85643479c3fbecc5bd1fee9783e3cb72e27e16a034921b52cf2f377eefb01ff9&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "232f2548-dc93-4204-8835-86b69f3005a7.pdf",
+    //       "fileName": "print-registration-4x6.pdf",
+    //       "uploadPath": "/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf",
+    //       "resourceUrl": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf"
+    //   }
+    // }
+    ];
+    currentEntityId;
+    currentEntityType;
+    images = [];
+    loading = false;
+    status = false;
+    constructor(dialog, helper, breakpointObserver, remoteUploadService) {
+        this.dialog = dialog;
+        this.helper = helper;
+        this.breakpointObserver = breakpointObserver;
+        this.remoteUploadService = remoteUploadService;
+    }
+    ngOnInit() {
+        this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset])
+            .pipe(map(result => result.matches), shareReplay());
+        this.isTab$ = this.breakpointObserver.observe([Breakpoints.TabletPortrait])
+            .pipe(map(result => result.matches), shareReplay());
+        this.prepareConfig();
+        // Initialize remote upload if configured
+        this.initRemoteUpload();
+        // if(this.viewType == 'single-card'){
+        //   this.generateFilesForSingleCard();
+        // }
+    }
+    ngAfterViewInit() {
+        this.isHandset$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(r => {
+            console.log('IS HANDSET:', r);
+            this.isMobile = r;
+            this.changeSubject.next(true);
+        });
+        this.isTab$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(r => {
+            console.log('IS TAB:', r);
+            this.isTab = r;
+            this.changeSubject.next(true);
+        });
+        this.changeSubject
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(status => {
+            let cols = 1;
+            if (this.isMobile) {
+                cols = this.options?.colsForMobile ?? 3;
+            }
+            else if (this.isTab) {
+                cols = this.options?.colsForTab ?? 4;
+            }
+            else {
+                cols = this.options?.cols ?? 5;
+            }
+            this.config.cols = cols;
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['entityId']) {
+            this.currentEntityId = changes['entityId'].currentValue;
+        }
+        if (changes['entityType']) {
+            this.currentEntityType = changes['entityType'].currentValue;
+        }
+        if (changes['urlConfig']) {
+            this.urlConfig = changes['urlConfig'].currentValue;
+            this.config.isStoredDb = false;
+            if (this.urlConfig?.attachToEntity) {
+                this.config.isStoredDb = true;
+            }
+        }
+        if (changes['options']) {
+            this.prepareConfig();
+        }
+        if (changes['data']) {
+            const incomingData = changes['data']?.currentValue ?? [];
+            // Safety check: ensure filesArray is initialized
+            if (!this.filesArray) {
+                this.filesArray = [];
+            }
+            // Merge with existing, avoiding duplicates by s3Url
+            const existingUrls = new Set(this.filesArray
+                .filter((f) => f && f.s3Url) // Filter out null/undefined
+                .map((f) => f.s3Url));
+            const newFiles = incomingData.filter((f) => f && f.s3Url && !existingUrls.has(f.s3Url));
+            // If new files exist or filesArray is empty, update with incoming data
+            // If all incoming files already exist, keep the existing filesArray
+            if (newFiles.length > 0 || this.filesArray.length === 0) {
+                this.filesArray = incomingData.map((r) => {
+                    if (r) {
+                        r.loading = false;
+                    }
+                    return r;
+                });
+                console.log("this.filesArray", this.filesArray);
+            }
+            else {
+                console.log("this.filesArray - skipped duplicate data update");
+            }
+        }
+        if (changes['viewType'] && changes['viewType'].currentValue == 'compact') {
+            this.config.limit = 1;
+            this.config.isMultiple = false;
+        }
+        if (changes['remoteUploadConfig']) {
+            this.initRemoteUpload();
+        }
+    }
+    prepareConfig() {
+        if (this.options?.isCompressed) {
+            this.config.isCompressed = this.options?.isCompressed;
+        }
+        if (this.options?.isSliderPreview) {
+            this.config.isSliderPreview = this.options?.isSliderPreview;
+        }
+        if (this.options?.hiddenDeleteBtn) {
+            this.config.hiddenDeleteBtn = this.options?.hiddenDeleteBtn;
+        }
+        if (this.options?.hiddenPreview) {
+            this.config.hiddenPreview = this.options?.hiddenPreview;
+        }
+        if (this.options?.selectionMode) {
+            this.config.selectionMode = this.options?.selectionMode;
+        }
+        this.config.isStoredDb = false;
+        if (this.urlConfig?.attachToEntity) {
+            this.config.isStoredDb = true;
+        }
+        if (this.options?.isMultiple) {
+            this.config.isMultiple = this.options?.isMultiple;
+            if (this.viewType == 'compact') {
+                this.config.isMultiple = false;
+            }
+        }
+        if (this.options?.fileSize) {
+            this.config.fileSize = this.options?.fileSize;
+        }
+        if (this.options?.limit) {
+            this.config.limit = this.options?.limit;
+            if (this.viewType == 'compact') {
+                this.config.limit = 1;
+            }
+        }
+        if (this.options?.cols) {
+            this.config.cols = this.options?.cols;
+        }
+        if (this.options?.colsForTab) {
+            this.config.colsForTab = this.options?.colsForTab;
+        }
+        if (this.options?.colsForMobile) {
+            this.config.colsForMobile = this.options?.colsForMobile;
+        }
+        if (this.options?.height) {
+            this.config.height = this.options?.height;
+        }
+        if (this.options?.selectorId) {
+            this.config.selectorId = this.options?.selectorId;
+        }
+        if (this.options?.enableImageTags) {
+            this.config.enableImageTags = this.options?.enableImageTags;
+        }
+        if (this.options?.useAdvancedCamera !== undefined) {
+            this.config.useAdvancedCamera = this.options?.useAdvancedCamera;
+        }
+    }
+    /**
+     * Validates selected files against the accept parameter
+     * @param files - FileList of selected files
+     * @returns boolean - true if all files are valid, false otherwise
+     */
+    validateFileTypes(files) {
+        if (!this.accept || this.accept.trim() === '') {
+            return true; // No validation needed if accept is not specified
+        }
+        const acceptedTypes = this.accept.split(',').map(type => type.trim().toLowerCase());
+        const invalidFiles = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+            const fileMimeType = file.type.toLowerCase();
+            let isValid = false;
+            for (const acceptType of acceptedTypes) {
+                if (acceptType.startsWith('.')) {
+                    // Extension match (e.g., .jpg, .png)
+                    if (acceptType === fileExtension) {
+                        isValid = true;
+                        break;
+                    }
+                }
+                else if (acceptType.includes('/*')) {
+                    // MIME type wildcard match (e.g., image/*, video/*)
+                    const mimePrefix = acceptType.split('/')[0];
+                    if (fileMimeType.startsWith(mimePrefix + '/')) {
+                        isValid = true;
+                        break;
+                    }
+                }
+                else if (acceptType.includes('/')) {
+                    // Exact MIME type match (e.g., image/jpeg, application/pdf)
+                    if (acceptType === fileMimeType) {
+                        isValid = true;
+                        break;
+                    }
+                }
+            }
+            if (!isValid) {
+                invalidFiles.push(file.name);
+            }
+        }
+        if (invalidFiles.length > 0) {
+            const acceptedTypesStr = acceptedTypes.join(', ');
+            const invalidFilesStr = invalidFiles.join(', ');
+            this.helper.showErrorMsg(`Invalid file type(s): ${invalidFilesStr}. Only ${acceptedTypesStr} files are allowed.`, 'Error', 5000);
+            return false;
+        }
+        return true;
+    }
+    setSliderLoading() {
+        this.isSliderLoaded = false;
+        setTimeout(() => {
+            this.isSliderLoaded = true;
+        }, 20);
+    }
+    /**
+     * Handle click on the upload label - only trigger file selection if not clicking on mobile upload buttons
+     */
+    handleLabelClick(event) {
+        if (this.loading) {
+            return;
+        }
+        // Check if the click is on or inside the mobile upload actions container or buttons
+        const target = event.target;
+        const clickedOnMobileActions = target.closest('.mobile-upload-actions');
+        const clickedOnButton = target.closest('button');
+        // If clicked on mobile upload actions or any button, don't trigger file selection
+        if (clickedOnMobileActions || clickedOnButton) {
+            return;
+        }
+        // Otherwise, proceed with normal file selection behavior
+        if (this.type === 'image' && this.isEnableCapture) {
+            this.openCameraCapture();
+        }
+        else {
+            this.openImageSelector();
+        }
+    }
+    openImageSelector(selectorId = this.config?.selectorId) {
+        document.getElementById(selectorId)?.click();
+    }
+    async openCameraCapture() {
+        // Check configuration preference and browser support
+        if (this.config.useAdvancedCamera && typeof navigator !== 'undefined' && navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
+            try {
+                // Try to open camera directly using MediaDevices API
+                await this.openCameraDialog();
+            }
+            catch (error) {
+                console.log('MediaDevices API failed, falling back to file input:', error);
+                // Fallback to file input method
+                this.openImageSelector();
+            }
+        }
+        else {
+            // Use simple file input method (works on most browsers including mobile)
+            this.openImageSelector();
+        }
+    }
+    async openCameraDialog() {
+        try {
+            // Get available cameras first
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const videoDevices = devices.filter(device => device.kind === 'videoinput');
+            // Request camera access
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment', // Prefer rear camera
+                    width: { ideal: this.isMobile ? 720 : 1920 },
+                    height: { ideal: this.isMobile ? 480 : 1080 }
+                }
+            });
+            // Create a modal dialog with video preview and capture button
+            this.showCameraModal(stream, videoDevices);
+        }
+        catch (error) {
+            console.error('Error accessing camera:', error);
+            if (error.name === 'NotAllowedError') {
+                this.helper.showErrorMsg('Camera access denied. Please allow camera access and try again.', 'Error', 3000);
+            }
+            else if (error.name === 'NotFoundError') {
+                this.helper.showErrorMsg('No camera found. Please use file upload instead.', 'Error', 3000);
+            }
+            else {
+                this.helper.showErrorMsg('Could not access camera. Falling back to file upload.', 'Error', 3000);
+                this.openImageSelector();
+            }
+            throw error;
+        }
+    }
+    showCameraModal(stream, videoDevices) {
+        const dialogData = {
+            stream,
+            videoDevices,
+            isMobile: this.isMobile
+        };
+        const dialogRef = this.dialog.open(AngularCameraCaptureDialogComponent, {
+            data: dialogData,
+            panelClass: 'camera-capture-dialog',
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            width: '100%',
+            height: '100%',
+            hasBackdrop: true,
+            disableClose: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            // Stop stream if dialog was closed
+            stream.getTracks().forEach(track => track.stop());
+            if (!result) {
+                return; // User closed dialog without action
+            }
+            if (result.action === 'capture' && result.file) {
+                // Create a fake event to pass to detectImages
+                const fakeEvent = {
+                    target: {
+                        files: [result.file],
+                        value: ''
+                    },
+                    preventDefault: () => { }
+                };
+                // Process the captured image
+                await this.detectImages(fakeEvent);
+            }
+            else if (result.action === 'upload') {
+                // Open file selector
+                this.openImageSelector();
+            }
+            // 'cancel' action - do nothing, just close
+        });
+    }
+    async detectImages(event, index = -1) {
+        console.log('detectImages:', event);
+        event.preventDefault();
+        if (this.config?.limit === 1) {
+            this.filesArray = []; // Reset array for a single image
+        }
+        const files = event.target.files;
+        if (!files) {
+            this.helper.showErrorMsg('Please select an image', 'Error', 3000);
+            return;
+        }
+        // Validate file types based on accept parameter
+        if (this.isValidateMimeType && !this.validateFileTypes(files)) {
+            return;
+        }
+        if ((this.filesArray?.length + files.length) > this.config?.limit) {
+            this.helper.showErrorMsg(`You can upload a maximum of ${this.config?.limit} images`, 'Error', 3000);
+            return;
+        }
+        this.loading = true;
+        this.uploadInProgress.emit(true);
+        let uploadedImages = [];
+        // Pre-allocate slots in filesArray to avoid race conditions
+        const startIndex = this.filesArray.length;
+        const placeholders = [...files].map((file, idx) => ({
+            tempId: `temp-${Date.now()}-${idx}`,
+            title: file.name,
+            name: file.name,
+            loading: true,
+            filename: file.name,
+            s3Url: '', // Will be filled during processing
+            sequence: this.isAddUploadedFileInLastNode ? startIndex + idx + 1 : this.filesArray.length + 1 - idx
+        }));
+        // Add all placeholders at once to prevent race conditions
+        if (this.isAddUploadedFileInLastNode) {
+            this.filesArray = [...this.filesArray, ...placeholders];
+        }
+        else {
+            this.filesArray = [...placeholders.reverse(), ...this.filesArray];
+        }
+        this.setSliderLoading();
+        // Process all images concurrently with their pre-assigned indices
+        await Promise.all([...files].map((file, idx) => {
+            const targetIndex = this.isAddUploadedFileInLastNode ? startIndex + idx : idx;
+            return this.processImage(file, uploadedImages, targetIndex, placeholders[this.isAddUploadedFileInLastNode ? idx : files.length - 1 - idx].tempId);
+        }));
+        if (this.config?.isStoredDb) {
+            await this.uploadImages(uploadedImages);
+        }
+        this.loading = false;
+        this.uploadInProgress.emit(false);
+        this.onSubmit(); // Call once after all uploads
+        this.updateSequence();
+        // Reset the input value so the same file can be selected again
+        event.target.value = '';
+    }
+    async processImage(file, uploadedImages, index, tempId) {
+        let fileSize = file.size / 1024;
+        if (this.config?.fileSize && fileSize > this.config?.fileSize) {
+            let maxSize = this.config.fileSize / 1024;
+            this.helper.showErrorMsg(`File size must be ≤ ${maxSize >= 1 ? maxSize : this.config.fileSize} ${maxSize >= 1 ? 'MB' : 'KB'}`, 'Error', 3000);
+            return;
+        }
+        // ponytail: iOS Safari often PUT 0-byte bodies if the original <input> File is
+        // uploaded after FileReader / async gaps. Snapshot bytes into a stable File first.
+        const mimeType = file.type || this.getMimeTypeFromFileName(file.name) || 'image/jpeg';
+        let fileBytes;
+        try {
+            fileBytes = await file.arrayBuffer();
+        }
+        catch (error) {
+            this.helper.showHttpErrorMsg(error);
+            return;
+        }
+        if (!fileBytes || fileBytes.byteLength === 0) {
+            this.helper.showErrorMsg('Unable to read image data. Please try again.', 'Error', 3000);
+            return;
+        }
+        const stableFile = new File([fileBytes], file.name || `image.${this.getExtensionFromMimeType(mimeType)}`, { type: mimeType });
+        let fileToUpload = this.config?.isCompressed
+            ? await this.helper.compressFile(stableFile, mimeType)
+            : stableFile;
+        try {
+            let uploadResponse = await this.helper.getUploadUrl(this.urlConfig.getUploadUrl, stableFile.name, mimeType, this.currentEntityType).toPromise();
+            let uploadData = uploadResponse.data.uploadUrlData;
+            // For initial display, use a data URL for preview but ensure S3 URL is used for database
+            let dataUrl = await this.helper.getDataUrlFromFile(stableFile);
+            let currentImageData = {
+                tempId: tempId || `temp-${Date.now()}`,
+                title: stableFile.name, name: stableFile.name, s3Url: dataUrl, // Temporary preview URL
+                filename: stableFile.name, s3Path: uploadData.uploadPath,
+                tempS3Url: uploadData.resourceUrl, // This will be the final S3 URL
+                id: null,
+                uploadData: uploadData, loading: true, // Set loading to true initially
+                tags: null, tempTags: null, isEditMode: false, sequence: 1,
+            };
+            // Update the file at the pre-assigned index
+            if (index !== -1 && this.filesArray[index]) {
+                this.filesArray[index] = { ...this.filesArray[index], ...currentImageData };
+            }
+            this.setSliderLoading();
+            uploadedImages.push(currentImageData);
+            // Upload to S3 (stable Blob/File — not the original iOS File handle)
+            await this.helper.putFile(uploadData.uploadURL, fileToUpload, mimeType).toPromise();
+            // After successful upload, update with S3 URL and mark as completed
+            if (index !== -1 && this.filesArray[index]) {
+                this.filesArray[index].s3Url = uploadData.resourceUrl; // Use S3 URL
+                this.filesArray[index].loading = false;
+                // Ensure uploadData contains the correct S3 URL for database storage
+                this.filesArray[index].uploadData.resourceUrl = uploadData.resourceUrl;
+            }
+            this.setSliderLoading();
+        }
+        catch (error) {
+            // Set loading to false on error as well
+            if (index !== -1 && this.filesArray[index]) {
+                this.filesArray[index].loading = false;
+            }
+            this.helper.showHttpErrorMsg(error);
+        }
+    }
+    getMimeTypeFromFileName(fileName) {
+        const ext = fileName?.split('.').pop()?.toLowerCase() || '';
+        const map = {
+            jpg: 'image/jpeg',
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            gif: 'image/gif',
+            webp: 'image/webp',
+            bmp: 'image/bmp',
+            heic: 'image/heic',
+            heif: 'image/heif',
+        };
+        return map[ext] || '';
+    }
+    getExtensionFromMimeType(mimeType) {
+        const map = {
+            'image/jpeg': 'jpg',
+            'image/png': 'png',
+            'image/gif': 'gif',
+            'image/webp': 'webp',
+            'image/bmp': 'bmp',
+            'image/heic': 'heic',
+            'image/heif': 'heif',
+        };
+        return map[mimeType.toLowerCase()] || 'jpg';
+    }
+    uploadImages(data) {
+        return new Promise((resolve, reject) => {
+            if (data && data?.length > 0) {
+                console.log('There is a image pending to attach:', data);
+                // Keep track of tempIds for matching after API response
+                let tempIdMapping = [];
+                let images = [];
+                let fa = data.map((r) => {
+                    if (r?.uploadData) {
+                        // Ensure we're using the S3 URL, not base64 data
+                        const s3Url = r.uploadData.resourceUrl;
+                        // Store tempId separately for matching, don't send it to API
+                        tempIdMapping.push({
+                            tempId: r.tempId,
+                            resourceUrl: s3Url
+                        });
+                        images.push({
+                            fileName: r.uploadData?.fileName,
+                            resourceUrl: s3Url, // This ensures S3 URL is stored in database
+                            uploadPath: r.uploadData?.uploadPath,
+                            uploadURL: r.uploadData?.uploadURL
+                            // tempId removed - not sent to API
+                        });
+                    }
+                    return r;
+                });
+                this.helper.attachFilesToEntity(this.urlConfig?.attachToEntity || 'not-specified', { images: images, entityId: this.currentEntityId, entityType: this.currentEntityType }, this.config.limit).subscribe({
+                    next: (ir) => {
+                        ir?.data?.map((file, idx) => {
+                            // Match by tempId first (more reliable for concurrent uploads), then fall back to S3 URL
+                            const uploadedImage = tempIdMapping[idx];
+                            let selectedIndex = this.filesArray?.findIndex(f => f.tempId === uploadedImage?.tempId);
+                            // Fallback to resourceUrl matching if tempId matching fails
+                            if (selectedIndex === -1) {
+                                selectedIndex = this.filesArray?.findIndex(f => f.uploadData?.resourceUrl == file.s3Url);
+                            }
+                            if (selectedIndex !== -1) {
+                                this.filesArray[selectedIndex] = {
+                                    ...this.filesArray[selectedIndex],
+                                    loading: false,
+                                    id: file?.id || null,
+                                    s3Url: file.s3Url // Ensure we're using the S3 URL from the response
+                                };
+                            }
+                        });
+                        this.onSubmit();
+                        resolve(ir);
+                    },
+                    error: (imErr) => { this.helper.showHttpErrorMsg(imErr); this.onError.emit(true); resolve(false); }
+                });
+            }
+            else {
+                resolve(false);
+            }
+        });
+    }
+    deleteImage(event, t, index, img) {
+        event.stopPropagation();
+        if (this.isEnableDeleteConfirmation) {
+            let confirmBoxData = {
+                title: this.dialogConfig?.title || 'Delete Image',
+                message: this.deleteConfirmationMsg || (this.dialogConfig?.message || 'Are you sure, you want to delete this image?'),
+                iconClass: this.dialogConfig?.iconClass || 'angular-text-danger',
+                icon: this.dialogConfig?.icon || 'delete',
+                approveButtonText: this.dialogConfig?.approveButtonText || 'Yes, delete',
+                approveButtonClass: `angular-approve-button ${this.dialogConfig?.approveButtonClass}`,
+                cancelButtonText: this.dialogConfig?.cancelButtonText || 'No',
+                cancelButtonClass: `angular-cancel-button ${this.dialogConfig?.cancelButtonClass}`
+            };
+            const panelClass = ['angular-confirmation-dialog'];
+            if (this.dialogConfig?.panelClass) {
+                panelClass.push(this.dialogConfig.panelClass);
+            }
+            const dialogRef = this.dialog.open(AngularConfirmationDialogComponent, {
+                width: "450px",
+                panelClass: panelClass,
+                data: confirmBoxData,
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((result) => {
+                console.log("The dialog was closed with result:", result);
+                if (result) {
+                    this.removeImage(event, index, img);
+                }
+            });
+        }
+        else {
+            this.removeImage(event, index, img);
+        }
+    }
+    /*REMOVE SELECTED IMAGE  */
+    removeImage(event, index, img) {
+        this.loading = true;
+        this.filesArray[index].loading = true;
+        if (img?.id) {
+            delete img.uploadData;
+            this.removeUploadedImage(img, index, true);
+        }
+        else {
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+        }
+    }
+    removeUploadedImage(img, index, silently = false) {
+        console.log("removeUploadedImage:", img);
+        this.helper.deleteUploadedFile(this.urlConfig.removeImage, img).subscribe((r) => {
+            console.log('Image Delete Res:', r);
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            if (!silently) {
+                this.helper.showSuccessMsg(r.message, 'Success', 3000);
+            }
+        }, (err) => { this.filesArray[index].loading = false; this.helper.showErrorMsg(err, "Error"); });
+    }
+    async detectFiles(event, index = -1) {
+        console.log('detectFiles:', event);
+        event.preventDefault();
+        if (this.config?.limit === 1) {
+            this.filesArray = []; // Reset array for a single file
+        }
+        const files = event.target.files;
+        if (!files) {
+            this.helper.showErrorMsg('Please select a file', 'Error', 3000);
+            return;
+        }
+        // Validate file types based on accept parameter
+        if (this.isValidateMimeType && !this.validateFileTypes(files)) {
+            return;
+        }
+        if ((this.filesArray?.length + files.length) > this.config?.limit) {
+            this.helper.showErrorMsg(`You can upload a maximum of ${this.config?.limit} files`, 'Error', 3000);
+            return;
+        }
+        this.loading = true;
+        this.uploadInProgress.emit(true);
+        let uploadedFiles = [];
+        // Pre-allocate slots in filesArray to avoid race conditions
+        const startIndex = this.filesArray.length;
+        const placeholders = [...files].map((file, idx) => ({
+            tempId: `temp-${Date.now()}-${idx}`,
+            title: file.name,
+            name: file.name,
+            loading: true,
+            filename: file.name,
+            s3Url: '', // Will be filled during processing
+            sequence: this.isAddUploadedFileInLastNode ? startIndex + idx + 1 : this.filesArray.length + 1 - idx
+        }));
+        // Add all placeholders at once to prevent race conditions
+        if (this.isAddUploadedFileInLastNode) {
+            this.filesArray = [...this.filesArray, ...placeholders];
+        }
+        else {
+            this.filesArray = [...placeholders.reverse(), ...this.filesArray];
+        }
+        this.setSliderLoading();
+        // Process all files concurrently with their pre-assigned indices
+        await Promise.all([...files].map((file, idx) => {
+            const targetIndex = this.isAddUploadedFileInLastNode ? startIndex + idx : idx;
+            return this.processFile(file, uploadedFiles, targetIndex, placeholders[this.isAddUploadedFileInLastNode ? idx : files.length - 1 - idx].tempId);
+        }));
+        if (this.config?.isStoredDb) {
+            await this.uploadFiles(uploadedFiles);
+        }
+        this.loading = false;
+        this.uploadInProgress.emit(false);
+        this.onSubmit(); // Call once after all uploads
+        this.updateSequence();
+        // Reset the input value so the same file can be selected again
+        event.target.value = '';
+    }
+    async processFile(file, uploadedFiles, index, tempId) {
+        let fileSize = file.size / 1024;
+        if (this.config?.fileSize && fileSize > this.config?.fileSize) {
+            let maxSize = this.config.fileSize / 1024;
+            this.helper.showErrorMsg(`File size must be ≤ ${maxSize >= 1 ? maxSize : this.config.fileSize} ${maxSize >= 1 ? 'MB' : 'KB'}`, 'Error', 3000);
+            return;
+        }
+        return new Promise((resolve) => {
+            let reader = new FileReader();
+            reader.onload = async (e) => {
+                let mimeType = file.type;
+                let buffer = new Uint8Array(reader.result);
+                try {
+                    let uploadResponse = await this.helper.getUploadUrl(this.urlConfig.getUploadUrl, file.name, mimeType, this.currentEntityType).toPromise();
+                    let uploadData = uploadResponse.data.uploadUrlData;
+                    let currentFileData = {
+                        tempId: tempId || `temp-${Date.now()}`,
+                        title: file.name, name: file.name, s3Url: uploadData.resourceUrl, // Use S3 URL
+                        s3Path: uploadData.uploadPath, filename: file.name, id: null,
+                        uploadData: uploadData, loading: true, buffer: buffer, // Set loading to true initially
+                        tags: null, tempTags: null, isEditMode: false, sequence: 1,
+                    };
+                    // Update the file at the pre-assigned index
+                    if (index !== -1 && this.filesArray[index]) {
+                        this.filesArray[index] = { ...this.filesArray[index], ...currentFileData };
+                    }
+                    this.setSliderLoading();
+                    uploadedFiles.push(currentFileData);
+                    // Upload to S3
+                    await this.helper.putFile(uploadData.uploadURL, e.target.result).toPromise();
+                    // After successful upload, ensure S3 URL is used and mark as completed
+                    if (index !== -1 && this.filesArray[index]) {
+                        this.filesArray[index].s3Url = uploadData.resourceUrl; // Ensure S3 URL
+                        this.filesArray[index].loading = false;
+                        // Ensure uploadData contains the correct S3 URL for database storage
+                        this.filesArray[index].uploadData.resourceUrl = uploadData.resourceUrl;
+                    }
+                    this.setSliderLoading();
+                    resolve();
+                }
+                catch (error) {
+                    // Set loading to false on error as well
+                    if (index !== -1 && this.filesArray[index]) {
+                        this.filesArray[index].loading = false;
+                    }
+                    this.helper.showHttpErrorMsg(error);
+                    resolve();
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    uploadFiles(data) {
+        return new Promise((resolve, reject) => {
+            if (data && data.length > 0) {
+                console.log('There is a file pending to attach:', data);
+                // Keep track of tempIds for matching after API response
+                let tempIdMapping = [];
+                let files = [];
+                let fa = data.map((r) => {
+                    if (r?.uploadData) {
+                        // Ensure we're using the S3 URL, not any local file data
+                        const s3Url = r.uploadData.resourceUrl;
+                        // Store tempId separately for matching, don't send it to API
+                        tempIdMapping.push({
+                            tempId: r.tempId,
+                            resourceUrl: s3Url
+                        });
+                        files.push({
+                            fileName: r.uploadData?.fileName,
+                            resourceUrl: s3Url, // This ensures S3 URL is stored in database
+                            uploadPath: r.uploadData?.uploadPath,
+                            uploadURL: r.uploadData?.uploadURL
+                            // tempId removed - not sent to API
+                        });
+                    }
+                    return r;
+                });
+                this.helper.attachFilesToEntity(this.urlConfig?.attachToEntity || 'not-specified', { files: files, entityId: this.currentEntityId, entityType: this.currentEntityType }, this.config.limit).subscribe({
+                    next: (ir) => {
+                        ir?.data?.map((file, idx) => {
+                            // Match by tempId first (more reliable for concurrent uploads), then fall back to S3 URL
+                            const uploadedFile = tempIdMapping[idx];
+                            let selectedIndex = this.filesArray?.findIndex(f => f.tempId === uploadedFile?.tempId);
+                            // Fallback to resourceUrl matching if tempId matching fails
+                            if (selectedIndex === -1) {
+                                selectedIndex = this.filesArray?.findIndex(f => f.uploadData?.resourceUrl == file.s3Url);
+                            }
+                            if (selectedIndex !== -1) {
+                                this.filesArray[selectedIndex] = {
+                                    ...this.filesArray[selectedIndex],
+                                    loading: false,
+                                    id: file?.id || null,
+                                    s3Url: file.s3Url // Ensure we're using the S3 URL from the response
+                                };
+                            }
+                        });
+                        this.onSubmit();
+                        resolve(ir);
+                    },
+                    error: (imErr) => { this.helper.showHttpErrorMsg(imErr); this.onError.emit(true); resolve(false); }
+                });
+            }
+            else {
+                resolve(false);
+            }
+        });
+    }
+    deleteFile(event, t, index, file) {
+        event.stopPropagation();
+        if (this.isEnableDeleteConfirmation) {
+            let confirmBoxData = {
+                title: this.dialogConfig?.title || 'Delete File',
+                message: this.deleteConfirmationMsg || (this.dialogConfig?.message || 'Are you sure, you want to delete this file?'),
+                iconClass: this.dialogConfig?.iconClass || 'angular-text-danger',
+                icon: this.dialogConfig?.icon || 'delete',
+                approveButtonText: this.dialogConfig?.approveButtonText || 'Yes, delete',
+                approveButtonClass: `angular-approve-button ${this.dialogConfig?.approveButtonClass}`,
+                cancelButtonText: this.dialogConfig?.cancelButtonText || 'No',
+                cancelButtonClass: `angular-cancel-button ${this.dialogConfig?.cancelButtonClass}`
+            };
+            const panelClass = ['angular-confirmation-dialog'];
+            if (this.dialogConfig?.panelClass) {
+                panelClass.push(this.dialogConfig.panelClass);
+            }
+            const dialogRef = this.dialog.open(AngularConfirmationDialogComponent, {
+                width: "450px",
+                panelClass: panelClass,
+                data: confirmBoxData,
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((result) => {
+                console.log("The dialog was closed with result:", result);
+                if (result) {
+                    this.removeFile(event, index, file);
+                }
+            });
+        }
+        else {
+            this.removeFile(event, index, file);
+        }
+    }
+    removeFile(event, index, file) {
+        this.loading = true;
+        this.filesArray[index].loading = true;
+        if (file?.id) {
+            delete file.uploadData;
+            this.removeUploadedFile(file, index, true);
+        }
+        else {
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            this.onFileRemoved.emit(true);
+        }
+    }
+    removeUploadedFile(file, index, silently = false) {
+        console.log("removeUploadedFile:", file);
+        this.helper.deleteUploadedFile(this.urlConfig.removeImage, file).subscribe((r) => {
+            console.log('File Delete Res:', r);
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            if (!silently) {
+                this.helper.showSuccessMsg(r.message, 'Success', 3000);
+            }
+            this.onSubmit();
+        }, (err) => { this.filesArray[index].loading = false; this.helper.showErrorMsg(err, "Error"); });
+    }
+    onSubmit() {
+        // this.filesArray = this.filesArray?.map((r, i) => { r.s3Url = r?.uploadData?.resourceUrl; return r; });
+        this.onUploaded.emit(this.filesArray);
+    }
+    async downloadFile(url, fileName) {
+        try {
+            // First try with fetch
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/octet-stream',
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const blob = await response.blob();
+            // Check if blob has content
+            if (blob.size === 0) {
+                throw new Error('File is empty or could not be fetched');
+            }
+            // Create download link
+            const blobUrl = URL.createObjectURL(blob);
+            const el = document.createElement("a");
+            el.href = blobUrl;
+            el.download = fileName;
+            el.style.display = 'none';
+            // Add to DOM, click, and remove
+            document.body.appendChild(el);
+            el.click();
+            document.body.removeChild(el);
+            // Cleanup blob URL
+            setTimeout(() => {
+                URL.revokeObjectURL(blobUrl);
+            }, 100);
+        }
+        catch (error) {
+            console.error("Fetch download failed, trying alternative method:", error);
+            // Fallback: Try direct link opening
+            try {
+                const el = document.createElement("a");
+                el.href = url;
+                el.download = fileName;
+                el.target = '_blank';
+                el.style.display = 'none';
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+            }
+            catch (fallbackError) {
+                console.error("All download methods failed:", fallbackError);
+                this.helper.showErrorMsg("Failed to download file. Please try again or contact support.", 'Error', 5000);
+            }
+        }
+    }
+    clickTimeout = null;
+    clickDelay = 250; // Delay in milliseconds to distinguish single and double click
+    onSelectFile(file) {
+        if (this.config.selectionMode) {
+            if (this.clickTimeout) {
+                clearTimeout(this.clickTimeout);
+                this.clickTimeout = null;
+                this.openFile(file); // Double-click detected
+            }
+            else {
+                this.clickTimeout = setTimeout(() => {
+                    this.clickTimeout = null;
+                    if (this.config.selectionMode) {
+                        this.onFileSelect.emit(file); // Single-click detected
+                    }
+                }, this.clickDelay);
+            }
+        }
+        else {
+            this.clickTimeout = null;
+            this.openFile(file);
+        }
+    }
+    openFile(file) {
+        if (!this.config.hiddenPreview) {
+            this.openPreviewDialog(file.s3Url, file.title);
+        }
+    }
+    openPreviewDialog(url, title) {
+        if (url.indexOf('.jpg') != -1 || url.indexOf('.jpeg') != -1 || url.indexOf('.png') != -1) {
+            this.openImagePreviewDialog(url);
+        }
+        else if (url.indexOf('.pdf') != -1) {
+            this.openFileViewer(url, 'pdf');
+        }
+        // else if(url.indexOf('.csv') != -1){
+        //   this.openFileViewer(url, 'csv');
+        // }
+        else if (url.indexOf('.xlxs') != -1 || url.indexOf('.xlx') != -1 || url.indexOf('.xls') != -1) {
+            this.openFileViewer(url, 'excel');
+        }
+        else {
+            this.downloadFile(url, title);
+        }
+    }
+    openImagePreviewDialog(url) {
+        const dialogRef = this.dialog.open(AngularPreviewImageComponent, {
+            panelClass: ['mat-p-0', 'relative'],
+            data: { url },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log('The dialog was closed', result);
+        });
+    }
+    openFileViewer(pdfUrl, fileType) {
+        let dialogData = {
+            src: pdfUrl,
+            fileType: fileType
+        };
+        const dialogRef = this.dialog.open(AngularFileViewerComponent, {
+            width: this.isMobile ? "100%" : "90%",
+            height: this.isMobile ? "100%" : "98%",
+            minHeight: this.isMobile ? "100%" : "80%",
+            maxWidth: this.isMobile ? "100%" : "100%",
+            panelClass: ['angular-file-viewer'],
+            data: dialogData,
+            disableClose: false,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log("FileViewer Dialog Closed");
+        });
+    }
+    checkingForPreview(img) {
+        let imageArray = img.split('.');
+        let imageType = imageArray[imageArray?.length - 1];
+        if (imageType == 'png' || imageType == 'jpg' || imageType == 'jpeg') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    setHeight(id, valueForAddedHeight = 0) {
+        let height = document.getElementById(id)?.offsetWidth;
+        // console.log("=== setHeight::height ===", id, height);
+        return `${(height ?? 0) + valueForAddedHeight}px`;
+    }
+    generateFilesForSingleCard() {
+        if (this.filesArray?.length < this.config.limit) {
+            for (let index = 0; index < (this.config.limit - this.filesArray?.length); index++) {
+                this.filesArray.push({
+                    selectorId: generateRandomString(10),
+                    tags: null,
+                    tempTags: null,
+                    isEditMode: false
+                });
+            }
+        }
+        else {
+            this.filesArray = this.filesArray?.map((file) => {
+                return { ...file, selectorId: generateRandomString(10), tempTag: null, isEditMode: false };
+            });
+        }
+    }
+    editTagWithSpace(file) {
+        console.log("=== editTagWithSpace :: file ===", file);
+        let tempTag = file?.tempTags?.trim();
+        console.log("=== editTagWithSpace :: tempTag ===", tempTag);
+        if (tempTag && tempTag != '') {
+            let tempTagsArr = tempTag?.split(' ');
+            console.log("=== editTagWithSpace :: before tempTagsArr ===", tempTagsArr);
+            tempTagsArr = tempTagsArr?.filter(e => (e && e != ''))?.map(t => {
+                if (t.includes('#')) { }
+                else {
+                    t = `#${t}`;
+                }
+                return t;
+            });
+            tempTag = tempTagsArr.join(' ');
+            file.tempTags = `${tempTag}`;
+        }
+        else {
+            file.tempTags = tempTag;
+        }
+    }
+    // onKeydown(event: KeyboardEvent, file: any) {
+    //   if (event.key === ',' || event.keyCode === 188) {
+    //     event.preventDefault();
+    //     this.editTagWithComma(file);
+    //   }
+    // }
+    // editTagWithComma(file: any){
+    //   let tempTag: any = file?.tempTags?.trim();
+    //   if(tempTag && tempTag != ''){
+    //     let tempTagsArr: any[] = tempTag?.split(' ');
+    //     tempTagsArr = tempTagsArr?.filter(e => (e && e != ''))?.map(t =>{
+    //       if (t.includes('#')) {}
+    //       else{
+    //         t = `#${t}`;
+    //       }
+    //       return t;
+    //     });
+    //     tempTag = tempTagsArr.join(' ');
+    //     tempTag = tempTag.replace(/,/g, '');
+    //     file.tempTags = `${tempTag} `;
+    //   }
+    //   else{
+    //     file.tempTags = tempTag
+    //   }
+    // }
+    onSubmitTags(file) {
+        file.tags = file?.tempTags?.trim();
+        file.isEditMode = false;
+        this.helper.updateTag(this.urlConfig?.updateTag || 'not-specified', { id: file?.id || null, tag: file?.tags || null }).subscribe({
+            next: (ir) => {
+                this.helper.showSuccessMsg(ir.message, 'Success', 3000);
+                this.onSubmit();
+            },
+            error: (err) => this.helper.showHttpErrorMsg(err)
+        });
+    }
+    // Drag-and-drop upload state
+    isUploadDragOver = false;
+    // Drag state for highlighting
+    isDragging = false;
+    dragSourceIndex = null;
+    dropTargetIndex = null;
+    canAcceptUploadDragDrop() {
+        if (!this.enableDragNDropForUpload || this.disabled || this.previewOnly || this.loading) {
+            return false;
+        }
+        return (this.config?.limit || 0) > (this.filesArray?.length || 0);
+    }
+    onUploadDragOver(event) {
+        if (!this.canAcceptUploadDragDrop()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        this.isUploadDragOver = true;
+    }
+    onUploadDragLeave(event) {
+        if (!this.enableDragNDropForUpload) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const relatedTarget = event.relatedTarget;
+        const currentTarget = event.currentTarget;
+        if (relatedTarget && currentTarget.contains(relatedTarget)) {
+            return;
+        }
+        this.isUploadDragOver = false;
+    }
+    onUploadDrop(event) {
+        if (!this.canAcceptUploadDragDrop()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.isUploadDragOver = false;
+        const files = event.dataTransfer?.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        const syntheticEvent = {
+            preventDefault: () => { },
+            target: { files, value: '' }
+        };
+        if (this.type === 'file') {
+            this.detectFiles(syntheticEvent);
+        }
+        else {
+            this.detectImages(syntheticEvent);
+        }
+    }
+    onDragStarted(index) {
+        this.isDragging = true;
+        this.dragSourceIndex = index;
+        this.dropTargetIndex = null;
+    }
+    onDragEntered(index) {
+        if (this.isDragging && index !== this.dragSourceIndex) {
+            this.dropTargetIndex = index;
+        }
+    }
+    onDragMoved(event) {
+        if (!this.isDragging)
+            return;
+        const pointerPosition = event.pointerPosition;
+        const dropItems = document.querySelectorAll('.drag-drop-item');
+        let foundTarget = null;
+        dropItems.forEach((item) => {
+            const rect = item.getBoundingClientRect();
+            const index = parseInt(item.getAttribute('data-index') || '-1', 10);
+            if (index !== -1 && index !== this.dragSourceIndex) {
+                if (pointerPosition.x >= rect.left &&
+                    pointerPosition.x <= rect.right &&
+                    pointerPosition.y >= rect.top &&
+                    pointerPosition.y <= rect.bottom) {
+                    foundTarget = index;
+                }
+            }
+        });
+        this.dropTargetIndex = foundTarget;
+    }
+    onMouseEnterItem(index) {
+        if (this.isDragging && index !== this.dragSourceIndex) {
+            this.dropTargetIndex = index;
+        }
+    }
+    onMouseLeaveItem() {
+        // Only clear if we're dragging - the next mouseenter will set the new target
+    }
+    onDragEnded() {
+        // Don't reset state here - let drop() handle it
+        // This event fires BEFORE drop(), so resetting here clears our tracked indices
+        this.isDragging = false;
+        // Keep dragSourceIndex and dropTargetIndex - they'll be reset in drop()
+    }
+    drop(event) {
+        // Use our tracked source index instead of CDK's previousIndex (which is unreliable for grids)
+        const sourceIndex = this.dragSourceIndex !== null ? this.dragSourceIndex : event.previousIndex;
+        const targetIndex = this.dropTargetIndex !== null ? this.dropTargetIndex : event.currentIndex;
+        // Log drag info for debugging
+        const draggedItem = this.filesArray[sourceIndex];
+        console.log('=== DRAG & DROP DEBUG ===');
+        console.log('Picked element:', {
+            title: draggedItem?.title || draggedItem?.s3Url?.split('/').pop(),
+            originalPosition: sourceIndex + 1,
+            s3Url: draggedItem?.s3Url
+        });
+        console.log('Dropping at position:', targetIndex + 1);
+        console.log('dragSourceIndex (our tracking):', this.dragSourceIndex);
+        console.log('dropTargetIndex (our tracking):', this.dropTargetIndex);
+        console.log('event.currentIndex (CDK):', event.currentIndex);
+        console.log('event.previousIndex (CDK):', event.previousIndex);
+        // Reset drag state
+        this.isDragging = false;
+        this.dragSourceIndex = null;
+        this.dropTargetIndex = null;
+        // Ignore if same position
+        if (sourceIndex === targetIndex) {
+            console.log('Same position - no change needed');
+            return;
+        }
+        // Access current data
+        const currentData = [...this.filesArray];
+        if (!currentData || currentData.length === 0) {
+            return;
+        }
+        // Reorder: move item from source to target position (shift other items)
+        moveItemInArray(currentData, sourceIndex, targetIndex);
+        // Update filesArray with reordered data
+        this.filesArray = currentData;
+        // Log after reorder
+        const newPosition = this.filesArray.findIndex((f) => f.s3Url === draggedItem?.s3Url);
+        console.log('After reorder - element new position:', newPosition + 1);
+        console.log('=========================');
+        this.updateSequence(true);
+    }
+    updateSequence(isShowMessage = false) {
+        // Update sequence for all files (including those without id yet)
+        // Re-calculate sequence based on current array order
+        this.filesArray = this.filesArray.map((file, index) => {
+            return { ...file, sequence: (index + 1) };
+        });
+        if (this.enableDragNDrop && this.urlConfig?.updateSequence) {
+            // Only send files with id to the server for sequence update
+            let filesWithId = this.filesArray.filter(f => f?.id && f?.id != null && f?.id != '');
+            let files = filesWithId?.length ? JSON.parse(JSON.stringify(filesWithId)) : [];
+            files = files?.map(f => {
+                return { id: f?.id, sequence: f?.sequence || 1 };
+            });
+            if (files.length > 0) {
+                this.helper.updateSequence(this.urlConfig?.updateSequence || 'not-specified', { files }).subscribe({
+                    next: (ir) => {
+                        if (isShowMessage) {
+                            this.helper.showSuccessMsg(ir.message, 'Success', 3000);
+                        }
+                        else {
+                            // Only show success message when files actually have IDs (meaning they were uploaded)
+                            if (filesWithId.length > 0) {
+                                this.helper.showSuccessMsg(`${this.type == 'image' ? 'Image' : 'File'} has been uploaded successfully`, 'Success', 3000);
+                            }
+                        }
+                        this.dataSequenceChange.emit(this.filesArray);
+                    },
+                    error: (err) => { this.helper.showHttpErrorMsg(err); this.onError.emit(true); }
+                });
+            }
+            else {
+                // If no files with id yet, just emit the current array
+                this.dataSequenceChange.emit(this.filesArray);
+            }
+        }
+        else {
+            this.dataSequenceChange.emit(this.filesArray);
+        }
+    }
+    getTagsArray(tags) {
+        let tempTag = tags?.trim();
+        let tempTagsArr = tempTag?.split(' ');
+        return tempTagsArr?.filter(e => e && e != '');
+    }
+    // =====================
+    // Remote Upload Methods
+    // =====================
+    /**
+     * Check if remote upload is available and configured
+     */
+    isRemoteUploadAvailable() {
+        return !!(this.remoteUploadConfig?.enabled &&
+            this.remoteUploadConfig?.socketAdapter &&
+            !this.isMobile &&
+            !this.isTab);
+    }
+    /**
+     * Initialize remote upload configuration
+     * Call this in ngOnInit or when config changes
+     */
+    initRemoteUpload() {
+        if (this.remoteUploadConfig?.enabled && this.remoteUploadConfig?.socketAdapter) {
+            this.remoteUploadService.configure(this.remoteUploadConfig);
+            // Subscribe to remote uploads (when files are accepted)
+            this.remoteUploadService.getRemoteUploads()
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(event => {
+                this.handleRemoteUpload(event);
+            });
+            // Subscribe to pending files (files from mobile waiting to be accepted)
+            this.remoteUploadService.getPendingFiles()
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(files => {
+                this.pendingFiles = files;
+                // Reset waiting state when we have pending files
+                if (files.length > 0) {
+                    this.isWaitingForMobileUpload = false;
+                }
+            });
+            // Subscribe to waiting state
+            this.remoteUploadService.getIsWaitingForUpload()
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(waiting => {
+                this.isWaitingForMobileUpload = waiting;
+            });
+        }
+    }
+    /**
+     * Handle a remote upload event
+     */
+    handleRemoteUpload(event) {
+        console.log('[AngularImageAndFilePicker] Remote upload received:', event);
+        // Reset waiting state
+        this.isWaitingForMobileUpload = false;
+        // Check if file already exists (prevent duplicates)
+        const fileExists = this.filesArray.some((f) => f.s3Url === event.file.s3Url);
+        if (fileExists) {
+            console.log('[AngularImageAndFilePicker] File already exists, skipping:', event.file.fileName);
+            return;
+        }
+        // Check if we've reached the limit
+        if (this.config?.limit && this.filesArray.length >= this.config.limit) {
+            this.helper.showErrorMsg(`Maximum limit of ${this.config.limit} files reached.`, 'Limit Reached');
+            return;
+        }
+        // Add the uploaded file to the array
+        const newFile = {
+            s3Url: event.file.s3Url,
+            title: event.file.fileName,
+            name: event.file.fileName,
+            filename: event.file.fileName,
+            mimeType: event.file.mimeType,
+            size: event.file.size,
+            uploadData: event.file.uploadData,
+            loading: false,
+            sequence: this.filesArray.length + 1,
+            remoteUpload: true,
+            mobileDeviceId: event.mobileDeviceId,
+            uploadedAt: event.timestamp
+        };
+        if (this.isAddUploadedFileInLastNode) {
+            this.filesArray.push(newFile);
+        }
+        else {
+            this.filesArray.unshift(newFile);
+        }
+        this.setSliderLoading();
+        this.onSubmit();
+        this.updateSequence();
+        this.onRemoteUpload.emit(event);
+        this.helper.showSuccessMsg(`${this.type === 'image' ? 'Image' : 'File'} uploaded from mobile device`, 'Remote Upload', 3000);
+    }
+    /**
+     * Open the QR code dialog for mobile upload
+     */
+    openRemoteUploadDialog() {
+        if (!this.isRemoteUploadAvailable()) {
+            this.helper.showErrorMsg('Remote upload is not available', 'Not Available');
+            return;
+        }
+        const dialogData = {
+            title: 'Upload from Mobile',
+            subtitle: `Scan this QR code to upload ${this.type === 'image' ? 'images' : 'files'} from your mobile device`,
+            qrSize: 200,
+            showCountdown: true,
+            fieldInfo: {
+                label: this.label || `${this.type === 'image' ? 'Images' : 'Files'}`,
+                accept: this.accept || (this.type === 'image' ? 'image/*' : '*'),
+                type: this.type,
+                entityType: this.entityType,
+                entityId: this.entityId,
+                isMultiple: this.config.isMultiple,
+                limit: this.config.limit,
+                isCompressed: this.config.isCompressed
+            }
+        };
+        const dialogRef = this.dialog.open(AngularQrCodeDialogComponent, {
+            width: this.isMobile ? '100%' : '470px',
+            maxWidth: '100%',
+            panelClass: ['angular-qr-code-dialog'],
+            data: dialogData,
+            disableClose: false
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log('[AngularImageAndFilePicker] QR dialog closed:', result);
+            // Files are already added via the remote upload subscription
+        });
+    }
+    /**
+     * Check if currently paired with a mobile device
+     */
+    isRemotePaired() {
+        return this.remoteUploadService.isPaired();
+    }
+    /**
+     * Disconnect from paired mobile device
+     */
+    async disconnectRemote() {
+        await this.remoteUploadService.disconnect();
+        this.isWaitingForMobileUpload = false;
+        this.mobileUploadFieldLabel = '';
+    }
+    /**
+     * Trigger upload from mobile - sends field request to mobile app
+     */
+    async triggerMobileUpload() {
+        if (!this.isRemotePaired()) {
+            // Not connected - open QR dialog to connect first
+            this.openRemoteUploadDialog();
+            return;
+        }
+        // Already connected - send field request to mobile
+        const fieldInfo = {
+            label: this.label || `${this.type === 'image' ? 'Upload Image' : 'Upload File'}`,
+            accept: this.accept || (this.type === 'image' ? 'image/*' : '*'),
+            type: this.type,
+            entityType: this.entityType,
+            entityId: this.entityId,
+            isMultiple: this.config.isMultiple,
+            limit: this.config.limit,
+            remainingSlots: (this.config.limit || 10) - this.filesArray.length,
+            isCompressed: this.config.isCompressed
+        };
+        this.isWaitingForMobileUpload = true;
+        this.mobileUploadFieldLabel = fieldInfo.label;
+        await this.remoteUploadService.sendFieldRequest(fieldInfo);
+    }
+    /**
+     * Cancel waiting for mobile upload
+     */
+    async cancelMobileUpload() {
+        this.isWaitingForMobileUpload = false;
+        await this.remoteUploadService.cancelFieldRequest();
+    }
+    /**
+     * Accept a pending file from mobile upload
+     * This calls the onFileAccept callback if provided, then handles the file
+     */
+    acceptPendingFile(pendingFile) {
+        // Call the user-provided callback if available
+        if (this.remoteUploadConfig?.onFileAccept) {
+            this.remoteUploadConfig.onFileAccept(pendingFile.file);
+        }
+        // Accept the file in the service (removes from pending, emits to remoteUpload$)
+        this.remoteUploadService.acceptPendingFile(pendingFile);
+    }
+    /**
+     * Reject a pending file from mobile upload
+     */
+    rejectPendingFile(pendingFile) {
+        this.remoteUploadService.rejectPendingFile(pendingFile);
+    }
+    /**
+     * Open dialog showing connection status with disconnect option
+     */
+    openViewConnectionDialog() {
+        const dialogRef = this.dialog.open(AngularViewConnectionDialogComponent, {
+            width: '600px',
+            maxWidth: '90vw',
+            data: {
+                title: 'Mobile Connection'
+            },
+            disableClose: false
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result === 'disconnected') {
+                console.log('[AngularImageAndFilePicker] Mobile device disconnected');
+            }
+        });
+    }
+    /**
+     * Check if a MIME type is an image type
+     */
+    isImageMimeType(mimeType) {
+        if (!mimeType)
+            return false;
+        return mimeType.startsWith('image/');
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerComponent, deps: [{ token: i1$2.MatDialog }, { token: AngularHelperService }, { token: i3$4.BreakpointObserver }, { token: AngularRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AngularImageAndFilePickerComponent, isStandalone: false, selector: "angular-image-and-file-picker", inputs: { urlConfig: "urlConfig", entityType: "entityType", entityId: "entityId", viewType: "viewType", type: "type", label: "label", disabled: "disabled", data: "data", hint: "hint", accept: "accept", isValidateMimeType: "isValidateMimeType", selectedId: "selectedId", options: "options", required: "required", previewOnly: "previewOnly", previewInFlex: "previewInFlex", imageItemClass: "imageItemClass", isAddUploadedFileInLastNode: "isAddUploadedFileInLastNode", isEnableDeleteConfirmation: "isEnableDeleteConfirmation", isEnableCapture: "isEnableCapture", deleteConfirmationMsg: "deleteConfirmationMsg", dialogConfig: "dialogConfig", enableDragNDropForUpload: "enableDragNDropForUpload", remoteUploadConfig: "remoteUploadConfig", isShowImageSequence: "isShowImageSequence", enableDragNDrop: "enableDragNDrop", editTagButtonWhenDisabled: "editTagButtonWhenDisabled", showDeleteButtonWhenDisabled: "showDeleteButtonWhenDisabled" }, outputs: { uploadInProgress: "uploadInProgress", onUploaded: "onUploaded", onFileSelect: "onFileSelect", onFileRemoved: "onFileRemoved", onError: "onError", onRemoteUpload: "onRemoteUpload", dataSequenceChange: "dataSequenceChange" }, usesOnChanges: true, ngImport: i0, template: "@if (config) {\n    <input type=\"file\" size=\"60\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" [multiple]=\"config.isMultiple\" style=\"display: none;\" />\n    @if(viewType == 'card'){\n        <div [class.image-picker-label]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" [style.height]=\"filesArray?.length ? null : (remoteUploadConfig?.enabled ? ('calc(' + config?.height  + ' + 40px)') : config?.height)\" style=\"--angular-image-picker-height: {{config?.height ?? 0}}; --angular-image-upload-config-height: {{remoteUploadConfig?.enabled ? '40px' : '0px'}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                <div [ngClass]=\"{'grid-cols-1': config?.cols == 1, 'grid-cols-2': config?.cols == 2, 'grid-cols-3': config?.cols == 3, 'grid-cols-4': config?.cols == 4, 'grid-cols-5': config?.cols == 5, 'grid-cols-6': config?.cols == 6}\" class=\"{{previewInFlex ? 'flex' : 'grid'}} image-list\" style=\"gap: 25px;\">\n                    @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                        @if(enableDragNDrop){\n                            <div class=\"flex flex-col drag-drop-item\" [attr.data-index]=\"i\" [class.drag-over-highlight]=\"dropTargetIndex === i && isDragging && dragSourceIndex !== i\">\n                                @if(isShowImageSequence){\n                                    <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n                                        <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n                                    </div>\n                                }\n                                <div cdkDrag (cdkDragStarted)=\"onDragStarted(i)\" (cdkDragEnded)=\"onDragEnded()\" (cdkDragMoved)=\"onDragMoved($event)\">\n                                    <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" cdkDragHandle>\n                                        <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon-2x\">description</mat-icon>\n                                        <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                        <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                        \n                                        <!-- Loading overlay -->\n                                        <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                        </div>\n                                    </div>\n                                </div>\n                                @if(config?.enableImageTags){\n                                    <div class=\"image-description\">\n                                        <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n                                            @if(file?.tags && file?.tags != ''){\n                                                <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n                                            }\n                                            @else {\n                                                <span>No Tags</span>\n                                            }\n                                        </div>\n                                        <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && (editTagButtonWhenDisabled || !disabled)\">edit</span>\n                                        <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode\">\n                                            <!-- (keydown)=\"onKeydown($event, file)\" -->\n                                            <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" />\n                                            <div class=\"description-actions\">\n                                                <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n                                                <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        @else {\n                            <div class=\"flex flex-col\">\n                                @if(isShowImageSequence){\n                                    <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n                                        <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n                                    </div>\n                                }\n                                <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon-2x\">description</mat-icon>\n                                    <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                    <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                    \n                                    <!-- Loading overlay -->\n                                    <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                    </div>\n                                </div>\n                                @if(config?.enableImageTags){\n                                    <div class=\"image-description\">\n                                        <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n                                        <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n                                        <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n                                            <!-- (keydown)=\"onKeydown($event, file)\" -->\n                                            <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" />\n                                            <div class=\"description-actions\">\n                                                <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n                                                <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <div class=\"flex flex-col\" style=\"position: relative;\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\n                                \n                                <!-- Image upload options in grid -->\n                                <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i+'-'+i, -4)\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer; position: relative;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state hover-section\" style=\"gap: 4px; padding: 8px;\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"18\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\" style=\"font-size: 10px; text-align: center;\">Waiting for mobile...</span>\n                                            <div class=\"w-full h-full absolute hover-section-overlay\" style=\"top: 0; left: 0; background-color: #fafafa; justify-content: center; align-items: center;\">\n                                                <button type=\"button\" class=\"cancel-mobile-btn\" style=\"position: unset;\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                    <mat-icon style=\"display: unset; color: var(--angular-cancel, #bb333b);\">close</mat-icon>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    } @else if(pendingFiles.length > 0) {\n                                        <!-- Pending files from mobile - show accept/reject UI -->\n                                        <div class=\"pending-files-container\" (click)=\"$event.stopPropagation()\">\n                                            <div class=\"pending-files-header\">\n                                                <mat-icon>smartphone</mat-icon>\n                                                <span>{{ pendingFiles.length }} file(s) from mobile</span>\n                                            </div>\n                                            <div class=\"pending-files-list\">\n                                                @for(pf of pendingFiles; track pf.timestamp; let idx = $index) {\n                                                    <div class=\"pending-file-item\">\n                                                        <div class=\"pending-file-preview\" [style.background-image]=\"isImageMimeType(pf.file.mimeType) ? 'url(' + pf.file.s3Url + ')' : ''\">\n                                                            @if(!isImageMimeType(pf.file.mimeType)) {\n                                                                <mat-icon>description</mat-icon>\n                                                            }\n                                                        </div>\n                                                        <span class=\"pending-file-name\" [title]=\"pf.file.fileName\">{{ pf.file.fileName }}</span>\n                                                        <div class=\"pending-file-actions\">\n                                                            <button type=\"button\" mat-icon-button class=\"accept-btn\" (click)=\"acceptPendingFile(pf); $event.stopPropagation()\" title=\"Accept\">\n                                                                <mat-icon>check</mat-icon>\n                                                            </button>\n                                                            <button type=\"button\" mat-icon-button class=\"reject-btn\" (click)=\"rejectPendingFile(pf); $event.stopPropagation()\" title=\"Reject\">\n                                                                <mat-icon>close</mat-icon>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    } @else{\n                                        <div class=\"w-full h-full\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center;\">\n                                            <mat-icon class=\"active\">upload_file</mat-icon>\n                                            <span style=\"font-weight: 500; font-size: 9px;\">{{label}}</span>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n\n                            @if(isRemoteUploadAvailable() && !isWaitingForMobileUpload && pendingFiles.length === 0){\n                                <div class=\"flex flex-col\" style=\"position: relative;\">\n                                    @if(isShowImageSequence){\n                                        <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                        </div>\n                                    }\n                                \n                                    <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer; position: relative; border-width: 0px !important;\">\n                                        <!-- Mobile Upload Section - Positioned at top-right of upload item -->\n                                        @if(isRemotePaired()){\n                                            <span class=\"material-icons cancel\" style=\"color: #4caf50;\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">link</span>\n                                        }\n                                        <div class=\"mobile-upload-overlay-grid w-full h-full\">\n                                            @if(isRemotePaired()){\n                                                <!-- Connected state -->\n                                                <div class=\"mobile-upload-actions w-full h-full\">\n                                                    <button type=\"button\" class=\"mobile-upload-btn connected compact\" style=\"width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\" (click)=\"triggerMobileUpload(); $event.preventDefault(); $event.stopPropagation()\" title=\"Upload from Mobile\">\n                                                        <mat-icon style=\"display: unset !important;\">mobile_screen_share</mat-icon>\n                                                        <span style=\"font-weight: 500; font-size: 9px;\">Mobile Upload</span>\n                                                    </button>\n                                                    <!-- <button type=\"button\" class=\"view-connection-btn compact\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">\n                                                        <mat-icon style=\"display: unset !important;\">link</mat-icon>\n                                                    </button> -->\n                                                </div>\n                                            } @else {\n                                                <!-- Not connected -->\n                                                <div class=\"mobile-upload-actions w-full h-full\">\n                                                    <button type=\"button\" class=\"mobile-upload-btn compact\" style=\"width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\" (click)=\"openRemoteUploadDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"Connect Mobile Device\">\n                                                        <mat-icon style=\"display: unset !important;\">qr_code_scanner</mat-icon>\n                                                        <span style=\"font-weight: 500; font-size: 9px;\">Connect Mobile</span>\n                                                    </button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        }\n                    }\n                </div>\n            }\n            @else if(!disabled){\n                <!-- Main File Upload Area with Mobile Upload Button -->\n                <div class=\"main-upload-wrapper\">\n                    <div class=\"main-upload-label\">\n                        <!-- Mobile Upload Section - Positioned at top with z-index -->\n                        @if(isRemoteUploadAvailable()){\n                            <div class=\"mobile-upload-overlay\" (click)=\"$event.stopPropagation()\">\n                                @if(isWaitingForMobileUpload) {\n                                    <!-- Waiting for mobile upload state -->\n                                    <div class=\"mobile-waiting-state\">\n                                        <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                        <span style=\"font-size: 14px; color: #666; text-align: center;\">Waiting for upload from mobile...</span>\n                                        <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.preventDefault(); $event.stopPropagation()\">\n                                            Cancel\n                                        </button>\n                                    </div>\n                                } @else if(isRemotePaired()){\n                                    <!-- Connected state - show upload and view connection buttons -->\n                                    <div class=\"mobile-upload-actions\">\n                                        <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.preventDefault(); $event.stopPropagation()\" title=\"Upload from Mobile\">\n                                            <mat-icon>smartphone</mat-icon>\n                                            <span>Upload from Mobile</span>\n                                        </button>\n                                        <button type=\"button\" class=\"view-connection-btn\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">\n                                            <mat-icon>link</mat-icon>\n                                        </button>\n                                    </div>\n                                } @else {\n                                    <!-- Not connected - show connect button -->\n                                    <div class=\"mobile-upload-actions\">\n                                        <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"Connect Mobile Device\">\n                                            <mat-icon>qr_code_scanner</mat-icon>\n                                            <span>Connect Mobile</span>\n                                        </button>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        \n                        <!-- Upload Icon and Text - clickable area -->\n                        <label class=\"upload-content\" *ngIf=\"!isWaitingForMobileUpload\" [class.with-mobile]=\"isRemoteUploadAvailable()\" style=\"cursor: pointer; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                            <mat-icon>upload_file</mat-icon>\n                            <p style=\"text-align: center; font-size: 14px; margin: 0px;\">\n                                {{label}}\n                                @if(hint && hint != ''){\n                                    <br>\n                                    <small>{{hint}}</small>\n                                }\n                            </p>\n                        </label>\n                    </div>\n                </div>\n            }\n            @else{\n                <div class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000   C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000   C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792   C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792   C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000   C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000  M214.500000,497.000000   C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769   C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782   C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754   C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754   C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905   C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847   C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847   C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847   C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065   C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768   C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581   C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419   C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538   C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473   C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351   C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902   C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457   C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832   C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836   C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231   C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376   C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687   C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847   C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185   C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544   C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304   C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864   C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288   C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851   C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000   C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851   C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288   C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864   C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304   C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544   C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185   C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847   C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687   C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376   C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231   C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836   C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832   C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457   C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902   C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351   C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473   C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538   C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419   C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581   C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768   C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065   C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847   C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847   C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847   C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905   C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754   C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754   C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782   C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769   C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000  M134.597260,321.000000   C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983   C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990   C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647   C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448   C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000   C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000   C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000   C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823   C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623   C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783   C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739   C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000   C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000  M324.557129,242.085190   C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169   C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189   C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112   C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366   C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040   C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212   C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839   C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562   C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400   C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615   C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838   C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000   C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000   C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739   C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783   C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623   C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823   C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000   C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000   C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000   C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448   C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647   C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990   C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983   C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000  M140.500000,440.999939   C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183   C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817   C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634   C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000   C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980   C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017   C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080   C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939  M211.498047,417.000153   C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069   C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042   C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417   C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435   C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375   C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042   C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920   C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838   C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615   C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400   C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562   C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839   C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212   C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040   C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366   C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112   C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189   C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169   C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920  M365.048187,97.443359   C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753   C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678   C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203   C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324   C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401   C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491   C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972   C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738   C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716   C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832   C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186   C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294   C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683   C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959   C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931   C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687   C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833   C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827   C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821   C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850   C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880   C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267   C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939   C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080   C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017   C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980   C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000   C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634   C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817   C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183   C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153   C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042   C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375   C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435   C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417   C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042   C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069   C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910   C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267   C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880   C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850   C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821   C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827   C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833   C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687   C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931   C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959   C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683   C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294   C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186   C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832   C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716   C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738   C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972   C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491   C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401   C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324   C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203   C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678   C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753   C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910  z\"/>\n                    </svg>\n\n                </div>\n            }\n        </div>\n    }\n    @else if(viewType == 'compact'){\n        <div [class.image-picker-label-compact]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" style=\"height: 42px; width: 42px;\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                <div>\n                    @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                        @if(i == 0) {\n                            <div>\n                                <div class=\"compact-image-item\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" [style.background-size]=\"'contain'\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon\">description</mat-icon>\n                                    <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                    <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                    \n                                    <!-- Loading overlay -->\n                                    <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                    </div>\n                                </div>\n                        \n                            </div>\n                        }\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <div class=\"flex flex-col\">\n                                <!-- Image upload options in grid -->\n                                <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                                    <mat-icon class=\"active\">upload_file</mat-icon>\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n            @else if(!disabled){\n                <label style=\"display: flex; gap: 12px; flex-direction: column; justify-content: center; align-items: center; height: 100%; cursor: pointer;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                    <mat-icon>upload_file</mat-icon>\n                </label>\n            }\n            @else{\n                <div class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000   C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000   C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792   C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792   C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000   C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000  M214.500000,497.000000   C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769   C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782   C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754   C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754   C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905   C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847   C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847   C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847   C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065   C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768   C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581   C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419   C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538   C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473   C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351   C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902   C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457   C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832   C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836   C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231   C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376   C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687   C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847   C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185   C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544   C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304   C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864   C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288   C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851   C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000   C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851   C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288   C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864   C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304   C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544   C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185   C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847   C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687   C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376   C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231   C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836   C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832   C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457   C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902   C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351   C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473   C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538   C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419   C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581   C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768   C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065   C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847   C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847   C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847   C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905   C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754   C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754   C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782   C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769   C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000  M134.597260,321.000000   C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983   C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990   C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647   C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448   C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000   C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000   C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000   C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823   C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623   C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783   C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739   C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000   C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000  M324.557129,242.085190   C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169   C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189   C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112   C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366   C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040   C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212   C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839   C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562   C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400   C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615   C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838   C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000   C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000   C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739   C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783   C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623   C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823   C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000   C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000   C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000   C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448   C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647   C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990   C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983   C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000  M140.500000,440.999939   C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183   C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817   C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634   C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000   C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980   C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017   C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080   C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939  M211.498047,417.000153   C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069   C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042   C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417   C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435   C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375   C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042   C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920   C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838   C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615   C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400   C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562   C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839   C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212   C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040   C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366   C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112   C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189   C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169   C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920  M365.048187,97.443359   C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753   C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678   C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203   C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324   C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401   C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491   C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972   C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738   C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716   C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832   C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186   C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294   C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683   C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959   C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931   C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687   C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833   C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827   C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821   C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850   C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880   C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267   C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939   C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080   C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017   C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980   C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000   C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634   C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817   C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183   C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153   C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042   C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375   C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435   C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417   C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042   C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069   C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910   C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267   C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880   C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850   C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821   C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827   C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833   C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687   C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931   C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959   C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683   C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294   C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186   C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832   C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716   C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738   C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972   C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491   C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401   C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324   C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203   C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678   C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753   C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910  z\"/>\n                    </svg>\n\n                </div>\n            }\n        </div>\n    }\n    @else if(viewType == 'list'){\n        <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --angular-image-picker-height: {{config?.height ?? 0}}\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                    <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n                        <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n                        <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n                        <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n                            <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"angular-icon-btn-sm angular-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n                                <mat-icon>download_for_offline</mat-icon>\n                            </button>\n                            <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"angular-icon-btn-sm angular-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n                                <mat-icon>visibility</mat-icon>\n                            </button>\n                            <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"angular-icon-btn-sm angular-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn\">\n                                <mat-icon>delete</mat-icon>\n                            </button>\n                        </div>\n                        \n                        <!-- Loading overlay for list view -->\n                        <div class=\"loading-img\" *ngIf=\"file?.loading\" style=\"border-radius: 5px;\">\n                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"25\"></mat-progress-spinner>\n                        </div>\n                    </div>\n                    @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                        <div style=\"cursor: pointer; display: flex; align-items: center; gap: 4px; border: 1px solid black; border-radius: 5px; padding: 5px; height: 56px;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                            <mat-icon style=\"width: 40px; min-width: 22px;\">upload_file</mat-icon>\n                            <div style=\"width: 100%;\">\n                                <div style=\"display: flex; flex-direction: column; align-items: start; font-size: 14px;\">\n                                    {{label}}\n                                    @if(hint && hint != ''){\n                                        <small>{{hint}}</small>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    }\n                }\n            }\n            @else if(!disabled){\n                <div style=\"cursor: pointer; display: flex; align-items: center; gap: 4px; border: 1px solid black; border-radius: 5px; padding: 5px; height: 56px;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                    <mat-icon style=\"width: 40px; min-width: 22px;\">upload_file</mat-icon>\n                    <div style=\"width: 100%;\">\n                        <div style=\"display: flex; flex-direction: column; align-items: start; font-size: 14px;\">\n                            {{label}}\n                            @if(hint && hint != ''){\n                                <small>{{hint}}</small>\n                            }\n                        </div>\n                    </div>\n                    <!-- Mobile Upload Button for list view -->\n                    @if(isRemoteUploadAvailable()){\n                        <button type=\"button\" mat-icon-button class=\"mobile-upload-btn-list\" (click)=\"$event.stopPropagation(); openRemoteUploadDialog()\" title=\"Upload from Mobile\" aria-label=\"Upload from Mobile\">\n                            <mat-icon>smartphone</mat-icon>\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    }\n}\n", styles: [".hover-section{--overlay-display: none;position:relative}.hover-section .hover-section-overlay{display:var(--overlay-display)}.hover-section:hover{--overlay-display: flex !important}.w-full{width:100%!important}.h-full{height:100%!important}.cdk-drop-list-dragging{border:2px solid red!important}.cdk-drag-preview{box-sizing:border-box;border-radius:8px;box-shadow:0 5px 25px -5px #0000004d;opacity:.9}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-over-highlight .image-item{outline:3px solid #3f51b5!important;outline-offset:2px;box-shadow:0 0 15px #3f51b580!important}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.angular-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.angular-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.angular-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.angular-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.angular-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.angular-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.angular-text-download{color:var(--angular-download, var(--mat-sys-primary))}.angular-text-view{color:var(--angular-primary, var(--mat-sys-primary))}.angular-text-cancel{color:var(--angular-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;left:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:none;border-radius:4px;padding:0;box-sizing:border-box;height:var(--angular-image-picker-height, 130px)}.image-picker-label:has(.image-list){border:2px solid #e3e8ef;padding:16px;height:auto}.image-picker-label.error{border:2px dashed var(--angular-error, #a00404);padding:16px}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px;box-sizing:border-box}.image-picker-label-compact.error{border:2px dashed var(--angular-error, #a00404)}.compact-image-item{width:42px;height:42px;position:relative;display:flex;align-items:center;justify-content:center}.compact-image-item .cancel{color:var(--angular-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.compact-image-item .download{color:var(--angular-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item{aspect-ratio:1;height:var(--angular-image-picker-height, 130px);border-radius:5px;background-position:center;background-size:cover;position:relative;display:flex;justify-content:center;align-items:center;border:1px solid rgba(0,0,0,.38);width:100%}.image-list .image-item.uploader{border:2px dashed #d0d5dd!important;cursor:pointer;transition:all .3s ease;background:#fff}.image-list .image-item.uploader:hover{border-color:var(--angular-primary, #1F6AAD)!important;background:linear-gradient(to bottom,#fff,#f8f9fc);box-shadow:0 2px 8px #1f6aad14}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--angular-item-selected, var(--mat-sys-primary))!important;width:calc(100% - 4px)}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--angular-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--angular-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--angular-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--angular-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--angular-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.angular-curser-pointer{cursor:pointer}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--angular-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--angular-cancel);border:1px solid var(--angular-cancel)}.description-save-btn{background-color:var(--angular-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}.main-upload-wrapper{position:relative;width:100%;overflow:hidden}.mobile-upload-overlay{position:absolute;top:13px;left:50%;transform:translate(-50%);z-index:10;padding:12px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;pointer-events:all;width:100%}.mobile-upload-overlay-grid{padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;pointer-events:all}.upload-content{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;pointer-events:all;width:100%}.upload-content.with-mobile{margin-top:70px}.mobile-upload-section{padding:16px;background:linear-gradient(145deg,#fff,#f8f9fc);border:1px solid #e3e8ef;border-radius:12px;margin-bottom:16px;display:flex;justify-content:center;align-items:center;box-shadow:0 1px 3px #0000000d;box-sizing:border-box}.mobile-upload-section.grid-mobile-section{margin-bottom:10px;padding:10px}.mobile-upload-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,var(--angular-primary, #1F6AAD) 0%,#1a5a94 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #1f6aad33;letter-spacing:.3px;box-sizing:border-box}.mobile-upload-btn.compact{padding:8px 14px;font-size:13px}.mobile-upload-btn:hover{background:linear-gradient(135deg,#175080,#134066);transform:translateY(-2px);box-shadow:0 4px 12px #1f6aad4d}.mobile-upload-btn:active{transform:translateY(0);box-shadow:0 2px 4px #1f6aad33}.mobile-upload-btn.connected{background:linear-gradient(135deg,#4caf50,#388e3c);box-shadow:0 2px 8px #4caf5033}.mobile-upload-btn.connected:hover{background:linear-gradient(135deg,#388e3c,#2e7d32);box-shadow:0 4px 12px #4caf504d}.mobile-upload-btn mat-icon{font-size:20px;width:20px;height:20px}.mobile-upload-btn span{white-space:nowrap;font-weight:600}.mobile-upload-actions{display:flex;align-items:center;gap:8px}.main-upload-label{background:#fff;border:2px dashed #d0d5dd;border-radius:12px;padding:24px;transition:all .3s ease;height:calc(var(--angular-image-picker-height, 130px) + var(--angular-image-upload-config-height, 0px));box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.main-upload-label:hover{border-color:var(--angular-primary, #1F6AAD);background:linear-gradient(to bottom,#fff,#f8f9fc);box-shadow:0 2px 8px #1f6aad14}.view-connection-btn{display:flex;align-items:center;justify-content:center;padding:5px;background:#fff;color:var(--angular-primary, #1F6AAD);border:2px solid var(--angular-primary, #1F6AAD);border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #1f6aad1a}.view-connection-btn.compact{padding:8px}.view-connection-btn:hover{background:var(--angular-primary, #1F6AAD);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #1f6aad40}.view-connection-btn:active{transform:translateY(0);box-shadow:0 2px 4px #1f6aad26}.view-connection-btn mat-icon{font-size:20px;width:20px;height:20px}.disconnect-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.disconnect-btn:hover{background-color:#d32f2f}.disconnect-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-waiting-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;width:100%}.mobile-waiting-state .waiting-text{font-size:12px;color:#666}.mobile-waiting-state .cancel-mobile-btn{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background-color:transparent;color:#666;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s ease}.mobile-waiting-state .cancel-mobile-btn:hover{background-color:#0000001a}.mobile-waiting-state .cancel-mobile-btn mat-icon{font-size:16px;width:16px;height:16px}.cancel-mobile-btn-text{margin-top:8px;padding:6px 16px;background-color:transparent;color:var(--angular-primary, #1F6AAD);border:1px solid var(--angular-primary, #1F6AAD);border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s ease}.cancel-mobile-btn-text:hover{background-color:#1f6aad1a}.mobile-upload-btn-list{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--angular-primary, #1F6AAD);color:#fff;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}.mobile-upload-btn-list:hover{background-color:var(--angular-primary-dark, #175080)}.mobile-upload-btn-list mat-icon{font-size:20px;width:20px;height:20px}.view-connection-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:#e8f5e9;color:#4caf50;border:1px solid #4caf50;border-radius:4px;cursor:pointer;transition:all .2s ease}.view-connection-btn:hover{background-color:#c8e6c9}.view-connection-btn mat-icon{font-size:18px;width:18px;height:18px}.pending-files-container{display:flex;flex-direction:column;gap:8px;width:100%;max-height:200px;overflow-y:auto;padding:8px;background-color:#fff8e1;border-radius:4px;border:1px solid #ffcc80}.pending-files-header{display:flex;align-items:center;gap:6px;font-size:12px;color:#e65100;font-weight:500}.pending-files-header mat-icon{font-size:16px;width:16px;height:16px}.pending-files-list{display:flex;flex-direction:column;gap:6px}.pending-file-item{display:flex;align-items:center;gap:8px;padding:6px;background-color:#fff;border-radius:4px;border:1px solid #e0e0e0}.pending-file-preview{width:36px;height:36px;min-width:36px;border-radius:4px;background-size:cover;background-position:center;background-color:#f5f5f5;display:flex;align-items:center;justify-content:center}.pending-file-preview mat-icon{font-size:20px;color:#757575}.pending-file-name{flex:1;font-size:12px;color:#424242;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pending-file-actions{display:flex;gap:4px}.pending-file-actions .accept-btn{width:28px;height:28px;color:#4caf50}.pending-file-actions .accept-btn:hover{background-color:#4caf501a}.pending-file-actions .reject-btn{width:28px;height:28px;color:#f44336}.pending-file-actions .reject-btn:hover{background-color:#f443361a}.pending-file-actions mat-icon{font-size:18px;width:18px;height:18px}::ng-deep .camera-capture-dialog{padding:0!important;max-width:100vw!important;max-height:100vh!important}::ng-deep .camera-capture-dialog .mat-mdc-dialog-container{padding:0!important;background:transparent!important;box-shadow:none!important}.image-picker-label.upload-drag-over,.image-picker-label-compact.upload-drag-over,.error-border.upload-drag-over{outline:2px dashed var(--angular-primary, #1F6AAD);outline-offset:2px;background-color:#1f6aad0f}\n"], dependencies: [{ kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-image-and-file-picker', standalone: false, template: "@if (config) {\n    <input type=\"file\" size=\"60\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" [multiple]=\"config.isMultiple\" style=\"display: none;\" />\n    @if(viewType == 'card'){\n        <div [class.image-picker-label]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" [style.height]=\"filesArray?.length ? null : (remoteUploadConfig?.enabled ? ('calc(' + config?.height  + ' + 40px)') : config?.height)\" style=\"--angular-image-picker-height: {{config?.height ?? 0}}; --angular-image-upload-config-height: {{remoteUploadConfig?.enabled ? '40px' : '0px'}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                <div [ngClass]=\"{'grid-cols-1': config?.cols == 1, 'grid-cols-2': config?.cols == 2, 'grid-cols-3': config?.cols == 3, 'grid-cols-4': config?.cols == 4, 'grid-cols-5': config?.cols == 5, 'grid-cols-6': config?.cols == 6}\" class=\"{{previewInFlex ? 'flex' : 'grid'}} image-list\" style=\"gap: 25px;\">\n                    @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                        @if(enableDragNDrop){\n                            <div class=\"flex flex-col drag-drop-item\" [attr.data-index]=\"i\" [class.drag-over-highlight]=\"dropTargetIndex === i && isDragging && dragSourceIndex !== i\">\n                                @if(isShowImageSequence){\n                                    <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n                                        <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n                                    </div>\n                                }\n                                <div cdkDrag (cdkDragStarted)=\"onDragStarted(i)\" (cdkDragEnded)=\"onDragEnded()\" (cdkDragMoved)=\"onDragMoved($event)\">\n                                    <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" cdkDragHandle>\n                                        <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon-2x\">description</mat-icon>\n                                        <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                        <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                        \n                                        <!-- Loading overlay -->\n                                        <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                        </div>\n                                    </div>\n                                </div>\n                                @if(config?.enableImageTags){\n                                    <div class=\"image-description\">\n                                        <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n                                            @if(file?.tags && file?.tags != ''){\n                                                <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n                                            }\n                                            @else {\n                                                <span>No Tags</span>\n                                            }\n                                        </div>\n                                        <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && (editTagButtonWhenDisabled || !disabled)\">edit</span>\n                                        <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode\">\n                                            <!-- (keydown)=\"onKeydown($event, file)\" -->\n                                            <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" />\n                                            <div class=\"description-actions\">\n                                                <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n                                                <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        @else {\n                            <div class=\"flex flex-col\">\n                                @if(isShowImageSequence){\n                                    <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n                                        <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n                                    </div>\n                                }\n                                <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon-2x\">description</mat-icon>\n                                    <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                    <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                    \n                                    <!-- Loading overlay -->\n                                    <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                    </div>\n                                </div>\n                                @if(config?.enableImageTags){\n                                    <div class=\"image-description\">\n                                        <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n                                        <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n                                        <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n                                            <!-- (keydown)=\"onKeydown($event, file)\" -->\n                                            <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" />\n                                            <div class=\"description-actions\">\n                                                <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n                                                <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <div class=\"flex flex-col\" style=\"position: relative;\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\n                                \n                                <!-- Image upload options in grid -->\n                                <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i+'-'+i, -4)\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer; position: relative;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state hover-section\" style=\"gap: 4px; padding: 8px;\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"18\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\" style=\"font-size: 10px; text-align: center;\">Waiting for mobile...</span>\n                                            <div class=\"w-full h-full absolute hover-section-overlay\" style=\"top: 0; left: 0; background-color: #fafafa; justify-content: center; align-items: center;\">\n                                                <button type=\"button\" class=\"cancel-mobile-btn\" style=\"position: unset;\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                    <mat-icon style=\"display: unset; color: var(--angular-cancel, #bb333b);\">close</mat-icon>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    } @else if(pendingFiles.length > 0) {\n                                        <!-- Pending files from mobile - show accept/reject UI -->\n                                        <div class=\"pending-files-container\" (click)=\"$event.stopPropagation()\">\n                                            <div class=\"pending-files-header\">\n                                                <mat-icon>smartphone</mat-icon>\n                                                <span>{{ pendingFiles.length }} file(s) from mobile</span>\n                                            </div>\n                                            <div class=\"pending-files-list\">\n                                                @for(pf of pendingFiles; track pf.timestamp; let idx = $index) {\n                                                    <div class=\"pending-file-item\">\n                                                        <div class=\"pending-file-preview\" [style.background-image]=\"isImageMimeType(pf.file.mimeType) ? 'url(' + pf.file.s3Url + ')' : ''\">\n                                                            @if(!isImageMimeType(pf.file.mimeType)) {\n                                                                <mat-icon>description</mat-icon>\n                                                            }\n                                                        </div>\n                                                        <span class=\"pending-file-name\" [title]=\"pf.file.fileName\">{{ pf.file.fileName }}</span>\n                                                        <div class=\"pending-file-actions\">\n                                                            <button type=\"button\" mat-icon-button class=\"accept-btn\" (click)=\"acceptPendingFile(pf); $event.stopPropagation()\" title=\"Accept\">\n                                                                <mat-icon>check</mat-icon>\n                                                            </button>\n                                                            <button type=\"button\" mat-icon-button class=\"reject-btn\" (click)=\"rejectPendingFile(pf); $event.stopPropagation()\" title=\"Reject\">\n                                                                <mat-icon>close</mat-icon>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    } @else{\n                                        <div class=\"w-full h-full\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center;\">\n                                            <mat-icon class=\"active\">upload_file</mat-icon>\n                                            <span style=\"font-weight: 500; font-size: 9px;\">{{label}}</span>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n\n                            @if(isRemoteUploadAvailable() && !isWaitingForMobileUpload && pendingFiles.length === 0){\n                                <div class=\"flex flex-col\" style=\"position: relative;\">\n                                    @if(isShowImageSequence){\n                                        <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                        </div>\n                                    }\n                                \n                                    <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer; position: relative; border-width: 0px !important;\">\n                                        <!-- Mobile Upload Section - Positioned at top-right of upload item -->\n                                        @if(isRemotePaired()){\n                                            <span class=\"material-icons cancel\" style=\"color: #4caf50;\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">link</span>\n                                        }\n                                        <div class=\"mobile-upload-overlay-grid w-full h-full\">\n                                            @if(isRemotePaired()){\n                                                <!-- Connected state -->\n                                                <div class=\"mobile-upload-actions w-full h-full\">\n                                                    <button type=\"button\" class=\"mobile-upload-btn connected compact\" style=\"width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\" (click)=\"triggerMobileUpload(); $event.preventDefault(); $event.stopPropagation()\" title=\"Upload from Mobile\">\n                                                        <mat-icon style=\"display: unset !important;\">mobile_screen_share</mat-icon>\n                                                        <span style=\"font-weight: 500; font-size: 9px;\">Mobile Upload</span>\n                                                    </button>\n                                                    <!-- <button type=\"button\" class=\"view-connection-btn compact\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">\n                                                        <mat-icon style=\"display: unset !important;\">link</mat-icon>\n                                                    </button> -->\n                                                </div>\n                                            } @else {\n                                                <!-- Not connected -->\n                                                <div class=\"mobile-upload-actions w-full h-full\">\n                                                    <button type=\"button\" class=\"mobile-upload-btn compact\" style=\"width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\" (click)=\"openRemoteUploadDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"Connect Mobile Device\">\n                                                        <mat-icon style=\"display: unset !important;\">qr_code_scanner</mat-icon>\n                                                        <span style=\"font-weight: 500; font-size: 9px;\">Connect Mobile</span>\n                                                    </button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        }\n                    }\n                </div>\n            }\n            @else if(!disabled){\n                <!-- Main File Upload Area with Mobile Upload Button -->\n                <div class=\"main-upload-wrapper\">\n                    <div class=\"main-upload-label\">\n                        <!-- Mobile Upload Section - Positioned at top with z-index -->\n                        @if(isRemoteUploadAvailable()){\n                            <div class=\"mobile-upload-overlay\" (click)=\"$event.stopPropagation()\">\n                                @if(isWaitingForMobileUpload) {\n                                    <!-- Waiting for mobile upload state -->\n                                    <div class=\"mobile-waiting-state\">\n                                        <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                        <span style=\"font-size: 14px; color: #666; text-align: center;\">Waiting for upload from mobile...</span>\n                                        <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.preventDefault(); $event.stopPropagation()\">\n                                            Cancel\n                                        </button>\n                                    </div>\n                                } @else if(isRemotePaired()){\n                                    <!-- Connected state - show upload and view connection buttons -->\n                                    <div class=\"mobile-upload-actions\">\n                                        <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.preventDefault(); $event.stopPropagation()\" title=\"Upload from Mobile\">\n                                            <mat-icon>smartphone</mat-icon>\n                                            <span>Upload from Mobile</span>\n                                        </button>\n                                        <button type=\"button\" class=\"view-connection-btn\" (click)=\"openViewConnectionDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"View Connection\">\n                                            <mat-icon>link</mat-icon>\n                                        </button>\n                                    </div>\n                                } @else {\n                                    <!-- Not connected - show connect button -->\n                                    <div class=\"mobile-upload-actions\">\n                                        <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.preventDefault(); $event.stopPropagation()\" title=\"Connect Mobile Device\">\n                                            <mat-icon>qr_code_scanner</mat-icon>\n                                            <span>Connect Mobile</span>\n                                        </button>\n                                    </div>\n                                }\n                            </div>\n                        }\n                        \n                        <!-- Upload Icon and Text - clickable area -->\n                        <label class=\"upload-content\" *ngIf=\"!isWaitingForMobileUpload\" [class.with-mobile]=\"isRemoteUploadAvailable()\" style=\"cursor: pointer; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                            <mat-icon>upload_file</mat-icon>\n                            <p style=\"text-align: center; font-size: 14px; margin: 0px;\">\n                                {{label}}\n                                @if(hint && hint != ''){\n                                    <br>\n                                    <small>{{hint}}</small>\n                                }\n                            </p>\n                        </label>\n                    </div>\n                </div>\n            }\n            @else{\n                <div class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000   C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000   C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792   C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792   C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000   C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000  M214.500000,497.000000   C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769   C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782   C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754   C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754   C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905   C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847   C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847   C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847   C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065   C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768   C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581   C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419   C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538   C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473   C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351   C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902   C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457   C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832   C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836   C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231   C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376   C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687   C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847   C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185   C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544   C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304   C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864   C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288   C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851   C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000   C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851   C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288   C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864   C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304   C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544   C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185   C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847   C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687   C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376   C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231   C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836   C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832   C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457   C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902   C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351   C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473   C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538   C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419   C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581   C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768   C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065   C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847   C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847   C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847   C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905   C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754   C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754   C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782   C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769   C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000  M134.597260,321.000000   C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983   C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990   C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647   C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448   C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000   C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000   C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000   C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823   C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623   C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783   C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739   C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000   C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000  M324.557129,242.085190   C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169   C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189   C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112   C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366   C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040   C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212   C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839   C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562   C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400   C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615   C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838   C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000   C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000   C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739   C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783   C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623   C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823   C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000   C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000   C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000   C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448   C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647   C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990   C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983   C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000  M140.500000,440.999939   C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183   C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817   C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634   C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000   C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980   C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017   C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080   C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939  M211.498047,417.000153   C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069   C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042   C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417   C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435   C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375   C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042   C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920   C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838   C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615   C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400   C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562   C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839   C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212   C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040   C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366   C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112   C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189   C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169   C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920  M365.048187,97.443359   C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753   C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678   C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203   C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324   C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401   C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491   C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972   C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738   C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716   C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832   C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186   C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294   C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683   C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959   C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931   C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687   C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833   C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827   C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821   C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850   C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880   C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267   C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939   C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080   C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017   C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980   C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000   C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634   C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817   C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183   C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153   C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042   C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375   C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435   C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417   C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042   C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069   C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910   C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267   C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880   C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850   C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821   C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827   C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833   C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687   C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931   C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959   C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683   C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294   C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186   C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832   C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716   C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738   C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972   C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491   C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401   C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324   C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203   C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678   C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753   C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910  z\"/>\n                    </svg>\n\n                </div>\n            }\n        </div>\n    }\n    @else if(viewType == 'compact'){\n        <div [class.image-picker-label-compact]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" style=\"height: 42px; width: 42px;\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                <div>\n                    @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                        @if(i == 0) {\n                            <div>\n                                <div class=\"compact-image-item\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.angular-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" [style.background-size]=\"'contain'\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active angular-mat-icon\">description</mat-icon>\n                                    <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn && !file?.loading\">highlight_off</span>\n                                    <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn && !file?.loading\">download_for_offline</span>\n                                    \n                                    <!-- Loading overlay -->\n                                    <div class=\"loading-img\" *ngIf=\"file?.loading\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                                    </div>\n                                </div>\n                        \n                            </div>\n                        }\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <div class=\"flex flex-col\">\n                                <!-- Image upload options in grid -->\n                                <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" style=\"display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; cursor: pointer;\" (click)=\"loading ? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                                    <mat-icon class=\"active\">upload_file</mat-icon>\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n            @else if(!disabled){\n                <label style=\"display: flex; gap: 12px; flex-direction: column; justify-content: center; align-items: center; height: 100%; cursor: pointer;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                    <mat-icon>upload_file</mat-icon>\n                </label>\n            }\n            @else{\n                <div class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000   C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000   C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792   C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792   C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000   C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000  M214.500000,497.000000   C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769   C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782   C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754   C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754   C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905   C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847   C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847   C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847   C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065   C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768   C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581   C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419   C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538   C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473   C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351   C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902   C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457   C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832   C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836   C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231   C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376   C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687   C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847   C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185   C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544   C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304   C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864   C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288   C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851   C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000   C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851   C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288   C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864   C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304   C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544   C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185   C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847   C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687   C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376   C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231   C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836   C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832   C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457   C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902   C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351   C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473   C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538   C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419   C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581   C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768   C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065   C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847   C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847   C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847   C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905   C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754   C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754   C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782   C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769   C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000  M134.597260,321.000000   C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983   C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990   C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647   C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448   C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000   C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000   C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000   C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823   C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623   C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783   C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739   C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000   C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000  M324.557129,242.085190   C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169   C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189   C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112   C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366   C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040   C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212   C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839   C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562   C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400   C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615   C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838   C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000   C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000   C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739   C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783   C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623   C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823   C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000   C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000   C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000   C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448   C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647   C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990   C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983   C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000  M140.500000,440.999939   C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183   C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817   C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634   C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000   C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980   C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017   C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080   C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939  M211.498047,417.000153   C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069   C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042   C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417   C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435   C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375   C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042   C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153  z\"/>\n                        <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920   C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838   C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615   C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400   C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562   C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839   C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212   C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040   C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366   C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112   C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189   C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169   C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920  M365.048187,97.443359   C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753   C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678   C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203   C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324   C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401   C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491   C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972   C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738   C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716   C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832   C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186   C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294   C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683   C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959   C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931   C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687   C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833   C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827   C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821   C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850   C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880   C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267   C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939   C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080   C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017   C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980   C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000   C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634   C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817   C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183   C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153   C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042   C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375   C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435   C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417   C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042   C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069   C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153  z\"/>\n                        <path fill=\"var(--angular-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910   C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267   C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880   C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850   C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821   C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827   C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833   C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687   C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931   C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959   C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683   C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294   C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186   C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832   C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716   C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738   C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972   C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491   C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401   C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324   C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203   C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678   C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753   C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910  z\"/>\n                    </svg>\n\n                </div>\n            }\n        </div>\n    }\n    @else if(viewType == 'list'){\n        <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [class.upload-drag-over]=\"enableDragNDropForUpload && isUploadDragOver\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --angular-image-picker-height: {{config?.height ?? 0}}\" (dragover)=\"onUploadDragOver($event)\" (dragleave)=\"onUploadDragLeave($event)\" (drop)=\"onUploadDrop($event)\">\n            @if(filesArray?.length){\n                @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n                    <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n                        <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n                        <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n                        <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n                            <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"angular-icon-btn-sm angular-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n                                <mat-icon>download_for_offline</mat-icon>\n                            </button>\n                            <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"angular-icon-btn-sm angular-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n                                <mat-icon>visibility</mat-icon>\n                            </button>\n                            <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"angular-icon-btn-sm angular-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"(!disabled || showDeleteButtonWhenDisabled) && !config.hiddenDeleteBtn\">\n                                <mat-icon>delete</mat-icon>\n                            </button>\n                        </div>\n                        \n                        <!-- Loading overlay for list view -->\n                        <div class=\"loading-img\" *ngIf=\"file?.loading\" style=\"border-radius: 5px;\">\n                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"25\"></mat-progress-spinner>\n                        </div>\n                    </div>\n                    @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                        <div style=\"cursor: pointer; display: flex; align-items: center; gap: 4px; border: 1px solid black; border-radius: 5px; padding: 5px; height: 56px;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                            <mat-icon style=\"width: 40px; min-width: 22px;\">upload_file</mat-icon>\n                            <div style=\"width: 100%;\">\n                                <div style=\"display: flex; flex-direction: column; align-items: start; font-size: 14px;\">\n                                    {{label}}\n                                    @if(hint && hint != ''){\n                                        <small>{{hint}}</small>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    }\n                }\n            }\n            @else if(!disabled){\n                <div style=\"cursor: pointer; display: flex; align-items: center; gap: 4px; border: 1px solid black; border-radius: 5px; padding: 5px; height: 56px;\" (click)=\"loading? null : type == 'image' && isEnableCapture ? openCameraCapture() : openImageSelector()\">\n                    <mat-icon style=\"width: 40px; min-width: 22px;\">upload_file</mat-icon>\n                    <div style=\"width: 100%;\">\n                        <div style=\"display: flex; flex-direction: column; align-items: start; font-size: 14px;\">\n                            {{label}}\n                            @if(hint && hint != ''){\n                                <small>{{hint}}</small>\n                            }\n                        </div>\n                    </div>\n                    <!-- Mobile Upload Button for list view -->\n                    @if(isRemoteUploadAvailable()){\n                        <button type=\"button\" mat-icon-button class=\"mobile-upload-btn-list\" (click)=\"$event.stopPropagation(); openRemoteUploadDialog()\" title=\"Upload from Mobile\" aria-label=\"Upload from Mobile\">\n                            <mat-icon>smartphone</mat-icon>\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    }\n}\n", styles: [".hover-section{--overlay-display: none;position:relative}.hover-section .hover-section-overlay{display:var(--overlay-display)}.hover-section:hover{--overlay-display: flex !important}.w-full{width:100%!important}.h-full{height:100%!important}.cdk-drop-list-dragging{border:2px solid red!important}.cdk-drag-preview{box-sizing:border-box;border-radius:8px;box-shadow:0 5px 25px -5px #0000004d;opacity:.9}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-over-highlight .image-item{outline:3px solid #3f51b5!important;outline-offset:2px;box-shadow:0 0 15px #3f51b580!important}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.angular-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.angular-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.angular-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.angular-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.angular-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.angular-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.angular-text-download{color:var(--angular-download, var(--mat-sys-primary))}.angular-text-view{color:var(--angular-primary, var(--mat-sys-primary))}.angular-text-cancel{color:var(--angular-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;left:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:none;border-radius:4px;padding:0;box-sizing:border-box;height:var(--angular-image-picker-height, 130px)}.image-picker-label:has(.image-list){border:2px solid #e3e8ef;padding:16px;height:auto}.image-picker-label.error{border:2px dashed var(--angular-error, #a00404);padding:16px}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px;box-sizing:border-box}.image-picker-label-compact.error{border:2px dashed var(--angular-error, #a00404)}.compact-image-item{width:42px;height:42px;position:relative;display:flex;align-items:center;justify-content:center}.compact-image-item .cancel{color:var(--angular-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.compact-image-item .download{color:var(--angular-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item{aspect-ratio:1;height:var(--angular-image-picker-height, 130px);border-radius:5px;background-position:center;background-size:cover;position:relative;display:flex;justify-content:center;align-items:center;border:1px solid rgba(0,0,0,.38);width:100%}.image-list .image-item.uploader{border:2px dashed #d0d5dd!important;cursor:pointer;transition:all .3s ease;background:#fff}.image-list .image-item.uploader:hover{border-color:var(--angular-primary, #1F6AAD)!important;background:linear-gradient(to bottom,#fff,#f8f9fc);box-shadow:0 2px 8px #1f6aad14}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--angular-item-selected, var(--mat-sys-primary))!important;width:calc(100% - 4px)}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--angular-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--angular-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--angular-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--angular-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--angular-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.angular-curser-pointer{cursor:pointer}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .angular-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--angular-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--angular-cancel);border:1px solid var(--angular-cancel)}.description-save-btn{background-color:var(--angular-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}.main-upload-wrapper{position:relative;width:100%;overflow:hidden}.mobile-upload-overlay{position:absolute;top:13px;left:50%;transform:translate(-50%);z-index:10;padding:12px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;pointer-events:all;width:100%}.mobile-upload-overlay-grid{padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;pointer-events:all}.upload-content{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;pointer-events:all;width:100%}.upload-content.with-mobile{margin-top:70px}.mobile-upload-section{padding:16px;background:linear-gradient(145deg,#fff,#f8f9fc);border:1px solid #e3e8ef;border-radius:12px;margin-bottom:16px;display:flex;justify-content:center;align-items:center;box-shadow:0 1px 3px #0000000d;box-sizing:border-box}.mobile-upload-section.grid-mobile-section{margin-bottom:10px;padding:10px}.mobile-upload-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,var(--angular-primary, #1F6AAD) 0%,#1a5a94 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #1f6aad33;letter-spacing:.3px;box-sizing:border-box}.mobile-upload-btn.compact{padding:8px 14px;font-size:13px}.mobile-upload-btn:hover{background:linear-gradient(135deg,#175080,#134066);transform:translateY(-2px);box-shadow:0 4px 12px #1f6aad4d}.mobile-upload-btn:active{transform:translateY(0);box-shadow:0 2px 4px #1f6aad33}.mobile-upload-btn.connected{background:linear-gradient(135deg,#4caf50,#388e3c);box-shadow:0 2px 8px #4caf5033}.mobile-upload-btn.connected:hover{background:linear-gradient(135deg,#388e3c,#2e7d32);box-shadow:0 4px 12px #4caf504d}.mobile-upload-btn mat-icon{font-size:20px;width:20px;height:20px}.mobile-upload-btn span{white-space:nowrap;font-weight:600}.mobile-upload-actions{display:flex;align-items:center;gap:8px}.main-upload-label{background:#fff;border:2px dashed #d0d5dd;border-radius:12px;padding:24px;transition:all .3s ease;height:calc(var(--angular-image-picker-height, 130px) + var(--angular-image-upload-config-height, 0px));box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.main-upload-label:hover{border-color:var(--angular-primary, #1F6AAD);background:linear-gradient(to bottom,#fff,#f8f9fc);box-shadow:0 2px 8px #1f6aad14}.view-connection-btn{display:flex;align-items:center;justify-content:center;padding:5px;background:#fff;color:var(--angular-primary, #1F6AAD);border:2px solid var(--angular-primary, #1F6AAD);border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #1f6aad1a}.view-connection-btn.compact{padding:8px}.view-connection-btn:hover{background:var(--angular-primary, #1F6AAD);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #1f6aad40}.view-connection-btn:active{transform:translateY(0);box-shadow:0 2px 4px #1f6aad26}.view-connection-btn mat-icon{font-size:20px;width:20px;height:20px}.disconnect-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.disconnect-btn:hover{background-color:#d32f2f}.disconnect-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-waiting-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;width:100%}.mobile-waiting-state .waiting-text{font-size:12px;color:#666}.mobile-waiting-state .cancel-mobile-btn{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background-color:transparent;color:#666;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s ease}.mobile-waiting-state .cancel-mobile-btn:hover{background-color:#0000001a}.mobile-waiting-state .cancel-mobile-btn mat-icon{font-size:16px;width:16px;height:16px}.cancel-mobile-btn-text{margin-top:8px;padding:6px 16px;background-color:transparent;color:var(--angular-primary, #1F6AAD);border:1px solid var(--angular-primary, #1F6AAD);border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s ease}.cancel-mobile-btn-text:hover{background-color:#1f6aad1a}.mobile-upload-btn-list{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--angular-primary, #1F6AAD);color:#fff;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}.mobile-upload-btn-list:hover{background-color:var(--angular-primary-dark, #175080)}.mobile-upload-btn-list mat-icon{font-size:20px;width:20px;height:20px}.view-connection-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:#e8f5e9;color:#4caf50;border:1px solid #4caf50;border-radius:4px;cursor:pointer;transition:all .2s ease}.view-connection-btn:hover{background-color:#c8e6c9}.view-connection-btn mat-icon{font-size:18px;width:18px;height:18px}.pending-files-container{display:flex;flex-direction:column;gap:8px;width:100%;max-height:200px;overflow-y:auto;padding:8px;background-color:#fff8e1;border-radius:4px;border:1px solid #ffcc80}.pending-files-header{display:flex;align-items:center;gap:6px;font-size:12px;color:#e65100;font-weight:500}.pending-files-header mat-icon{font-size:16px;width:16px;height:16px}.pending-files-list{display:flex;flex-direction:column;gap:6px}.pending-file-item{display:flex;align-items:center;gap:8px;padding:6px;background-color:#fff;border-radius:4px;border:1px solid #e0e0e0}.pending-file-preview{width:36px;height:36px;min-width:36px;border-radius:4px;background-size:cover;background-position:center;background-color:#f5f5f5;display:flex;align-items:center;justify-content:center}.pending-file-preview mat-icon{font-size:20px;color:#757575}.pending-file-name{flex:1;font-size:12px;color:#424242;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pending-file-actions{display:flex;gap:4px}.pending-file-actions .accept-btn{width:28px;height:28px;color:#4caf50}.pending-file-actions .accept-btn:hover{background-color:#4caf501a}.pending-file-actions .reject-btn{width:28px;height:28px;color:#f44336}.pending-file-actions .reject-btn:hover{background-color:#f443361a}.pending-file-actions mat-icon{font-size:18px;width:18px;height:18px}::ng-deep .camera-capture-dialog{padding:0!important;max-width:100vw!important;max-height:100vh!important}::ng-deep .camera-capture-dialog .mat-mdc-dialog-container{padding:0!important;background:transparent!important;box-shadow:none!important}.image-picker-label.upload-drag-over,.image-picker-label-compact.upload-drag-over,.error-border.upload-drag-over{outline:2px dashed var(--angular-primary, #1F6AAD);outline-offset:2px;background-color:#1f6aad0f}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: AngularHelperService }, { type: i3$4.BreakpointObserver }, { type: AngularRemoteUploadService }], propDecorators: { urlConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], entityType: [{
+                type: Input
+            }], entityId: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], isValidateMimeType: [{
+                type: Input
+            }], selectedId: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], previewOnly: [{
+                type: Input
+            }], previewInFlex: [{
+                type: Input
+            }], imageItemClass: [{
+                type: Input
+            }], isAddUploadedFileInLastNode: [{
+                type: Input
+            }], isEnableDeleteConfirmation: [{
+                type: Input
+            }], isEnableCapture: [{
+                type: Input
+            }], deleteConfirmationMsg: [{
+                type: Input
+            }], dialogConfig: [{
+                type: Input
+            }], enableDragNDropForUpload: [{
+                type: Input
+            }], remoteUploadConfig: [{
+                type: Input
+            }], uploadInProgress: [{
+                type: Output
+            }], onUploaded: [{
+                type: Output
+            }], onFileSelect: [{
+                type: Output
+            }], onFileRemoved: [{
+                type: Output
+            }], onError: [{
+                type: Output
+            }], onRemoteUpload: [{
+                type: Output
+            }], isShowImageSequence: [{
+                type: Input
+            }], enableDragNDrop: [{
+                type: Input
+            }], editTagButtonWhenDisabled: [{
+                type: Input
+            }], showDeleteButtonWhenDisabled: [{
+                type: Input
+            }], dataSequenceChange: [{
+                type: Output
+            }] } });
+
+const uiImports = [
+    MatTooltipModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatDividerModule,
+];
+class AngularImageAndFilePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerModule, declarations: [AngularImageAndFilePickerComponent,
+            AngularPreviewImageComponent,
+            AngularFileViewerComponent,
+            AngularExcelFileViewerComponent,
+            AngularPdfViewerComponent,
+            AngularVideoComponent,
+            AngularErrorDialogComponent,
+            AngularConfirmationDialogComponent,
+            AngularQrCodeDialogComponent,
+            AngularViewConnectionDialogComponent,
+            TimeAgoPipe], imports: [CommonModule,
+            HttpClientModule,
+            NgxExtendedPdfViewerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            QRCodeComponent, MatTooltipModule,
+            MatIconModule,
+            MatSnackBarModule,
+            MatProgressSpinnerModule,
+            MatInputModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatDividerModule, DragDropModule], exports: [AngularImageAndFilePickerComponent,
+            AngularQrCodeDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerModule, imports: [CommonModule,
+            HttpClientModule,
+            NgxExtendedPdfViewerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            QRCodeComponent, uiImports, DragDropModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularImageAndFilePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AngularImageAndFilePickerComponent,
+                        AngularPreviewImageComponent,
+                        AngularFileViewerComponent,
+                        AngularExcelFileViewerComponent,
+                        AngularPdfViewerComponent,
+                        AngularVideoComponent,
+                        AngularErrorDialogComponent,
+                        AngularConfirmationDialogComponent,
+                        AngularQrCodeDialogComponent,
+                        AngularViewConnectionDialogComponent,
+                        TimeAgoPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        NgxExtendedPdfViewerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        QRCodeComponent,
+                        ...uiImports,
+                        DragDropModule
+                    ],
+                    exports: [
+                        AngularImageAndFilePickerComponent,
+                        AngularQrCodeDialogComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of angular-image-and-file-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularCameraCaptureDialogComponent, AngularImageAndFilePickerComponent, AngularImageAndFilePickerModule, AngularImageAndFilePickerService, AngularQrCodeDialogComponent, AngularRemoteUploadService };
+//# sourceMappingURL=servicemind.tis-angular-image-and-file-picker.mjs.map