@servicemind.tis/tis-image-and-file-upload-and-view 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/servicemind.tis-tis-image-and-file-upload-and-view.mjs +11 -4
  2. package/fesm2022/servicemind.tis-tis-image-and-file-upload-and-view.mjs.map +1 -1
  3. package/lib/tis-image-and-file-upload-and-view/tis-image-and-file-upload-and-view.component.d.ts +2 -1
  4. package/package.json +1 -1
package/fesm2022/servicemind.tis-tis-image-and-file-upload-and-view.mjs CHANGED
@@ -433,6 +433,7 @@ class TisImageAndFileUploadAndViewComponent {
433
433
  onFileSelect = new EventEmitter();
434
434
  onFileRemoved = new EventEmitter();
435
435
  onError = new EventEmitter();
436
+ isShowImageSequence = false;
436
437
  enableDragNDrop = false;
437
438
  dataSequenceChange = new EventEmitter();
438
439
  isMobile = false;
@@ -633,7 +634,7 @@ class TisImageAndFileUploadAndViewComponent {
633
634
  if (this.config?.limit === 1) {
634
635
  this.filesArray = []; // Reset array for a single image
635
636
  }
636
- let files = event.target.files;
637
+ const files = event.target.files;
637
638
  if (!files) {
638
639
  this.helper.showErrorMsg('Please select an image', 'Error', 3000);
639
640
  return;
@@ -654,6 +655,8 @@ class TisImageAndFileUploadAndViewComponent {
654
655
  this.uploadInProgress.emit(false);
655
656
  this.onSubmit(); // Call once after all uploads
656
657
  this.updateSequence();
658
+ // Reset the input value so the same file can be selected again
659
+ event.target.value = '';
657
660
  }
658
661
  async processImage(file, uploadedImages, index) {
659
662
  let fileSize = file.size / 1024;
@@ -811,7 +814,7 @@ class TisImageAndFileUploadAndViewComponent {
811
814
  if (this.config?.limit === 1) {
812
815
  this.filesArray = []; // Reset array for a single file
813
816
  }
814
- let files = event.target.files;
817
+ const files = event.target.files;
815
818
  if (!files) {
816
819
  this.helper.showErrorMsg('Please select a file', 'Error', 3000);
817
820
  return;
@@ -832,6 +835,8 @@ class TisImageAndFileUploadAndViewComponent {
832
835
  this.uploadInProgress.emit(false);
833
836
  this.onSubmit(); // Call once after all uploads
834
837
  this.updateSequence();
838
+ // Reset the input value so the same file can be selected again
839
+ event.target.value = '';
835
840
  }
836
841
  async processFile(file, uploadedFiles, index) {
837
842
  let fileSize = file.size / 1024;
@@ -1209,11 +1214,11 @@ class TisImageAndFileUploadAndViewComponent {
1209
1214
  return tempTagsArr?.filter(e => e && e != '');
1210
1215
  }
1211
1216
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewComponent, deps: [{ token: i1$2.MatDialog }, { token: TisHelperService }, { token: i3$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
1212
- 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", isAddUploadedFileInLastNode: "isAddUploadedFileInLastNode", deleteConfirmationMsg: "deleteConfirmationMsg", dialogConfig: "dialogConfig", enableDragNDrop: "enableDragNDrop" }, outputs: { uploadInProgress: "uploadInProgress", onUploaded: "onUploaded", onFileSelect: "onFileSelect", onFileRemoved: "onFileRemoved", onError: "onError", dataSequenceChange: "dataSequenceChange" }, usesOnChanges: true, ngImport: i0, template: "<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}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'x'\">\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 @if(enableDragNDrop){\n <div class=\"flex flex-col\">\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 cdkDrag>\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\" cdkDragHandle>\n <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n <!-- <span class=\"material-icons drag\" cdkDragHandle>drag_indicator</span> -->\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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n @if(file?.tags && file?.tags != ''){\n <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n }\n @else {\n <span>No Tags</span>\n }\n </div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @else {\n <div class=\"flex flex-col\">\n <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 drag\" cdkDragHandle>drag_indicator</span> -->\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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n <!-- 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 class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n <!-- <img src=\"assets/tis-image-and-file-upload-and-view-assets/no-record-found.png\" alt=\"data not found\" style=\"margin: auto; height: calc(var(--tis-image-picker-height) - 30px); max-height: 150px;\"> -->\n \n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000 C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000 C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792 C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792 C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000 C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000 M214.500000,497.000000 C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769 C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782 C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754 C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754 C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905 C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847 C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847 C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847 C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065 C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768 C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581 C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419 C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538 C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473 C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351 C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902 C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457 C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832 C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836 C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231 C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376 C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687 C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847 C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185 C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544 C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304 C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864 C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288 C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851 C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000 C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851 C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288 C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864 C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304 C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544 C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185 C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847 C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687 C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376 C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231 C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836 C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832 C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457 C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902 C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351 C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473 C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538 C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419 C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581 C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768 C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065 C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847 C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847 C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847 C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905 C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754 C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754 C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782 C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769 C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000 M134.597260,321.000000 C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983 C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990 C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647 C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448 C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000 C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000 C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000 C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823 C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623 C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783 C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739 C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000 C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000 M324.557129,242.085190 C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169 C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189 C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112 C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366 C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040 C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212 C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839 C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562 C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400 C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615 C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838 C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000 C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000 C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739 C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783 C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623 C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823 C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000 C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000 C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000 C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448 C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647 C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990 C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983 C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000 M140.500000,440.999939 C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183 C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817 C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634 C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000 C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980 C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017 C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080 C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939 M211.498047,417.000153 C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069 C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042 C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417 C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435 C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375 C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042 C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920 C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838 C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615 C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400 C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562 C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839 C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212 C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040 C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366 C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112 C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189 C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169 C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920 M365.048187,97.443359 C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753 C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678 C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203 C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324 C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401 C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491 C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972 C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738 C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716 C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832 C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186 C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294 C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683 C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959 C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931 C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687 C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833 C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827 C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821 C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850 C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880 C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267 C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939 C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080 C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017 C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980 C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000 C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634 C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817 C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183 C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153 C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042 C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375 C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435 C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417 C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042 C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069 C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910 C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267 C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880 C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850 C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821 C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827 C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833 C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687 C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931 C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959 C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683 C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294 C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186 C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832 C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716 C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738 C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972 C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491 C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401 C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324 C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203 C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678 C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753 C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910 z\"/>\n </svg>\n\n </div>\n }\n </div>\n}\n@else if(viewType == 'list'){\n <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\n @if(filesArray?.length){\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"tis-icon-btn-sm tis-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n <mat-icon>download_for_offline</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"tis-icon-btn-sm tis-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n <mat-icon>visibility</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"tis-icon-btn-sm tis-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !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\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.selectorId; let i = $index; let l = $last;){\n <input type=\"file\" size=\"60\" id=\"{{file.selectorId}}\" (change)=\"type == 'file'? detectFiles($event, i): detectImages($event, i)\" accept=\"{{accept}}\" style=\"display: none;\" />\n <div class=\"flex flex-col gap-3\">\n @if(file.s3Url){\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-{{file.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.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-{{file.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n }\n @else {\n <div class=\"image-item uploader\" id=\"image-item-{{file.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.selectorId+'-'+i+'-'+i)\" (click)=\"loading? null : openImageSelector(file.selectorId)\">\n <div>\n <mat-icon class=\"active\">upload_file</mat-icon>\n <p style=\"margin: 0px;\">\n {{label}}\n @if(hint && hint != ''){\n <br>\n <small>{{hint}}</small>\n }\n </p>\n </div>\n </div>\n }\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode\">\n <textarea rows=\"2\" [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\"></textarea>\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); file.tags = file.tempTags; file.isEditMode = false;\">Save</button>\n </div>\n </div>\n </div>\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, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-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, var(--mat-sys-primary))!important}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--tis-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--tis-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--tis-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--tis-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
1217
+ 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", isAddUploadedFileInLastNode: "isAddUploadedFileInLastNode", deleteConfirmationMsg: "deleteConfirmationMsg", dialogConfig: "dialogConfig", isShowImageSequence: "isShowImageSequence", enableDragNDrop: "enableDragNDrop" }, outputs: { uploadInProgress: "uploadInProgress", onUploaded: "onUploaded", onFileSelect: "onFileSelect", onFileRemoved: "onFileRemoved", onError: "onError", dataSequenceChange: "dataSequenceChange" }, usesOnChanges: true, ngImport: i0, template: "<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@if(viewType == 'card'){\n <div [class.image-picker-label]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\n @if(filesArray?.length){\n <div [ngClass]=\"{'grid-cols-1': config?.cols == 1, 'grid-cols-2': config?.cols == 2, 'grid-cols-3': config?.cols == 3, 'grid-cols-4': config?.cols == 4, 'grid-cols-5': config?.cols == 5, 'grid-cols-6': config?.cols == 6}\" class=\"{{previewInFlex ? 'flex' : 'grid'}} image-list\" style=\"gap: 25px;\">\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n @if(enableDragNDrop){\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n </div>\n }\n <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.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 cdkDrag>\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\" cdkDragHandle>\n <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !config.hiddenDeleteBtn\">highlight_off</span>\n <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n @if(file?.tags && file?.tags != ''){\n <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n }\n @else {\n <span>No Tags</span>\n }\n </div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @else {\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n </div>\n }\n <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n </div>\n }\n <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 </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 class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000 C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000 C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792 C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792 C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000 C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000 M214.500000,497.000000 C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769 C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782 C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754 C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754 C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905 C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847 C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847 C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847 C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065 C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768 C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581 C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419 C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538 C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473 C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351 C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902 C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457 C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832 C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836 C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231 C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376 C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687 C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847 C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185 C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544 C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304 C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864 C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288 C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851 C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000 C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851 C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288 C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864 C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304 C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544 C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185 C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847 C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687 C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376 C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231 C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836 C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832 C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457 C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902 C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351 C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473 C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538 C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419 C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581 C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768 C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065 C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847 C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847 C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847 C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905 C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754 C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754 C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782 C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769 C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000 M134.597260,321.000000 C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983 C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990 C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647 C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448 C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000 C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000 C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000 C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823 C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623 C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783 C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739 C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000 C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000 M324.557129,242.085190 C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169 C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189 C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112 C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366 C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040 C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212 C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839 C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562 C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400 C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615 C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838 C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000 C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000 C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739 C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783 C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623 C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823 C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000 C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000 C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000 C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448 C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647 C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990 C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983 C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000 M140.500000,440.999939 C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183 C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817 C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634 C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000 C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980 C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017 C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080 C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939 M211.498047,417.000153 C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069 C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042 C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417 C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435 C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375 C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042 C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920 C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838 C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615 C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400 C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562 C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839 C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212 C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040 C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366 C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112 C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189 C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169 C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920 M365.048187,97.443359 C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753 C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678 C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203 C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324 C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401 C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491 C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972 C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738 C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716 C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832 C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186 C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294 C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683 C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959 C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931 C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687 C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833 C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827 C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821 C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850 C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880 C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267 C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939 C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080 C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017 C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980 C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000 C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634 C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817 C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183 C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153 C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042 C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375 C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435 C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417 C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042 C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069 C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910 C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267 C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880 C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850 C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821 C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827 C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833 C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687 C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931 C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959 C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683 C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294 C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186 C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832 C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716 C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738 C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972 C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491 C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401 C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324 C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203 C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678 C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753 C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910 z\"/>\n </svg>\n\n </div>\n }\n </div>\n}\n@else if(viewType == 'list'){\n <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\n @if(filesArray?.length){\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"tis-icon-btn-sm tis-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n <mat-icon>download_for_offline</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"tis-icon-btn-sm tis-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n <mat-icon>visibility</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"tis-icon-btn-sm tis-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !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 </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}", styles: [".cdk-drop-list-dragging{border:2px solid red!important}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-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, var(--mat-sys-primary))!important}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--tis-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--tis-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--tis-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--tis-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
1213
1218
  }
1214
1219
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TisImageAndFileUploadAndViewComponent, decorators: [{
1215
1220
  type: Component,
1216
- args: [{ selector: 'tis-image-and-file-upload-and-view', standalone: false, template: "<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}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'x'\">\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 @if(enableDragNDrop){\n <div class=\"flex flex-col\">\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 cdkDrag>\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\" cdkDragHandle>\n <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n <!-- <span class=\"material-icons drag\" cdkDragHandle>drag_indicator</span> -->\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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n @if(file?.tags && file?.tags != ''){\n <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n }\n @else {\n <span>No Tags</span>\n }\n </div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @else {\n <div class=\"flex flex-col\">\n <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 drag\" cdkDragHandle>drag_indicator</span> -->\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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n <!-- 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 class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n <!-- <img src=\"assets/tis-image-and-file-upload-and-view-assets/no-record-found.png\" alt=\"data not found\" style=\"margin: auto; height: calc(var(--tis-image-picker-height) - 30px); max-height: 150px;\"> -->\n \n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000 C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000 C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792 C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792 C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000 C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000 M214.500000,497.000000 C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769 C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782 C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754 C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754 C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905 C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847 C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847 C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847 C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065 C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768 C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581 C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419 C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538 C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473 C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351 C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902 C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457 C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832 C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836 C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231 C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376 C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687 C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847 C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185 C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544 C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304 C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864 C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288 C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851 C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000 C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851 C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288 C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864 C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304 C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544 C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185 C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847 C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687 C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376 C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231 C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836 C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832 C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457 C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902 C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351 C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473 C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538 C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419 C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581 C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768 C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065 C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847 C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847 C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847 C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905 C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754 C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754 C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782 C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769 C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000 M134.597260,321.000000 C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983 C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990 C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647 C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448 C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000 C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000 C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000 C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823 C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623 C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783 C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739 C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000 C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000 M324.557129,242.085190 C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169 C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189 C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112 C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366 C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040 C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212 C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839 C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562 C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400 C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615 C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838 C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000 C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000 C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739 C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783 C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623 C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823 C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000 C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000 C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000 C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448 C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647 C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990 C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983 C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000 M140.500000,440.999939 C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183 C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817 C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634 C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000 C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980 C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017 C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080 C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939 M211.498047,417.000153 C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069 C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042 C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417 C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435 C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375 C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042 C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920 C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838 C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615 C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400 C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562 C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839 C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212 C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040 C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366 C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112 C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189 C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169 C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920 M365.048187,97.443359 C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753 C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678 C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203 C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324 C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401 C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491 C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972 C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738 C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716 C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832 C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186 C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294 C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683 C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959 C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931 C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687 C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833 C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827 C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821 C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850 C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880 C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267 C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939 C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080 C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017 C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980 C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000 C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634 C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817 C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183 C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153 C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042 C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375 C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435 C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417 C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042 C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069 C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910 C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267 C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880 C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850 C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821 C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827 C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833 C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687 C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931 C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959 C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683 C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294 C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186 C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832 C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716 C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738 C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972 C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491 C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401 C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324 C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203 C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678 C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753 C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910 z\"/>\n </svg>\n\n </div>\n }\n </div>\n}\n@else if(viewType == 'list'){\n <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\n @if(filesArray?.length){\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"tis-icon-btn-sm tis-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n <mat-icon>download_for_offline</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"tis-icon-btn-sm tis-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n <mat-icon>visibility</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"tis-icon-btn-sm tis-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !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\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.selectorId; let i = $index; let l = $last;){\n <input type=\"file\" size=\"60\" id=\"{{file.selectorId}}\" (change)=\"type == 'file'? detectFiles($event, i): detectImages($event, i)\" accept=\"{{accept}}\" style=\"display: none;\" />\n <div class=\"flex flex-col gap-3\">\n @if(file.s3Url){\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-{{file.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.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-{{file.selectorId}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n }\n @else {\n <div class=\"image-item uploader\" id=\"image-item-{{file.selectorId}}-{{i}}-{{i}}\" [style.height]=\"setHeight('image-item-'+file.selectorId+'-'+i+'-'+i)\" (click)=\"loading? null : openImageSelector(file.selectorId)\">\n <div>\n <mat-icon class=\"active\">upload_file</mat-icon>\n <p style=\"margin: 0px;\">\n {{label}}\n @if(hint && hint != ''){\n <br>\n <small>{{hint}}</small>\n }\n </p>\n </div>\n </div>\n }\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode\">\n <textarea rows=\"2\" [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\"></textarea>\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); file.tags = file.tempTags; file.isEditMode = false;\">Save</button>\n </div>\n </div>\n </div>\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, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-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, var(--mat-sys-primary))!important}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--tis-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--tis-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--tis-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--tis-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"] }]
1221
+ args: [{ selector: 'tis-image-and-file-upload-and-view', standalone: false, template: "<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@if(viewType == 'card'){\n <div [class.image-picker-label]=\"!previewOnly\" [class.error]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"--tis-image-picker-height: {{config?.height ?? 0}}\" cdkDropList (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"horizontal\">\n @if(filesArray?.length){\n <div [ngClass]=\"{'grid-cols-1': config?.cols == 1, 'grid-cols-2': config?.cols == 2, 'grid-cols-3': config?.cols == 3, 'grid-cols-4': config?.cols == 4, 'grid-cols-5': config?.cols == 5, 'grid-cols-6': config?.cols == 6}\" class=\"{{previewInFlex ? 'flex' : 'grid'}} image-list\" style=\"gap: 25px;\">\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n @if(enableDragNDrop){\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n </div>\n }\n <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.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 cdkDrag>\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\" cdkDragHandle>\n <mat-icon *ngIf=\"type == 'file'\" class=\"active tis-mat-icon-2x\">description</mat-icon>\n <span class=\"material-icons cancel\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !config.hiddenDeleteBtn\">highlight_off</span>\n <span class=\"material-icons download\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">\n @if(file?.tags && file?.tags != ''){\n <span class=\"anchor\" *ngFor=\"let tag of getTagsArray(file?.tags)\">{{tag}} </span>\n }\n @else {\n <span>No Tags</span>\n }\n </div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @else {\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div class=\"image-description\" style=\"margin-bottom: 15px;\">\n <div class=\"image-description-text\" style=\"text-align: center; font-weight: bold;\">Image {{i + 1}}</div>\n </div>\n }\n <div class=\"image-item {{imageItemClass}}\" [class.selected]=\"config?.selectionMode ? selectedId == file.id : false\" [class.tis-curser-pointer]=\"!config?.hiddenPreview || config?.selectionMode\" id=\"image-item-{{config.selectorId}}-{{i}}\" [style.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=\"!config.hiddenDownloadBtn\">download_for_offline</span>\n </div>\n @if(config?.enableImageTags){\n <div class=\"image-description\">\n <div class=\"image-description-text\" *ngIf=\"!file?.isEditMode\">{{file?.tags || 'No Tags'}}</div>\n <span class=\"material-icons edit-description-btn edit\" style=\"font-size: 20px;\" (click)=\"$event.stopPropagation(); file.isEditMode = true;\" *ngIf=\"!file?.isEditMode && !disabled\">edit</span>\n <div class=\"image-description-edit\" *ngIf=\"file?.isEditMode && !disabled\">\n <input [(ngModel)]=\"file.tempTags\" placeholder=\"Enter tags here...\" (keydown.enter)=\"onSubmitTags(file)\" (keydown.space)=\"editTagWithSpace(file)\" (keydown)=\"onKeydown($event, file)\" />\n <div class=\"description-actions\">\n <button class=\"description-action-btn description-cancel-btn\" (click)=\"$event.stopPropagation(); file.tempTags = file.tags; file.isEditMode = false;\">Cancel</button>\n <button class=\"description-action-btn description-save-btn\" (click)=\"$event.stopPropagation(); onSubmitTags(file);\">Save</button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if(l && (config?.limit || 0) > (filesArray?.length || 0) && !disabled){\n <div class=\"flex flex-col\">\n @if(isShowImageSequence){\n <div style=\"margin-top: .5rem; margin-bottom: 15px; height: 35px;\">\n </div>\n }\n <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 </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 class=\"not-found-section\" style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\">\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M283.000000,513.000000 C188.689560,513.000000 94.879120,513.000000 1.034338,513.000000 C1.034338,342.397858 1.034338,171.795731 1.034338,1.096792 C171.560455,1.096792 342.121002,1.096792 512.840759,1.096792 C512.840759,171.666550 512.840759,342.333252 512.840759,513.000000 C436.462372,513.000000 359.981171,513.000000 283.000000,513.000000 M214.500000,497.000000 C271.998901,496.999969 329.497833,497.019897 386.996674,496.975769 C394.561920,496.969971 401.787231,494.626648 406.395233,488.770782 C412.026520,481.614502 416.644897,473.577057 421.072449,465.572754 C437.390259,436.072754 453.464813,406.438049 469.597321,376.835754 C478.327332,360.816742 487.426758,344.977722 495.530029,328.645905 C501.012421,317.596252 494.173737,304.613556 481.201294,304.861847 C456.377502,305.336975 431.538177,304.999878 406.705292,304.999847 C404.938568,304.999847 403.171844,304.999847 401.000031,304.999847 C401.000031,302.348328 401.003784,300.379181 400.999481,298.410065 C400.935120,269.085632 400.853577,239.761169 400.867645,210.436768 C400.868164,209.340317 401.642242,208.138214 402.315186,207.164581 C408.841400,197.722305 416.441071,188.858276 421.779449,178.792419 C433.290894,157.086823 435.985443,133.380402 431.740631,109.507538 C425.335449,73.484550 405.456726,46.387234 373.051300,29.163473 C356.219269,20.217096 338.040710,16.499708 318.773804,16.813351 C301.234619,17.098873 284.897461,21.133270 269.449402,28.965902 C256.098724,35.735111 244.580948,44.876842 234.887085,56.467457 C224.793365,68.536171 217.675415,82.055397 213.023590,96.957832 C209.186737,109.249481 208.654160,121.911049 208.964157,134.687836 C209.387650,152.143631 214.172058,168.302002 222.741714,183.427231 C224.412766,186.376572 225.987946,189.380234 227.939270,192.969376 C211.045273,192.969376 194.919281,193.199417 178.811310,192.763687 C175.805389,192.682358 172.083817,190.621887 170.038193,188.292847 C160.046188,176.916489 150.561493,165.096268 140.789429,153.524185 C136.493210,148.436600 131.117233,145.037399 124.221672,145.023544 C96.055626,144.966995 67.881424,145.387711 39.727192,144.808304 C28.532793,144.577896 16.775660,156.479080 16.809900,167.857864 C17.130381,274.354980 17.052288,380.853516 16.870073,487.351288 C16.859135,493.743988 19.582472,497.123566 26.503685,497.103851 C88.835381,496.926239 151.167801,497.000000 214.500000,497.000000 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M214.000000,497.000000 C151.167801,497.000000 88.835381,496.926239 26.503685,497.103851 C19.582472,497.123566 16.859135,493.743988 16.870073,487.351288 C17.052288,380.853516 17.130381,274.354980 16.809900,167.857864 C16.775660,156.479080 28.532793,144.577896 39.727192,144.808304 C67.881424,145.387711 96.055626,144.966995 124.221672,145.023544 C131.117233,145.037399 136.493210,148.436600 140.789429,153.524185 C150.561493,165.096268 160.046188,176.916489 170.038193,188.292847 C172.083817,190.621887 175.805389,192.682358 178.811310,192.763687 C194.919281,193.199417 211.045273,192.969376 227.939270,192.969376 C225.987946,189.380234 224.412766,186.376572 222.741714,183.427231 C214.172058,168.302002 209.387650,152.143631 208.964157,134.687836 C208.654160,121.911049 209.186737,109.249481 213.023590,96.957832 C217.675415,82.055397 224.793365,68.536171 234.887085,56.467457 C244.580948,44.876842 256.098724,35.735111 269.449402,28.965902 C284.897461,21.133270 301.234619,17.098873 318.773804,16.813351 C338.040710,16.499708 356.219269,20.217096 373.051300,29.163473 C405.456726,46.387234 425.335449,73.484550 431.740631,109.507538 C435.985443,133.380402 433.290894,157.086823 421.779449,178.792419 C416.441071,188.858276 408.841400,197.722305 402.315186,207.164581 C401.642242,208.138214 400.868164,209.340317 400.867645,210.436768 C400.853577,239.761169 400.935120,269.085632 400.999481,298.410065 C401.003784,300.379181 401.000031,302.348328 401.000031,304.999847 C403.171844,304.999847 404.938568,304.999847 406.705292,304.999847 C431.538177,304.999878 456.377502,305.336975 481.201294,304.861847 C494.173737,304.613556 501.012421,317.596252 495.530029,328.645905 C487.426758,344.977722 478.327332,360.816742 469.597321,376.835754 C453.464813,406.438049 437.390259,436.072754 421.072449,465.572754 C416.644897,473.577057 412.026520,481.614502 406.395233,488.770782 C401.787231,494.626648 394.561920,496.969971 386.996674,496.975769 C329.497833,497.019897 271.998901,496.999969 214.000000,497.000000 M134.597260,321.000000 C127.620270,319.337616 123.942146,323.017517 121.500618,328.932983 C120.498009,331.362091 119.193306,333.673279 117.937233,335.989990 C103.522736,362.575897 89.117485,389.166901 74.653091,415.725647 C67.257729,429.304626 59.689438,442.789490 52.312668,456.378448 C47.974022,464.370728 43.857620,472.483643 39.401810,481.000000 C42.117859,481.000000 44.110912,481.000000 46.103966,481.000000 C144.765793,481.000000 243.427612,481.000031 342.089447,481.000000 C354.922150,481.000000 367.755981,481.100647 380.587189,480.961823 C388.353729,480.877808 394.963684,478.668121 399.028687,471.088623 C414.189636,442.819641 429.540070,414.652191 444.852783,386.464783 C452.465210,372.451935 460.203308,358.507233 467.780884,344.475739 C471.870789,336.902466 475.742279,329.211273 480.010315,321.000000 C364.545990,321.000000 250.059738,321.000000 134.597260,321.000000 M324.557129,242.085190 C327.301666,237.590393 329.664886,232.791306 332.924042,228.707169 C335.118561,225.957092 338.299622,222.950409 341.520416,222.240189 C357.159485,218.791580 371.110535,211.909912 382.881226,201.408112 C405.027954,181.648727 416.679504,157.025070 416.129883,126.765366 C415.719910,104.193253 408.285522,84.336838 393.808441,67.607040 C373.699219,44.368736 348.121246,32.686760 316.779572,33.851212 C294.904785,34.663937 275.751617,42.202290 259.624786,56.188839 C232.720886,79.522171 221.513794,109.436241 227.057266,144.851562 C232.965317,182.596176 262.283539,213.393021 299.806335,221.925400 C304.366974,222.962448 307.440796,225.236969 309.702332,229.227615 C313.147400,235.306534 316.865295,241.230835 320.988098,248.086838 C322.400177,245.685776 323.276184,244.196213 324.557129,242.085190 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M135.085373,321.000000 C250.059738,321.000000 364.545990,321.000000 480.010315,321.000000 C475.742279,329.211273 471.870789,336.902466 467.780884,344.475739 C460.203308,358.507233 452.465210,372.451935 444.852783,386.464783 C429.540070,414.652191 414.189636,442.819641 399.028687,471.088623 C394.963684,478.668121 388.353729,480.877808 380.587189,480.961823 C367.755981,481.100647 354.922150,481.000000 342.089447,481.000000 C243.427612,481.000031 144.765793,481.000000 46.103966,481.000000 C44.110912,481.000000 42.117859,481.000000 39.401810,481.000000 C43.857620,472.483643 47.974022,464.370728 52.312668,456.378448 C59.689438,442.789490 67.257729,429.304626 74.653091,415.725647 C89.117485,389.166901 103.522736,362.575897 117.937233,335.989990 C119.193306,333.673279 120.498009,331.362091 121.500618,328.932983 C123.942146,323.017517 127.620270,319.337616 135.085373,321.000000 M140.500000,440.999939 C132.167938,440.999939 123.835869,440.999023 115.503807,441.000183 C106.978073,441.001343 104.965355,442.559265 105.000999,449.124817 C105.035042,455.395599 107.121445,456.999329 115.262733,456.999634 C146.424759,457.000732 177.586792,457.000153 208.748825,457.000000 C224.913086,456.999939 241.077591,456.952484 257.241425,457.035980 C260.763824,457.054169 263.472839,456.015015 264.705200,452.580017 C267.060974,446.013672 263.486053,441.009705 256.482880,441.007080 C218.155258,440.992767 179.827621,441.000061 140.500000,440.999939 M211.498047,417.000153 C216.330338,416.999176 221.164948,417.091248 225.994263,416.971069 C230.865005,416.849884 232.921509,414.514984 232.998932,409.368042 C233.083664,403.733337 231.121094,401.059509 226.230942,401.046417 C196.071045,400.965607 165.910004,400.915100 135.752502,401.195435 C133.579193,401.215637 130.361252,403.471161 129.469467,405.497375 C126.665665,411.867889 130.514359,416.987915 137.514694,416.993042 C161.842728,417.010773 186.170807,417.000061 211.498047,417.000153 z\"/>\n <path fill=\"none\" opacity=\"1.000000\" stroke=\"none\" d=\" M324.354675,242.395920 C323.276184,244.196213 322.400177,245.685776 320.988098,248.086838 C316.865295,241.230835 313.147400,235.306534 309.702332,229.227615 C307.440796,225.236969 304.366974,222.962448 299.806335,221.925400 C262.283539,213.393021 232.965317,182.596176 227.057266,144.851562 C221.513794,109.436241 232.720886,79.522171 259.624786,56.188839 C275.751617,42.202290 294.904785,34.663937 316.779572,33.851212 C348.121246,32.686760 373.699219,44.368736 393.808441,67.607040 C408.285522,84.336838 415.719910,104.193253 416.129883,126.765366 C416.679504,157.025070 405.027954,181.648727 382.881226,201.408112 C371.110535,211.909912 357.159485,218.791580 341.520416,222.240189 C338.299622,222.950409 335.118561,225.957092 332.924042,228.707169 C329.664886,232.791306 327.301666,237.590393 324.354675,242.395920 M365.048187,97.443359 C370.583435,91.700768 370.701630,85.175507 365.330109,81.880753 C361.672668,79.637360 356.630035,80.933273 352.129089,85.405678 C342.914734,94.561584 333.749512,103.766907 324.548431,112.936203 C323.412384,114.068321 322.181274,115.104980 320.457794,116.674324 C319.017365,114.966263 317.930176,113.478592 316.646271,112.186401 C307.370972,102.851303 298.080811,93.530586 288.741608,84.259491 C284.745544,80.292557 279.208740,79.658867 275.876648,82.619972 C271.622955,86.400055 271.606628,92.007065 276.075226,96.532738 C285.555145,106.133804 295.140411,115.630798 304.670227,125.182716 C305.910522,126.425888 307.078339,127.741364 308.699982,129.471832 C306.767456,131.142502 305.170319,132.365768 303.755219,133.772186 C294.658264,142.813187 285.530975,151.825531 276.561829,160.992294 C272.316803,165.330841 271.679443,172.193146 274.860229,175.243683 C278.125275,178.375015 284.989929,177.494553 289.133881,173.366959 C295.270966,167.254105 301.415710,161.148209 307.489624,154.972931 C311.886749,150.502441 316.174255,145.924133 320.608521,141.291687 C322.557465,143.156174 323.772125,144.275360 324.939575,145.441833 C334.366547,154.861099 343.762360,164.311676 353.216248,173.703827 C357.078430,177.540771 364.054932,178.250854 367.156860,175.284821 C369.494812,173.049301 370.182617,164.901749 365.897583,161.258850 C361.343750,157.387436 357.354156,152.853470 353.106140,148.620880 C346.649475,142.187607 340.182373,135.764771 333.450989,129.070267 C344.099365,118.419060 354.322937,108.192757 365.048187,97.443359 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M141.000000,440.999939 C179.827621,441.000061 218.155258,440.992767 256.482880,441.007080 C263.486053,441.009705 267.060974,446.013672 264.705200,452.580017 C263.472839,456.015015 260.763824,457.054169 257.241425,457.035980 C241.077591,456.952484 224.913086,456.999939 208.748825,457.000000 C177.586792,457.000153 146.424759,457.000732 115.262733,456.999634 C107.121445,456.999329 105.035042,455.395599 105.000999,449.124817 C104.965355,442.559265 106.978073,441.001343 115.503807,441.000183 C123.835869,440.999023 132.167938,440.999939 141.000000,440.999939 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M210.998444,417.000153 C186.170807,417.000061 161.842728,417.010773 137.514694,416.993042 C130.514359,416.987915 126.665665,411.867889 129.469467,405.497375 C130.361252,403.471161 133.579193,401.215637 135.752502,401.195435 C165.910004,400.915100 196.071045,400.965607 226.230942,401.046417 C231.121094,401.059509 233.083664,403.733337 232.998932,409.368042 C232.921509,414.514984 230.865005,416.849884 225.994263,416.971069 C221.164948,417.091248 216.330338,416.999176 210.998444,417.000153 z\"/>\n <path fill=\"var(--tis-primary, #1F6AAD)\" opacity=\"1.000000\" stroke=\"none\" d=\" M364.797363,97.704910 C354.322937,108.192757 344.099365,118.419060 333.450989,129.070267 C340.182373,135.764771 346.649475,142.187607 353.106140,148.620880 C357.354156,152.853470 361.343750,157.387436 365.897583,161.258850 C370.182617,164.901749 369.494812,173.049301 367.156860,175.284821 C364.054932,178.250854 357.078430,177.540771 353.216248,173.703827 C343.762360,164.311676 334.366547,154.861099 324.939575,145.441833 C323.772125,144.275360 322.557465,143.156174 320.608521,141.291687 C316.174255,145.924133 311.886749,150.502441 307.489624,154.972931 C301.415710,161.148209 295.270966,167.254105 289.133881,173.366959 C284.989929,177.494553 278.125275,178.375015 274.860229,175.243683 C271.679443,172.193146 272.316803,165.330841 276.561829,160.992294 C285.530975,151.825531 294.658264,142.813187 303.755219,133.772186 C305.170319,132.365768 306.767456,131.142502 308.699982,129.471832 C307.078339,127.741364 305.910522,126.425888 304.670227,125.182716 C295.140411,115.630798 285.555145,106.133804 276.075226,96.532738 C271.606628,92.007065 271.622955,86.400055 275.876648,82.619972 C279.208740,79.658867 284.745544,80.292557 288.741608,84.259491 C298.080811,93.530586 307.370972,102.851303 316.646271,112.186401 C317.930176,113.478592 319.017365,114.966263 320.457794,116.674324 C322.181274,115.104980 323.412384,114.068321 324.548431,112.936203 C333.749512,103.766907 342.914734,94.561584 352.129089,85.405678 C356.630035,80.933273 361.672668,79.637360 365.330109,81.880753 C370.701630,85.175507 370.583435,91.700768 364.797363,97.704910 z\"/>\n </svg>\n\n </div>\n }\n </div>\n}\n@else if(viewType == 'list'){\n <div [class.error-border]=\"required && (filesArray?.length || 0) <= 0\" [style.height]=\"filesArray?.length ? null : config?.height\" style=\"width: 100%; display: flex; gap: 12px; flex-direction: column; --tis-image-picker-height: {{config?.height ?? 0}}\">\n @if(filesArray?.length){\n @for(file of filesArray; track file.s3Url; let i = $index; let l = $last;){\n <div style=\"position: relative; display: flex; align-items: center; gap: 10px; border-radius: 5px; border: 1px solid black; padding: 5px; height: 56px;\">\n <mat-icon style=\"width: 40px; min-width: 22px;\">description</mat-icon>\n <div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;\">{{file?.title}}</div>\n <div style=\"display: flex; align-items: center; gap: 4px;\" *ngIf=\"!file?.loading\">\n <button type=\"button\" mat-icon-button aria-label=\"Download File\" class=\"tis-icon-btn-sm tis-text-download\" style=\"margin: 0px !important;\" (click)=\"$event.stopPropagation(); downloadFile(file.s3Url, file.title)\" *ngIf=\"!config.hiddenDownloadBtn\">\n <mat-icon>download_for_offline</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"View File\" class=\"tis-icon-btn-sm tis-text-view\" style=\"margin: 0px !important;\" (click)=\"openFile(file)\" *ngIf=\"!config.hiddenPreview\">\n <mat-icon>visibility</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Remove File\" class=\"tis-icon-btn-sm tis-text-cancel\" style=\"margin: 0px !important;\" (click)=\"type == 'file'? deleteFile($event, {}, i, file) : deleteImage($event, {}, i, file)\" *ngIf=\"!disabled && !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 </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}", styles: [".cdk-drop-list-dragging{border:2px solid red!important}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.tis-mat-icon-5x{width:125px!important;height:125px!important;font-size:125px!important}.tis-mat-icon-4x{width:100px!important;height:100px!important;font-size:100px!important}.tis-mat-icon-3x{width:75px!important;height:75px!important;font-size:75px!important}.tis-mat-icon-2x{width:50px!important;height:50px!important;font-size:50px!important}.tis-icon-btn-sm{margin-top:7px!important;padding:5px!important;height:36px!important;width:36px!important}.tis-text-download{color:var(--tis-download, var(--mat-sys-primary))}.tis-text-view{color:var(--tis-primary, var(--mat-sys-primary))}.tis-text-cancel{color:var(--tis-cancel, #bb333b)}::ng-deep #upload-img-box{padding:0;border:2px dashed #717171;display:grid;color:#717171;justify-content:center;align-items:center;width:100%;height:160px;background:#eaeaea;cursor:pointer}::ng-deep #upload-img-box input[type=file]{display:none}.preview-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59;opacity:0}.preview-img:hover{opacity:1}.img-box{order:2px solid #b5b5b5!important;position:relative;padding:5px;display:flex;justify-content:center;align-content:center;align-items:center}.loading-img{display:flex;justify-content:center;position:absolute;align-items:center;top:0;width:100%;height:100%;background:#9e9e9e59}.image-picker-label{border:1px dashed rgba(0,0,0,.38);border-radius:4px;padding:24px}.image-picker-label.error{border:2px dashed var(--tis-error, #a00404)}.image-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, var(--mat-sys-primary))!important}.image-list .image-item .mat-icon{display:none}.image-list .image-item .mat-icon.active{display:unset!important}.image-list .image-item .cancel{color:var(--tis-cancel, #bb333b);background-color:#fff;border-radius:20px;position:absolute;top:-10px;right:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .download{color:var(--tis-download, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:-10px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .drag{color:var(--tis-primary, var(--mat-sys-primary));background-color:#fff;border-radius:20px;position:absolute;top:-10px;left:30px;cursor:pointer;box-shadow:0 0 5px #9e9e9e}.image-list .image-item .shedded{background-color:#9e9e9ecc;border-radius:5px}.error-border{border:1px solid var(--tis-error-color, #a00404)!important;border-radius:5px!important}.download{color:var(--tis-download, var(--mat-sys-primary));position:absolute;top:-10px;left:-10px;cursor:pointer}.tis-curser-pointer{cursor:pointer}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title{padding:8px 16px;display:flex;gap:10px;justify-content:start;width:100%;align-items:center}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-title:before{content:unset}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-content{padding-top:15px;font-size:14px}::ng-deep .tis-confirmation-dialog mat-dialog-container .mat-mdc-dialog-actions{border-top:1px solid rgba(0,0,0,.12);justify-content:end}.not-found-section svg{margin:auto;height:calc(var(--tis-image-picker-height) - 45px);max-height:150px}.image-description{width:100%;margin-top:.5rem;position:relative}.image-description-text{padding:.5rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.875rem;color:#4b5563}.image-description-text .anchor{color:#00f;cursor:pointer}.image-description-text .anchor:hover{text-decoration:underline}.edit-description-btn{color:#4b5563;border-radius:20px;position:absolute;right:.5rem;top:.5rem;cursor:pointer}.image-description-edit{display:flex;flex-direction:column}.image-description-edit textarea,.image-description-edit input{font-size:.875rem;line-height:1.25rem;padding:.5rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));border-width:1px;border-radius:.375rem;resize:none}.description-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.description-action-btn{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;background-image:none;cursor:pointer;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.description-cancel-btn{background-color:#f3f4f6;color:var(--tis-cancel);border:1px solid var(--tis-cancel)}.description-save-btn{background-color:var(--tis-primary, var(--mat-sys-primary));color:#fff}@media (max-width: 575.98px){.image-picker-label{padding:15px}}@media (min-width: 576px) and (max-width: 767.98px){.image-picker-label{padding:15px}}\n"] }]
1217
1222
  }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TisHelperService }, { type: i3$3.BreakpointObserver }], propDecorators: { urlConfig: [{
1218
1223
  type: Input,
1219
1224
  args: [{ required: true }]
@@ -1265,6 +1270,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
1265
1270
  type: Output
1266
1271
  }], onError: [{
1267
1272
  type: Output
1273
+ }], isShowImageSequence: [{
1274
+ type: Input
1268
1275
  }], enableDragNDrop: [{
1269
1276
  type: Input
1270
1277
  }], dataSequenceChange: [{