@jm-7c3/common-lib 22.2.0 → 22.3.1

package/fesm2022/jm-7c3-common-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, signal, effect, ChangeDetectionStrategy, Component, Injectable, inject, Inject, ChangeDetectorRef, viewChild, ViewContainerRef, Service, Directive, contentChild, output, InjectionToken, computed, ViewEncapsulation, NgModule } from '@angular/core';
+import { input, signal, effect, ChangeDetectionStrategy, Component, Injectable, inject, Inject, ChangeDetectorRef, viewChild, ViewContainerRef, Service, Directive, contentChild, output, InjectionToken, computed, ViewEncapsulation, NgModule, model } from '@angular/core';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2 from 'primeng/api';
@@ -26,6 +26,7 @@ import * as i1$6 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { cloneDeep } from 'lodash-es';
 import { v4 } from 'uuid';
+import { validate, form } from '@angular/forms/signals';
 import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -578,13 +579,13 @@ class PanelComponent {
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PanelComponent, isStandalone: true, selector: "cl-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"border-1 border-gray-300 p-5 rounded-lg\">\n  @if (headerTemplate() || title()) {\n  <div>\n    @if (title()) {\n      <div class=\"font-medium mb-5 text-xl\">\n        {{ title() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"headerTemplate()\" />\n    }\n  </div>\n  }\n  <div>\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n  </div>\n  @if (footerTemplate()) {\n  <div>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n  </div>\n  }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PanelComponent, isStandalone: true, selector: "cl-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"border-1 border-gray-300 p-5 rounded-lg\">\n  <!-- TODO - Use flex and gap instead of margins -->\n  @if (headerTemplate() || title()) {\n  <div>\n    @if (title()) {\n      <div class=\"font-medium mb-5 text-xl\">\n        {{ title() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"headerTemplate()\" />\n    }\n  </div>\n  }\n  <div>\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n  </div>\n  @if (footerTemplate()) {\n  <div class=\"mt-5\">\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n  </div>\n  }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-panel', imports: [
                         CommonModule,
-                    ], template: "<div class=\"border-1 border-gray-300 p-5 rounded-lg\">\n  @if (headerTemplate() || title()) {\n  <div>\n    @if (title()) {\n      <div class=\"font-medium mb-5 text-xl\">\n        {{ title() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"headerTemplate()\" />\n    }\n  </div>\n  }\n  <div>\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n  </div>\n  @if (footerTemplate()) {\n  <div>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n  </div>\n  }\n</div>\n\n" }]
+                    ], template: "<div class=\"border-1 border-gray-300 p-5 rounded-lg\">\n  <!-- TODO - Use flex and gap instead of margins -->\n  @if (headerTemplate() || title()) {\n  <div>\n    @if (title()) {\n      <div class=\"font-medium mb-5 text-xl\">\n        {{ title() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"headerTemplate()\" />\n    }\n  </div>\n  }\n  <div>\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n  </div>\n  @if (footerTemplate()) {\n  <div class=\"mt-5\">\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n  </div>\n  }\n</div>\n\n" }]
         }], propDecorators: { contentTemplate: [{ type: i0.ContentChild, args: ['contentTemplate', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footerTemplate', { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['headerTemplate', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
 
 class ProgressBarDialogComponent {
@@ -1125,62 +1126,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+function matFileInputRequired(message = 'This field is required') {
+    return (path) => {
+        return validate(path, ({ value }) => {
+            const firstValue = (value() || []).at(-1);
+            if (!value() || (!firstValue?.isNew && firstValue?.toDelete)) {
+                return {
+                    kind: 'mat-file-input-required',
+                    message,
+                };
+            }
+            return null;
+        });
+    };
+}
 class MatFileInputComponent {
+    // #region Inputs, outputs and viewChild
     directory = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "directory" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     icon = input('add', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     label = input('Browse', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    onDownloadEmitter = output({ alias: 'onDownload' });
+    onDownloadEmitter = output({
+        alias: 'onDownload',
+    });
     fileInput = viewChild('fileInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
-    fileName = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
-    isDisabled = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isFileSelected = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFileSelected" }] : /* istanbul ignore next */ []));
-    value = signal(null, /* @ts-ignore */
+    // #endregion
+    // #region Properties
+    value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    // ControlValueAccessor interface methods
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        setTimeout(() => {
-            this.isDisabled.set(isDisabled);
-        });
-    }
-    writeValue(value = null) {
-        let newValue = [];
-        if (Array.isArray(value)) {
-            newValue = cloneDeep(value);
-            this.selectFile(newValue[0]);
-        }
-        else if (typeof value === 'string') {
-            const hash = this.getHashFromFileName(value);
-            const file = {
-                isNew: !value,
-                hash,
-                name: value,
-                path: this.directory(),
-                toDelete: false,
-            };
-            newValue.push(file);
-            this.selectFile(file);
-        }
-        this.setValue(newValue);
+    form = form(this.value, (path) => {
+        matFileInputRequired()(path);
+    });
+    // #endregion
+    // #region Computed properties
+    isFileSelected = computed(() => this.value()?.filter((file) => !file?.toDelete).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFileSelected" }] : /* istanbul ignore next */ []));
+    fileName = computed(() => {
+        const file = this.getLastFile(this.value());
+        return this.getSafeFileName(file);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.writeValue(this.value());
     }
-    // Custom public methods
-    onClick() {
+    // #endregion
+    // #region Protected methods
+    onClick(event) {
+        event.preventDefault();
         this.fileInput()?.nativeElement.click();
-        this.onTouched();
     }
     onFileSelected(event) {
         const file = event.target.files[0];
@@ -1197,8 +1197,7 @@ class MatFileInputComponent {
             };
             const newValue = [...(this.value() ?? [])];
             newValue.push(newFile);
-            this.selectFile(newFile);
-            this.setValue(newValue);
+            this.value.set(newValue);
         }
     }
     onDelete() {
@@ -1211,15 +1210,18 @@ class MatFileInputComponent {
             else {
                 file.toDelete = true;
             }
-            this.fileName.set('');
-            this.isFileSelected.set(false);
-            this.setValue(newValue);
+            if (newValue.length === 0) {
+                this.value.set(null);
+            }
+            else {
+                this.value.set(newValue);
+            }
         }
     }
     onDownload() {
         this.onDownloadEmitter.emit(this.value());
     }
-    // Custom private methods
+    // #region Private methods
     getFileNameParts(fileName) {
         const lastDotIndex = fileName.lastIndexOf('.');
         if (lastDotIndex === -1) {
@@ -1236,148 +1238,128 @@ class MatFileInputComponent {
         return parts.length > 2 ? parts[parts.length - 2] : '';
     }
     getLastFile(value) {
-        return value.length > 0 ? value[value.length - 1] : undefined;
+        const response = (value ?? []).at(-1);
+        return response ?? null;
     }
     getSafeFileName(file) {
+        if (!file) {
+            return '';
+        }
         const { name, extension } = this.getFileNameParts(file.name);
         const hash = this.getHashFromFileName(file.name);
         const fileName = name.replace(`.${hash}`, '');
         return `${decodeURIComponent(fileName)}.${extension}`;
     }
-    onChange = (value) => { };
-    onTouched = () => { };
-    selectFile(file) {
-        const safeFileName = this.getSafeFileName(file);
-        this.fileName.set(safeFileName);
-        this.isFileSelected.set(true);
-    }
-    setValue(value) {
-        this.value.set(value);
-        this.onChange(value);
-        this.onTouched();
+    writeValue(value = null) {
+        if (Array.isArray(value)) {
+            this.value.set(cloneDeep(value));
+        }
+        else if (typeof value === 'string') {
+            const hash = this.getHashFromFileName(value);
+            const file = {
+                isNew: !value,
+                hash,
+                name: value,
+                path: this.directory(),
+                toDelete: false,
+            };
+            this.value.set([file]);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MatFileInputComponent, isStandalone: true, selector: "cl-mat-file-input", inputs: { directory: { classPropertyName: "directory", publicName: "directory", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDownloadEmitter: "onDownload" }, providers: [
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: MatFileInputComponent,
-            },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"file-input-container\">\n  <input #fileInput (change)=\"onFileSelected($event)\" [disabled]=\"isDisabled()\" class=\"file-input\" hidden type=\"file\" />\n\n  @if (isFileSelected()) {\n  <div class=\"file-details\">\n    <span class=\"file-name\" (click)=\"onDownload()\">{{ fileName() }}</span>\n    @if (!readonly()) {\n    <button mat-icon-button (click)=\"onDelete()\" [disabled]=\"isDisabled()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <button mat-raised-button (click)=\"onClick()\" [disabled]=\"isDisabled() || readonly()\">\n    <mat-icon>{{ icon() }}</mat-icon>\n    <span>{{ label() }}</span>\n  </button>\n  }\n</div>", styles: [":host .file-input-container{display:flex;align-items:center}:host .file-details{display:flex;align-items:center;gap:8px}:host .file-name{cursor:pointer;text-decoration:underline;color:#00f}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MatFileInputComponent, isStandalone: true, selector: "cl-mat-file-input", inputs: { directory: { classPropertyName: "directory", publicName: "directory", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDownloadEmitter: "onDownload", value: "valueChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"file-input-container\">\n  <input\n    (change)=\"onFileSelected($event)\"\n    class=\"file-input\"\n    [disabled]=\"disabled()\"\n    #fileInput\n    hidden\n    type=\"file\"\n  />\n\n  @if (isFileSelected()) {\n    <div class=\"file-details\">\n      <span class=\"file-name\" (click)=\"onDownload()\">{{ fileName() }}</span>\n      @if (!readonly()) {\n        <button\n          (click)=\"onDelete()\"\n          [disabled]=\"disabled()\"\n          mat-icon-button\n          type=\"button\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      }\n    </div>\n  } @else {\n    <button\n      (click)=\"onClick($event)\"\n      [disabled]=\"disabled() || readonly()\"\n      mat-raised-button\n      type=\"button\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n      <span>{{ label() }}</span>\n    </button>\n  }\n</div>\n", styles: [":host .file-input-container{display:flex;align-items:center}:host .file-details{display:flex;align-items:center;gap:8px}:host .file-name{cursor:pointer;text-decoration:underline;color:#00f}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cl-mat-file-input', standalone: true, imports: [FormsModule, MatButtonModule, MatIconModule], providers: [
-                        {
-                            multi: true,
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: MatFileInputComponent,
-                        },
-                    ], template: "<div class=\"file-input-container\">\n  <input #fileInput (change)=\"onFileSelected($event)\" [disabled]=\"isDisabled()\" class=\"file-input\" hidden type=\"file\" />\n\n  @if (isFileSelected()) {\n  <div class=\"file-details\">\n    <span class=\"file-name\" (click)=\"onDownload()\">{{ fileName() }}</span>\n    @if (!readonly()) {\n    <button mat-icon-button (click)=\"onDelete()\" [disabled]=\"isDisabled()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <button mat-raised-button (click)=\"onClick()\" [disabled]=\"isDisabled() || readonly()\">\n    <mat-icon>{{ icon() }}</mat-icon>\n    <span>{{ label() }}</span>\n  </button>\n  }\n</div>", styles: [":host .file-input-container{display:flex;align-items:center}:host .file-details{display:flex;align-items:center;gap:8px}:host .file-name{cursor:pointer;text-decoration:underline;color:#00f}\n"] }]
-        }], propDecorators: { directory: [{ type: i0.Input, args: [{ isSignal: true, alias: "directory", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDownloadEmitter: [{ type: i0.Output, args: ["onDownload"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+            args: [{ selector: 'cl-mat-file-input', standalone: true, imports: [MatButtonModule, MatIconModule], template: "<div class=\"file-input-container\">\n  <input\n    (change)=\"onFileSelected($event)\"\n    class=\"file-input\"\n    [disabled]=\"disabled()\"\n    #fileInput\n    hidden\n    type=\"file\"\n  />\n\n  @if (isFileSelected()) {\n    <div class=\"file-details\">\n      <span class=\"file-name\" (click)=\"onDownload()\">{{ fileName() }}</span>\n      @if (!readonly()) {\n        <button\n          (click)=\"onDelete()\"\n          [disabled]=\"disabled()\"\n          mat-icon-button\n          type=\"button\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      }\n    </div>\n  } @else {\n    <button\n      (click)=\"onClick($event)\"\n      [disabled]=\"disabled() || readonly()\"\n      mat-raised-button\n      type=\"button\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n      <span>{{ label() }}</span>\n    </button>\n  }\n</div>\n", styles: [":host .file-input-container{display:flex;align-items:center}:host .file-details{display:flex;align-items:center;gap:8px}:host .file-name{cursor:pointer;text-decoration:underline;color:#00f}\n"] }]
+        }], propDecorators: { directory: [{ type: i0.Input, args: [{ isSignal: true, alias: "directory", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDownloadEmitter: [{ type: i0.Output, args: ["onDownload"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
-class MatFileInputsComponent extends BaseFormComponent {
-    cdRef = inject(ChangeDetectorRef);
+function matFileInputsRequired(message = 'This field is required') {
+    return (path) => {
+        return validate(path, ({ value }) => {
+            if (value()?.some((file) => file === null || file.at(-1)?.toDelete)) {
+                return {
+                    kind: 'mat-file-inputs-required',
+                    message,
+                };
+            }
+            return null;
+        });
+    };
+}
+class MatFileInputsComponent {
+    // #region Inputs and outputs
     directory = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "directory" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     icon = input('add', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     label = input('Browse', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    max = input(5, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    maxFiles = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     onDownloadEmitter = output({ alias: 'onDownload' });
+    // #endregion
+    // #region Properties
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    form = form(this.value);
+    // #endregion
+    // #region NG Hooks
+    ngOnInit() {
+        this.writeValue(this.value());
+    }
+    // #endregion
+    // #region Protected methods
     onAdd() {
-        this.formArray.push(new FormControl());
-        this.cdRef.markForCheck();
+        this.value.update((value) => [...(value ?? []), null]);
     }
     onDelete(index) {
-        this.formArray.removeAt(index);
-        this.cdRef.markForCheck();
+        this.value.update((currentValue) => {
+            if (!currentValue) {
+                return null;
+            }
+            // Return a new array with the item removed
+            return currentValue.filter((_, i) => i !== index);
+        });
     }
     onDownload(file) {
-        this.onDownloadEmitter.emit(file);
-    }
-    setDisabledState(isDisabled) {
-        for (const control of this.formArray.controls) {
-            if (isDisabled) {
-                control.disable();
-            }
-            else {
-                control.enable();
-            }
+        if (!file) {
+            return;
         }
+        this.onDownloadEmitter.emit(file);
     }
-    validate(control) {
-        if (control?.hasValidator(Validators.required) && Array.isArray(control?.value)) {
-            const first = control.value[0];
-            if (!(typeof first === 'string' ||
-                (Array.isArray(first) && first.some(({ toDelete }) => toDelete === false)))) {
-                return {
-                    required: true
-                };
-            }
-        }
-        return null;
+    onValueChange(file, index) {
+        this.value.update((value) => {
+            const newValue = [...(value ?? [])];
+            newValue[index] = file;
+            return newValue;
+        });
     }
+    // #region Private methods
     writeValue(value) {
         if (Array.isArray(value)) {
-            setTimeout(() => {
-                if (value.length === 0) {
-                    this.onAdd();
-                }
-                else {
-                    for (let i = 0, j = value.length; i < j; i++) {
-                        this.onAdd();
-                    }
-                    this.setValue(value);
-                }
-            });
+            if (value.length === 0) {
+                this.onAdd();
+            }
+            else {
+                this.value.set(value);
+            }
         }
         else if (!this.readonly()) {
             this.onAdd();
         }
     }
-    getForm() {
-        return new FormArray([]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFileInputsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MatFileInputsComponent, isStandalone: true, selector: "cl-mat-file-inputs", inputs: { directory: { classPropertyName: "directory", publicName: "directory", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDownloadEmitter: "onDownload" }, providers: [
-            {
-                multi: true,
-                provide: NG_VALIDATORS,
-                useExisting: MatFileInputsComponent
-            },
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: MatFileInputsComponent
-            }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  @for (item of formArray.value; track index; let index = $index) {\n    <div class=\"flex mb-3\">\n      <cl-mat-file-input [formControlName]=\"index\" [directory]=\"directory()\" [icon]=\"icon()\" [label]=\"label()\"\n        (onDownload)=\"onDownload($event)\" [readonly]=\"readonly()\" />\n      @if (!readonly()) {\n        @if (index === 0) {\n          <button (click)=\"onAdd()\" [disabled]=\"formArray.length >= max()\" mat-icon-button type=\"button\">\n            <mat-icon>{{ icon() }}</mat-icon>\n          </button>\n        } @else if (index > 0) {\n          <button (click)=\"onDelete(index)\" mat-icon-button type=\"button\">\n            <mat-icon>remove</mat-icon>\n          </button>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFileInputComponent, selector: "cl-mat-file-input", inputs: ["directory", "icon", "label", "readonly"], outputs: ["onDownload"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFileInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MatFileInputsComponent, isStandalone: true, selector: "cl-mat-file-inputs", inputs: { directory: { classPropertyName: "directory", publicName: "directory", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDownloadEmitter: "onDownload", value: "valueChange" }, ngImport: i0, template: "@for (item of value(); track index; let index = $index) {\n  <div class=\"flex mb-3\">\n    <cl-mat-file-input\n      [directory]=\"directory()\"\n      [icon]=\"icon()\"\n      [label]=\"label()\"\n      (onDownload)=\"onDownload($event)\"\n      [readonly]=\"readonly()\"\n      [value]=\"item\"\n      (valueChange)=\"onValueChange($event, index)\"\n    />\n    @if (!readonly()) {\n      @if (index === 0) {\n        @let allowMoreFiles = (value()?.length ?? 0) < maxFiles();\n        <button\n          (click)=\"onAdd()\"\n          [disabled]=\"disabled() || !allowMoreFiles\"\n          mat-icon-button\n          type=\"button\"\n        >\n          <mat-icon>{{ icon() }}</mat-icon>\n        </button>\n      } @else if (index > 0) {\n        <button (click)=\"onDelete(index)\" mat-icon-button type=\"button\">\n          <mat-icon>remove</mat-icon>\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFileInputComponent, selector: "cl-mat-file-input", inputs: ["directory", "disabled", "icon", "label", "readonly", "value"], outputs: ["onDownload", "valueChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFileInputsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cl-mat-file-inputs', imports: [
-                        MatButtonModule,
-                        MatFileInputComponent,
-                        MatIconModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ], providers: [
-                        {
-                            multi: true,
-                            provide: NG_VALIDATORS,
-                            useExisting: MatFileInputsComponent
-                        },
-                        {
-                            multi: true,
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: MatFileInputsComponent
-                        }
-                    ], template: "<ng-container [formGroup]=\"formGroup\">\n  @for (item of formArray.value; track index; let index = $index) {\n    <div class=\"flex mb-3\">\n      <cl-mat-file-input [formControlName]=\"index\" [directory]=\"directory()\" [icon]=\"icon()\" [label]=\"label()\"\n        (onDownload)=\"onDownload($event)\" [readonly]=\"readonly()\" />\n      @if (!readonly()) {\n        @if (index === 0) {\n          <button (click)=\"onAdd()\" [disabled]=\"formArray.length >= max()\" mat-icon-button type=\"button\">\n            <mat-icon>{{ icon() }}</mat-icon>\n          </button>\n        } @else if (index > 0) {\n          <button (click)=\"onDelete(index)\" mat-icon-button type=\"button\">\n            <mat-icon>remove</mat-icon>\n          </button>\n        }\n      }\n    </div>\n  }\n</ng-container>\n" }]
-        }], propDecorators: { directory: [{ type: i0.Input, args: [{ isSignal: true, alias: "directory", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDownloadEmitter: [{ type: i0.Output, args: ["onDownload"] }] } });
+            args: [{ selector: 'cl-mat-file-inputs', imports: [MatButtonModule, MatFileInputComponent, MatIconModule], template: "@for (item of value(); track index; let index = $index) {\n  <div class=\"flex mb-3\">\n    <cl-mat-file-input\n      [directory]=\"directory()\"\n      [icon]=\"icon()\"\n      [label]=\"label()\"\n      (onDownload)=\"onDownload($event)\"\n      [readonly]=\"readonly()\"\n      [value]=\"item\"\n      (valueChange)=\"onValueChange($event, index)\"\n    />\n    @if (!readonly()) {\n      @if (index === 0) {\n        @let allowMoreFiles = (value()?.length ?? 0) < maxFiles();\n        <button\n          (click)=\"onAdd()\"\n          [disabled]=\"disabled() || !allowMoreFiles\"\n          mat-icon-button\n          type=\"button\"\n        >\n          <mat-icon>{{ icon() }}</mat-icon>\n        </button>\n      } @else if (index > 0) {\n        <button (click)=\"onDelete(index)\" mat-icon-button type=\"button\">\n          <mat-icon>remove</mat-icon>\n        </button>\n      }\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { directory: [{ type: i0.Input, args: [{ isSignal: true, alias: "directory", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDownloadEmitter: [{ type: i0.Output, args: ["onDownload"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 ;
 
@@ -1416,5 +1398,5 @@ function concatWithToArray(values) {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFormComponent, ButtonComponent, ClStateService, CommonLibModule, ConfirmationComponent, ConfirmationService, ContentDialogComponent, ContentDialogService, ERROR_DIRECTIVE, ErrorDirective, FORM_FIELD, FileInputComponent, FileInputsComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldModule, IconButtonComponent, LABEL_DIRECTIVE, LabelDirective, MatConfirmationComponent, MatConfirmationService, MatFileInputComponent, MatFileInputsComponent, MatFormDialogComponent, MatFormDialogService, MatFormHostableComponent, PanelComponent, ProgressBarDialogComponent, ProgressBarDialogService, ReadonlyValueComponent, ToastsComponent, ToastsService, concatWithToArray };
+export { BaseFormComponent, ButtonComponent, ClStateService, CommonLibModule, ConfirmationComponent, ConfirmationService, ContentDialogComponent, ContentDialogService, ERROR_DIRECTIVE, ErrorDirective, FORM_FIELD, FileInputComponent, FileInputsComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldModule, IconButtonComponent, LABEL_DIRECTIVE, LabelDirective, MatConfirmationComponent, MatConfirmationService, MatFileInputComponent, MatFileInputsComponent, MatFormDialogComponent, MatFormDialogService, MatFormHostableComponent, PanelComponent, ProgressBarDialogComponent, ProgressBarDialogService, ReadonlyValueComponent, ToastsComponent, ToastsService, concatWithToArray, matFileInputRequired, matFileInputsRequired };
 //# sourceMappingURL=jm-7c3-common-lib.mjs.map