@jm-7c3/common-lib 22.0.0 → 22.1.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, output, InjectionToken, Directive, contentChild, computed, ViewEncapsulation, NgModule } 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 * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2 from 'primeng/api';
@@ -8,20 +8,26 @@ import * as i1$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { signalState, patchState } from '@ngrx/signals';
-import { filter, map, Subscription, concatWith, toArray } from 'rxjs';
+import { filter, map, Subject, takeUntil, Subscription, concatWith, toArray } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { DynamicDialogConfig, DynamicDialogRef, DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, Validators, FormArray, NG_VALIDATORS, FormControlName } from '@angular/forms';
-import * as i1$3 from 'primeng/dialog';
+import * as i1$3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import * as i1$4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$5 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i1$4 from 'primeng/toast';
+import * as i1$6 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { cloneDeep } from 'lodash-es';
 import { v4 } from 'uuid';
+import * as i2$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 
 class ButtonComponent {
     color = input('primary', /* @ts-ignore */
@@ -431,6 +437,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [class]=\"class()\" [disabled]=\"disabled()\" [icon]=\"icon()\" [loading]=\"loading()\" pButton [type]=\"type()\">\n</button>\n", styles: ["button{border-radius:25px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
+class MatConfirmationComponent {
+    data = inject(MAT_DIALOG_DATA);
+    contentHost = viewChild.required('contentHost', { read: ViewContainerRef });
+    title = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    acceptButtonLabel = signal('Accept', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptButtonLabel" }] : /* istanbul ignore next */ []));
+    cancelButtonLabel = signal('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelButtonLabel" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        const { acceptButtonLabel, cancelButtonLabel, component, message, title } = this.data;
+        this.acceptButtonLabel.set(acceptButtonLabel || 'Accept');
+        this.cancelButtonLabel.set(cancelButtonLabel || 'Cancel');
+        this.title.set(title ?? '');
+        if (component) {
+            this.contentHost().clear();
+            const componentRef = this.contentHost().createComponent(component);
+            Object.assign(componentRef.instance ?? {}, this.data.componentData);
+        }
+        else if (message) {
+            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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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 }] }] } });
+
+class MatConfirmationService {
+    dialog = inject(MatDialog);
+    confirm(data, width = '400px') {
+        const dialogRef = this.dialog.open(MatConfirmationComponent, {
+            data,
+            width,
+            disableClose: true,
+        });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormHostableComponent, decorators: [{
+            type: Directive
+        }] });
+class MatFormDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    formHost = viewChild.required('formHost', { read: ViewContainerRef });
+    actionsAlign = signal('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
+    cancelButtonLabel = signal('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelButtonLabel" }] : /* istanbul ignore next */ []));
+    submitButtonLabel = signal('Submit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitButtonLabel" }] : /* istanbul ignore next */ []));
+    isFormValid = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    hostedComponentRef;
+    destroy$ = new Subject();
+    title = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        const { component, dialogTitle, formDialogConfig, formValue } = this.data;
+        this.formHost().clear();
+        const componentRef = this.formHost().createComponent(component);
+        this.hostedComponentRef = componentRef.instance;
+        this.title.set(dialogTitle);
+        if (formDialogConfig) {
+            this.actionsAlign.set(formDialogConfig.actionsAlign || 'end');
+            this.cancelButtonLabel.set(formDialogConfig.cancelButtonLabel || 'Cancel');
+            this.submitButtonLabel.set(formDialogConfig.submitButtonLabel || 'Submit');
+        }
+        if (formValue) {
+            this.hostedComponentRef.form.patchValue(formValue);
+        }
+        this.hostedComponentRef?.form.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(status => {
+            this.isFormValid.set(status === 'VALID');
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cl-mat-form-dialog', imports: [
+                        MatButtonModule,
+                        MatDialogModule,
+                    ], 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"] }]
+        }], propDecorators: { formHost: [{ type: i0.ViewChild, args: ['formHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+class MatFormDialogService {
+    dialog = inject(MatDialog);
+    open(component, dialogTitle, data) {
+        const dialogRef = this.dialog.open(MatFormDialogComponent, {
+            ...data?.matDialogConfig,
+            data: {
+                component,
+                dialogTitle,
+                formValue: data?.formValue,
+                formDialogConfig: data?.formDialogConfig
+            }
+        });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MatFormDialogService, decorators: [{
+            type: Service
+        }] });
+
 class ProgressBarDialogComponent {
     cdRef = inject(ChangeDetectorRef);
     clStateService = inject(ClStateService);
@@ -450,7 +587,7 @@ 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$3.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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarDialogComponent, decorators: [{
             type: Component,
@@ -517,7 +654,7 @@ class ToastsComponent {
         });
     }
     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$4.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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastsComponent, decorators: [{
             type: Component,
@@ -969,6 +1106,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }] });
 
+class MatFileInputComponent {
+    directory = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directory" }] : /* 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' });
+    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 */
+    ...(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);
+    }
+    // Custom public methods
+    onClick() {
+        this.fileInput()?.nativeElement.click();
+        this.onTouched();
+    }
+    onFileSelected(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const { extension, name } = this.getFileNameParts(file.name);
+            const hash = v4().split('-')[0];
+            const newFile = {
+                file,
+                hash,
+                isNew: true,
+                name: `${name}.${hash}.${extension}`,
+                path: this.directory(),
+                toDelete: false,
+            };
+            const newValue = [...(this.value() ?? [])];
+            newValue.push(newFile);
+            this.selectFile(newFile);
+            this.setValue(newValue);
+        }
+    }
+    onDelete() {
+        const newValue = [...(this.value() ?? [])];
+        const file = this.getLastFile(newValue);
+        if (file) {
+            if (file.isNew) {
+                newValue.pop();
+            }
+            else {
+                file.toDelete = true;
+            }
+            this.fileName.set('');
+            this.isFileSelected.set(false);
+            this.setValue(newValue);
+        }
+    }
+    onDownload() {
+        this.onDownloadEmitter.emit(this.value());
+    }
+    // Custom private methods
+    getFileNameParts(fileName) {
+        const lastDotIndex = fileName.lastIndexOf('.');
+        if (lastDotIndex === -1) {
+            return { name: fileName, extension: '' };
+        }
+        return {
+            name: fileName.substring(0, lastDotIndex),
+            extension: fileName.substring(lastDotIndex + 1),
+        };
+    }
+    getHashFromFileName(fileName) {
+        const parts = fileName.split('.');
+        // Assumes format is name.hash.extension
+        return parts.length > 2 ? parts[parts.length - 2] : '';
+    }
+    getLastFile(value) {
+        return value.length > 0 ? value[value.length - 1] : undefined;
+    }
+    getSafeFileName(file) {
+        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();
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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 }] }] } });
+
+class MatFileInputsComponent extends BaseFormComponent {
+    cdRef = inject(ChangeDetectorRef);
+    directory = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directory" }] : /* 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 */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    onDownloadEmitter = output({ alias: 'onDownload' });
+    onAdd() {
+        this.formArray.push(new FormControl());
+        this.cdRef.markForCheck();
+    }
+    onDelete(index) {
+        this.formArray.removeAt(index);
+        this.cdRef.markForCheck();
+    }
+    onDownload(file) {
+        this.onDownloadEmitter.emit(file);
+    }
+    setDisabledState(isDisabled) {
+        for (const control of this.formArray.controls) {
+            if (isDisabled) {
+                control.disable();
+            }
+            else {
+                control.enable();
+            }
+        }
+    }
+    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;
+    }
+    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);
+                }
+            });
+        }
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }] } });
+
 ;
 
 class CommonLibModule {
@@ -1006,5 +1397,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, 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, ProgressBarDialogComponent, ProgressBarDialogService, ReadonlyValueComponent, ToastsComponent, ToastsService, concatWithToArray };
 //# sourceMappingURL=jm-7c3-common-lib.mjs.map