@decaf-ts/for-angular 0.0.48 → 0.0.50

package/fesm2022/decaf-ts-for-angular.mjs

@@ -1869,8 +1869,21 @@ class NgxFormService {
             const control = formGroup.controls[key];
             const parentProps = NgxFormService.getPropsFromControl(formGroup);
             if (!(control instanceof FormControl)) {
-                if (control.disabled)
+                if (control.disabled) {
+                    if (control instanceof FormGroup)
+                        data[key] = NgxFormService.getFormData(control);
+                    if (control instanceof FormArray) {
+                        const value = control.controls.map(c => {
+                            if (Object.values(c.value).some(p => p !== undefined))
+                                return c.value;
+                            return undefined;
+                        });
+                        data[key] = Array.isArray(value)
+                            ? !value.filter(Boolean).length
+                                ? undefined : value : value;
+                    }
                     continue;
+                }
                 const value = NgxFormService.getFormData(control);
                 const isValid = control.valid;
                 if (parentProps.multiple) {
@@ -2456,7 +2469,7 @@ class NgxRenderingEngine extends RenderingEngine {
             return !isMapped;
         });
         if (unmappedKeys.length > 0 && isDevelopmentMode())
-            getLogger(this.fromFieldDefinition).warn(`Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`);
+            getLogger(this).warn(`Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`);
         const operation = NgxRenderingEngine._operation;
         const hiddenOn = inputs?.hidden || [];
         if (hiddenOn.includes(operation))
@@ -2894,6 +2907,8 @@ var component = {
 	},
 	file_upload: {
 		drag_file: "Drag and drop your image here",
+		empty: "No files found.",
+		preview: "Preview",
 		buttons: {
 			select: "Select File",
 			preview: "Preview",
@@ -3763,6 +3778,14 @@ class NgxComponentDirective extends DecafComponent {
          * @default false
          */
         this.refreshing = false;
+        /**
+         * @description Represents the color scheme used for application.
+         * @summary  This property determines the visual appearance of the application
+         * based on predefined color schemes (e.g., light or dark mode).
+         * @type {WindowColorScheme}
+         * @default WindowColorSchemes.light
+         */
+        this.colorSchema = WindowColorSchemes.light;
         this.componentName = componentName || 'NgxComponentDirective';
         this.localeRoot = localeRoot;
         if (!this.localeRoot && this.componentName)
@@ -3770,6 +3793,12 @@ class NgxComponentDirective extends DecafComponent {
         if (this.localeRoot)
             this.getLocale(this.localeRoot);
         this.uid = `${this.componentName}-${generateRandomValue(8)}`;
+        this.mediaService.isDarkMode().subscribe(isDark => {
+            if (isDark) {
+                this.isDarkMode = isDark;
+                this.colorSchema = WindowColorSchemes.dark;
+            }
+        });
     }
     /**
      * @description Cleanup lifecycle hook invoked when the directive is destroyed.
@@ -5168,15 +5197,17 @@ class NgxParentComponentDirective extends NgxComponentDirective {
         if (this.timerSubscription)
             this.timerSubscription.unsubscribe();
     }
-    getActivePage(page) {
-        const content = this.children[page];
-        this.activePage = undefined;
-        this.preloadCards = [...new Array(1)];
-        this.timerSubscription = timer(25).subscribe(() => this.activePage = { ...this.children[page] });
-        this.activeIndex = page;
-        if (content)
-            return content;
-        return undefined;
+    getActivePage(page, firstClick = true) {
+        if (firstClick || this.activeIndex !== page) {
+            const content = this.children[page];
+            this.activePage = undefined;
+            this.preloadCards = [...new Array(1)];
+            this.timerSubscription = timer(25).subscribe(() => this.activePage = { ...this.children[page] });
+            this.activeIndex = page;
+            if (content)
+                return content;
+            return undefined;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxParentComponentDirective, isStandalone: true, inputs: { page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
@@ -5258,6 +5289,14 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
          * @default false
          */
         this.lightBox = false;
+        this.headerTransparent = false;
+        /**
+         * @description Controls the visibility of the modal header.
+         * @summary When set to true, the modal header is displayed; when false, it is hidden.
+         * @type {boolean}
+         * @default true
+         */
+        this.showHeader = true;
         /**
          * @description Event emitted when the modal is about to be dismissed.
          * @summary Emits an OverlayEventDetail object containing details about the dismiss event.
@@ -5362,7 +5401,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         await this.modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", lightBox: "lightBox" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  class=\"dcf-modal-component\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @if(tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{props: globals}\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === \"bottom\") {\n            <div [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", lightBox: "lightBox", headerTransparent: "headerTransparent", showHeader: "showHeader" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class]=\"'dcf-modal-component ' + className\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox || headerTransparent\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @if(tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{props: globals}\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === \"bottom\") {\n            <div id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ModalComponent = __decorate([
     Dynamic(),
@@ -5370,7 +5409,7 @@ ModalComponent = __decorate([
 ], ModalComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-modal', standalone: true, imports: [IonModal, ComponentRendererComponent, ModelRendererComponent, TranslatePipe, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  class=\"dcf-modal-component\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @if(tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{props: globals}\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === \"bottom\") {\n            <div [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
+            args: [{ selector: 'ngx-decaf-modal', standalone: true, imports: [IonModal, ComponentRendererComponent, ModelRendererComponent, TranslatePipe, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class]=\"'dcf-modal-component ' + className\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox || headerTransparent\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @if(tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{props: globals}\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === \"bottom\") {\n            <div id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['component']
@@ -5392,6 +5431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], lightBox: [{
                 type: Input
+            }], headerTransparent: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
             }], willDismissEvent: [{
                 type: Output
             }] } });
@@ -5424,6 +5467,30 @@ async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
 async function presentNgxLightBoxModal(inlineContent, props = {}, injector) {
     return (await getNgxModalComponent({ props, ...{ inlineContent, lightBox: true } }, {}, injector || undefined)).present();
 }
+/**
+ * @description Presents modal with inline content.
+ * @summary Displays a modal with the specified content and properties.
+ *
+ * @param {string | SafeHtml} inlineContent - The content to display in the modal.
+ * @param {Partial<ModalComponent>} [props={}] - Properties to initialize the modal component.
+ * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
+ * @returns {Promise<void>} - A promise that resolves when the modal is presented.
+ */
+async function presentNgxInlineModal(inlineContent, props = {}, injector) {
+    (await getNgxInlineModal(inlineContent, props, injector)).present();
+}
+/**
+ * @description get modal with inline content instance.
+ * @summary Get modal component instance for show inline content
+ *
+ * @param {string | SafeHtml} inlineContent - The content to display in the lightbox modal.
+ * @param {Partial<ModalComponent>} [props={}] - Properties to initialize the modal component.
+ * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
+ * @returns {Promise<void>} - A promise that resolves when the modal is presented.
+ */
+async function getNgxInlineModal(inlineContent, props = {}, injector) {
+    return (await getNgxModalComponent({ props, ...{ inlineContent: inlineContent ?? '<div></div>', className: `${props?.className ?? ''} dcf-modal-expand` } }, {}, injector || undefined));
+}
 /**
  * @description Retrieves a modal for selecting options.
  * @summary Creates and initializes a modal component for displaying a list of selectable options.
@@ -5801,7 +5868,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         this.value = this.formControl.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n           [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if ((operation === 'read' || operation === 'delete') || readonly) {\n  <ng-container>\n    <div >\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
@@ -5821,7 +5888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonLabel,
                         IonText,
                         IonTextarea
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n           [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if ((operation === 'read' || operation === 'delete') || readonly) {\n  <ng-container>\n    <div >\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6665,7 +6732,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([operations].includes('delete') && [OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -6673,7 +6740,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([operations].includes('delete') && [OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxSvgDirective {
@@ -7308,7 +7375,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @memberOf FieldsetComponent
      */
     async ngOnInit() {
-        console.log(this.title);
         await super.ngOnInit(this.model);
         if (this.max && this.max === 1)
             this.multiple = false;
@@ -7422,6 +7488,30 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                     });
                 })];
         }
+        if ([OperationKeys.CREATE, OperationKeys.UPDATE].includes(this.operation)) {
+            const value = [...this.value];
+            this.value = [];
+            value.map(v => {
+                const formGroup = this.activeFormGroup;
+                if (value.length > formGroup.parent.length)
+                    NgxFormService.addGroupToParent(formGroup.parent);
+                if (!Object.keys(this.mapper).length)
+                    this.mapper = this.getMapper(v);
+                Object.entries(v).forEach(([key, value]) => {
+                    if (key === this.pk)
+                        formGroup.addControl(key, new FormControl({ value: value, disabled: false }));
+                    const control = formGroup.get(key);
+                    if (control instanceof FormControl) {
+                        control.setValue(value);
+                        control.updateValueAndValidity();
+                        formGroup.updateValueAndValidity();
+                    }
+                });
+                this.activeFormGroupIndex = formGroup.parent.length - 1;
+            });
+            this.setValue();
+            this.changeDetectorRef.detectChanges();
+        }
         this.refreshing = false;
         this.changeDetectorRef.detectChanges();
     }
@@ -7446,13 +7536,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         this.activeFormGroupIndex = 0;
         this.accordionComponent.value = '';
         this.changeDetectorRef.detectChanges();
-        // this.component.nativeElement.classList.add('dcf-animation', 'dcf-animation-slide-top-medium', 'dcf-animation-reverse', 'dcf-animation-fast');
-        // setTimeout(() => {
-        //   // Use Renderer2 to safely remove the element
-        //   const parent = this.renderer.parentNode(this.component.nativeElement);
-        //   if (parent)
-        //     this.renderer.removeChild(parent, this.component.nativeElement);
-        // }, 150);
     }
     /**
      * @description Handles creating new items or triggering group addition events.
@@ -7703,9 +7786,10 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @memberOf FieldsetComponent
      */
     setValue() {
-        this.value = this.formGroup.controls.map(({ value }) => value);
+        const formGroup = this.formGroup;
+        this.value = formGroup.controls.map(({ value }) => value);
         this.items = this.value
-            .filter((v) => (v[this.pk] || '').trim().length)
+            .filter((v) => `${v[this.pk] || ''}`.trim().length)
             .map((v, index) => {
             return {
                 ...itemMapper(Object.assign({}, v), this.mapper),
@@ -7745,7 +7829,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -7768,7 +7852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonIcon,
                         LayoutComponent,
                         IonSpinner
-                    ], template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
+                    ], template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -11352,7 +11436,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
          *
          * @type {string | undefined}
          */
-        this.preview = undefined;
+        this.previewFile = undefined;
         /**
          * @description List of files selected for upload.
          * @summary Contains the files selected by the user for upload. This array is updated
@@ -11404,6 +11488,28 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         }
         // Convert maxFileSize from MB to bytes
         this.maxFileSize = this.maxFileSize * 1024 * 1024;
+        this.initialize();
+    }
+    async initialize() {
+        if (this.value && typeof this.value === Primitives.STRING) {
+            try {
+                const files = JSON.parse(this.value);
+                this.files = files.map(file => {
+                    const mime = this.getFileMime(file)?.split('/') || [];
+                    const type = mime?.[0] === 'text' ? mime?.[1] : mime?.[0];
+                    return {
+                        name: mime?.[0] || 'file',
+                        type: `${type}` || 'image/*',
+                        source: file
+                    };
+                });
+                this.getPreview();
+            }
+            catch (error) {
+                this.log.for(this.initialize).error(`Error parsing file list: ${error.message || error}`);
+            }
+        }
+        this.initialized = true;
     }
     /**
      * @description Lifecycle hook that is called when a directive, pipe, or service is destroyed.
@@ -11501,7 +11607,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
      */
     handleClear() {
         this.clearErrors();
-        this.preview = undefined;
+        this.previewFile = undefined;
         this.files = [];
     }
     /**
@@ -11576,14 +11682,15 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
      * @param {File | string} [file] - The file to be previewed. If not provided, the current preview file is used.
      * @returns {Promise<void>}
      */
-    async showFilePreview(file, fileExtension = 'image/') {
+    async preview(file, fileExtension = 'image/') {
+        this.log.for(this).info(`Previewing file of type: ${fileExtension}`);
         let content;
         if (file instanceof File) {
             const dataUrl = await this.getDataURLs(file);
             if (dataUrl && dataUrl.length)
                 file = dataUrl[0];
         }
-        if (fileExtension.includes('image/'))
+        if (fileExtension.includes('image'))
             content = '<img src="' + file + '" style="max-width: 100%; height: auto;" />';
         if (fileExtension.includes('xml')) {
             const parseXml = (xmlString) => {
@@ -11595,15 +11702,22 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
                     // const encoder = new TextEncoder(); // gera bytes UTF-8
                     // const utf8Bytes = encoder.encode(xmlDoc.documentElement.outerHTML);
                     // return new TextDecoder("utf-8").decode(utf8Bytes);
-                    return xmlDoc.documentElement.innerHTML;
+                    return xmlDoc.documentElement.outerHTML;
                 }
                 catch (error) {
                     this.log.error(error?.message);
                     return undefined;
                 }
             };
-            content = parseXml(file);
-            content = `<div class="dfc-padding">${content}</div>`;
+            if (this.previewHandler && typeof this.previewHandler === 'function') {
+                const clazz = new this.previewHandler();
+                const previewFn = clazz.handle.bind(this);
+                return previewFn(file);
+            }
+            else {
+                content = parseXml(file);
+            }
+            return await presentNgxInlineModal(content);
         }
         await presentNgxLightBoxModal(content || "");
     }
@@ -11618,6 +11732,10 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
     isImageFile(file) {
         return file && file.type.startsWith('image/');
     }
+    getFileMime(base64) {
+        const match = base64.match(/^data:(.*?);base64,/);
+        return match ? match[1] : "";
+    }
     /**
      * @description Removes a file from the selection.
      * @summary Updates the file list to exclude the file at the specified index.
@@ -11640,12 +11758,15 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
      * @returns {Promise<void>}
      */
     async getPreview() {
-        this.preview = undefined;
+        this.previewFile = undefined;
         const file = this.files && this.files.length ? this.files[0] : null;
-        if (file) {
+        if (file instanceof File) {
             const dataUrl = await this.getDataURLs(file);
             if (dataUrl && dataUrl.length)
-                this.preview = dataUrl[0];
+                this.previewFile = dataUrl[0];
+        }
+        else {
+            this.previewFile = file?.['source'];
         }
     }
     /**
@@ -11744,7 +11865,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", label: "label", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    <div>\n      <div\n        [class]=\"\n          'dcf-drop-area '\n          + ' dcf-' + size\n          + ' dcf-flex dcf-flex-' + position\n          + ' dcf-text-' + position\n          \"\n\n        [class.dcf-dragging]=\"dragging\"\n        [class.dcf-has-files]=\"files.length\"\n        (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n        (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n        (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n      >\n        <div>\n          @if (!preview) {\n            @if(showIcon) {\n              <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n            }\n            <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n            <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n              {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n            </ion-button>\n            <div #container>\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          } @else {\n            @if ((!directoryMode && !multiple) ) {\n              <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                  <div class=\"dcf-preview-image\">\n                     <ion-img\n                      [src]=\"preview\"\n                      [title]=\"locale + '.preview' | translate\"\n                      [alt]=\"locale + '.preview' | translate\"\n                    />\n                    <div class=\"dcf-overlay\">\n                      <ion-button (click)=\"showFilePreview(preview)\" fill=\"clear\" color=\"light\" size=\"small\">\n                        {{ locale + \".buttons.preview\" | translate }}\n                      </ion-button>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                  <div>\n                    <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                    <p class=\"subtitle\">{{ files[0].name }}</p>\n                    <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                  </div>\n                </div>\n              </div>\n            } @else {\n              <div class=\"dcf-margin-bottom\">\n                {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                @if(errors.length > 0) {\n                  <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                }\n              </div>\n              <div class=\"dcf-preview-list-container\">\n                <ion-list class=\"dcf-preview-list\">\n                  @for (file of errors; track $index) {\n                    <ion-item lines=\"full\" class=\"dcf-error-item\">\n                      <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                      <div class=\"dcf-error-message\" slot=\"end\">\n                        {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                      </div>\n                      <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                    </ion-item>\n                  }\n\n                  @for (file of files; track $index) {\n                    <ion-item lines=\"full\">\n                      <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                      <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            (click)=\"showFilePreview(file, file.type)\"\n                            [name]=\"'image-outline'\"\n                          />\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          [slot]=\"'icon-only'\"\n                          [name]=\"'trash-outline'\"\n                          (click)=\"removeFile($index)\"\n                          [color]=\"'danger'\"\n                          [size]=\"'small'\"\n                        />\n                      </div>\n                    </ion-item>\n                  }\n                </ion-list>\n              </div>\n            }\n          }\n        </div>\n\n\n      </div>\n    </div>\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", label: "label", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div class=\"dcf-preview-list-container\">\n        <ion-list class=\"dcf-preview-list\">\n          @if(files?.length) {\n            @for (file of files; track $index) {\n              <ion-item lines=\"full\">\n                @if(file?.name) {\n                  <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                }\n                <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                      [button]=\"true\"\n                      [slot]=\"'icon-only'\"\n                      (click)=\"preview(file.source, file.type)\"\n                      [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                </div>\n              </ion-item>\n            }\n          } @else {\n            <div class=\"dcf-padding-xsmall\">\n              <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n            </div>\n          }\n\n        </ion-list>\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FileUploadComponent = __decorate([
     Dynamic(),
@@ -11752,7 +11873,7 @@ FileUploadComponent = __decorate([
 ], FileUploadComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, CardComponent, IconComponent, IonList, IonLabel, IonItem, TranslatePipe, IonButton], template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    <div>\n      <div\n        [class]=\"\n          'dcf-drop-area '\n          + ' dcf-' + size\n          + ' dcf-flex dcf-flex-' + position\n          + ' dcf-text-' + position\n          \"\n\n        [class.dcf-dragging]=\"dragging\"\n        [class.dcf-has-files]=\"files.length\"\n        (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n        (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n        (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n      >\n        <div>\n          @if (!preview) {\n            @if(showIcon) {\n              <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n            }\n            <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n            <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n              {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n            </ion-button>\n            <div #container>\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          } @else {\n            @if ((!directoryMode && !multiple) ) {\n              <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                  <div class=\"dcf-preview-image\">\n                     <ion-img\n                      [src]=\"preview\"\n                      [title]=\"locale + '.preview' | translate\"\n                      [alt]=\"locale + '.preview' | translate\"\n                    />\n                    <div class=\"dcf-overlay\">\n                      <ion-button (click)=\"showFilePreview(preview)\" fill=\"clear\" color=\"light\" size=\"small\">\n                        {{ locale + \".buttons.preview\" | translate }}\n                      </ion-button>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                  <div>\n                    <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                    <p class=\"subtitle\">{{ files[0].name }}</p>\n                    <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                  </div>\n                </div>\n              </div>\n            } @else {\n              <div class=\"dcf-margin-bottom\">\n                {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                @if(errors.length > 0) {\n                  <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                }\n              </div>\n              <div class=\"dcf-preview-list-container\">\n                <ion-list class=\"dcf-preview-list\">\n                  @for (file of errors; track $index) {\n                    <ion-item lines=\"full\" class=\"dcf-error-item\">\n                      <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                      <div class=\"dcf-error-message\" slot=\"end\">\n                        {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                      </div>\n                      <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                    </ion-item>\n                  }\n\n                  @for (file of files; track $index) {\n                    <ion-item lines=\"full\">\n                      <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                      <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            (click)=\"showFilePreview(file, file.type)\"\n                            [name]=\"'image-outline'\"\n                          />\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          [slot]=\"'icon-only'\"\n                          [name]=\"'trash-outline'\"\n                          (click)=\"removeFile($index)\"\n                          [color]=\"'danger'\"\n                          [size]=\"'small'\"\n                        />\n                      </div>\n                    </ion-item>\n                  }\n                </ion-list>\n              </div>\n            }\n          }\n        </div>\n\n\n      </div>\n    </div>\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
+            args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, CardComponent, IonText, IconComponent, IonList, IonLabel, IonItem, TranslatePipe, IonButton], template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div class=\"dcf-preview-list-container\">\n        <ion-list class=\"dcf-preview-list\">\n          @if(files?.length) {\n            @for (file of files; track $index) {\n              <ion-item lines=\"full\">\n                @if(file?.name) {\n                  <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                }\n                <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                      [button]=\"true\"\n                      [slot]=\"'icon-only'\"\n                      (click)=\"preview(file.source, file.type)\"\n                      [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                </div>\n              </ion-item>\n            }\n          } @else {\n            <div class=\"dcf-padding-xsmall\">\n              <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n            </div>\n          }\n\n        </ion-list>\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { static: true }]
@@ -11782,6 +11903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], enableDirectoryMode: [{
                 type: Input
+            }], previewHandler: [{
+                type: Input
             }], maxFileSize: [{
                 type: Input
             }], changeEvent: [{
@@ -11913,9 +12036,16 @@ class DynamicModule {
 }
 
 class NgxEventHandler extends DecafEventHandler {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor() {
+        super();
+    }
     async refresh(args) {
         this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
     }
+    async preview(args) {
+        this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
+    }
 }
 
 /**
@@ -12005,7 +12135,6 @@ class NgxPageDirective extends NgxComponentDirective {
         this.hasMenu = true;
         this.hasMenu = hasMenu;
         // subscribe to media service color scheme changes
-        this.mediaService.colorScheme$.subscribe();
     }
     get pageTitle() {
         if (this.title)
@@ -12295,6 +12424,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             }
         }
         catch (error) {
+            this.log.for(this.submit).error(`Error during ${this.operation} operation: ${error instanceof Error ? error.message : error}`);
             return {
                 ...event,
                 success: false,
@@ -12302,11 +12432,6 @@ class NgxModelPageDirective extends NgxPageDirective {
             };
         }
     }
-    async create(data, repository) {
-        alert('create');
-        console.log(repository);
-        console.log(data);
-    }
     /**
      * @description Retrieves a model instance from the repository by unique identifier.
      * @summary Fetches a specific model instance using the repository's read method.
@@ -12443,5 +12568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelAndRepository, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxLightBoxModal, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxInlineModal, presentNgxLightBoxModal, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map