@servicemind.tis/tis-image-and-file-upload-and-view 1.0.0

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

@@ -0,0 +1,1029 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Inject, EventEmitter, Output, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { BehaviorSubject, map, shareReplay } from 'rxjs';
+import * as i5 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import * as i1$2 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import * as i1$1 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+class TisImageAndFileUploadAndViewService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class TisFileViewerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisFileViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TisFileViewerComponent, isStandalone: false, selector: "tis-file-viewer", ngImport: i0, template: "<p>tis-file-viewer works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisFileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-file-viewer', standalone: false, template: "<p>tis-file-viewer works!</p>\n" }]
+        }] });
+
+class TisPreviewImageComponent {
+    dialogRef;
+    data;
+    width = 850;
+    height = 650;
+    isLoading = true;
+    isLandscape;
+    orientation;
+    imageWidth;
+    imageHeight;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        if (this.data.url) {
+            setTimeout(() => {
+                this.checkImageOrientation(this.data.url);
+            }, 500);
+        }
+    }
+    checkImageOrientation(imageUrl) {
+        const img = new Image();
+        img.src = imageUrl;
+        this.isLoading = true;
+        img.onload = () => {
+            this.imageWidth = img.naturalWidth;
+            this.imageHeight = img.naturalHeight;
+            this.isLandscape = img.naturalWidth > img.naturalHeight;
+            this.orientation = this.isLandscape ? 'landscape-image' : 'portrait-image';
+            this.isLoading = false;
+        };
+        img.onerror = () => {
+            console.error('Failed to load image.');
+            this.isLoading = false;
+        };
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisPreviewImageComponent, deps: [{ token: i1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisPreviewImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-preview-image', standalone: false, template: "@if(isLoading){\n    <div style=\"width: 350px; height: 350px; display: flex; justify-content: center; align-items: center\">\n        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"80\"></mat-progress-spinner>\n    </div>\n}\n@else{\n    <div class=\"w-100 dialog-container\" appScrolling style=\"--img-width: {{(imageWidth && imageWidth < 700) ? imageWidth : 650}}px; --img-height: {{(imageHeight && imageHeight < 600) ? imageHeight : 600}}px\">\n        <mat-icon\n        class=\"close-icon\"\n        (click)=\"onClose()\">cancel</mat-icon>\n        <img \n        *ngIf=\"data.url\" \n        [src]=\"data.url\" \n        alt=\"preview-image\" \n        class=\"preview-image {{orientation}}\">\n    </div>\n}", styles: ["::ng-deep .mat-p-0 .mat-dialog-container{padding:0!important}.dialog-container{overflow:auto;max-height:calc(100vh - 15px);display:flex;justify-content:center;align-items:center}.landscape-image{width:var(--img-width);max-width:95vw;object-fit:contain}.portrait-image{height:var(--img-height);max-height:95vh;object-fit:contain}.close-icon{color:var(--tis-cancel, #bb333b);position:absolute;top:10px;right:10px;z-index:99;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class TisErrorDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisErrorDialogComponent, deps: [{ token: i1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.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,
+            args: [{ selector: 'lib-tis-error-dialog', standalone: false, template: "<h1 mat-dialog-title>\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    {{data?.title}}\n</h1>\n<div mat-dialog-content>\n    {{data?.message}}\n</div>\n<div mat-dialog-actions>\n  <button mat-button class=\"tis-text-upper {{data?.buttonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class TisHelperService {
+    snackBar;
+    dialog;
+    http;
+    constructor(snackBar, dialog, http) {
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.http = http;
+    }
+    showHttpErrorMsg(error, duration = 5000) {
+        console.log('httpError: ', error);
+        let errorMessage = 'Some Unknown Error Occurred.';
+        let errorCode = 'Unknown Error';
+        const httpError = error;
+        if (httpError.status >= 400) {
+            const errorFromServer = httpError.error;
+            if (Array.isArray(errorFromServer) && errorFromServer.length > 0) {
+                errorMessage = errorFromServer[0].message;
+                errorCode = errorFromServer[0].code;
+            }
+        }
+        else if (httpError.status < 100) {
+            errorMessage = httpError.message;
+            errorCode = httpError.statusText;
+        }
+        if (errorCode == "VALIDATION_ERROR" || errorCode == "NOT_FOUND_ERROR" || errorCode == "THIRD_PARTY_API_ERROR") {
+            let confirmBoxData = {
+                title: "Error !",
+                message: errorMessage,
+                icon: "error",
+                iconClass: "tis-text-danger",
+                buttonText: "Ok",
+                buttonClass: "tis-btn-primary",
+            };
+            const dialogRef = this.dialog.open(TisErrorDialogComponent, {
+                width: "550px",
+                panelClass: ['tis-simple-confirmation'],
+                data: confirmBoxData,
+                disableClose: false,
+            });
+            return dialogRef;
+        }
+        else {
+            const snackbarRef = this.snackBar.open(errorMessage, 'Error', { duration: duration });
+            return snackbarRef;
+        }
+    }
+    showSuccessMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    showErrorMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    async compressFile(image, mimeType) {
+        let imageData = image;
+        let imageBlob = this.dataURItoBlob(imageData.split(',')[1], mimeType);
+        return imageBlob;
+    }
+    dataURItoBlob(dataURI, mimeType) {
+        const byteString = window.atob(dataURI);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const int8Array = new Uint8Array(arrayBuffer);
+        for (let i = 0; i < byteString.length; i++) {
+            int8Array[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([int8Array], { type: mimeType });
+        return blob;
+    }
+    getDataUrlFromFile(file) {
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.onload = (e) => {
+                resolve(e.target.result);
+            };
+            reader.onerror = (e) => {
+                reject(e.target.error);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    getUploadUrl(url, filename, mimeType, type) {
+        return this.http.post(url, { filename, mimeType, type });
+    }
+    attachImagesToEntity(url, data) {
+        return this.http.post(url, data);
+    }
+    uploadImageByEntity(url, data) {
+        return this.http.post(url, data);
+    }
+    putImage(url, file, contentType) {
+        // const headers = new HttpHeaders({ "content-type": contentType ? contentType : "binary/octet-stream"}).set(SkipAuthInterceptorHeader, "");
+        const headers = new HttpHeaders({ "content-type": contentType ? contentType : "binary/octet-stream" });
+        return this.http.put(url, file, { headers });
+    }
+    deleteUploadedImage(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$1.MatSnackBar }, { token: i1.MatDialog }, { token: i1$2.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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i1$2.HttpClient }] });
+
+class FileUploadService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getUploadUrl(url, filename, mimeType, type) {
+        return this.http.post(url, { filename, mimeType, type });
+    }
+    attachFilesToEntity(url, data) {
+        return this.http.post(url, data);
+    }
+    putFile(url, file) {
+        // const headers = new HttpHeaders({ "content-type": "binary/octet-stream"}).set(SkipAuthInterceptorHeader, "");
+        const headers = new HttpHeaders({ "content-type": "binary/octet-stream" });
+        return this.http.put(url, file, { headers });
+    }
+    deleteUploadedFile(url, data) {
+        return this.http.post(url, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
+
+class ImageUploadService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getUploadUrl(url, filename, mimeType, type) {
+        return this.http.post(url, { filename, mimeType, type });
+    }
+    attachImagesToEntity(url, data) {
+        return this.http.post(url, data);
+    }
+    // uploadImageByEntity(url: string, data: any): Observable<any> {
+    //   return this.http.post(url, data);
+    // }
+    putImage(url, file, contentType) {
+        // const headers = new HttpHeaders({ "content-type": contentType ? contentType : "binary/octet-stream"}).set(SkipAuthInterceptorHeader, "");
+        const headers = new HttpHeaders({ "content-type": contentType ? contentType : "binary/octet-stream" });
+        return this.http.put(url, file, { headers });
+    }
+    deleteUploadedImage(url, data) {
+        return this.http.post(url, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageUploadService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
+
+class TisConfirmationDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.dialogRef.addPanelClass(['md-tis-w-400-px']);
+    }
+    onClose(status) {
+        this.dialogRef.close(status);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisConfirmationDialogComponent, deps: [{ token: i1.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}}\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content>\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=\"tis-text-upper {{data?.cancelButtonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"tis-text-upper {{data?.approveButtonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.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,
+            args: [{ selector: 'tis-confirmation-dialog', standalone: false, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content>\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=\"tis-text-upper {{data?.cancelButtonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"tis-text-upper {{data?.approveButtonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class TisImageAndFileUploadAndViewComponent {
+    dialog;
+    fileUploadService;
+    imageUploadService;
+    helper;
+    breakpointObserver;
+    changeSubject = new BehaviorSubject(false);
+    urlConfig;
+    entityType;
+    entityId;
+    viewType = 'card';
+    type = 'image';
+    label = null;
+    disabled = false;
+    data;
+    hint = null;
+    accept = '';
+    selectedId = null;
+    options = null;
+    required = false;
+    previewOnly = false;
+    previewInFlex = false;
+    imageItemClass = '';
+    isEnableDeleteConfirmation = true;
+    deleteConfirmationMsg;
+    dialogConfig;
+    uploadInProgress = new EventEmitter();
+    onUploaded = new EventEmitter();
+    onFileSelect = new EventEmitter();
+    onFileRemoved = new EventEmitter();
+    isMobile = false;
+    isTab = false;
+    isHandset$;
+    isTab$;
+    config = {
+        isCompressed: false,
+        hiddenDeleteBtn: false,
+        hiddenPreview: false,
+        selectionMode: false,
+        isStoredDb: false,
+        isMultiple: false,
+        fileSize: null,
+        limit: 10,
+        cols: 5,
+        colsForTab: 5,
+        colsForMobile: 3,
+        height: '130px',
+        selectorId: 'choosing-img',
+    };
+    isSliderLoaded = true;
+    filesArray = [
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg?Content-Type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152621Z&X-Amz-Expires=900&X-Amz-Signature=4004cfb10a740b9623d486de992a06f53b458ed6fc151c092eea88a3059eae8f&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "f7a32cd0-d0c1-474a-838e-47402d80527a.jpeg",
+    //       "fileName": "1452664590074.jpeg",
+    //       "uploadPath": "/survey_orders/f7a32cd0-d0c1-474a-838e-47402d80527a.jpeg",
+    //       "resourceUrl": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/da226bf2-4e5f-4180-94d8-6746b1ce139b.jpg"
+    //   }
+    // },
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/31033a2a-5db6-450d-a541-58a94654dd0c.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql?Content-Type=application%2Fsql&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152641Z&X-Amz-Expires=900&X-Amz-Signature=bcdf347df2a6495615bf48d619492e1deac2264231161da5dc3becaa7f45a796&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "6c537889-c72a-48ca-9134-638e8d6a1aac.sql",
+    //       "fileName": "eccom_bermuda.sql",
+    //       "uploadPath": "/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql",
+    //       "resourceUrl": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/6c537889-c72a-48ca-9134-638e8d6a1aac.sql"
+    //   }
+    // },
+    // {
+    //   "s3Url": "https://obk-servicemind-uat-resources.s3.ap-southeast-1.amazonaws.com/parcel_create/b8424185-30c6-4f44-ba1e-ff616dfd6576.jpg",
+    //   "uploadData": {
+    //       "isBase64Encoded": false,
+    //       "headers": {
+    //           "Access-Control-Allow-Origin": "*"
+    //       },
+    //       "uploadURL": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf?Content-Type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA37VN5NQI5HY4VFVN%2F20220617%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220617T152656Z&X-Amz-Expires=900&X-Amz-Signature=85643479c3fbecc5bd1fee9783e3cb72e27e16a034921b52cf2f377eefb01ff9&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read",
+    //       "photoFilename": "232f2548-dc93-4204-8835-86b69f3005a7.pdf",
+    //       "fileName": "print-registration-4x6.pdf",
+    //       "uploadPath": "/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf",
+    //       "resourceUrl": "https://servicemind-resources-staging.s3.ap-southeast-1.amazonaws.com/survey_orders/232f2548-dc93-4204-8835-86b69f3005a7.pdf"
+    //   }
+    // }
+    ];
+    currentEntityId;
+    currentEntityType;
+    images = [];
+    loading = false;
+    status = false;
+    constructor(dialog, fileUploadService, imageUploadService, helper, breakpointObserver) {
+        this.dialog = dialog;
+        this.fileUploadService = fileUploadService;
+        this.imageUploadService = imageUploadService;
+        this.helper = helper;
+        this.breakpointObserver = breakpointObserver;
+    }
+    ngOnInit() {
+        this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset])
+            .pipe(map(result => result.matches), shareReplay());
+        this.isTab$ = this.breakpointObserver.observe([Breakpoints.TabletPortrait])
+            .pipe(map(result => result.matches), shareReplay());
+        this.prepareConfig();
+    }
+    ngAfterViewInit() {
+        this.isHandset$.subscribe(r => {
+            console.log('IS HANDSET:', r);
+            this.isMobile = r;
+            this.changeSubject.next(true);
+        });
+        this.isTab$.subscribe(r => {
+            console.log('IS TAB:', r);
+            this.isTab = r;
+            this.changeSubject.next(true);
+        });
+        this.changeSubject.subscribe(status => {
+            let cols = 1;
+            if (this.isMobile) {
+                cols = this.options?.colsForMobile ?? 3;
+            }
+            else if (this.isTab) {
+                cols = this.options?.colsForTab ?? 4;
+            }
+            else {
+                cols = this.options?.cols ?? 5;
+            }
+            this.config.cols = cols;
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['entityId']) {
+            this.currentEntityId = changes['entityId'].currentValue;
+        }
+        if (changes['entityType']) {
+            this.currentEntityType = changes['entityType'].currentValue;
+        }
+        if (changes['options']) {
+            this.prepareConfig();
+        }
+        if (changes['data']) {
+            this.filesArray = changes['data']?.currentValue ?? [];
+            this.filesArray = this.filesArray?.map(r => {
+                r.loading = false;
+                return r;
+            });
+            console.log("this.filesArray", this.filesArray);
+        }
+    }
+    prepareConfig() {
+        if (this.options?.isCompressed) {
+            this.config.isCompressed = this.options?.isCompressed;
+        }
+        if (this.options?.isSliderPreview) {
+            this.config.isSliderPreview = this.options?.isSliderPreview;
+        }
+        if (this.options?.hiddenDeleteBtn) {
+            this.config.hiddenDeleteBtn = this.options?.hiddenDeleteBtn;
+        }
+        if (this.options?.hiddenPreview) {
+            this.config.hiddenPreview = this.options?.hiddenPreview;
+        }
+        if (this.options?.selectionMode) {
+            this.config.selectionMode = this.options?.selectionMode;
+        }
+        if (this.options?.isStoredDb) {
+            this.config.isStoredDb = this.options?.isStoredDb;
+        }
+        if (this.options?.isMultiple) {
+            this.config.isMultiple = this.options?.isMultiple;
+        }
+        if (this.options?.fileSize) {
+            this.config.fileSize = this.options?.fileSize;
+        }
+        if (this.options?.limit) {
+            this.config.limit = this.options?.limit;
+        }
+        if (this.options?.cols) {
+            this.config.cols = this.options?.cols;
+        }
+        if (this.options?.colsForTab) {
+            this.config.colsForTab = this.options?.colsForTab;
+        }
+        if (this.options?.colsForMobile) {
+            this.config.colsForMobile = this.options?.colsForMobile;
+        }
+        if (this.options?.height) {
+            this.config.height = this.options?.height;
+        }
+        if (this.options?.selectorId) {
+            this.config.selectorId = this.options?.selectorId;
+        }
+    }
+    setSliderLoading() {
+        this.isSliderLoaded = false;
+        setTimeout(() => {
+            this.isSliderLoaded = true;
+        }, 20);
+    }
+    openImageSelector() {
+        document.getElementById(this.config?.selectorId)?.click();
+    }
+    async detectImages(event) {
+        console.log('detectImages:', event);
+        event.preventDefault();
+        if (this.config?.limit === 1) {
+            this.filesArray = []; // Reset array for a single image
+        }
+        let files = event.target.files;
+        if (!files) {
+            this.helper.showErrorMsg('Please select an image', 'Error', 3000);
+            return;
+        }
+        if ((this.filesArray?.length + files.length) > this.config?.limit) {
+            this.helper.showErrorMsg(`You can upload a maximum of ${this.config?.limit} images`, 'Error', 3000);
+            return;
+        }
+        this.loading = true;
+        this.uploadInProgress.emit(true);
+        let uploadedImages = [];
+        // Process all images concurrently and wait for completion
+        await Promise.all([...files].map(file => this.processImage(file, uploadedImages)));
+        if (this.config?.isStoredDb) {
+            await this.uploadImages(uploadedImages);
+        }
+        this.loading = false;
+        this.uploadInProgress.emit(false);
+        this.onSubmit(); // Call once after all uploads
+    }
+    async processImage(file, uploadedImages) {
+        let fileSize = file.size / 1024;
+        if (this.config?.fileSize && fileSize > this.config?.fileSize) {
+            let maxSize = this.config.fileSize / 1024;
+            this.helper.showErrorMsg(`File size must be ≤ ${maxSize >= 1 ? maxSize : this.config.fileSize} ${maxSize >= 1 ? 'MB' : 'KB'}`, 'Error', 3000);
+            return;
+        }
+        return new Promise((resolve) => {
+            let reader = new FileReader();
+            reader.onload = async (e) => {
+                let mimeType = file.type;
+                let compressedImage = this.config?.isCompressed ? await this.helper.compressFile(e.target?.result, mimeType) : e.target.result;
+                try {
+                    let uploadResponse = await this.imageUploadService.getUploadUrl(this.urlConfig.getUploadUrl, file.name, mimeType, this.currentEntityType).toPromise();
+                    let uploadData = uploadResponse.data.uploadUrlData;
+                    let dataUrl = await this.helper.getDataUrlFromFile(file);
+                    let currentImageData = {
+                        title: file.name, name: file.name, s3Url: dataUrl,
+                        filename: file.name, s3Path: uploadData.uploadPath,
+                        tempS3Url: uploadData.resourceUrl, id: null,
+                        uploadData: uploadData, loading: true
+                    };
+                    this.filesArray = [currentImageData, ...this.filesArray];
+                    this.setSliderLoading();
+                    uploadedImages.push(currentImageData);
+                    await this.imageUploadService.putImage(uploadData.uploadURL, compressedImage).toPromise();
+                    // Final processing
+                    currentImageData.s3Url = currentImageData.tempS3Url;
+                    currentImageData.loading = !this.config?.isStoredDb;
+                    this.setSliderLoading();
+                    resolve();
+                }
+                catch (error) {
+                    this.helper.showHttpErrorMsg(error);
+                    resolve();
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    uploadImages(data) {
+        return new Promise((resolve, reject) => {
+            if (data && data?.length > 0) {
+                console.log('There is a image pending to attach:', data);
+                let images = [];
+                let fa = data.map((r) => {
+                    if (r?.uploadData) {
+                        images.push({ fileName: r.uploadData?.fileName, resourceUrl: r.uploadData?.resourceUrl, uploadPath: r.uploadData?.uploadPath, uploadURL: r.uploadData?.uploadURL });
+                        // delete r.uploadData;
+                    }
+                    return r;
+                });
+                this.imageUploadService.attachImagesToEntity(this.urlConfig.attachToEntity, { images: images, entityId: this.currentEntityId, entityType: this.currentEntityType }).subscribe({
+                    next: (ir) => {
+                        resolve(ir);
+                    },
+                    error: (imErr) => this.helper.showErrorMsg(imErr, "Error")
+                });
+            }
+            else {
+                resolve(false);
+            }
+        });
+    }
+    deleteImage(event, t, index, img) {
+        event.stopPropagation();
+        if (this.isEnableDeleteConfirmation) {
+            let confirmBoxData = {
+                title: this.dialogConfig.title,
+                message: this.deleteConfirmationMsg ?? this.dialogConfig.message,
+                iconClass: this.dialogConfig.iconClass,
+                icon: this.dialogConfig.icon,
+                approveButtonText: this.dialogConfig.approveButtonText,
+                approveButtonClass: this.dialogConfig.approveButtonClass,
+                cancelButtonText: this.dialogConfig.cancelButtonText,
+                cancelButtonClass: this.dialogConfig.cancelButtonClass
+            };
+            const dialogRef = this.dialog.open(TisConfirmationDialogComponent, {
+                width: "450px",
+                panelClass: ['tis-confirmation-dialog'],
+                data: confirmBoxData,
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((result) => {
+                console.log("The dialog was closed with result:", result);
+                if (result) {
+                    this.removeImage(event, index, img);
+                }
+            });
+        }
+        else {
+            this.removeImage(event, index, img);
+        }
+    }
+    /*REMOVE SELECTED IMAGE  */
+    removeImage(event, index, img) {
+        this.loading = true;
+        this.filesArray[index].loading = true;
+        if (img?.id) {
+            delete img.uploadData;
+            this.removeUploadedImage(img, index, true);
+        }
+        else {
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+        }
+    }
+    removeUploadedImage(img, index, silently = false) {
+        console.log("removeUploadedImage:", img);
+        this.imageUploadService.deleteUploadedImage(this.urlConfig.removeImage, img).subscribe((r) => {
+            console.log('Image Delete Res:', r);
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            if (!silently) {
+                this.helper.showSuccessMsg(r.message, 'Success', 3000);
+            }
+        }, (err) => { this.filesArray[index].loading = false; this.helper.showErrorMsg(err, "Error"); });
+    }
+    async detectFiles(event) {
+        console.log('detectFiles:', event);
+        event.preventDefault();
+        if (this.config?.limit === 1) {
+            this.filesArray = []; // Reset array for a single file
+        }
+        let files = event.target.files;
+        if (!files) {
+            this.helper.showErrorMsg('Please select a file', 'Error', 3000);
+            return;
+        }
+        if ((this.filesArray?.length + files.length) > this.config?.limit) {
+            this.helper.showErrorMsg(`You can upload a maximum of ${this.config?.limit} files`, 'Error', 3000);
+            return;
+        }
+        this.loading = true;
+        this.uploadInProgress.emit(true);
+        let uploadedFiles = [];
+        // Process all files concurrently and wait for completion
+        await Promise.all([...files].map(file => this.processFile(file, uploadedFiles)));
+        if (this.config?.isStoredDb) {
+            await this.uploadFiles(uploadedFiles);
+        }
+        this.loading = false;
+        this.uploadInProgress.emit(false);
+        this.onSubmit(); // Call once after all uploads
+    }
+    async processFile(file, uploadedFiles) {
+        let fileSize = file.size / 1024;
+        if (this.config?.fileSize && fileSize > this.config?.fileSize) {
+            let maxSize = this.config.fileSize / 1024;
+            this.helper.showErrorMsg(`File size must be ≤ ${maxSize >= 1 ? maxSize : this.config.fileSize} ${maxSize >= 1 ? 'MB' : 'KB'}`, 'Error', 3000);
+            return;
+        }
+        return new Promise((resolve) => {
+            let reader = new FileReader();
+            reader.onload = async (e) => {
+                let mimeType = file.type;
+                let buffer = new Uint8Array(reader.result);
+                try {
+                    let uploadResponse = await this.fileUploadService.getUploadUrl(this.urlConfig.getUploadUrl, file.name, mimeType, this.currentEntityType).toPromise();
+                    let uploadData = uploadResponse.data.uploadUrlData;
+                    let currentFileData = {
+                        title: file.name, name: file.name, s3Url: uploadData.resourceUrl,
+                        s3Path: uploadData.uploadPath, filename: file.name, id: null,
+                        uploadData: uploadData, loading: true, buffer: buffer
+                    };
+                    this.filesArray = [currentFileData, ...this.filesArray];
+                    this.setSliderLoading();
+                    uploadedFiles.push(currentFileData);
+                    await this.fileUploadService.putFile(uploadData.uploadURL, e.target.result).toPromise();
+                    // Final processing
+                    currentFileData.s3Url = currentFileData.uploadData?.resourceUrl;
+                    currentFileData.loading = !this.config?.isStoredDb;
+                    this.setSliderLoading();
+                    resolve();
+                }
+                catch (error) {
+                    this.helper.showHttpErrorMsg(error);
+                    resolve();
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    uploadFiles(data) {
+        return new Promise((resolve, reject) => {
+            if (data && data.length > 0) {
+                console.log('There is a file pending to attach:', data);
+                let files = [];
+                let fa = data.map((r) => {
+                    if (r?.uploadData) {
+                        files.push({ fileName: r.uploadData?.fileName, resourceUrl: r.uploadData?.resourceUrl, uploadPath: r.uploadData?.uploadPath, uploadURL: r.uploadData?.uploadURL });
+                        // delete r.uploadData;
+                    }
+                    return r;
+                });
+                this.fileUploadService.attachFilesToEntity(this.urlConfig.attachToEntity, { files: files, entityId: this.currentEntityId, entityType: this.currentEntityType }).subscribe({
+                    next: (ir) => {
+                        // this.filesArray = fa;
+                        this.filesArray[0].loading = false;
+                        this.onSubmit();
+                        resolve(ir);
+                    },
+                    error: (imErr) => reject(imErr)
+                });
+            }
+            else {
+                resolve(false);
+            }
+        });
+    }
+    deleteFile(event, t, index, file) {
+        event.stopPropagation();
+        if (this.isEnableDeleteConfirmation) {
+            let confirmBoxData = {
+                title: this.dialogConfig.title,
+                message: this.deleteConfirmationMsg ?? this.dialogConfig.message,
+                iconClass: this.dialogConfig.iconClass,
+                icon: this.dialogConfig.icon,
+                approveButtonText: this.dialogConfig.approveButtonText,
+                approveButtonClass: this.dialogConfig.approveButtonClass,
+                cancelButtonText: this.dialogConfig.cancelButtonText,
+                cancelButtonClass: this.dialogConfig.cancelButtonClass
+            };
+            const dialogRef = this.dialog.open(TisConfirmationDialogComponent, {
+                width: "450px",
+                panelClass: ['tis-simple-confirmation'],
+                data: confirmBoxData,
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((result) => {
+                console.log("The dialog was closed with result:", result);
+                if (result) {
+                    this.removeFile(event, index, file);
+                }
+            });
+        }
+        else {
+            this.removeFile(event, index, file);
+        }
+    }
+    removeFile(event, index, file) {
+        this.loading = true;
+        this.filesArray[index].loading = true;
+        if (file?.id) {
+            delete file.uploadData;
+            this.removeUploadedFile(file, index, true);
+        }
+        else {
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            this.onFileRemoved.emit(true);
+        }
+    }
+    removeUploadedFile(file, index, silently = false) {
+        console.log("removeUploadedFile:", file);
+        this.fileUploadService.deleteUploadedFile(this.urlConfig.removeImage, file).subscribe((r) => {
+            console.log('File Delete Res:', r);
+            this.loading = false;
+            this.filesArray.splice(index, 1);
+            this.setSliderLoading();
+            this.onSubmit();
+            if (!silently) {
+                this.helper.showSuccessMsg(r.message, 'Success', 3000);
+            }
+            this.onSubmit();
+        }, (err) => { this.filesArray[index].loading = false; this.helper.showErrorMsg(err, "Error"); });
+    }
+    onSubmit() {
+        this.onUploaded.emit(this.filesArray);
+    }
+    async downloadFile(url, fileName) {
+        fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+            const blobUrl = URL.createObjectURL(blob);
+            const el = document.createElement("a");
+            el.href = blobUrl;
+            el.download = fileName;
+            document.body.appendChild(el);
+            el.click();
+            document.body.removeChild(el);
+            URL.revokeObjectURL(blobUrl); // Cleanup
+        })
+            .catch(error => console.error("Download failed", error));
+    }
+    clickTimeout = null;
+    clickDelay = 250; // Delay in milliseconds to distinguish single and double click
+    onSelectFile(file) {
+        if (this.config.selectionMode) {
+            if (this.clickTimeout) {
+                clearTimeout(this.clickTimeout);
+                this.clickTimeout = null;
+                this.openFile(file); // Double-click detected
+            }
+            else {
+                this.clickTimeout = setTimeout(() => {
+                    this.clickTimeout = null;
+                    if (this.config.selectionMode) {
+                        this.onFileSelect.emit(file); // Single-click detected
+                    }
+                }, this.clickDelay);
+            }
+        }
+        else {
+            this.clickTimeout = null;
+            this.openFile(file);
+        }
+    }
+    openFile(file) {
+        if (!this.config.hiddenPreview) {
+            this.openPreviewDialog(file.s3Url, file.title);
+        }
+    }
+    openPreviewDialog(url, title) {
+        if (url.indexOf('.jpg') != -1 || url.indexOf('.jpeg') != -1 || url.indexOf('.png') != -1) {
+            this.openImagePreviewDialog(url);
+        }
+        else if (url.indexOf('.pdf') != -1) {
+            this.openFileViewer(url, 'pdf');
+        }
+        // else if(url.indexOf('.csv') != -1){
+        //   this.openFileViewer(url, 'csv');
+        // }
+        else if (url.indexOf('.xlxs') != -1 || url.indexOf('.xlx') != -1 || url.indexOf('.xls') != -1) {
+            this.openFileViewer(url, 'excel');
+        }
+        else {
+            this.downloadFile(url, title);
+        }
+    }
+    openImagePreviewDialog(url) {
+        const dialogRef = this.dialog.open(TisPreviewImageComponent, {
+            panelClass: ['mat-p-0', 'relative'],
+            data: { url },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log('The dialog was closed', result);
+        });
+    }
+    openFileViewer(pdfUrl, fileType) {
+        let dialogData = {
+            src: pdfUrl,
+            fileType: fileType
+        };
+        const dialogRef = this.dialog.open(TisFileViewerComponent, {
+            width: this.isMobile ? "100%" : "90%",
+            height: this.isMobile ? "100%" : "98%",
+            minHeight: this.isMobile ? "100%" : "80%",
+            maxWidth: this.isMobile ? "100%" : "100%",
+            panelClass: ['tis-file-viewer'],
+            data: dialogData,
+            disableClose: false,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log("FileViewer Dialog Closed");
+        });
+    }
+    checkingForPreview(img) {
+        let imageArray = img.split('.');
+        let imageType = imageArray[imageArray?.length - 1];
+        if (imageType == 'png' || imageType == 'jpg' || imageType == 'jpeg') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    setHeight(id) {
+        let height = document.getElementById(id)?.offsetWidth;
+        return `${height}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewComponent, deps: [{ token: i1.MatDialog }, { token: FileUploadService }, { token: ImageUploadService }, { token: TisHelperService }, { token: i5.BreakpointObserver }], 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", selectedId: "selectedId", options: "options", required: "required", previewOnly: "previewOnly", previewInFlex: "previewInFlex", imageItemClass: "imageItemClass", isEnableDeleteConfirmation: "isEnableDeleteConfirmation", deleteConfirmationMsg: "deleteConfirmationMsg", dialogConfig: "dialogConfig" }, outputs: { uploadInProgress: "uploadInProgress", onUploaded: "onUploaded", onFileSelect: "onFileSelect", onFileRemoved: "onFileRemoved" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <input type=\"file\" size=\"60\" *ngIf=\"!config?.isMultiple\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" style=\"display: none;\" />\n    <input type=\"file\" size=\"60\" *ngIf=\"config?.isMultiple\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" multiple style=\"display: none;\" />\n    <!-- <input type=\"file\" name=\"file\" id=\"file-picker\" style=\"display: none;\" *ngIf=\"(filesArray?.length < config?.limit) && !disabled\" [style.height]=\"config?.labelHeight\"> -->\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}}\">\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                        <!-- style=\"height: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2); width: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2);\" -->\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.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" *ngIf=\"file?.loading\">\n                            <div class=\"shedded\" style=\"width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center;\">\n                                <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                            </div>\n                            <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n                        </div>\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.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" *ngIf=\"!file?.loading\">\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 && !config.hiddenDeleteBtn\">highlight_off</span>\n                            <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!disabled && !config.hiddenDownloadBtn\">download_for_offline</span>\n                        </div>\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <!-- style=\"height: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2); width: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2);\" -->\n                            <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i+'-'+i)\" (click)=\"loading? null : openImageSelector()\">\n                                <mat-icon class=\"active\">upload_file</mat-icon>\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 : openImageSelector()\">\n                    <mat-icon>upload_file</mat-icon>\n                    <p style=\"text-align: center; font-size: 14px;\">\n                        {{label}}\n                        @if(hint && hint != ''){\n                            <br>\n                            <small>{{hint}}</small>\n                        }\n                    </p>\n                </label>\n            }\n            @else{\n                <div style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <img src=\"assets/icons/norecordfound.png\" alt=\"data not found\" style=\"margin: auto; height: calc(var(--tis-image-picker-height) - 30px); max-height: 150px;\">\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=\"!disabled && !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 && !config.hiddenDeleteBtn\">\n                                <mat-icon>delete</mat-icon>\n                            </button>\n                        </div>\n                        <div style=\"display: flex; justify-content: center; align-items: center; gap: 4px;\" style=\"width: 50px;\" *ngIf=\"file?.loading\">\n                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"20\"></mat-progress-spinner>\n                        </div>\n                        <!-- <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!disabled && !config.hiddenDownloadBtn\">download_for_offline</span> -->\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 : 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 : 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        </div>\n    }\n</div>", styles: [".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-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, #3838a2)}.tis-text-view{color:var(--tis-primary, #3838a2)}.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;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(--mat-form-field-error-text-color)}.image-list .image-item{height:100px;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, #3838a2)!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, #3838a2);background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;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(--mat-form-field-error-text-color)!important;border-radius:5px!important}.download{color:var(--tis-download, #3838a2);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}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+}
+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: "<div>\n    <input type=\"file\" size=\"60\" *ngIf=\"!config?.isMultiple\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" style=\"display: none;\" />\n    <input type=\"file\" size=\"60\" *ngIf=\"config?.isMultiple\" id=\"{{config.selectorId}}\" (change)=\"type == 'file'? detectFiles($event): detectImages($event)\" accept=\"{{accept}}\" multiple style=\"display: none;\" />\n    <!-- <input type=\"file\" name=\"file\" id=\"file-picker\" style=\"display: none;\" *ngIf=\"(filesArray?.length < config?.limit) && !disabled\" [style.height]=\"config?.labelHeight\"> -->\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}}\">\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                        <!-- style=\"height: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2); width: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2);\" -->\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.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" *ngIf=\"file?.loading\">\n                            <div class=\"shedded\" style=\"width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center;\">\n                                <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"30\"></mat-progress-spinner>\n                            </div>\n                            <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n                        </div>\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.height]=\"setHeight('image-item-'+config.selectorId+'-'+i)\" [style.background-image]=\"type == 'file'? '' : 'url('+file.s3Url+')'\" (click)=\"onSelectFile(file)\" *ngIf=\"!file?.loading\">\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 && !config.hiddenDeleteBtn\">highlight_off</span>\n                            <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!disabled && !config.hiddenDownloadBtn\">download_for_offline</span>\n                        </div>\n                        @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n                            <!-- style=\"height: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2); width: calc((var(--tis-image-picker-height) - 48px - 0.75rem) / 2);\" -->\n                            <div class=\"image-item uploader\" id=\"image-item-{{config.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+config.selectorId+'-'+i+'-'+i)\" (click)=\"loading? null : openImageSelector()\">\n                                <mat-icon class=\"active\">upload_file</mat-icon>\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 : openImageSelector()\">\n                    <mat-icon>upload_file</mat-icon>\n                    <p style=\"text-align: center; font-size: 14px;\">\n                        {{label}}\n                        @if(hint && hint != ''){\n                            <br>\n                            <small>{{hint}}</small>\n                        }\n                    </p>\n                </label>\n            }\n            @else{\n                <div style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n                    <img src=\"assets/icons/norecordfound.png\" alt=\"data not found\" style=\"margin: auto; height: calc(var(--tis-image-picker-height) - 30px); max-height: 150px;\">\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=\"!disabled && !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 && !config.hiddenDeleteBtn\">\n                                <mat-icon>delete</mat-icon>\n                            </button>\n                        </div>\n                        <div style=\"display: flex; justify-content: center; align-items: center; gap: 4px;\" style=\"width: 50px;\" *ngIf=\"file?.loading\">\n                            <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"20\"></mat-progress-spinner>\n                        </div>\n                        <!-- <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!disabled && !config.hiddenDownloadBtn\">download_for_offline</span> -->\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 : 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 : 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        </div>\n    }\n</div>", styles: [".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-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, #3838a2)}.tis-text-view{color:var(--tis-primary, #3838a2)}.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;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(--mat-form-field-error-text-color)}.image-list .image-item{height:100px;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, #3838a2)!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, #3838a2);background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;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(--mat-form-field-error-text-color)!important;border-radius:5px!important}.download{color:var(--tis-download, #3838a2);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}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: FileUploadService }, { type: ImageUploadService }, { type: TisHelperService }, { type: i5.BreakpointObserver }], propDecorators: { urlConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], entityType: [{
+                type: Input
+            }], entityId: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], selectedId: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], previewOnly: [{
+                type: Input
+            }], previewInFlex: [{
+                type: Input
+            }], imageItemClass: [{
+                type: Input
+            }], isEnableDeleteConfirmation: [{
+                type: Input
+            }], deleteConfirmationMsg: [{
+                type: Input
+            }], dialogConfig: [{
+                type: Input
+            }], uploadInProgress: [{
+                type: Output
+            }], onUploaded: [{
+                type: Output
+            }], onFileSelect: [{
+                type: Output
+            }], onFileRemoved: [{
+                type: Output
+            }] } });
+
+const uiImports = [
+    MatTooltipModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+    MatDialogModule,
+];
+class TisImageAndFileUploadAndViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, declarations: [TisImageAndFileUploadAndViewComponent,
+            TisPreviewImageComponent,
+            TisFileViewerComponent,
+            TisErrorDialogComponent,
+            TisConfirmationDialogComponent], imports: [CommonModule, MatTooltipModule,
+            MatIconModule,
+            MatSnackBarModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatDialogModule], exports: [TisImageAndFileUploadAndViewComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, imports: [CommonModule, uiImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TisImageAndFileUploadAndViewComponent,
+                        TisPreviewImageComponent,
+                        TisFileViewerComponent,
+                        TisErrorDialogComponent,
+                        TisConfirmationDialogComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ...uiImports
+                    ],
+                    exports: [
+                        TisImageAndFileUploadAndViewComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of tis-image-and-file-upload-and-view
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TisImageAndFileUploadAndViewComponent, TisImageAndFileUploadAndViewModule, TisImageAndFileUploadAndViewService };
+//# sourceMappingURL=servicemind.tis-tis-image-and-file-upload-and-view.mjs.map