@tedi-design-system/angular 5.0.1-rc.3 → 5.0.1-rc.5

package/fesm2022/tedi-design-system-angular-community.mjs

@@ -2676,7 +2676,7 @@ class FileDropzoneComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileDropzoneComponent, deps: [{ token: i1$2.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  class=\"tedi-file-dropzone__input\"\n  type=\"file\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [id]=\"inputId()\"\n  [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n  [accept]=\"accept()\"\n  (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n  <div class=\"tedi-file-dropzone__label-wrapper\">\n    <tedi-icon\n      [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n      [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n    />\n    <label tedi-label class=\"tedi-file-dropzone__label\">{{\n      (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n    }}</label>\n  </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n  @if (helperText(); as message) {\n    <tedi-feedback-text\n      [text]=\"message.text\"\n      [type]=\"message.type || 'hint'\"\n      [position]=\"message.position || 'left'\"\n    />\n  }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n  @for (file of files(); track file.name) {\n    <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n      <tedi-card\n        padding=\"none\"\n        [className]=\"fileClasses(file)\"\n        [background]=\"\n          file.fileStatus && file.fileStatus == 'invalid'\n            ? 'danger-primary'\n            : 'tertiary'\n        \"\n      >\n        <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n          <div class=\"tedi-file-dropzone__file-name\">\n            {{ file.label ?? file.name }}\n\n            @if (file && validateIndividually() && file.helper; as helper) {\n              <tedi-tooltip\n                [className]=\"tooltipClasses(file)\"\n                [position]=\"helper?.position || 'top'\"\n              >\n                <tedi-tooltip-trigger>\n                  <button tedi-info-button [disabled]=\"file.disabled\"></button>\n                </tedi-tooltip-trigger>\n\n                <tedi-tooltip-content>\n                  {{ helper.text }}\n                </tedi-tooltip-content>\n              </tedi-tooltip>\n            }\n          </div>\n          <button\n            tedi-closing-button\n            [title]=\"'clear' | tediTranslate\"\n            [iconSize]=\"18\"\n            (click)=\"removeFile(file)\"\n            size=\"small\"\n          ></button>\n        </tedi-card-content>\n      </tedi-card>\n    </div>\n  }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n  @if (this.uploadError(); as message) {\n    <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n  }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}.tedi-file-dropzone__file-name{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  class=\"tedi-file-dropzone__input\"\n  type=\"file\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [id]=\"inputId()\"\n  [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n  [accept]=\"accept()\"\n  (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n  <div class=\"tedi-file-dropzone__label-wrapper\">\n    <tedi-icon\n      [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n      [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n    />\n    <label tedi-label class=\"tedi-file-dropzone__label\">{{\n      (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n    }}</label>\n  </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n  @if (helperText(); as message) {\n    <tedi-feedback-text\n      [text]=\"message.text\"\n      [type]=\"message.type || 'hint'\"\n      [position]=\"message.position || 'left'\"\n    />\n  }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n  @for (file of files(); track file.name) {\n    <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n      <tedi-card\n        padding=\"none\"\n        [className]=\"fileClasses(file)\"\n        [background]=\"\n          file.fileStatus && file.fileStatus == 'invalid'\n            ? 'danger-primary'\n            : 'tertiary'\n        \"\n      >\n        <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n          <div class=\"tedi-file-dropzone__file-name\">\n            {{ file.label ?? file.name }}\n\n            @if (file && validateIndividually() && file.helper; as helper) {\n              <tedi-tooltip\n                [className]=\"tooltipClasses(file)\"\n                [position]=\"helper?.position || 'top'\"\n              >\n                <tedi-tooltip-trigger>\n                  <button tedi-info-button [disabled]=\"file.disabled\"></button>\n                </tedi-tooltip-trigger>\n\n                <tedi-tooltip-content>\n                  {{ helper.text }}\n                </tedi-tooltip-content>\n              </tedi-tooltip>\n            }\n          </div>\n          <button\n            tedi-closing-button\n            [title]=\"'clear' | tediTranslate\"\n            [iconSize]=\"18\"\n            (click)=\"removeFile(file)\"\n            size=\"small\"\n          ></button>\n        </tedi-card-content>\n      </tedi-card>\n    </div>\n  }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n  @if (this.uploadError(); as message) {\n    <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n  }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}.tedi-file-dropzone__file-name{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileDropzoneComponent, decorators: [{
             type: Component,