@servicemind.tis/tis-image-and-file-upload-and-view 1.2.23 → 1.2.25

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

@@ -23,6 +23,8 @@ 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 i10 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6 from '@angular/forms';
@@ -545,7 +547,9 @@ class TisRemoteUploadService {
             // Step 1: Get link token from backend
             const endpoint = this.config?.apiEndpoints?.generateMobileLinkToken
                 || `${this.apiUrl}/ease-of-access/mobile-upload-link-token`;
-            const response = await this.callHttpApi(endpoint, { deviceId: this.deviceId, userId: this.userId });
+            const apiResponse = await this.callHttpApi(endpoint, { deviceId: this.deviceId, userId: this.userId });
+            // Unwrap the data from API response
+            const response = apiResponse.data || apiResponse;
             const expirySeconds = this.config?.qrCode?.expirySeconds || DEFAULT_QR_EXPIRY;
             const expiresAt = response.expiresAt || Date.now() + expirySeconds * 1000;
             // Step 2: Build QR URL
@@ -592,22 +596,27 @@ class TisRemoteUploadService {
     // Mobile Communication
     // ===========================================================================
     /**
-     * Send message to mobile device
+     * Send message to mobile device via channel
      */
     sendToMobile(type, data) {
         if (!this.socketAdapter?.sendViaSocket) {
             console.warn(`[${TisRemoteUploadService.COMPONENT}] sendViaSocket not available`);
             return;
         }
-        this.socketAdapter.sendViaSocket({
-            action: this.channelName,
+        const message = {
+            action: 'send-to-channel',
             data: {
-                type,
-                ...data,
-                desktopDeviceId: this.deviceId,
-                timestamp: Date.now()
+                channel: this.channelName,
+                payload: {
+                    type,
+                    ...data,
+                    desktopDeviceId: this.deviceId,
+                    timestamp: Date.now()
+                }
             }
-        });
+        };
+        console.log(`[${TisRemoteUploadService.COMPONENT}] Sending to mobile:`, message);
+        this.socketAdapter.sendViaSocket(message);
     }
     /**
      * Accept mobile connection (send SUCCESS response)
@@ -639,18 +648,61 @@ class TisRemoteUploadService {
         this.sendToMobile('connectionState', { state: 'SUCCESS' });
     }
     /**
-     * Disconnect from mobile device
+     * Disconnect from mobile device - call API and clear local state
      */
-    disconnect() {
+    async disconnect() {
         console.log(`[${TisRemoteUploadService.COMPONENT}] Disconnecting from mobile...`);
-        // Notify mobile
-        this.sendToMobile('connectionState', { state: 'DISCONNECTED' });
+        const mobileDeviceId = this.mobileConnection$.value?.mobileDeviceId;
+        // Call disconnect API via socket
+        if (this.socketAdapter?.callApiViaSocket && mobileDeviceId) {
+            try {
+                const callApi = this.socketAdapter.callApiViaSocket.bind(this.socketAdapter);
+                const response = await new Promise((resolve, reject) => {
+                    const timeout = setTimeout(() => reject(new Error('Disconnect API timeout')), 10000);
+                    callApi('tis-image-mobile-uploader/disconnect-mobile-link', {
+                        desktopDeviceId: this.deviceId,
+                        mobileDeviceId: mobileDeviceId,
+                        initiatedBy: 'desktop'
+                    }).pipe(take(1)).subscribe({
+                        next: (res) => {
+                            clearTimeout(timeout);
+                            resolve(res);
+                        },
+                        error: (err) => {
+                            clearTimeout(timeout);
+                            reject(err);
+                        }
+                    });
+                });
+                console.log(`[${TisRemoteUploadService.COMPONENT}] Disconnect API response:`, response);
+            }
+            catch (error) {
+                console.warn(`[${TisRemoteUploadService.COMPONENT}] Disconnect API call failed:`, error);
+                // Continue with local cleanup anyway
+            }
+        }
+        // Notify mobile via channel (backup notification)
+        this.sendToMobile('mobile-link-disconnected', {
+            desktopDeviceId: this.deviceId,
+            initiatedBy: 'desktop'
+        });
         // Clear state
         this.mobileConnection$.next(null);
         this.connectionStatus$.next('disconnected');
         this.pairingSession$.next(null);
         this.clearMobileConnection();
     }
+    /**
+     * Handle disconnect initiated from remote (mobile) side
+     */
+    handleRemoteDisconnect(data) {
+        console.log(`[${TisRemoteUploadService.COMPONENT}] Mobile disconnected:`, data);
+        // Clear state without calling API (mobile already initiated)
+        this.mobileConnection$.next(null);
+        this.connectionStatus$.next('disconnected');
+        this.pairingSession$.next(null);
+        this.clearMobileConnection();
+    }
     // ===========================================================================
     // Channel Subscription & Message Handling
     // ===========================================================================
@@ -680,18 +732,23 @@ class TisRemoteUploadService {
      */
     handleChannelMessage(message) {
         console.log(`[${TisRemoteUploadService.COMPONENT}] Received:`, message);
-        // Extract message type and data
-        const type = message.type || message.data?.type;
-        const data = message.data || message.payload || message;
+        // Extract message type and data - handle nested payload structure
+        const payload = message.payload || message.data || message;
+        const type = payload.type || message.type;
+        const data = payload;
         switch (type) {
             case 'connectionState':
                 this.handleConnectionState(data);
                 break;
+            case 'mobile-link-established':
+                this.handleMobileLinkEstablished(data);
+                break;
             case 'image-uploaded':
             case 'upload_complete':
                 this.handleUploadComplete(message);
                 break;
             case 'disconnect':
+            case 'mobile-link-disconnected':
                 this.handleMobileDisconnect(data);
                 break;
             default:
@@ -704,6 +761,50 @@ class TisRemoteUploadService {
                 }
         }
     }
+    /**
+     * Handle mobile-link-established message
+     * This is sent when mobile successfully connects via the backend
+     */
+    handleMobileLinkEstablished(data) {
+        const mobileDeviceId = data.mobileDeviceId;
+        const mobileConnectionId = data.mobileConnectionId;
+        const userId = data.userId;
+        console.log(`[${TisRemoteUploadService.COMPONENT}] Mobile link established:`, {
+            mobileDeviceId,
+            mobileConnectionId,
+            userId
+        });
+        if (mobileDeviceId) {
+            // Save mobile connection
+            const connectionInfo = {
+                mobileDeviceId,
+                connectedAt: Date.now(),
+                lastActivity: Date.now()
+            };
+            this.mobileConnection$.next(connectionInfo);
+            this.saveMobileConnection(connectionInfo);
+            // Update status to connected
+            this.connectionStatus$.next('connected');
+            // Update session
+            const session = this.pairingSession$.value;
+            if (session) {
+                const updatedSession = {
+                    ...session,
+                    mobileDeviceId,
+                    status: 'connected',
+                    lastActivity: Date.now()
+                };
+                this.pairingSession$.next(updatedSession);
+            }
+            // Send SUCCESS acknowledgment to mobile
+            this.sendToMobile('connectionState', {
+                state: 'SUCCESS',
+                desktopDeviceId: this.deviceId,
+                mobileConnectionId
+            });
+            console.log(`[${TisRemoteUploadService.COMPONENT}] Connection established with mobile device:`, mobileDeviceId);
+        }
+    }
     /**
      * Handle connection state messages from mobile
      */
@@ -845,7 +946,6 @@ class TisQrCodeDialogComponent {
     dialogRef;
     data;
     remoteUploadService;
-    qrCanvas;
     qrData = '';
     expiresAt = 0;
     remainingTime = '';
@@ -889,6 +989,10 @@ class TisQrCodeDialogComponent {
             this.isConnected = true;
             this.connectionStatus = 'connected';
             this.isLoading = false;
+            // Send field info to mobile since already connected
+            if (this.data.fieldInfo) {
+                this.sendFieldInfoToMobile();
+            }
         }
         else {
             // No existing connection, generate QR code
@@ -905,8 +1009,6 @@ class TisQrCodeDialogComponent {
             this.expiresAt = result.expiresAt;
             this.isLoading = false;
             this.startCountdown();
-            // Generate QR code after view is ready
-            setTimeout(() => this.renderQrCode(), 100);
         }
         catch (error) {
             this.isLoading = false;
@@ -919,7 +1021,12 @@ class TisQrCodeDialogComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe(status => {
             this.connectionStatus = status;
+            const wasConnected = this.isConnected;
             this.isConnected = status === 'connected';
+            // Send field info when first connected
+            if (!wasConnected && this.isConnected && this.data.fieldInfo) {
+                this.sendFieldInfoToMobile();
+            }
         });
         // Mobile connection changes
         this.remoteUploadService.getMobileConnection()
@@ -943,6 +1050,15 @@ class TisQrCodeDialogComponent {
             console.error('[TisQrCodeDialog] Error:', error);
         });
     }
+    /**
+     * Send field configuration to mobile device
+     */
+    sendFieldInfoToMobile() {
+        if (!this.data.fieldInfo)
+            return;
+        console.log('[TisQrCodeDialog] Sending field info to mobile:', this.data.fieldInfo);
+        this.remoteUploadService.sendToMobile('field-info', this.data.fieldInfo);
+    }
     startCountdown() {
         if (this.countdownSubscription) {
             this.countdownSubscription.unsubscribe();
@@ -964,74 +1080,6 @@ class TisQrCodeDialogComponent {
             }
         });
     }
-    renderQrCode() {
-        if (!this.qrCanvas || !this.qrData)
-            return;
-        const canvas = this.qrCanvas.nativeElement;
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return;
-        const size = this.data.qrSize || 200;
-        canvas.width = size;
-        canvas.height = size;
-        this.generateQrCodeOnCanvas(ctx, this.qrData, size);
-    }
-    /**
-     * Simple QR code generator using canvas
-     * In production, you'd use a library like qrcode or qrcode-generator
-     */
-    generateQrCodeOnCanvas(ctx, data, size) {
-        const moduleCount = 25;
-        const moduleSize = size / moduleCount;
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, size, size);
-        const pattern = this.generatePattern(data, moduleCount);
-        ctx.fillStyle = '#000000';
-        for (let row = 0; row < moduleCount; row++) {
-            for (let col = 0; col < moduleCount; col++) {
-                if (pattern[row][col]) {
-                    ctx.fillRect(col * moduleSize, row * moduleSize, moduleSize, moduleSize);
-                }
-            }
-        }
-        this.drawFinderPattern(ctx, 0, 0, moduleSize);
-        this.drawFinderPattern(ctx, (moduleCount - 7) * moduleSize, 0, moduleSize);
-        this.drawFinderPattern(ctx, 0, (moduleCount - 7) * moduleSize, moduleSize);
-    }
-    generatePattern(data, size) {
-        const pattern = [];
-        let hash = 0;
-        for (let i = 0; i < data.length; i++) {
-            hash = ((hash << 5) - hash) + data.charCodeAt(i);
-            hash = hash & hash;
-        }
-        const seed = Math.abs(hash);
-        let current = seed;
-        for (let row = 0; row < size; row++) {
-            pattern[row] = [];
-            for (let col = 0; col < size; col++) {
-                if ((row < 8 && col < 8) ||
-                    (row < 8 && col >= size - 8) ||
-                    (row >= size - 8 && col < 8)) {
-                    pattern[row][col] = false;
-                }
-                else {
-                    current = (current * 1103515245 + 12345) & 0x7fffffff;
-                    pattern[row][col] = (current % 2) === 0;
-                }
-            }
-        }
-        return pattern;
-    }
-    drawFinderPattern(ctx, x, y, moduleSize) {
-        const s = moduleSize;
-        ctx.fillStyle = '#000000';
-        ctx.fillRect(x, y, 7 * s, 7 * s);
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(x + s, y + s, 5 * s, 5 * s);
-        ctx.fillStyle = '#000000';
-        ctx.fillRect(x + 2 * s, y + 2 * s, 3 * s, 3 * s);
-    }
     // ---------------------------------------------------------------------------
     // Public Methods
     // ---------------------------------------------------------------------------
@@ -1079,18 +1127,15 @@ class TisQrCodeDialogComponent {
         });
     }
     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", viewQueries: [{ propertyName: "qrCanvas", first: true, predicate: ["qrCanvas"], descendants: true }], 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\">{{ 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\">{{ 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 device. \n          Select a file/image upload field and the uploaded files will appear automatically.\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          <canvas #qrCanvas class=\"qr-canvas\"></canvas>\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\" color=\"warn\" (click)=\"disconnect()\">\n      <mat-icon>link_off</mat-icon>\n      Disconnect\n    </button>\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Connect & Upload via Mobile\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ 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}@media (max-width: 400px){.qr-dialog-container{min-width:100%;border-radius:0}.qr-canvas{width:180px;height:180px}.device-info-section{flex-direction:column;gap:8px}.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: 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          <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 device. \n          Select a file/image upload field and the uploaded files will appear automatically.\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\" color=\"warn\" (click)=\"disconnect()\">\n      <mat-icon>link_off</mat-icon>\n      Disconnect\n    </button>\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Connect & Upload via Mobile\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ 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"] }] });
 }
 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\">{{ 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\">{{ 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 device. \n          Select a file/image upload field and the uploaded files will appear automatically.\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          <canvas #qrCanvas class=\"qr-canvas\"></canvas>\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\" color=\"warn\" (click)=\"disconnect()\">\n      <mat-icon>link_off</mat-icon>\n      Disconnect\n    </button>\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Connect & Upload via Mobile\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ 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}@media (max-width: 400px){.qr-dialog-container{min-width:100%;border-radius:0}.qr-canvas{width:180px;height:180px}.device-info-section{flex-direction:column;gap:8px}.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          <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 device. \n          Select a file/image upload field and the uploaded files will appear automatically.\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\" color=\"warn\" (click)=\"disconnect()\">\n      <mat-icon>link_off</mat-icon>\n      Disconnect\n    </button>\n    <button mat-button *ngIf=\"!isConnected && !isLoading\" (click)=\"connectToMobile()\">\n      <mat-icon>qr_code</mat-icon>\n      Connect & Upload via Mobile\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"close()\">\n      {{ 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"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: TisRemoteUploadService }], propDecorators: { qrCanvas: [{
-                type: ViewChild,
-                args: ['qrCanvas', { static: false }]
-            }] } });
+                }] }, { type: TisRemoteUploadService }] });
 
 const generateRandomString = (length) => {
     const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -2685,7 +2730,17 @@ class TisImageAndFileUploadAndViewComponent {
             subtitle: `Scan this QR code to upload ${this.type === 'image' ? 'images' : 'files'} from your mobile device`,
             qrSize: 200,
             showCountdown: true,
-            autoCloseOnUpload: false
+            autoCloseOnUpload: false,
+            fieldInfo: {
+                label: this.label || `${this.type === 'image' ? 'Images' : 'Files'}`,
+                accept: this.accept || (this.type === 'image' ? 'image/*' : '*'),
+                type: this.type,
+                entityType: this.entityType,
+                entityId: this.entityId,
+                isMultiple: this.config.isMultiple,
+                limit: this.config.limit,
+                isCompressed: this.config.isCompressed
+            }
         };
         const dialogRef = this.dialog.open(TisQrCodeDialogComponent, {
             width: this.isMobile ? '100%' : '420px',
@@ -2811,7 +2866,8 @@ class TisImageAndFileUploadAndViewModule {
             HttpClientModule,
             NgxExtendedPdfViewerModule,
             FormsModule,
-            ReactiveFormsModule, MatTooltipModule,
+            ReactiveFormsModule,
+            QRCodeComponent, MatTooltipModule,
             MatIconModule,
             MatSnackBarModule,
             MatProgressSpinnerModule,
@@ -2823,7 +2879,8 @@ class TisImageAndFileUploadAndViewModule {
             HttpClientModule,
             NgxExtendedPdfViewerModule,
             FormsModule,
-            ReactiveFormsModule, uiImports, DragDropModule] });
+            ReactiveFormsModule,
+            QRCodeComponent, uiImports, DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, decorators: [{
             type: NgModule,
@@ -2845,6 +2902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         NgxExtendedPdfViewerModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        QRCodeComponent,
                         ...uiImports,
                         DragDropModule
                     ],