@jm-7c3/common-lib 22.1.0 → 22.3.0

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, output, InjectionToken, contentChild, 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';
 
@@ -65,10 +66,10 @@ class ButtonComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "cl-button", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button [class]=\"buttonClass()\" [disabled]=\"disabled()\" [icon]=\"icon()!\" [label]=\"label()!\" [loading]=\"loading()\" pButton\n  [type]=\"type()\">\n</button>\n", styles: [".p-button-text.p-button-info{text-decoration:underline}.p-button-text.p-button-info:not(:disabled):hover{background:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ButtonComponent, isStandalone: true, selector: "cl-button", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button [class]=\"buttonClass()\" [disabled]=\"disabled()\" [icon]=\"icon()!\" [label]=\"label()!\" [loading]=\"loading()\" pButton\n  [type]=\"type()\">\n</button>\n", styles: [".p-button-text.p-button-info{text-decoration:underline}.p-button-text.p-button-info:not(:disabled):hover{background:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-button', imports: [
                         ButtonModule
@@ -88,10 +89,10 @@ class ClStateService {
     updateStateMessage(stateMessage) {
         patchState(this.state, { stateMessage });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ClStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ClStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ClStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ClStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ClStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ClStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -148,10 +149,10 @@ class ConfirmationComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfirmationComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ConfirmationComponent, isStandalone: true, selector: "cl-confirmation", ngImport: i0, template: "<p-confirmDialog #general key=\"general\">\n  <ng-template pTemplate=\"footer\">\n    <cl-button class=\"mr-2\" (click)=\"general.onAccept()\" color=\"primary\" icon=\"pi pi-check\" [label]=\"acceptLabel()\" />\n    <cl-button (click)=\"general.onReject()\" color=\"secondary\" icon=\"pi pi-times\" [label]=\"cancelLabel()\" />\n  </ng-template>\n</p-confirmDialog>\n\n<p-confirmDialog icon=\"pi pi-exclamation-triangle\" key=\"general-warning\" #warning>\n  <ng-template pTemplate=\"footer\">\n    <cl-button class=\"mr-2\" (click)=\"warning.onAccept()\" color=\"primary\" icon=\"pi pi-check\" [label]=\"acceptLabel()\" />\n    <cl-button (click)=\"warning.onReject()\" color=\"secondary\" icon=\"pi pi-times\" [label]=\"cancelLabel()\" />\n  </ng-template>\n</p-confirmDialog>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i1$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ConfirmationComponent, isStandalone: true, selector: "cl-confirmation", ngImport: i0, template: "<p-confirmDialog #general key=\"general\">\n  <ng-template pTemplate=\"footer\">\n    <cl-button class=\"mr-2\" (click)=\"general.onAccept()\" color=\"primary\" icon=\"pi pi-check\" [label]=\"acceptLabel()\" />\n    <cl-button (click)=\"general.onReject()\" color=\"secondary\" icon=\"pi pi-times\" [label]=\"cancelLabel()\" />\n  </ng-template>\n</p-confirmDialog>\n\n<p-confirmDialog icon=\"pi pi-exclamation-triangle\" key=\"general-warning\" #warning>\n  <ng-template pTemplate=\"footer\">\n    <cl-button class=\"mr-2\" (click)=\"warning.onAccept()\" color=\"primary\" icon=\"pi pi-check\" [label]=\"acceptLabel()\" />\n    <cl-button (click)=\"warning.onReject()\" color=\"secondary\" icon=\"pi pi-times\" [label]=\"cancelLabel()\" />\n  </ng-template>\n</p-confirmDialog>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i1$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-confirmation', imports: [
                         ButtonComponent,
@@ -188,10 +189,10 @@ class ConfirmationService {
     onCancel(key) {
         return this.clStateService.onStateMessage('confirmation-cancel').pipe(filter(message => message?.key === key), map(() => null));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfirmationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -235,10 +236,10 @@ class ContentDialogComponent {
     onClose() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentDialogComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ContentDialogComponent, isStandalone: true, selector: "cl-content-dialog", ngImport: i0, template: "@if (component()) {\n  <ng-container *ngComponentOutlet=\"component()\" />\n}\n\n<div class=\"text-right\">\n  <cl-button (click)=\"onClose()\" color=\"secondary\" [label]=\"closeLabel()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContentDialogComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ContentDialogComponent, isStandalone: true, selector: "cl-content-dialog", ngImport: i0, template: "@if (component()) {\n  <ng-container *ngComponentOutlet=\"component()\" />\n}\n\n<div class=\"text-right\">\n  <cl-button (click)=\"onClose()\" color=\"secondary\" [label]=\"closeLabel()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContentDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-content-dialog', imports: [
                         ButtonComponent,
@@ -272,10 +273,10 @@ class ContentDialogService {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContentDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContentDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -344,10 +345,10 @@ class FormDialogComponent {
             this.dialogRef.close(this.form().value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormDialogComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormDialogComponent, isStandalone: true, selector: "cl-form-dialog", viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2>{{ header() }}</h2>\n\n<div class=\"mb-2\">\n  <ng-container #formContainer />\n</div>\n\n@if (form()) {\n  <div class=\"text-right\">\n    @if (!hideSubmitButton()) {\n      <cl-button class=\"mr-2\" (click)=\"onSubmit()\" color=\"main\" [disabled]=\"form()!.invalid || form()!.pristine\"\n        [label]=\"submitLabel()\" />\n    }\n\n    <cl-button (click)=\"onCancel()\" color=\"secondary\" [label]=\"cancelLabel()\" />\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormDialogComponent, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FormDialogComponent, isStandalone: true, selector: "cl-form-dialog", viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2>{{ header() }}</h2>\n\n<div class=\"mb-2\">\n  <ng-container #formContainer />\n</div>\n\n@if (form()) {\n  <div class=\"text-right\">\n    @if (!hideSubmitButton()) {\n      <cl-button class=\"mr-2\" (click)=\"onSubmit()\" color=\"main\" [disabled]=\"form()!.invalid || form()!.pristine\"\n        [label]=\"submitLabel()\" />\n    }\n\n    <cl-button (click)=\"onCancel()\" color=\"secondary\" [label]=\"cancelLabel()\" />\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-form-dialog', imports: [
                         ButtonComponent,
@@ -396,10 +397,10 @@ class FormDialogService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -427,10 +428,10 @@ class IconButtonComponent {
     updateClass(severity) {
         this.class.update(value => value + ' p-button-' + severity);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: IconButtonComponent, isStandalone: true, selector: "cl-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button [class]=\"class()\" [disabled]=\"disabled()\" [icon]=\"icon()\" [loading]=\"loading()\" pButton [type]=\"type()\">\n</button>\n", styles: ["button{border-radius:25px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: IconButtonComponent, isStandalone: true, selector: "cl-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button [class]=\"class()\" [disabled]=\"disabled()\" [icon]=\"icon()\" [loading]=\"loading()\" pButton [type]=\"type()\">\n</button>\n", styles: ["button{border-radius:25px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-icon-button', imports: [
                         ButtonModule,
@@ -439,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class MatConfirmationComponent {
     data = inject(MAT_DIALOG_DATA);
-    contentHost = viewChild.required('contentHost', { read: ViewContainerRef });
+    contentHost = viewChild.required('contentHost', { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     title = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     message = signal(undefined, /* @ts-ignore */
@@ -462,10 +463,10 @@ class MatConfirmationComponent {
             this.message.set(message);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MatConfirmationComponent, isStandalone: true, selector: "cl-mat-confirmation", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>{{ title() }}</h2>\n\n<mat-dialog-content>\n  @if (message()) {\n  <p>{{ message() }}</p>\n  }\n  <ng-template #contentHost />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button mat-button [mat-dialog-close]=\"false\">\n    {{ cancelButtonLabel() }}\n  </button>\n  <button mat-flat-button color=\"primary\" [mat-dialog-close]=\"true\">\n    {{ acceptButtonLabel() }}\n  </button>\n</mat-dialog-actions>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MatConfirmationComponent, isStandalone: true, selector: "cl-mat-confirmation", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>{{ title() }}</h2>\n\n<mat-dialog-content>\n  @if (message()) {\n  <p>{{ message() }}</p>\n  }\n  <ng-template #contentHost />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button mat-button [mat-dialog-close]=\"false\">\n    {{ cancelButtonLabel() }}\n  </button>\n  <button mat-flat-button color=\"primary\" [mat-dialog-close]=\"true\">\n    {{ acceptButtonLabel() }}\n  </button>\n</mat-dialog-actions>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-mat-confirmation', standalone: true, imports: [CommonModule, MatDialogModule, MatButtonModule], template: "<h2 mat-dialog-title>{{ title() }}</h2>\n\n<mat-dialog-content>\n  @if (message()) {\n  <p>{{ message() }}</p>\n  }\n  <ng-template #contentHost />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button mat-button [mat-dialog-close]=\"false\">\n    {{ cancelButtonLabel() }}\n  </button>\n  <button mat-flat-button color=\"primary\" [mat-dialog-close]=\"true\">\n    {{ acceptButtonLabel() }}\n  </button>\n</mat-dialog-actions>" }]
         }], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
@@ -480,25 +481,25 @@ class MatConfirmationService {
         });
         return dialogRef.afterClosed().pipe(map((result) => result ?? false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.5", ngImport: i0, type: MatConfirmationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: MatConfirmationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatConfirmationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatConfirmationService, decorators: [{
             type: Service
         }] });
 
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class MatFormHostableComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormHostableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: MatFormHostableComponent, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormHostableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MatFormHostableComponent, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormHostableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormHostableComponent, decorators: [{
             type: Directive
         }] });
 class MatFormDialogComponent {
     data = inject(MAT_DIALOG_DATA);
     dialogRef = inject((MatDialogRef));
-    formHost = viewChild.required('formHost', { read: ViewContainerRef });
+    formHost = viewChild.required('formHost', { ...(ngDevMode ? { debugName: "formHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     actionsAlign = signal('end', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
     cancelButtonLabel = signal('Cancel', /* @ts-ignore */
@@ -536,10 +537,10 @@ class MatFormDialogComponent {
     onSubmit() {
         this.dialogRef.close(this.hostedComponentRef?.form.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: MatFormDialogComponent, isStandalone: true, selector: "cl-mat-form-dialog", viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ title() }}\n</h2>\n\n<mat-dialog-content>\n  <ng-template #formHost />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button mat-button [mat-dialog-close]=\"undefined\" type=\"button\">\n    {{ cancelButtonLabel() }}\n  </button>\n  <button mat-flat-button color=\"primary\" [disabled]=\"!isFormValid()\" (click)=\"onSubmit()\" type=\"button\">\n    {{ submitButtonLabel() }}\n  </button>\n</mat-dialog-actions>\n", styles: [":host{display:block}\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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: MatFormDialogComponent, isStandalone: true, selector: "cl-mat-form-dialog", viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ title() }}\n</h2>\n\n<mat-dialog-content>\n  <ng-template #formHost />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button mat-button [mat-dialog-close]=\"undefined\" type=\"button\">\n    {{ cancelButtonLabel() }}\n  </button>\n  <button mat-flat-button color=\"primary\" [disabled]=\"!isFormValid()\" (click)=\"onSubmit()\" type=\"button\">\n    {{ submitButtonLabel() }}\n  </button>\n</mat-dialog-actions>\n", styles: [":host{display:block}\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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-mat-form-dialog', imports: [
                         MatButtonModule,
@@ -561,13 +562,32 @@ class MatFormDialogService {
         });
         return dialogRef.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: MatFormDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MatFormDialogService, decorators: [{
             type: Service
         }] });
 
+class PanelComponent {
+    contentTemplate = contentChild('contentTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    footerTemplate = contentChild('footerTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    headerTemplate = contentChild('headerTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    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  <!-- 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  <!-- 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 {
     cdRef = inject(ChangeDetectorRef);
     clStateService = inject(ClStateService);
@@ -586,10 +606,10 @@ class ProgressBarDialogComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ProgressBarDialogComponent, isStandalone: true, selector: "cl-progress-bar-dialog", ngImport: i0, template: "<p-dialog [closable]=\"false\" [closeOnEscape]=\"false\" [draggable]=\"false\" [modal]=\"true\" [resizable]=\"false\"\n  [showHeader]=\"true\" styleClass=\"w-4\" [(visible)]=\"visible\">\n  <p-progressBar mode=\"indeterminate\" />\n</p-dialog>\n", styles: [":host ::ng-deep p-dialog .p-dialog-header{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ProgressBarDialogComponent, isStandalone: true, selector: "cl-progress-bar-dialog", ngImport: i0, template: "<p-dialog [closable]=\"false\" [closeOnEscape]=\"false\" [draggable]=\"false\" [modal]=\"true\" [resizable]=\"false\"\n  [showHeader]=\"true\" styleClass=\"w-4\" [(visible)]=\"visible\">\n  <p-progressBar mode=\"indeterminate\" />\n</p-dialog>\n", styles: [":host ::ng-deep p-dialog .p-dialog-header{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-progress-bar-dialog', imports: [
                         DialogModule,
@@ -609,10 +629,10 @@ class ProgressBarDialogService {
             type: 'progess-bar-dialog-open'
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -624,10 +644,10 @@ class ReadonlyValueComponent {
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     value = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ReadonlyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ReadonlyValueComponent, isStandalone: true, selector: "cl-readonly-value", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <strong>{{ label() }}</strong>\n  <div>{{ value() }}</div>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ReadonlyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ReadonlyValueComponent, isStandalone: true, selector: "cl-readonly-value", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <strong>{{ label() }}</strong>\n  <div>{{ value() }}</div>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ReadonlyValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ReadonlyValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-readonly-value', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <strong>{{ label() }}</strong>\n  <div>{{ value() }}</div>\n</div>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
@@ -653,10 +673,10 @@ class ToastsComponent {
             this.messageService.add(message);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ToastsComponent, isStandalone: true, selector: "cl-toasts", ngImport: i0, template: "<p-toast key=\"general\" position=\"bottom-center\" />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1$6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ToastsComponent, isStandalone: true, selector: "cl-toasts", ngImport: i0, template: "<p-toast key=\"general\" position=\"bottom-center\" />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1$6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-toasts', imports: [
                         ToastModule,
@@ -695,10 +715,10 @@ class ToastsService {
             type: 'toast'
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToastsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -765,10 +785,10 @@ class BaseFormComponent {
     get formGroup() {
         return this.control;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: BaseFormComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: BaseFormComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
             args: [{ imports: [], template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
@@ -901,8 +921,8 @@ class FileInputComponent {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileInputComponent, isStandalone: true, selector: "cl-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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FileInputComponent, isStandalone: true, selector: "cl-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,
@@ -910,7 +930,7 @@ class FileInputComponent {
             }
         ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input type=\"hidden\" [value]=\"value()\" />\n<input (change)=\"onFileSelected($event)\" class=\"file-input\" #fileInput type=\"file\" />\n\n@if (isFileSelected()) {\n  @if (readonly()) {\n    <button class=\"link-button\" (click)=\"onDownload()\" type=\"button\">\n      {{ fileName() }}\n    </button>\n  } @else {\n    <div class=\"flex\">\n      <cl-button class=\"mr-3\" [label]=\"fileName()\" />\n      <button class=\"p-button-danger p-button-rounded p-button-text\" (click)=\"onDelete()\" [disabled]=\"isDisabled()\"\n        icon=\"pi pi-trash\" pButton type=\"button\">\n      </button>\n    </div>\n  }\n} @else {\n  <cl-button (click)=\"onClick()\" [disabled]=\"isDisabled()\" [icon]=\"icon()\" [label]=\"label()\" />\n}\n\n", styles: [".file-input{display:none}.link-button{background:none!important;border:none;padding:0!important;color:#069;text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cl-button", inputs: ["color", "disabled", "icon", "label", "loading", "type"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-file-input', imports: [
                         ButtonComponent,
@@ -992,8 +1012,8 @@ class FileInputsComponent extends BaseFormComponent {
     getForm() {
         return new FormArray([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileInputsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileInputsComponent, isStandalone: true, selector: "cl-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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileInputsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FileInputsComponent, isStandalone: true, selector: "cl-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,
@@ -1006,7 +1026,7 @@ class FileInputsComponent extends BaseFormComponent {
             }
         ], 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-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 class=\"p-button-rounded p-button-text\" (click)=\"onAdd()\" [disabled]=\"formArray.length >= max()\"\n            icon=\"pi pi-plus\" pButton type=\"button\">\n          </button>\n        } @else if (index > 0) {\n          <button class=\"p-button-rounded p-button-text\" (click)=\"onDelete(index)\" icon=\"pi pi-minus\" pButton\n            type=\"button\">\n          </button>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: FileInputComponent, selector: "cl-file-input", inputs: ["directory", "icon", "label", "readonly"], outputs: ["onDownload"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileInputsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileInputsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-file-inputs', imports: [
                         ButtonModule,
@@ -1029,12 +1049,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 const ERROR_DIRECTIVE = new InjectionToken('ErrorDirective');
 class ErrorDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ErrorDirective, isStandalone: true, selector: "ff-error", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ErrorDirective, isStandalone: true, selector: "ff-error", providers: [
             { provide: ERROR_DIRECTIVE, useExisting: ErrorDirective }
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ff-error',
@@ -1051,12 +1071,12 @@ class FormFieldComponent {
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.control()?.control.hasValidator(Validators.required) ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "cl-form-field", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FormFieldComponent, isStandalone: true, selector: "cl-form-field", providers: [
             { provide: FORM_FIELD, useExisting: FormFieldComponent }
         ], queries: [{ propertyName: "control", first: true, predicate: FormControlName, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"field\">\n  <label class=\"block\" [class.required]=\"isRequired()\">\n    <ng-content select=\"ff-label\" />\n  </label>\n  <div>\n    <ng-content />\n  </div>\n  @if ((control()?.dirty || control()?.touched) && control()?.errors) {\n    <small class=\"p-block p-error\">\n      <ng-content select=\"ff-error\" />\n    </small>\n  }\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cl-form-field', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         { provide: FORM_FIELD, useExisting: FormFieldComponent }
@@ -1065,12 +1085,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 const LABEL_DIRECTIVE = new InjectionToken('LabelDirective');
 class LabelDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: LabelDirective, isStandalone: true, selector: "ff-label", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: LabelDirective, isStandalone: true, selector: "ff-label", providers: [
             { provide: LABEL_DIRECTIVE, useExisting: LabelDirective }
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ff-label',
@@ -1082,15 +1102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 
 class FormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: FormFieldModule, imports: [ErrorDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [ErrorDirective,
             FormFieldComponent,
             LabelDirective], exports: [ErrorDirective,
             FormFieldComponent,
             LabelDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -1106,62 +1126,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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];
@@ -1178,8 +1197,7 @@ class MatFileInputComponent {
             };
             const newValue = [...(this.value() ?? [])];
             newValue.push(newFile);
-            this.selectFile(newFile);
-            this.setValue(newValue);
+            this.value.set(newValue);
         }
     }
     onDelete() {
@@ -1192,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) {
@@ -1217,162 +1238,142 @@ 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.5", ngImport: i0, type: MatFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [disabled]=\"isDisabled()\"\n    class=\"file-input\"\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      <button mat-icon-button (click)=\"onDelete()\" [disabled]=\"isDisabled() || readonly()\">\n        <mat-icon>delete</mat-icon>\n      </button>\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 ɵ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 }, 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.5", ngImport: i0, type: MatFileInputComponent, decorators: [{
+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\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [disabled]=\"isDisabled()\"\n    class=\"file-input\"\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      <button mat-icon-button (click)=\"onDelete()\" [disabled]=\"isDisabled() || readonly()\">\n        <mat-icon>delete</mat-icon>\n      </button>\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.5", ngImport: i0, type: MatFileInputsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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      [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.5", ngImport: i0, type: MatFileInputsComponent, decorators: [{
+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      [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"] }] } });
 
 ;
 
 class CommonLibModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: CommonLibModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommonLibModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CommonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: CommonLibModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CommonLibModule, providers: [
             ConfirmationService$1,
             DialogService,
             DynamicDialogConfig,
             MessageService,
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommonLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CommonLibModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -1397,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, 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