@smartbit4all/ng-client 4.5.46 → 4.5.48

package/esm2022/lib/smart-form/smartfileuploader/smartfileuploader.component.mjs

@@ -165,7 +165,7 @@ export class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartfileuploaderComponent, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: { uploadCallback: "uploadCallback", fileFormats: "fileFormats", maxSizeMb: "maxSizeMb", i18n: "i18n", useIconButton: "useIconButton", isMultiple: "isMultiple", autoUpload: "autoUpload", isDisabled: "isDisabled" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"container\"\r\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDragOver\"\r\n>\r\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\r\n    <input\r\n      #fileInput\r\n      id=\"addFile\"\r\n      placeholder=\"fileInput\"\r\n      type=\"file\"\r\n      (change)=\"getFile($event)\"\r\n      class=\"file\"\r\n      accept=\"{{ fileFormats?.join(', ') }}\"\r\n      [size]=\"maxSizeMb\"\r\n      [multiple]=\"isMultiple\"\r\n      [disabled]=\"isDisabled\"\r\n      style=\"display: none\"\r\n    />\r\n    <div class=\"fileUploadContentContainer\">\r\n      <div class=\"icon\">\r\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\r\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\r\n        </mat-label>\r\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\r\n          {{ i18n!.addFile }}\r\n        </button>\r\n      </div>\r\n      <div class=\"labels\">\r\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\r\n          {{ i18n!.addFile }}\r\n        </mat-label>\r\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\r\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\r\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\r\n      </div>\r\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\r\n        <ui-action-button (actionClick)=\"uploadFile()\" [descriptor]=\"uploadButton\">\r\n        </ui-action-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\r\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\r\n    <div class=\"errors\">\r\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\r\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\r\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\r\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\r\n      </ng-container>\r\n      <ng-template #fileIcon>\r\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\r\n      </ng-template>\r\n\r\n      <div class=\"fileData\">\r\n        <div class=\"fileDataContainer\">\r\n          <span class=\"fileName\">{{ file.name }}</span>\r\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fileActions\">\r\n        <smart-icon class=\"downloadIcon\" icon=\"download\" (click)=\"downloadFile(file)\"></smart-icon>\r\n        <smart-icon class=\"removeIcon\" icon=\"delete\" (click)=\"remove(i)\"></smart-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: { uploadCallback: "uploadCallback", fileFormats: "fileFormats", maxSizeMb: "maxSizeMb", i18n: "i18n", useIconButton: "useIconButton", isMultiple: "isMultiple", autoUpload: "autoUpload", isDisabled: "isDisabled" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"container\"\r\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDragOver\"\r\n>\r\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\r\n    <input\r\n      #fileInput\r\n      id=\"addFile\"\r\n      placeholder=\"fileInput\"\r\n      type=\"file\"\r\n      (change)=\"getFile($event)\"\r\n      class=\"file\"\r\n      accept=\"{{ fileFormats?.join(', ') }}\"\r\n      [size]=\"maxSizeMb\"\r\n      [multiple]=\"isMultiple\"\r\n      [disabled]=\"isDisabled\"\r\n      style=\"display: none\"\r\n    />\r\n    <div class=\"fileUploadContentContainer\">\r\n      <div class=\"icon\">\r\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\r\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\r\n        </mat-label>\r\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\r\n          {{ i18n!.addFile }}\r\n        </button>\r\n      </div>\r\n      <div class=\"labels\">\r\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\r\n          {{ i18n!.addFile }}\r\n        </mat-label>\r\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\r\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\r\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\r\n      </div>\r\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\r\n        <ui-action-button (actionClick)=\"uploadFile()\" [descriptor]=\"uploadButton\">\r\n        </ui-action-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\r\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\r\n    <div class=\"errors\">\r\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\r\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\r\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\r\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\r\n      </ng-container>\r\n      <ng-template #fileIcon>\r\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\r\n      </ng-template>\r\n\r\n      <div class=\"fileData\">\r\n        <div class=\"fileDataContainer\">\r\n          <span class=\"fileName\">{{ file.name }}</span>\r\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fileActions\">\r\n        <smart-icon class=\"downloadIcon\" icon=\"download\" (click)=\"downloadFile(file)\"></smart-icon>\r\n        <smart-icon class=\"removeIcon\" icon=\"delete\" (click)=\"remove(i)\"></smart-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,

package/esm2022/lib/smart-form/widgets/components/smart-file-editor/smart-file-editor.component.mjs

@@ -152,7 +152,7 @@ export class SmartFileEditorComponent {
                 useExisting: forwardRef(() => SmartFileEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else if (!widgetInstance.value || fileToChange) {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"false\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"uploadedFile\">\r\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n        <div class=\"fileData\">\r\n          <div class=\"fileDataContainer\">\r\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\r\n            <span class=\"fileSize\">{{ formatSize(widgetInstance.value?.size) }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fileActions\">\r\n          <smart-ui-action-toolbar\r\n            [id]=\"widgetInstance.toolbarId\"\r\n            #toolbar\r\n          ></smart-ui-action-toolbar>\r\n\r\n          @if (!fileToChange) {\r\n            <ui-action-button\r\n              class=\"changeButton\"\r\n              (actionClick)=\"change(widgetInstance.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              [descriptor]=\"changeButton\"\r\n            >\r\n            </ui-action-button>\r\n          } @else {\r\n            <ui-action-button\r\n              class=\"removeIcon\"\r\n              (actionClick)=\"cancelChange()\"\r\n              [descriptor]=\"removeButton\"\r\n            ></ui-action-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep prime-file-uploader) ::ng-deep .uploadedFile,.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i3.UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: i4.UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: i5.UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
+        ], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else if (!widgetInstance.value || fileToChange) {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"false\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"uploadedFile\">\r\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n        <div class=\"fileData\">\r\n          <div class=\"fileDataContainer\">\r\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\r\n            <span class=\"fileSize\">{{ formatSize(widgetInstance.value?.size) }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fileActions\">\r\n          <smart-ui-action-toolbar\r\n            [id]=\"widgetInstance.toolbarId\"\r\n            #toolbar\r\n          ></smart-ui-action-toolbar>\r\n\r\n          @if (!fileToChange) {\r\n            <ui-action-button\r\n              class=\"changeButton\"\r\n              (actionClick)=\"change(widgetInstance.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              [descriptor]=\"changeButton\"\r\n            >\r\n            </ui-action-button>\r\n          } @else {\r\n            <ui-action-button\r\n              class=\"removeIcon\"\r\n              (actionClick)=\"cancelChange()\"\r\n              [descriptor]=\"removeButton\"\r\n            ></ui-action-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep prime-file-uploader) ::ng-deep .uploadedFile,.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i3.UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: i4.UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: i5.UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
             type: Component,