chrv-components 1.12.202 → 1.12.204

package/fesm2022/chrv-components.mjs

@@ -4485,7 +4485,8 @@ class ChrInputComponent {
                 this.required.set(true);
             }
         }
-        this.required.set(false);
+        else
+            this.required.set(false);
     }
     ensureState(status) {
         const control = this.ngControl();
@@ -4650,6 +4651,8 @@ class ChrFileInputComponent extends ChrInputComponent {
          */
         this.base64 = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "base64" }] : /* istanbul ignore next */ []));
+        this.type = input('file', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * Wether or not the user can update the file's name directly from the file item
          */
@@ -4901,12 +4904,12 @@ class ChrFileInputComponent extends ChrInputComponent {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n            </div>\n        </div>\n    </div>\n\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n            </div>\n        </div>\n    </div>\n\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'chr-file-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ChrInputComponent], template: "<div class=\"file-input-wrapper\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n            </div>\n        </div>\n    </div>\n\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], base64: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64", required: false }] }], allowChangingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowChangingFileName", required: false }] }], fileNativeInput: [{ type: i0.ViewChild, args: ['fileNativeInput', { ...{
+        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], base64: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], allowChangingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowChangingFileName", required: false }] }], fileNativeInput: [{ type: i0.ViewChild, args: ['fileNativeInput', { ...{
                             read: (ElementRef),
                         }, isSignal: true }] }], dataTemplateRef: [{ type: i0.ContentChild, args: ['data', { ...{ read: TemplateRef }, isSignal: true }] }], dataTemplateControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgControl), { ...{
                             descendants: true,