@servicemind.tis/tis-image-and-file-upload-and-view 1.2.29 → 1.2.31

package/fesm2022/servicemind.tis-tis-image-and-file-upload-and-view.mjs

@@ -13,18 +13,20 @@ import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/common';
+import * as i3$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, BehaviorSubject, interval, map, shareReplay, takeUntil as takeUntil$1 } from 'rxjs';
-import * as i3$3 from '@angular/cdk/layout';
+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$2 from '@angular/common/http';
+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 { takeUntil, take, timeout } from 'rxjs/operators';
 import * as i4$1 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';
@@ -232,7 +234,7 @@ class TisPreviewImageComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisPreviewImageComponent, 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: TisPreviewImageComponent, isStandalone: false, selector: "tis-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(--tis-cancel, #bb333b);position:absolute;top:10px;right:10px;z-index:99;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TisPreviewImageComponent, isStandalone: false, selector: "tis-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(--tis-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: i2.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: TisPreviewImageComponent, decorators: [{
             type: Component,
@@ -253,7 +255,7 @@ class TisErrorDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisErrorDialogComponent, 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: TisErrorDialogComponent, isStandalone: false, selector: "lib-tis-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=\"tis-text-upper {{data?.buttonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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.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]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TisErrorDialogComponent, isStandalone: false, selector: "lib-tis-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=\"tis-text-upper {{data?.buttonClass ?? 'tis-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.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: TisErrorDialogComponent, decorators: [{
             type: Component,
@@ -366,7 +368,7 @@ class TisHelperService {
     deleteUploadedFile(url, data) {
         return this.http.post(url, data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisHelperService, deps: [{ token: i1$3.MatSnackBar }, { token: i1$2.MatDialog }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisHelperService, 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: TisHelperService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisHelperService, decorators: [{
@@ -374,7 +376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.MatSnackBar }, { type: i1$2.MatDialog }, { type: i3$2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$3.MatSnackBar }, { type: i1$2.MatDialog }, { type: i3$3.HttpClient }] });
 
 class TisConfirmationDialogComponent {
     dialogRef;
@@ -388,7 +390,7 @@ class TisConfirmationDialogComponent {
         this.dialogRef.close(status);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisConfirmationDialogComponent, 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: TisConfirmationDialogComponent, isStandalone: false, selector: "tis-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--tis-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(--tis-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(--tis-cancel, #bb333b)\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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.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]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TisConfirmationDialogComponent, isStandalone: false, selector: "tis-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--tis-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(--tis-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(--tis-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.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: TisConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -401,12 +403,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 const DEFAULT_PAIRING_TTL = 24 * 60 * 60 * 1000; // 24 hours
 const DEFAULT_STORAGE_KEY = 'tis-remote-upload-session';
 const DEFAULT_QR_EXPIRY = 300; // 5 minutes
+const HEALTH_CHECK_INTERVAL = 30000; // 30 seconds
 class TisRemoteUploadService {
     http;
     static COMPONENT = 'TisRemoteUploadService';
     static MOBILE_CONNECTION_KEY = 'tis-mobile-connection';
     destroy$ = new Subject();
     channelSubscription = null;
+    healthCheckSubscription = null;
     config = null;
     socketAdapter = null;
     // Cached values
@@ -420,6 +424,15 @@ class TisRemoteUploadService {
     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
@@ -449,11 +462,19 @@ class TisRemoteUploadService {
                 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(`[${TisRemoteUploadService.COMPONENT}] Configured:`, {
                 deviceId: this.deviceId,
@@ -527,6 +548,83 @@ class TisRemoteUploadService {
     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(`[${TisRemoteUploadService.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(`[${TisRemoteUploadService.COMPONENT}] File rejected:`, file.file.fileName);
+    }
+    /**
+     * Clear all pending files
+     */
+    clearPendingFiles() {
+        this.pendingFiles$.next([]);
+    }
     // ===========================================================================
     // QR Code Generation (New Flow)
     // ===========================================================================
@@ -627,25 +725,39 @@ class TisRemoteUploadService {
             return;
         }
         const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        const requestId = `field-${Date.now()}`;
         console.log(`[${TisRemoteUploadService.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: `field-${Date.now()}`
+                requestId
             });
             console.log(`[${TisRemoteUploadService.COMPONENT}] Field request sent:`, response);
         }
         catch (error) {
             console.warn(`[${TisRemoteUploadService.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;
         }
@@ -729,6 +841,8 @@ class TisRemoteUploadService {
         this.connectionStatus$.next('disconnected');
         this.pairingSession$.next(null);
         this.clearMobileConnection();
+        // Stop health check
+        this.stopHealthCheck();
     }
     /**
      * Handle disconnect initiated from remote (mobile) side
@@ -740,6 +854,107 @@ class TisRemoteUploadService {
         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(`[${TisRemoteUploadService.COMPONENT}] Cannot start health check - missing device IDs`);
+            return;
+        }
+        console.log(`[${TisRemoteUploadService.COMPONENT}] Starting health check (every ${HEALTH_CHECK_INTERVAL / 1000}s)`);
+        // Set initial checking state (blinking)
+        this.isCheckingStatus$.next(true);
+        // Run first check immediately
+        this.checkDevicesOnline();
+        // Then run periodically
+        this.healthCheckSubscription = interval(HEALTH_CHECK_INTERVAL)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.checkDevicesOnline();
+        });
+    }
+    /**
+     * 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(`[${TisRemoteUploadService.COMPONENT}] Cannot check devices - missing device IDs`);
+            return null;
+        }
+        try {
+            const response = await this.callApiWithTimeout('socket/check-devices-online', {
+                desktopDeviceId: this.deviceId,
+                mobileDeviceId: mobileDeviceId
+            }, 15000);
+            const 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(`[${TisRemoteUploadService.COMPONENT}] Devices status:`, {
+                desktop: status.desktop.isOnline ? '🟢' : '🔴',
+                mobile: status.mobile.isOnline ? '🟢' : '🔴',
+                readyForTransfer: status.isReadyForTransfer
+            });
+            return status;
+        }
+        catch (error) {
+            console.warn(`[${TisRemoteUploadService.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
@@ -835,6 +1050,8 @@ class TisRemoteUploadService {
                 };
                 this.pairingSession$.next(updatedSession);
             }
+            // Start health check to monitor device online status
+            this.startHealthCheck();
             console.log(`[${TisRemoteUploadService.COMPONENT}] Connection established with mobile device:`, mobileDeviceId);
         }
     }
@@ -852,27 +1069,45 @@ class TisRemoteUploadService {
     }
     /**
      * Handle upload complete from mobile
+     * Files are added to pending queue for user to accept/reject
      */
     handleUploadComplete(message) {
         const data = message.data || message.payload || message;
-        const file = data.file || data;
-        if (file) {
-            const event = {
-                file,
-                mobileDeviceId: data.mobileDeviceId || this.mobileConnection$.value?.mobileDeviceId || 'unknown',
-                timestamp: data.timestamp || Date.now(),
-                sessionId: data.sessionId
-            };
-            // Update last activity
-            const conn = this.mobileConnection$.value;
-            if (conn) {
-                const updated = { ...conn, lastActivity: Date.now() };
-                this.mobileConnection$.next(updated);
-                this.saveMobileConnection(updated);
+        // 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 || '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
+                };
+                // Add to pending files (user will accept/reject)
+                const currentPending = this.pendingFiles$.value;
+                this.pendingFiles$.next([...currentPending, event]);
+                console.log(`[${TisRemoteUploadService.COMPONENT}] File added to pending:`, normalizedFile.fileName);
             }
-            this.remoteUpload$.next(event);
-            console.log(`[${TisRemoteUploadService.COMPONENT}] Upload received:`, event);
         }
+        // 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
@@ -917,9 +1152,12 @@ class TisRemoteUploadService {
                 // Only restore if connected within last 24 hours
                 if (Date.now() - info.lastActivity < DEFAULT_PAIRING_TTL) {
                     this.mobileConnection$.next(info);
-                    // Note: actual connection status will be updated when mobile reconnects
+                    // Also restore connection status so UI shows connected state
+                    this.connectionStatus$.next('connected');
+                    console.log(`[${TisRemoteUploadService.COMPONENT}] Restored mobile connection from localStorage:`, info.mobileDeviceId);
                 }
                 else {
+                    console.log(`[${TisRemoteUploadService.COMPONENT}] Stored connection expired, clearing`);
                     this.clearMobileConnection();
                 }
             }
@@ -964,8 +1202,11 @@ class TisRemoteUploadService {
         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: TisRemoteUploadService, deps: [{ token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisRemoteUploadService, deps: [{ token: i3$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisRemoteUploadService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisRemoteUploadService, decorators: [{
@@ -973,7 +1214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3$2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i3$3.HttpClient }] });
 
 class TisQrCodeDialogComponent {
     dialogRef;
@@ -987,10 +1228,12 @@ class TisQrCodeDialogComponent {
     isConnected = false;
     errorMessage = null;
     connectionStatus = 'disconnected';
-    uploadedFiles = [];
     // Device IDs
     desktopDeviceId = '';
     mobileDeviceId = null;
+    // Device online status
+    devicesStatus = null;
+    isCheckingStatus = false; // For blinking indicator
     destroy$ = new Subject();
     countdownSubscription = null;
     constructor(dialogRef, data, remoteUploadService) {
@@ -1058,14 +1301,17 @@ class TisQrCodeDialogComponent {
             .subscribe(connection => {
             this.mobileDeviceId = connection?.mobileDeviceId || null;
         });
-        // Remote uploads
-        this.remoteUploadService.getRemoteUploads()
+        // Device online status
+        this.remoteUploadService.getDevicesStatus()
             .pipe(takeUntil(this.destroy$))
-            .subscribe(event => {
-            this.uploadedFiles.push(event);
-            if (this.data.autoCloseOnUpload) {
-                this.dialogRef.close({ uploaded: true, files: this.uploadedFiles });
-            }
+            .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()
@@ -1114,7 +1360,6 @@ class TisQrCodeDialogComponent {
      */
     refreshQrCode() {
         this.isExpired = false;
-        this.uploadedFiles = [];
         this.generateQrCode();
     }
     /**
@@ -1131,22 +1376,173 @@ class TisQrCodeDialogComponent {
         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({
-            uploaded: this.uploadedFiles.length > 0,
-            files: this.uploadedFiles
-        });
+        this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisQrCodeDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: TisRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TisQrCodeDialogComponent, isStandalone: false, selector: "tis-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          <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          <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      <!-- 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          You can now upload images from your mobile. Close this popup and click on the \n          <strong>\"Upload from Mobile\"</strong> button to continue.\n        </p>\n        \n        <!-- Uploaded Files -->\n        <div class=\"uploaded-files\" *ngIf=\"uploadedFiles.length > 0\">\n          <h4>Uploaded Files ({{ uploadedFiles.length }})</h4>\n          <div class=\"file-list\">\n            <div class=\"file-item\" *ngFor=\"let upload of uploadedFiles\">\n              <mat-icon>check_circle</mat-icon>\n              <span>{{ upload.file.fileName }}</span>\n            </div>\n          </div>\n        </div>\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\">\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ isConnected ? 'Close' : (uploadedFiles.length > 0 ? 'Done' : 'Close') }}\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;min-width:360px;max-width:440px;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:20px;width:100%}.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%}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.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}.uploaded-files{width:100%;margin-top:8px;padding-top:16px;border-top:1px solid #f0f0f0}.uploaded-files h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#333}.file-list{display:flex;flex-direction:column;gap:8px;max-height:120px;overflow-y:auto}.file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f1f8f4;border-radius:8px;font-size:13px;color:#333}.file-item mat-icon{font-size:18px;width:18px;height:18px;color:#4caf50}.file-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TisQrCodeDialogComponent, isStandalone: false, selector: "tis-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\">\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ isConnected ? 'Done' : 'Close' }}\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;min-width:360px;max-width:440px;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:20px;width:100%}.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}.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)}}\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$1.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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisQrCodeDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tis-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          <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          <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      <!-- 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          You can now upload images from your mobile. Close this popup and click on the \n          <strong>\"Upload from Mobile\"</strong> button to continue.\n        </p>\n        \n        <!-- Uploaded Files -->\n        <div class=\"uploaded-files\" *ngIf=\"uploadedFiles.length > 0\">\n          <h4>Uploaded Files ({{ uploadedFiles.length }})</h4>\n          <div class=\"file-list\">\n            <div class=\"file-item\" *ngFor=\"let upload of uploadedFiles\">\n              <mat-icon>check_circle</mat-icon>\n              <span>{{ upload.file.fileName }}</span>\n            </div>\n          </div>\n        </div>\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\">\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ isConnected ? 'Close' : (uploadedFiles.length > 0 ? 'Done' : 'Close') }}\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;min-width:360px;max-width:440px;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:20px;width:100%}.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%}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.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}.uploaded-files{width:100%;margin-top:8px;padding-top:16px;border-top:1px solid #f0f0f0}.uploaded-files h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#333}.file-list{display:flex;flex-direction:column;gap:8px;max-height:120px;overflow-y:auto}.file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f1f8f4;border-radius:8px;font-size:13px;color:#333}.file-item mat-icon{font-size:18px;width:18px;height:18px;color:#4caf50}.file-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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%}}\n"] }]
+            args: [{ selector: 'tis-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\">\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Regenerate QR Code\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ isConnected ? 'Done' : 'Close' }}\n    </button>\n  </div>\n</div>\n", styles: [".qr-dialog-container{display:flex;flex-direction:column;min-width:360px;max-width:440px;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:20px;width:100%}.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}.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)}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: TisRemoteUploadService }] });
+
+class TisViewConnectionDialogComponent {
+    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();
+    }
+    /**
+     * Get formatted connection time
+     */
+    getConnectionDuration() {
+        if (!this.mobileConnection?.connectedAt) {
+            return 'Unknown';
+        }
+        const duration = Date.now() - this.mobileConnection.connectedAt;
+        const minutes = Math.floor(duration / 60000);
+        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';
+        }
+    }
+    /**
+     * Get last ping time formatted
+     */
+    getLastPing(timestamp) {
+        if (!timestamp) {
+            return 'Never';
+        }
+        const secondsAgo = Math.floor((Date.now() - timestamp) / 1000);
+        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: TisViewConnectionDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: TisRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TisViewConnectionDialogComponent, isStandalone: false, selector: "tis-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\">\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-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>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\">{{ mobileConnection.mobileDeviceId }}</span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Connected For:</span>\n            <span class=\"detail-value\">{{ getConnectionDuration() }}</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\">\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\">{{ devicesStatus.desktop.deviceId }}</div>\n              </div>\n            </div>\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\">Last ping: {{ getLastPing(devicesStatus.desktop.lastPing) }}</div>\n            }\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\">{{ devicesStatus.mobile.deviceId }}</div>\n              </div>\n            </div>\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\">Last ping: {{ getLastPing(devicesStatus.mobile.lastPing) }}</div>\n            }\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}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 0}.dialog-header h2{margin:0;font-size:20px;font-weight:500}.close-btn{margin-right:-12px}.dialog-content{padding:16px 24px!important;display:flex;flex-direction:column;gap:16px}.dialog-actions{padding:8px 16px 16px!important}.connection-card{background:#f5f5f5;border-radius:8px;padding:16px}.connection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.status-indicator{display:flex;align-items:center;gap:8px;font-weight:500}.status-indicator mat-icon{font-size:24px;width:24px;height:24px}.status-indicator.online{color:#4caf50}.status-indicator:not(.online){color:#f44336}.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}.refresh-btn mat-icon{margin-right:4px}.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:8px}.detail-row{display:flex;justify-content:space-between;font-size:14px}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-family:Courier New,monospace}.devices-status-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff}.card-title{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.device-status-row{display:flex;flex-direction:column;gap:8px;padding:12px 0}.device-info{display:flex;align-items:center;gap:12px}.device-icon{font-size:32px;width:32px;height:32px;color:#666}.device-details{flex:1}.device-name{font-weight:500;font-size:14px;color:#333}.device-id{font-size:12px;color:#666;font-family:Courier New,monospace}.status-badge{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;background:#ffebee;color:#c62828;align-self:flex-start}.status-badge.online{background:#e8f5e9;color:#2e7d32}.status-badge mat-icon{font-size:16px;width:16px;height:16px}.last-ping{font-size:12px;color:#999;padding-left:44px}mat-divider{margin:8px 0}.warning-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff3e0;border-left:4px solid #ff9800;border-radius:4px;font-size:14px;color:#e65100}.warning-message mat-icon{color:#ff9800}.no-connection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#999}.no-connection mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px}.no-connection p{margin:0;font-size:16px}.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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisViewConnectionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-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\">\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-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>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\">{{ mobileConnection.mobileDeviceId }}</span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Connected For:</span>\n            <span class=\"detail-value\">{{ getConnectionDuration() }}</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\">\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\">{{ devicesStatus.desktop.deviceId }}</div>\n              </div>\n            </div>\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\">Last ping: {{ getLastPing(devicesStatus.desktop.lastPing) }}</div>\n            }\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\">{{ devicesStatus.mobile.deviceId }}</div>\n              </div>\n            </div>\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\">Last ping: {{ getLastPing(devicesStatus.mobile.lastPing) }}</div>\n            }\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}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 0}.dialog-header h2{margin:0;font-size:20px;font-weight:500}.close-btn{margin-right:-12px}.dialog-content{padding:16px 24px!important;display:flex;flex-direction:column;gap:16px}.dialog-actions{padding:8px 16px 16px!important}.connection-card{background:#f5f5f5;border-radius:8px;padding:16px}.connection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.status-indicator{display:flex;align-items:center;gap:8px;font-weight:500}.status-indicator mat-icon{font-size:24px;width:24px;height:24px}.status-indicator.online{color:#4caf50}.status-indicator:not(.online){color:#f44336}.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}.refresh-btn mat-icon{margin-right:4px}.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:8px}.detail-row{display:flex;justify-content:space-between;font-size:14px}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-family:Courier New,monospace}.devices-status-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff}.card-title{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.device-status-row{display:flex;flex-direction:column;gap:8px;padding:12px 0}.device-info{display:flex;align-items:center;gap:12px}.device-icon{font-size:32px;width:32px;height:32px;color:#666}.device-details{flex:1}.device-name{font-weight:500;font-size:14px;color:#333}.device-id{font-size:12px;color:#666;font-family:Courier New,monospace}.status-badge{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;background:#ffebee;color:#c62828;align-self:flex-start}.status-badge.online{background:#e8f5e9;color:#2e7d32}.status-badge mat-icon{font-size:16px;width:16px;height:16px}.last-ping{font-size:12px;color:#999;padding-left:44px}mat-divider{margin:8px 0}.warning-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff3e0;border-left:4px solid #ff9800;border-radius:4px;font-size:14px;color:#e65100}.warning-message mat-icon{color:#ff9800}.no-connection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#999}.no-connection mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px}.no-connection p{margin:0;font-size:16px}.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]
@@ -1206,6 +1602,8 @@ class TisImageAndFileUploadAndViewComponent {
     // Mobile upload state
     isWaitingForMobileUpload = false;
     mobileUploadFieldLabel = '';
+    // Pending files from mobile (waiting to be accepted/rejected)
+    pendingFiles = [];
     isHandset$;
     isTab$;
     config = {
@@ -2759,12 +3157,28 @@ class TisImageAndFileUploadAndViewComponent {
     initRemoteUpload() {
         if (this.remoteUploadConfig?.enabled && this.remoteUploadConfig?.socketAdapter) {
             this.remoteUploadService.configure(this.remoteUploadConfig);
-            // Subscribe to remote uploads
+            // 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;
+            });
         }
     }
     /**
@@ -2819,7 +3233,6 @@ class TisImageAndFileUploadAndViewComponent {
             subtitle: `Scan this QR code to upload ${this.type === 'image' ? 'images' : 'files'} from your mobile device`,
             qrSize: 200,
             showCountdown: true,
-            autoCloseOnUpload: false,
             fieldInfo: {
                 label: this.label || `${this.type === 'image' ? 'Images' : 'Files'}`,
                 accept: this.accept || (this.type === 'image' ? 'image/*' : '*'),
@@ -2889,17 +3302,61 @@ class TisImageAndFileUploadAndViewComponent {
         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(TisViewConnectionDialogComponent, {
+            width: '600px',
+            maxWidth: '90vw',
+            data: {
+                title: 'Mobile Connection'
+            },
+            disableClose: false
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result === 'disconnected') {
+                console.log('[TisImageAndFileUploadAndView] 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: TisImageAndFileUploadAndViewComponent, deps: [{ token: i1$2.MatDialog }, { token: TisHelperService }, { token: i3$3.BreakpointObserver }, { token: TisRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TisImageAndFileUploadAndViewComponent, isStandalone: false, selector: "tis-image-and-file-upload-and-view", 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", remoteUploadConfig: "remoteUploadConfig", isShowImageSequence: "isShowImageSequence", enableDragNDrop: "enableDragNDrop", 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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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 && !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                        @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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-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\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\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                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\">Waiting for mobile...</span>\n                                            <button type=\"button\" class=\"cancel-mobile-btn\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                <mat-icon>close</mat-icon>\n                                            </button>\n                                        </div>\n                                    } @else {\n                                        <mat-icon class=\"active\">upload_file</mat-icon>\n                                        <!-- Mobile Upload Button -->\n                                        @if(isRemoteUploadAvailable()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn\" [class.connected]=\"isRemotePaired()\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" [title]=\"isRemotePaired() ? 'Upload from Mobile' : 'Connect & Upload Via Mobile'\">\n                                                    <mat-icon>smartphone</mat-icon>\n                                                    <span>{{ isRemotePaired() ? 'Upload from Mobile' : 'Connect Mobile' }}</span>\n                                                </button>\n                                                @if(isRemotePaired()) {\n                                                    <button type=\"button\" class=\"disconnect-btn\" (click)=\"disconnectRemote(); $event.stopPropagation(); $event.preventDefault()\" title=\"Disconnect Mobile\">\n                                                        <mat-icon>link_off</mat-icon>\n                                                    </button>\n                                                }\n                                            </div>\n                                        }\n                                    }\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                    @if(isWaitingForMobileUpload) {\n                        <!-- Waiting for mobile upload state -->\n                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                            <mat-progress-spinner diameter=\"32\" mode=\"indeterminate\"></mat-progress-spinner>\n                            <p style=\"text-align: center; font-size: 14px; margin: 8px 0 0 0;\">Waiting for upload from mobile...</p>\n                            <small style=\"color: #666;\">Please upload from your mobile device</small>\n                            <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\">\n                                Cancel\n                            </button>\n                        </div>\n                    } @else {\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                        <!-- Mobile Upload Button -->\n                        @if(isRemoteUploadAvailable()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn\" [class.connected]=\"isRemotePaired()\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" [title]=\"isRemotePaired() ? 'Upload from Mobile' : 'Connect & Upload Via Mobile'\">\n                                    <mat-icon>smartphone</mat-icon>\n                                    <span>{{ isRemotePaired() ? 'Upload from Mobile' : 'Connect Mobile' }}</span>\n                                </button>\n                                @if(isRemotePaired()) {\n                                    <button type=\"button\" class=\"disconnect-btn\" (click)=\"disconnectRemote(); $event.stopPropagation(); $event.preventDefault()\" title=\"Disconnect Mobile\">\n                                        <mat-icon>link_off</mat-icon>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    }\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(--tis-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(--tis-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(--tis-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(--tis-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\" style=\"height: 42px; width: 42px;\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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(--tis-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(--tis-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(--tis-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(--tis-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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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: [".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))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-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:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px}.image-picker-label-compact.error{border:2px dashed var(--tis-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(--tis-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(--tis-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;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)}.image-list .image-item.uploader{border:1px dashed rgba(0,0,0,.38)!important;cursor:pointer}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--tis-item-selected, var(--mat-sys-primary))!important}.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(--tis-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(--tis-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(--tis-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(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-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 .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-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(--tis-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(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-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}}.mobile-upload-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background-color:var(--tis-primary, #1F6AAD);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s ease}.mobile-upload-btn:hover{background-color:var(--tis-primary-dark, #175080)}.mobile-upload-btn.connected{background-color:#4caf50}.mobile-upload-btn.connected:hover{background-color:#388e3c}.mobile-upload-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-upload-btn span{white-space:nowrap}.mobile-upload-actions{display:flex;align-items:center;gap:4px;margin-top:8px}.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(--tis-primary, #1F6AAD);border:1px solid var(--tis-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(--tis-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(--tis-primary-dark, #175080)}.mobile-upload-btn-list mat-icon{font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewComponent, deps: [{ token: i1$2.MatDialog }, { token: TisHelperService }, { token: i3$4.BreakpointObserver }, { token: TisRemoteUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TisImageAndFileUploadAndViewComponent, isStandalone: false, selector: "tis-image-and-file-upload-and-view", 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", remoteUploadConfig: "remoteUploadConfig", isShowImageSequence: "isShowImageSequence", enableDragNDrop: "enableDragNDrop", 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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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 && !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                        @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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-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\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\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                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\">Waiting for mobile...</span>\n                                            <button type=\"button\" class=\"cancel-mobile-btn\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                <mat-icon>close</mat-icon>\n                                            </button>\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                                        <mat-icon class=\"active\">upload_file</mat-icon>\n                                        <!-- Mobile Upload Buttons - Show when remote upload is available and connected -->\n                                        @if(isRemoteUploadAvailable() && isRemotePaired()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" 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.stopPropagation(); $event.preventDefault()\" title=\"View Connection\">\n                                                    <mat-icon>link</mat-icon>\n                                                </button>\n                                            </div>\n                                        }\n                                        <!-- Show Connect button only when NOT connected -->\n                                        @else if(isRemoteUploadAvailable() && !isRemotePaired()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.stopPropagation(); $event.preventDefault()\" title=\"Connect Mobile Device\">\n                                                    <mat-icon>qr_code_scanner</mat-icon>\n                                                    <span>Connect Mobile</span>\n                                                </button>\n                                            </div>\n                                        }\n                                    }\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                    @if(isWaitingForMobileUpload) {\n                        <!-- Waiting for mobile upload state -->\n                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                            <mat-progress-spinner diameter=\"32\" mode=\"indeterminate\"></mat-progress-spinner>\n                            <p style=\"text-align: center; font-size: 14px; margin: 8px 0 0 0;\">Waiting for upload from mobile...</p>\n                            <small style=\"color: #666;\">Please upload from your mobile device</small>\n                            <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\">\n                                Cancel\n                            </button>\n                        </div>\n                    } @else {\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                        <!-- Mobile Upload Buttons - Show when remote upload is available and connected -->\n                        @if(isRemoteUploadAvailable() && isRemotePaired()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" 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.stopPropagation(); $event.preventDefault()\" title=\"View Connection\">\n                                    <mat-icon>link</mat-icon>\n                                </button>\n                            </div>\n                        }\n                        <!-- Show Connect button only when NOT connected -->\n                        @else if(isRemoteUploadAvailable() && !isRemotePaired()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.stopPropagation(); $event.preventDefault()\" title=\"Connect Mobile Device\">\n                                    <mat-icon>qr_code_scanner</mat-icon>\n                                    <span>Connect Mobile</span>\n                                </button>\n                            </div>\n                        }\n                    }\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(--tis-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(--tis-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(--tis-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(--tis-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\" style=\"height: 42px; width: 42px;\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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(--tis-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(--tis-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(--tis-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(--tis-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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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: [".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))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-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:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px}.image-picker-label-compact.error{border:2px dashed var(--tis-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(--tis-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(--tis-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;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)}.image-list .image-item.uploader{border:1px dashed rgba(0,0,0,.38)!important;cursor:pointer}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--tis-item-selected, var(--mat-sys-primary))!important}.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(--tis-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(--tis-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(--tis-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(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-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 .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-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(--tis-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(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-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}}.mobile-upload-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background-color:var(--tis-primary, #1F6AAD);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s ease}.mobile-upload-btn:hover{background-color:var(--tis-primary-dark, #175080)}.mobile-upload-btn.connected{background-color:#4caf50}.mobile-upload-btn.connected:hover{background-color:#388e3c}.mobile-upload-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-upload-btn span{white-space:nowrap}.mobile-upload-actions{display:flex;align-items:center;gap:4px;margin-top:8px}.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(--tis-primary, #1F6AAD);border:1px solid var(--tis-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(--tis-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(--tis-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}\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: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.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: TisImageAndFileUploadAndViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tis-image-and-file-upload-and-view', 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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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 && !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                        @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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-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\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\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                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\">Waiting for mobile...</span>\n                                            <button type=\"button\" class=\"cancel-mobile-btn\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                <mat-icon>close</mat-icon>\n                                            </button>\n                                        </div>\n                                    } @else {\n                                        <mat-icon class=\"active\">upload_file</mat-icon>\n                                        <!-- Mobile Upload Button -->\n                                        @if(isRemoteUploadAvailable()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn\" [class.connected]=\"isRemotePaired()\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" [title]=\"isRemotePaired() ? 'Upload from Mobile' : 'Connect & Upload Via Mobile'\">\n                                                    <mat-icon>smartphone</mat-icon>\n                                                    <span>{{ isRemotePaired() ? 'Upload from Mobile' : 'Connect Mobile' }}</span>\n                                                </button>\n                                                @if(isRemotePaired()) {\n                                                    <button type=\"button\" class=\"disconnect-btn\" (click)=\"disconnectRemote(); $event.stopPropagation(); $event.preventDefault()\" title=\"Disconnect Mobile\">\n                                                        <mat-icon>link_off</mat-icon>\n                                                    </button>\n                                                }\n                                            </div>\n                                        }\n                                    }\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                    @if(isWaitingForMobileUpload) {\n                        <!-- Waiting for mobile upload state -->\n                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                            <mat-progress-spinner diameter=\"32\" mode=\"indeterminate\"></mat-progress-spinner>\n                            <p style=\"text-align: center; font-size: 14px; margin: 8px 0 0 0;\">Waiting for upload from mobile...</p>\n                            <small style=\"color: #666;\">Please upload from your mobile device</small>\n                            <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\">\n                                Cancel\n                            </button>\n                        </div>\n                    } @else {\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                        <!-- Mobile Upload Button -->\n                        @if(isRemoteUploadAvailable()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn\" [class.connected]=\"isRemotePaired()\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" [title]=\"isRemotePaired() ? 'Upload from Mobile' : 'Connect & Upload Via Mobile'\">\n                                    <mat-icon>smartphone</mat-icon>\n                                    <span>{{ isRemotePaired() ? 'Upload from Mobile' : 'Connect Mobile' }}</span>\n                                </button>\n                                @if(isRemotePaired()) {\n                                    <button type=\"button\" class=\"disconnect-btn\" (click)=\"disconnectRemote(); $event.stopPropagation(); $event.preventDefault()\" title=\"Disconnect Mobile\">\n                                        <mat-icon>link_off</mat-icon>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    }\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(--tis-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(--tis-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(--tis-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(--tis-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\" style=\"height: 42px; width: 42px;\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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(--tis-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(--tis-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(--tis-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(--tis-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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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: [".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))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-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:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px}.image-picker-label-compact.error{border:2px dashed var(--tis-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(--tis-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(--tis-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;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)}.image-list .image-item.uploader{border:1px dashed rgba(0,0,0,.38)!important;cursor:pointer}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--tis-item-selected, var(--mat-sys-primary))!important}.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(--tis-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(--tis-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(--tis-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(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-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 .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-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(--tis-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(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-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}}.mobile-upload-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background-color:var(--tis-primary, #1F6AAD);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s ease}.mobile-upload-btn:hover{background-color:var(--tis-primary-dark, #175080)}.mobile-upload-btn.connected{background-color:#4caf50}.mobile-upload-btn.connected:hover{background-color:#388e3c}.mobile-upload-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-upload-btn span{white-space:nowrap}.mobile-upload-actions{display:flex;align-items:center;gap:4px;margin-top:8px}.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(--tis-primary, #1F6AAD);border:1px solid var(--tis-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(--tis-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(--tis-primary-dark, #175080)}.mobile-upload-btn-list mat-icon{font-size:20px;width:20px;height:20px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TisHelperService }, { type: i3$3.BreakpointObserver }, { type: TisRemoteUploadService }], propDecorators: { urlConfig: [{
+            args: [{ selector: 'tis-image-and-file-upload-and-view', 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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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 && !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                        @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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\">\n                                    <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-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\">\n                                @if(isShowImageSequence){\n                                    <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n                                    </div>\n                                }\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                                    @if(isWaitingForMobileUpload) {\n                                        <!-- Waiting for mobile upload state -->\n                                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                                            <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n                                            <span class=\"waiting-text\">Waiting for mobile...</span>\n                                            <button type=\"button\" class=\"cancel-mobile-btn\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" title=\"Cancel\">\n                                                <mat-icon>close</mat-icon>\n                                            </button>\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                                        <mat-icon class=\"active\">upload_file</mat-icon>\n                                        <!-- Mobile Upload Buttons - Show when remote upload is available and connected -->\n                                        @if(isRemoteUploadAvailable() && isRemotePaired()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" 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.stopPropagation(); $event.preventDefault()\" title=\"View Connection\">\n                                                    <mat-icon>link</mat-icon>\n                                                </button>\n                                            </div>\n                                        }\n                                        <!-- Show Connect button only when NOT connected -->\n                                        @else if(isRemoteUploadAvailable() && !isRemotePaired()){\n                                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                                <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.stopPropagation(); $event.preventDefault()\" title=\"Connect Mobile Device\">\n                                                    <mat-icon>qr_code_scanner</mat-icon>\n                                                    <span>Connect Mobile</span>\n                                                </button>\n                                            </div>\n                                        }\n                                    }\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                    @if(isWaitingForMobileUpload) {\n                        <!-- Waiting for mobile upload state -->\n                        <div class=\"mobile-waiting-state\" (click)=\"$event.stopPropagation()\">\n                            <mat-progress-spinner diameter=\"32\" mode=\"indeterminate\"></mat-progress-spinner>\n                            <p style=\"text-align: center; font-size: 14px; margin: 8px 0 0 0;\">Waiting for upload from mobile...</p>\n                            <small style=\"color: #666;\">Please upload from your mobile device</small>\n                            <button type=\"button\" class=\"cancel-mobile-btn-text\" (click)=\"cancelMobileUpload(); $event.stopPropagation(); $event.preventDefault()\">\n                                Cancel\n                            </button>\n                        </div>\n                    } @else {\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                        <!-- Mobile Upload Buttons - Show when remote upload is available and connected -->\n                        @if(isRemoteUploadAvailable() && isRemotePaired()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn connected\" (click)=\"triggerMobileUpload(); $event.stopPropagation(); $event.preventDefault()\" 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.stopPropagation(); $event.preventDefault()\" title=\"View Connection\">\n                                    <mat-icon>link</mat-icon>\n                                </button>\n                            </div>\n                        }\n                        <!-- Show Connect button only when NOT connected -->\n                        @else if(isRemoteUploadAvailable() && !isRemotePaired()){\n                            <div class=\"mobile-upload-actions\" (click)=\"$event.stopPropagation()\">\n                                <button type=\"button\" class=\"mobile-upload-btn\" (click)=\"openRemoteUploadDialog(); $event.stopPropagation(); $event.preventDefault()\" title=\"Connect Mobile Device\">\n                                    <mat-icon>qr_code_scanner</mat-icon>\n                                    <span>Connect Mobile</span>\n                                </button>\n                            </div>\n                        }\n                    }\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(--tis-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(--tis-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(--tis-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(--tis-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\" style=\"height: 42px; width: 42px;\">\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.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"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 tis-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(--tis-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(--tis-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(--tis-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(--tis-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\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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=\"tis-icon-btn-sm tis-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: [".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))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-mat-icon{width:25px!important;height:25px!important;font-size:25px!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-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:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-picker-label-compact{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:4px}.image-picker-label-compact.error{border:2px dashed var(--tis-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(--tis-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(--tis-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;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)}.image-list .image-item.uploader{border:1px dashed rgba(0,0,0,.38)!important;cursor:pointer}.image-list .image-item:hover .mat-icon{display:unset!important}.image-list .image-item.selected{border:3px solid var(--tis-item-selected, var(--mat-sys-primary))!important}.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(--tis-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(--tis-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(--tis-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(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-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 .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-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(--tis-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(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-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}}.mobile-upload-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background-color:var(--tis-primary, #1F6AAD);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s ease}.mobile-upload-btn:hover{background-color:var(--tis-primary-dark, #175080)}.mobile-upload-btn.connected{background-color:#4caf50}.mobile-upload-btn.connected:hover{background-color:#388e3c}.mobile-upload-btn mat-icon{font-size:18px;width:18px;height:18px}.mobile-upload-btn span{white-space:nowrap}.mobile-upload-actions{display:flex;align-items:center;gap:4px;margin-top:8px}.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(--tis-primary, #1F6AAD);border:1px solid var(--tis-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(--tis-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(--tis-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}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TisHelperService }, { type: i3$4.BreakpointObserver }, { type: TisRemoteUploadService }], propDecorators: { urlConfig: [{
                 type: Input,
                 args: [{ required: true }]
             }], entityType: [{
@@ -2976,6 +3433,7 @@ const uiImports = [
     MatInputModule,
     MatButtonModule,
     MatDialogModule,
+    MatDividerModule,
 ];
 class TisImageAndFileUploadAndViewModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2987,7 +3445,8 @@ class TisImageAndFileUploadAndViewModule {
             TisVideoComponent,
             TisErrorDialogComponent,
             TisConfirmationDialogComponent,
-            TisQrCodeDialogComponent], imports: [CommonModule,
+            TisQrCodeDialogComponent,
+            TisViewConnectionDialogComponent], imports: [CommonModule,
             HttpClientModule,
             NgxExtendedPdfViewerModule,
             FormsModule,
@@ -2998,7 +3457,8 @@ class TisImageAndFileUploadAndViewModule {
             MatProgressSpinnerModule,
             MatInputModule,
             MatButtonModule,
-            MatDialogModule, DragDropModule], exports: [TisImageAndFileUploadAndViewComponent,
+            MatDialogModule,
+            MatDividerModule, DragDropModule], exports: [TisImageAndFileUploadAndViewComponent,
             TisQrCodeDialogComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, imports: [CommonModule,
             HttpClientModule,
@@ -3019,7 +3479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         TisVideoComponent,
                         TisErrorDialogComponent,
                         TisConfirmationDialogComponent,
-                        TisQrCodeDialogComponent
+                        TisQrCodeDialogComponent,
+                        TisViewConnectionDialogComponent
                     ],
                     imports: [
                         CommonModule,