@decaf-ts/for-angular 0.1.7 → 0.1.9

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

@@ -1,6 +1,6 @@
 import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, Pipe, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
 import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
@@ -2980,7 +2980,17 @@ var component = {
 		step2: "Select a condition",
 		step3: "Type a value",
 		no_suggestions: "No suggestions",
-		sort: "Sort by"
+		sort: "Sort by",
+		operators: {
+			equal: "Equal",
+			contains: "Contains",
+			not_contains: "Not Contains",
+			greater_than: "Greater Than",
+			less_than: "Less Than",
+			not_equal: "Not Equal",
+			starts_with: "Starts With",
+			ends_with: "Ends With"
+		}
 	},
 	stepped_form: {
 		next: "Next",
@@ -3090,6 +3100,8 @@ function provideDecafI18nLoader(resources = [], versionedSuffix = false) {
  * @summary Fetches and merges translation resources, supporting versioned suffixes and recursive merging.
  */
 class I18nLoader {
+    static { this.enabled = true; }
+    static { this.cache = {}; }
     /**
      * @param {HttpClient} http - The HTTP client used to fetch translation resources.
      * @param {I18nResourceConfig[]} [resources=[]] - The translation resources to be loaded.
@@ -3122,7 +3134,7 @@ class I18nLoader {
      * @returns {Observable<TranslationObject>} - An observable that emits the merged translation object.
      */
     getTranslation(lang) {
-        const libKeys = libLanguage[lang] || libLanguage['en'] || {};
+        const libKeys = !I18nLoader.enabled ? {} : libLanguage[lang] || libLanguage['en'] || {};
         const httpRequests$ = forkJoin(this.resources.map((config) => this.http.get(`${config.prefix}${lang}${this.getSuffix(config.suffix || '.json')}`)));
         /**
          * @description Recursively merges two translation objects.
@@ -3162,6 +3174,7 @@ class I18nLoader {
                     return acc;
                 }, {}),
             };
+            I18nLoader.cache[lang] = merged;
             return merged;
         }));
     }
@@ -3192,7 +3205,8 @@ class I18nParser extends TranslateParser {
  * @param {boolean} [versionedSuffix=false] - Whether to append a versioned suffix to resource URLs.
  * @returns {AngularProvider[]} - An array of providers for the translation service and loader.
  */
-function provideDecafI18nConfig(config = { fallbackLang: 'en', lang: 'en' }, resources = [], versionedSuffix = false) {
+function provideDecafI18nConfig(config = { fallbackLang: 'en', lang: 'en' }, resources = [], versionedSuffix = false, enabled = true) {
+    I18nLoader.enabled = enabled;
     return [
         provideHttpClient(),
         provideTranslateService({
@@ -3208,6 +3222,26 @@ function provideDecafI18nConfig(config = { fallbackLang: 'en', lang: 'en' }, res
         provideDecafI18nLoader(resources, versionedSuffix),
     ];
 }
+class DecafTranslatePipe {
+    constructor() {
+        this.translate = inject(TranslateService);
+    }
+    transform(value, ...args) {
+        if (I18nLoader.enabled && value) {
+            return this.translate.instant(value, ...args);
+        }
+        return `<div class="dcf-translation-key">${sf(value, args)}</div>`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, isStandalone: true, name: "translate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    pure: false,
+                }]
+        }] });
 
 /**
  * @module NgxMediaService
@@ -3581,16 +3615,28 @@ class NgxMediaService {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxMediaService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxMediaService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxMediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxMediaService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+const MockedEnTranslations = {
+    FIELD_LABEL: 'Translated Label',
+    FIELD_PLACEHOLDER: 'Translated Placeholder',
+    HELLO: 'Hello',
+    GOODBYE: 'Goodbye'
+};
+class I18nFakeLoader {
+    getTranslation() {
+        return of(MockedEnTranslations);
+    }
+}
+
 class NgxTranslateService extends DecafTranslateService {
     constructor() {
         super(...arguments);
@@ -3617,10 +3663,19 @@ class NgxTranslateService extends DecafTranslateService {
     setFallbackLang(lang) {
         return this.translateService.setFallbackLang(lang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, providedIn: 'root' }); }
+    getCurrentLang() {
+        return this.translateService.getCurrentLang();
+    }
+    getOnCache(lang) {
+        if (!lang) {
+            lang = this.getCurrentLang();
+        }
+        return I18nLoader.cache[lang] || {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxTranslateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxTranslateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxTranslateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3954,10 +4009,10 @@ class NgxRepositoryDirective extends DecafComponent {
     async handleObserveEvent(...args) {
         this.log.for(this.handleObserveEvent).info(`Repository change observed with args: ${args}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRepositoryDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxRepositoryDirective, isStandalone: true, inputs: { _query: "_query", _data: "_data", model: "model", modelId: "modelId", modelName: "modelName", pk: "pk", filter: "filter", filterBy: "filterBy", start: "start", limit: "limit", sortDirection: "sortDirection", sortBy: "sortBy", indexes: "indexes" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRepositoryDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxRepositoryDirective, isStandalone: true, inputs: { _query: "_query", _data: "_data", model: "model", modelId: "modelId", modelName: "modelName", pk: "pk", filter: "filter", filterBy: "filterBy", start: "start", limit: "limit", sortDirection: "sortDirection", sortBy: "sortBy", indexes: "indexes" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRepositoryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRepositoryDirective, decorators: [{
             type: Directive
         }], propDecorators: { _query: [{
                 type: Input
@@ -4912,10 +4967,10 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         });
         await this.initialize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", label: "label", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn", refreshing: "refreshing" }, outputs: { listenEvent: "listenEvent", refreshEvent: "refreshEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", label: "label", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn", refreshing: "refreshing" }, outputs: { listenEvent: "listenEvent", refreshEvent: "refreshEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
             args: [{ host: { '[attr.id]': 'uid' } }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -5155,10 +5210,10 @@ class NgxPageDirective extends NgxComponentDirective {
                 this.title = title;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxPageDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxPageDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxPageDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxPageDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxPageDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -5628,10 +5683,10 @@ class NgxModelPageDirective extends NgxPageDirective {
         }
         return { ...event, success, message, model: result, aborted: false };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxModelPageDirective, isStandalone: true, inputs: { operation: "operation" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxModelPageDirective, isStandalone: true, inputs: { operation: "operation" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxModelPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxModelPageDirective, decorators: [{
             type: Directive
         }], propDecorators: { operation: [{
                 type: Input
@@ -5784,10 +5839,10 @@ class NgxRenderableComponentDirective extends NgxModelPageDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRenderableComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxRenderableComponentDirective, isStandalone: true, inputs: { globals: "globals", parentForm: "parentForm", projectable: "projectable", rendererId: "rendererId" }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["componentInner"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRenderableComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxRenderableComponentDirective, isStandalone: true, inputs: { globals: "globals", parentForm: "parentForm", projectable: "projectable", rendererId: "rendererId" }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["componentInner"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRenderableComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRenderableComponentDirective, decorators: [{
             type: Directive
         }], propDecorators: { vcr: [{
                 type: ViewChild,
@@ -5960,10 +6015,10 @@ class ComponentRendererComponent extends NgxRenderableComponentDirective {
         this.instance = NgxRenderingEngine.createComponent(component, inputs, this.injector, metadata, this.vcr, template);
         this.subscribeEvents(component);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComponentRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", children: "children", projectable: "projectable", pk: "pk", parent: "parent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n\n<ng-template #componentOuter></ng-template>\n\n<ng-template #componentInner>\n  @if (parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if (!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if (projectable) {\n    @if (children?.length) {\n      @for(child of children; track child) {\n        @if (child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComponentRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", children: "children", projectable: "projectable", pk: "pk", parent: "parent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n\n<ng-template #componentOuter></ng-template>\n\n<ng-template #componentInner>\n  @if (parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if (!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if (projectable) {\n    @if (children?.length) {\n      @for(child of children; track child) {\n        @if (child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComponentRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, host: { '[attr.id]': 'uid' }, template: "<!-- Keep to avoid id conflicts -->\n\n<ng-template #componentOuter></ng-template>\n\n<ng-template #componentInner>\n  @if (parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if (!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if (projectable) {\n    @if (children?.length) {\n      @for(child of children; track child) {\n        @if (child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n" }]
         }], propDecorators: { tag: [{
@@ -6359,10 +6414,10 @@ class NgxFormFieldDirective extends NgxComponentDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormFieldDirective, deps: [{ token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", operation: "operation", parentForm: "parentForm", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormFieldDirective, deps: [{ token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", operation: "operation", parentForm: "parentForm", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormFieldDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -6442,6 +6497,97 @@ function Dynamic() {
 //   };
 // }
 
+class NgxSvgDirective {
+    constructor() {
+        this.mediaService = inject(NgxMediaService);
+        this.element = inject(ElementRef);
+        this.http = inject(HttpClient);
+    }
+    ngOnInit() {
+        this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
+        if (this.path) {
+            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxSvgDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-decaf-svg]',
+                    standalone: true
+                }]
+        }], propDecorators: { path: [{
+                type: Input,
+                args: ['ngx-decaf-svg']
+            }] } });
+
+let IconComponent = class IconComponent {
+    constructor() {
+        this.color = "dark";
+        this.slot = 'icon-only';
+        this.button = false;
+        this.buttonFill = 'clear';
+        this.buttonShape = 'round';
+        this.size = 'default';
+        this.type = 'ionic';
+        this.isSvg = false;
+        this.initialized = false;
+        this.inline = false;
+        this.isDarkMode = false;
+        this.mediaService = new NgxMediaService();
+        addIcons(allIcons);
+    }
+    ngOnInit() {
+        if (this.button)
+            this.slot = 'icon-only';
+        if (this.name?.includes('.')) {
+            this.type = 'image';
+            this.isSvg = this.name.endsWith('.svg');
+        }
+        if (this.name?.includes('ti-')) {
+            this.type = 'icon';
+            this.name = `ti-${this.name.replace(/ti-/g, '')}`;
+        }
+        this.mediaService.isDarkMode().subscribe(isDark => {
+            this.isDarkMode = isDark;
+        });
+        this.initialized = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
+};
+IconComponent = __decorate([
+    Dynamic(),
+    __metadata("design:paramtypes", [])
+], IconComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid', '[attr.aria-hidden]': '!button' }, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { component: [{
+                type: ViewChild,
+                args: ['component', { read: ElementRef, static: false }]
+            }], name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], slot: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }], buttonFill: [{
+                type: Input
+            }], buttonShape: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
 /**
  * @module module:lib/components/model-renderer/model-renderer.component
  * @description Model renderer component module.
@@ -6510,10 +6656,10 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
             this.subscribeEvents();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "  <!-- Keep to avoid id conflicts -->\n  <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <!-- <ng-template #inner>\n    <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\"  [id]=\"rendererId || ''\">\n      @for (child of output?.children; track child) {\n        @if (child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template> -->\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "  <!-- Keep to avoid id conflicts -->\n  <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <!-- <ng-template #inner>\n    <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\"  [id]=\"rendererId || ''\">\n      @for (child of output?.children; track child) {\n        @if (child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template> -->\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [], selector: 'ngx-decaf-model-renderer', host: { '[attr.id]': 'uid' }, template: "  <!-- Keep to avoid id conflicts -->\n  <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <!-- <ng-template #inner>\n    <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\"  [id]=\"rendererId || ''\">\n      @for (child of output?.children; track child) {\n        @if (child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template> -->\n" }]
         }], propDecorators: { projectable: [{
@@ -6682,10 +6828,10 @@ class NgxParentComponentDirective extends NgxComponentDirective {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxParentComponentDirective, isStandalone: true, inputs: { refreshing: "refreshing", page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxParentComponentDirective, isStandalone: true, inputs: { refreshing: "refreshing", page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
             type: Directive
         }], propDecorators: { refreshing: [{
                 type: Input
@@ -6711,97 +6857,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-class NgxSvgDirective {
-    constructor() {
-        this.mediaService = inject(NgxMediaService);
-        this.element = inject(ElementRef);
-        this.http = inject(HttpClient);
-    }
-    ngOnInit() {
-        this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
-        if (this.path) {
-            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxSvgDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-decaf-svg]',
-                    standalone: true
-                }]
-        }], propDecorators: { path: [{
-                type: Input,
-                args: ['ngx-decaf-svg']
-            }] } });
-
-let IconComponent = class IconComponent {
-    constructor() {
-        this.color = "dark";
-        this.slot = 'icon-only';
-        this.button = false;
-        this.buttonFill = 'clear';
-        this.buttonShape = 'round';
-        this.size = 'default';
-        this.type = 'ionic';
-        this.isSvg = false;
-        this.initialized = false;
-        this.inline = false;
-        this.isDarkMode = false;
-        this.mediaService = new NgxMediaService();
-        addIcons(allIcons);
-    }
-    ngOnInit() {
-        if (this.button)
-            this.slot = 'icon-only';
-        if (this.name?.includes('.')) {
-            this.type = 'image';
-            this.isSvg = this.name.endsWith('.svg');
-        }
-        if (this.name?.includes('ti-')) {
-            this.type = 'icon';
-            this.name = `ti-${this.name.replace(/ti-/g, '')}`;
-        }
-        this.mediaService.isDarkMode().subscribe(isDark => {
-            this.isDarkMode = isDark;
-        });
-        this.initialized = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
-};
-IconComponent = __decorate([
-    Dynamic(),
-    __metadata("design:paramtypes", [])
-], IconComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid', '[attr.aria-hidden]': '!button' }, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { component: [{
-                type: ViewChild,
-                args: ['component', { read: ElementRef, static: false }]
-            }], name: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], slot: [{
-                type: Input
-            }], button: [{
-                type: Input
-            }], buttonFill: [{
-                type: Input
-            }], buttonShape: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }] } });
-
 /**
  * @description Modal component for displaying dynamic content in a modal dialog.
  * @summary This component provides a flexible and reusable modal dialog implementation
@@ -7038,14 +7093,14 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         const modal = this.modal || modalController;
         await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton" }, 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  [class]=\"'dcf-modal-component ' + className\"\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-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else 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 class=\"dcf-modal-content\" 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{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.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}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{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", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton" }, 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  [class]=\"'dcf-modal-component ' + className\"\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-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else 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 class=\"dcf-modal-content\" 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{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.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}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{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", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { 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(),
     __metadata("design:paramtypes", [])
 ], ModalComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-modal', standalone: true, imports: [
                         IonModal,
@@ -7127,13 +7182,13 @@ let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
             });
         return await this.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ModalConfirmComponent, isStandalone: true, selector: "ngx-decaf-modal-confirm", inputs: { data: "data", role: "role", message: "message", title: "title" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <div>\n\n  <h2 class=\"dcf-title\" [innerHTML]=\"translatable ? (title | translate) : title\"></h2>\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\">\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleAction('cancel')\" color=\"primary\">{{ locale +'.confirm.buttons.cancel' | translate }}</ion-button>\n    </div>\n\n      <div>\n      <ion-button (click)=\"handleAction()\" [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\">{{ locale +'.confirm.buttons.confirm' | translate }}</ion-button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ModalConfirmComponent, isStandalone: true, selector: "ngx-decaf-modal-confirm", inputs: { data: "data", role: "role", message: "message", title: "title" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <div>\n\n  <h2 class=\"dcf-title\" [innerHTML]=\"translatable ? (title | translate) : title\"></h2>\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\">\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleAction('cancel')\" color=\"primary\">{{ locale +'.confirm.buttons.cancel' | translate }}</ion-button>\n    </div>\n\n      <div>\n      <ion-button (click)=\"handleAction()\" [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\">{{ locale +'.confirm.buttons.confirm' | translate }}</ion-button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: TranslatePipe, name: "translate" }] }); }
 };
 ModalConfirmComponent = __decorate([
     Dynamic()
 ], ModalConfirmComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalConfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalConfirmComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-modal-confirm', standalone: true, imports: [TranslatePipe, IonButton], host: { '[attr.id]': 'uid' }, template: " <div>\n\n  <h2 class=\"dcf-title\" [innerHTML]=\"translatable ? (title | translate) : title\"></h2>\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\">\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleAction('cancel')\" color=\"primary\">{{ locale +'.confirm.buttons.cancel' | translate }}</ion-button>\n    </div>\n\n      <div>\n      <ion-button (click)=\"handleAction()\" [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\">{{ locale +'.confirm.buttons.confirm' | translate }}</ion-button>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -7478,8 +7533,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         }
         else {
             this.options = await this.getOptions();
-            if ((!this.parentForm && this.formGroup instanceof FormGroup) ||
-                this.formGroup instanceof FormArray)
+            if ((!this.parentForm && this.formGroup instanceof FormGroup) || this.formGroup instanceof FormArray)
                 this.parentForm = (this.formGroup.root || this.formControl.root);
             if (this.multiple) {
                 this.formGroup = this.activeFormGroup;
@@ -7638,14 +7692,14 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
             return false;
         return this.formControl.value.includes(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", 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", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [attr.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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}. {{ option?.text | translate }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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 ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : 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\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}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.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.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.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: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", 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", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [attr.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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}. {{ option?.text | translate }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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 ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : 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\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}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.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.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.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: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], CrudFieldComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         ReactiveFormsModule,
@@ -8046,10 +8100,10 @@ class NgxFormDirective extends NgxParentComponentDirective {
             return this.activePage;
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", path: "path", multiple: "multiple", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", path: "path", multiple: "multiple", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { parentFormId: [{
                 type: Input
@@ -8215,13 +8269,13 @@ let CardComponent = class CardComponent extends NgxComponentDirective {
         });
         this.initialize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "ngx-decaf-card", inputs: { type: "type", title: "title", body: "body", subtitle: "subtitle", color: "color", separator: "separator", borders: "borders", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition" }, usesInheritance: true, ngImport: i0, template: "<ion-card\n  [class]=\"'dcf-card-component ' + className + ' ' + 'dcf-card-' + body\"\n  [color]=\"color\"\n  mode=\"md\"\n  [class.dcf-card-separator]=\"separator\"\n  [class.dcf-card-shadow]=\"type === 'shadow'\"\n  [class.dcf-card-bordered]=\"borders\"\n  [class.dcf-card-separator]=\"separator\"\n  #component\n>\n  @if (title || subtitle) {\n    <ion-card-header>\n      @if (title) {\n        <ion-card-title>{{\n          locale ? (title | translate) : title\n        }}</ion-card-title>\n      }\n      @if (subtitle) {\n        <ion-card-subtitle>{{\n          locale ? (subtitle | translate) : subtitle\n        }}</ion-card-subtitle>\n      }\n    </ion-card-header>\n  }\n  <ion-card-content>\n    @if (inlineContent && inlineContentPosition === \"top\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n\n    <ng-content slot=\"content\"></ng-content>\n\n    @if (inlineContent && inlineContentPosition === \"bottom\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: [".dcf-card-component{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card-component.dcf-card-shadow{--background: var(--dcf-card-background) !important}.dcf-card-component .dcf-card-component{border-radius:0!important}.dcf-card-component:not(.dcf-card-shadow){box-shadow:none!important}.dcf-card-component:not(.dcf-card-shadow).dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-separator,.dcf-card-component.dcf-card-blank{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-separator>*,.dcf-card-component.dcf-card-blank>*{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-blank:not(.dcf-card-shadow){background:transparent!important}.dcf-card-component.dcf-card-separator{background:transparent!important}.dcf-card-component.dcf-card-separator ion-card-header{padding:unset!important;margin:unset!important}.dcf-card-component.dcf-card-separator ion-card-title{padding:unset!important;margin:unset!important;font-weight:500;font-size:1rem;line-height:1.5rem}.dcf-card-component.dcf-card-separator.dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-small ion-card-header{padding:var(--dcf-padding-xsmall) 0!important}.dcf-card-component.dcf-card-small ion-card-content{padding:var(--dcf-padding-xsmall)!important}.dcf-card-component>*{width:100%!important}.dcf-card-component ion-card-content{padding:var(--dcf-padding)}.dcf-card-component ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card-component ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card-component ion-card-header{padding-left:.2rem!important}.dcf-card-component ion-card-header+ion-card-content{margin-top:var(--dcf-margin-small)}.dcf-card-component.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card-component.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card-component.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card-component.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-small)}.dcf-card-component.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card-component ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card-component ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}.dcf-palette-dark.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-large)!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CardComponent, isStandalone: true, selector: "ngx-decaf-card", inputs: { type: "type", title: "title", body: "body", subtitle: "subtitle", color: "color", separator: "separator", borders: "borders", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition" }, usesInheritance: true, ngImport: i0, template: "<ion-card\n  [class]=\"'dcf-card-component ' + className + ' ' + 'dcf-card-' + body\"\n  [color]=\"color\"\n  mode=\"md\"\n  [class.dcf-card-separator]=\"separator\"\n  [class.dcf-card-shadow]=\"type === 'shadow'\"\n  [class.dcf-card-bordered]=\"borders\"\n  [class.dcf-card-separator]=\"separator\"\n  #component\n>\n  @if (title || subtitle) {\n    <ion-card-header>\n      @if (title) {\n        <ion-card-title>{{\n          locale ? (title | translate) : title\n        }}</ion-card-title>\n      }\n      @if (subtitle) {\n        <ion-card-subtitle>{{\n          locale ? (subtitle | translate) : subtitle\n        }}</ion-card-subtitle>\n      }\n    </ion-card-header>\n  }\n  <ion-card-content>\n    @if (inlineContent && inlineContentPosition === \"top\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n\n    <ng-content slot=\"content\"></ng-content>\n\n    @if (inlineContent && inlineContentPosition === \"bottom\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: [".dcf-card-component{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card-component.dcf-card-shadow{--background: var(--dcf-card-background) !important}.dcf-card-component .dcf-card-component{border-radius:0!important}.dcf-card-component:not(.dcf-card-shadow){box-shadow:none!important}.dcf-card-component:not(.dcf-card-shadow).dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-separator,.dcf-card-component.dcf-card-blank{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-separator>*,.dcf-card-component.dcf-card-blank>*{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-blank:not(.dcf-card-shadow){background:transparent!important}.dcf-card-component.dcf-card-separator{background:transparent!important}.dcf-card-component.dcf-card-separator ion-card-header{padding:unset!important;margin:unset!important}.dcf-card-component.dcf-card-separator ion-card-title{padding:unset!important;margin:unset!important;font-weight:500;font-size:1rem;line-height:1.5rem}.dcf-card-component.dcf-card-separator.dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-small ion-card-header{padding:var(--dcf-padding-xsmall) 0!important}.dcf-card-component.dcf-card-small ion-card-content{padding:var(--dcf-padding-xsmall)!important}.dcf-card-component>*{width:100%!important}.dcf-card-component ion-card-content{padding:var(--dcf-padding)}.dcf-card-component ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card-component ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card-component ion-card-header{padding-left:.2rem!important}.dcf-card-component ion-card-header+ion-card-content{margin-top:var(--dcf-margin-small)}.dcf-card-component.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card-component.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card-component.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card-component.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-small)}.dcf-card-component.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card-component ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card-component ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}.dcf-palette-dark.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-large)!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 };
 CardComponent = __decorate([
     Dynamic()
 ], CardComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-card', imports: [TranslatePipe, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle], standalone: true, encapsulation: ViewEncapsulation.None, template: "<ion-card\n  [class]=\"'dcf-card-component ' + className + ' ' + 'dcf-card-' + body\"\n  [color]=\"color\"\n  mode=\"md\"\n  [class.dcf-card-separator]=\"separator\"\n  [class.dcf-card-shadow]=\"type === 'shadow'\"\n  [class.dcf-card-bordered]=\"borders\"\n  [class.dcf-card-separator]=\"separator\"\n  #component\n>\n  @if (title || subtitle) {\n    <ion-card-header>\n      @if (title) {\n        <ion-card-title>{{\n          locale ? (title | translate) : title\n        }}</ion-card-title>\n      }\n      @if (subtitle) {\n        <ion-card-subtitle>{{\n          locale ? (subtitle | translate) : subtitle\n        }}</ion-card-subtitle>\n      }\n    </ion-card-header>\n  }\n  <ion-card-content>\n    @if (inlineContent && inlineContentPosition === \"top\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n\n    <ng-content slot=\"content\"></ng-content>\n\n    @if (inlineContent && inlineContentPosition === \"bottom\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: [".dcf-card-component{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card-component.dcf-card-shadow{--background: var(--dcf-card-background) !important}.dcf-card-component .dcf-card-component{border-radius:0!important}.dcf-card-component:not(.dcf-card-shadow){box-shadow:none!important}.dcf-card-component:not(.dcf-card-shadow).dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-separator,.dcf-card-component.dcf-card-blank{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-separator>*,.dcf-card-component.dcf-card-blank>*{padding:0!important;margin:0!important}.dcf-card-component.dcf-card-blank:not(.dcf-card-shadow){background:transparent!important}.dcf-card-component.dcf-card-separator{background:transparent!important}.dcf-card-component.dcf-card-separator ion-card-header{padding:unset!important;margin:unset!important}.dcf-card-component.dcf-card-separator ion-card-title{padding:unset!important;margin:unset!important;font-weight:500;font-size:1rem;line-height:1.5rem}.dcf-card-component.dcf-card-separator.dcf-card-bordered{border-color:transparent!important}.dcf-card-component.dcf-card-small ion-card-header{padding:var(--dcf-padding-xsmall) 0!important}.dcf-card-component.dcf-card-small ion-card-content{padding:var(--dcf-padding-xsmall)!important}.dcf-card-component>*{width:100%!important}.dcf-card-component ion-card-content{padding:var(--dcf-padding)}.dcf-card-component ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card-component ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card-component ion-card-header{padding-left:.2rem!important}.dcf-card-component ion-card-header+ion-card-content{margin-top:var(--dcf-margin-small)}.dcf-card-component.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card-component.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card-component.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card-component.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-small)}.dcf-card-component.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card-component ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card-component ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}.dcf-palette-dark.dcf-card-shadow{box-shadow:var(--dcf-box-shadow-large)!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"] }]
         }], propDecorators: { type: [{
@@ -8478,14 +8532,14 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.rows = this._rows;
         await super.initialize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], LayoutComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
@@ -8538,16 +8592,16 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
     handleDelete() {
         super.submitEventEmit(this.model, 'CrudFormComponent', ComponentEventNames.Submit, this.handlers, OperationKeys.DELETE);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div [class.dcf-hidden]=\"!showCancelButton\">\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div\n        class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        @if (!action) {\n          <div [class.dcf-hidden]=\"!showCancelButton\">\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleReset()\"\n            >\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{\n                locale +\n                  '.' +\n                  (allowClear ? options.buttons.clear?.text : 'back')\n                  | translate\n              }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button\n            type=\"submit\"\n            [expand]=\"action ? 'block' : 'default'\"\n          >\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{\n              action\n                ? action\n                : (locale + '.' + options.buttons.submit.text | translate)\n            }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section\n    #component\n    [id]=\"uid\"\n  >\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"\n      'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n      operation\n    \"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\"\n        >\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (\n      operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n    ) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{\n            action\n              ? action\n              : (locale + '.' + options.buttons.submit.text | translate)\n          }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button\n        fill=\"clear\"\n        (click)=\"handleReset()\"\n      >\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [\n            OperationKeys.DELETE,\n            OperationKeys.READ,\n            OperationKeys.UPDATE,\n          ].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], CrudFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div [class.dcf-hidden]=\"!showCancelButton\">\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div\n        class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        @if (!action) {\n          <div [class.dcf-hidden]=\"!showCancelButton\">\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleReset()\"\n            >\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{\n                locale +\n                  '.' +\n                  (allowClear ? options.buttons.clear?.text : 'back')\n                  | translate\n              }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button\n            type=\"submit\"\n            [expand]=\"action ? 'block' : 'default'\"\n          >\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{\n              action\n                ? action\n                : (locale + '.' + options.buttons.submit.text | translate)\n            }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section\n    #component\n    [id]=\"uid\"\n  >\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"\n      'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n      operation\n    \"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\"\n        >\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (\n      operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n    ) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{\n            action\n              ? action\n              : (locale + '.' + options.buttons.submit.text | translate)\n          }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button\n        fill=\"clear\"\n        (click)=\"handleReset()\"\n      >\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [\n            OperationKeys.DELETE,\n            OperationKeys.READ,\n            OperationKeys.UPDATE,\n          ].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: () => [], propDecorators: { showCancelButton: [{
                 type: Input
             }] } });
@@ -8846,14 +8900,14 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
         const result = await this.translate(content, { '0': this.searchValue });
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\" [borders]=\"borders\" [body]=\"body\">\n    @if (refreshing) {\n      <div class=\"dcf-spinner-container\">\n        <ion-spinner color=\"primary\" name=\"circular\" />\n      </div>\n    } @else {\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p\n          [class]=\"isDarkMode ? 'light' : subtitleColor\"\n          [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"\n        ></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\"\n            >\n              {{ buttonText || (locale + '.button_create' | translate) }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\"\n            fill=\"clear\"\n          >\n            {{ buttonText?.length ? buttonText : (locale + '.button_create' | translate) }}\n          </ion-button>\n        </div>\n      }\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}.dcf-spinner-container{padding:var(--dcf-padding)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { 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: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\" [borders]=\"borders\" [body]=\"body\">\n    @if (refreshing) {\n      <div class=\"dcf-spinner-container\">\n        <ion-spinner color=\"primary\" name=\"circular\" />\n      </div>\n    } @else {\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p\n          [class]=\"isDarkMode ? 'light' : subtitleColor\"\n          [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"\n        ></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\"\n            >\n              {{ buttonText || (locale + '.button_create' | translate) }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\"\n            fill=\"clear\"\n          >\n            {{ buttonText?.length ? buttonText : (locale + '.button_create' | translate) }}\n          </ion-button>\n        </div>\n      }\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}.dcf-spinner-container{padding:var(--dcf-padding)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { 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: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], EmptyStateComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [IconComponent, TranslatePipe, IonSpinner, IonButton, CardComponent], template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\" [borders]=\"borders\" [body]=\"body\">\n    @if (refreshing) {\n      <div class=\"dcf-spinner-container\">\n        <ion-spinner color=\"primary\" name=\"circular\" />\n      </div>\n    } @else {\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p\n          [class]=\"isDarkMode ? 'light' : subtitleColor\"\n          [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"\n        ></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\"\n            >\n              {{ buttonText || (locale + '.button_create' | translate) }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\"\n            fill=\"clear\"\n          >\n            {{ buttonText?.length ? buttonText : (locale + '.button_create' | translate) }}\n          </ion-button>\n        </div>\n      }\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}.dcf-spinner-container{padding:var(--dcf-padding)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
@@ -9638,14 +9692,14 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         }
         return this.mapper;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ item.index }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\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-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ item.index }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\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-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], FieldsetComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldsetComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [], imports: [
                         TranslatePipe,
@@ -10129,10 +10183,10 @@ class SearchbarComponent extends NgxComponentDirective {
     preventChange(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dcf-searchbar-component\">\n  <ion-searchbar\n    [id]=\"uid\"\n    ngClass=\"dcf-searchbar\"\n    name=\"search\"\n    mode=\"ios\"\n    (keyup.enter)=\"preventChange($event)\"\n    (ionInput)=\"handleInput($event)\"\n    (ionClear)=\"handleClear()\"\n    [autocomplete]=\"autocomplete\"\n    [showCancelButton]=\"showCancelButton\"\n    [cancelButtonText]=\"buttonCancelText\"\n    [clearIcon]=\"clearIcon\"\n    [color]=\"color\"\n    [debounce]=\"debounce\"\n    [disabled]=\"disabled\"\n    [enterkeyhint]=\"enterkeyhint\"\n    [inputmode]=\"inputmode\"\n    [placeholder]=\"placeholder | translate\"\n    [searchIcon]=\"searchIcon\"\n    [showClearButton]=\"showClearButton\"\n    [spellcheck]=\"spellcheck\"\n    [type]=\"type\"\n    #component\n  />\n\n</div>\n", styles: [".dcf-searchbar-component{margin-top:var(--dcf-margin-small)!important}.dcf-searchbar-component ::ng-deep ion-searchbar{--background: var(--dcf-card-background) !important;--box-shadow: none !important;padding:0!important;margin:0!important}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container{border:1px solid var(--dcf-color-gray-3);box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius)}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container:focus-within{border-color:var(--dcf-color-primary)}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dcf-searchbar-component\">\n  <ion-searchbar\n    [id]=\"uid\"\n    ngClass=\"dcf-searchbar\"\n    name=\"search\"\n    mode=\"ios\"\n    (keyup.enter)=\"preventChange($event)\"\n    (ionInput)=\"handleInput($event)\"\n    (ionClear)=\"handleClear()\"\n    [autocomplete]=\"autocomplete\"\n    [showCancelButton]=\"showCancelButton\"\n    [cancelButtonText]=\"buttonCancelText\"\n    [clearIcon]=\"clearIcon\"\n    [color]=\"color\"\n    [debounce]=\"debounce\"\n    [disabled]=\"disabled\"\n    [enterkeyhint]=\"enterkeyhint\"\n    [inputmode]=\"inputmode\"\n    [placeholder]=\"placeholder | translate\"\n    [searchIcon]=\"searchIcon\"\n    [showClearButton]=\"showClearButton\"\n    [spellcheck]=\"spellcheck\"\n    [type]=\"type\"\n    #component\n  />\n\n</div>\n", styles: [".dcf-searchbar-component{margin-top:var(--dcf-margin-small)!important}.dcf-searchbar-component ::ng-deep ion-searchbar{--background: var(--dcf-card-background) !important;--box-shadow: none !important;padding:0!important;margin:0!important}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container{border:1px solid var(--dcf-color-gray-3);box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius)}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container:focus-within{border-color:var(--dcf-color-primary)}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SearchbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [TranslatePipe, IonSearchbar], template: "<div class=\"dcf-searchbar-component\">\n  <ion-searchbar\n    [id]=\"uid\"\n    ngClass=\"dcf-searchbar\"\n    name=\"search\"\n    mode=\"ios\"\n    (keyup.enter)=\"preventChange($event)\"\n    (ionInput)=\"handleInput($event)\"\n    (ionClear)=\"handleClear()\"\n    [autocomplete]=\"autocomplete\"\n    [showCancelButton]=\"showCancelButton\"\n    [cancelButtonText]=\"buttonCancelText\"\n    [clearIcon]=\"clearIcon\"\n    [color]=\"color\"\n    [debounce]=\"debounce\"\n    [disabled]=\"disabled\"\n    [enterkeyhint]=\"enterkeyhint\"\n    [inputmode]=\"inputmode\"\n    [placeholder]=\"placeholder | translate\"\n    [searchIcon]=\"searchIcon\"\n    [showClearButton]=\"showClearButton\"\n    [spellcheck]=\"spellcheck\"\n    [type]=\"type\"\n    #component\n  />\n\n</div>\n", styles: [".dcf-searchbar-component{margin-top:var(--dcf-margin-small)!important}.dcf-searchbar-component ::ng-deep ion-searchbar{--background: var(--dcf-card-background) !important;--box-shadow: none !important;padding:0!important;margin:0!important}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container{border:1px solid var(--dcf-color-gray-3);box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius)}.dcf-searchbar-component ::ng-deep ion-searchbar .searchbar-input-container:focus-within{border-color:var(--dcf-color-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autocomplete: [{
@@ -10257,14 +10311,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
          * @default []
          * @memberOf FilterComponent
          */
-        this.conditions = [
-            'Equal',
-            'Contains',
-            'Not Contains',
-            'Greater Than',
-            'Less Than',
-            'Not Equal',
-        ];
+        this.conditions = ['Equal', 'Contains', 'Not Contains', 'Greater Than', 'Less Than', 'Not Equal'];
         /**
          * @description Available sorting options for the filtered data.
          * @summary Defines the list of field names that can be used for sorting the filtered results.
@@ -10433,7 +10480,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
             if (event instanceof NavigationStart)
                 await this.ngOnDestroy();
         });
-        this.getIndexes();
+        await this.getSortOptions();
         this.initialize();
     }
     /**
@@ -10445,10 +10492,22 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @returns {void}
      * @memberOf FilterComponent
      */
-    getIndexes() {
+    async getSortOptions() {
         const indexes = super.getIndexes(this.model);
+        const modelName = this.model?.constructor?.name || '';
+        const translate = async (value) => {
+            return (await this.translate(`${modelName ? modelName + '.' : ''}${value}`)).replace(`${modelName}.`, '');
+        };
         if (!this.disableSort) {
-            this.sortOptions = [...this.sortOptions, ...indexes];
+            const options = this.sortOptions.map(async (option) => ({
+                label: await translate(option.value),
+                value: option.value,
+            }));
+            const indexOptions = indexes.map(async (value) => ({
+                label: await translate(value),
+                value,
+            }));
+            this.sortOptions = [...(await Promise.all(options)), ...(await Promise.all(indexOptions))];
             if (this.repository) {
                 const pk = Model.pk(this.repository.class);
                 this.sortValue = pk || this.sortValue;
@@ -10656,7 +10715,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * Only value options can be removed individually; index and condition options are part
      * of the complete filter structure and cannot be removed separately.
      *
-     * @param {string} option - The filter option text to check
+     * @param {FilterCondition} option - The filter option to check
      * @returns {boolean} True if the option can be cleared individually, false otherwise
      * @memberOf FilterComponent
      */
@@ -10852,14 +10911,14 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
     handleSearch(value) {
         this.searchEvent.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { multiple: "multiple", conditions: "conditions", sortOptions: "sortOptions", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: 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: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { multiple: "multiple", conditions: "conditions", sortOptions: "sortOptions", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (\n          filter of filterValue;\n          track trackItemFn($index, filter?.['index'])\n        ) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip\n              [outline]=\"true\"\n              class=\"dcf-filter-value\"\n            >\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{\n              locale + (step === 3 ? '.type' : '.select') | translate\n            }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"\n                'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\n              \"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button\n            fill=\"clear\"\n            size=\"small\"\n            (click)=\"clear()\"\n          >\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button\n          fill=\"clear\"\n          size=\"small\"\n          (click)=\"submit()\"\n        >\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{\n                  step === 2\n                    ? (locale +\n                        '.operators.' +\n                        key.toLowerCase().replace(' ', '_') | translate)\n                    : key\n                }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div\n        class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\"\n      >\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort.value\">\n                {{ sort.label }}\n              </ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"\n              sortDirection === 'desc'\n                ? 'arrow-down-outline'\n                : 'arrow-up-outline'\n            \"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: 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: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], FilterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-filter', imports: [
                         FormsModule,
@@ -10872,7 +10931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonIcon,
                         SearchbarComponent,
                         IconComponent,
-                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
+                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (\n          filter of filterValue;\n          track trackItemFn($index, filter?.['index'])\n        ) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip\n              [outline]=\"true\"\n              class=\"dcf-filter-value\"\n            >\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{\n              locale + (step === 3 ? '.type' : '.select') | translate\n            }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"\n                'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\n              \"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button\n            fill=\"clear\"\n            size=\"small\"\n            (click)=\"clear()\"\n          >\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button\n          fill=\"clear\"\n          size=\"small\"\n          (click)=\"submit()\"\n        >\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{\n                  step === 2\n                    ? (locale +\n                        '.operators.' +\n                        key.toLowerCase().replace(' ', '_') | translate)\n                    : key\n                }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div\n        class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\"\n      >\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort.value\">\n                {{ sort.label }}\n              </ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"\n              sortDirection === 'desc'\n                ? 'arrow-down-outline'\n                : 'arrow-up-outline'\n            \"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
                 args: ['optionsFilterElement', { read: ElementRef, static: false }]
@@ -10958,6 +11017,15 @@ class PaginationComponent extends NgxComponentDirective {
          * @memberOf PaginationComponent
          */
         this.current = 1;
+        /**
+         * @description Determines whether to truncate the displayed pages in the pagination.
+         * @summary If true, the pagination component will display a subset of pages with ellipses to indicate skipped pages. If false, all pages will be displayed.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf PaginationComponent
+         */
+        this.truncatePages = false;
         /**
          * @description Event emitter for pagination navigation events.
          * @summary Emits a custom event when users navigate between pages, either by clicking
@@ -11069,26 +11137,32 @@ class PaginationComponent extends NgxComponentDirective {
                 class: clazz,
             });
         }
-        if (total <= 5) {
+        if (!this.truncatePages) {
             for (let i = 1; i <= total; i++)
                 getPage(i);
         }
         else {
-            // Adiciona os dois primeiros
-            getPage(1);
-            getPage(2);
-            // Adiciona "..." entre os blocos
-            if (current && current > 3)
-                getPage(null, '...');
-            // Adiciona a página atual (se estiver no meio)
-            if (current && current > 2 && current < total - 1)
-                getPage(current);
-            // Adiciona "..." entre os blocos
-            if (current && current < total - 2)
-                getPage(null, '...', 'separator');
-            // Adiciona os dois últimos
-            getPage(total - 1);
-            getPage(total);
+            if (total <= 5) {
+                for (let i = 1; i <= total; i++)
+                    getPage(i);
+            }
+            else {
+                // Adiciona os dois primeiros
+                getPage(1);
+                getPage(2);
+                // Adiciona "..." entre os blocos
+                if (current && current > 3)
+                    getPage(null, '...');
+                // Adiciona a página atual (se estiver no meio)
+                if (current && current > 2 && current < total - 1)
+                    getPage(current);
+                // Adiciona "..." entre os blocos
+                if (current && current < total - 2)
+                    getPage(null, '...', 'separator');
+                // Adiciona os dois últimos
+                getPage(total - 1);
+                getPage(total);
+            }
         }
         return pages;
     }
@@ -11188,12 +11262,12 @@ class PaginationComponent extends NgxComponentDirective {
         if (page !== null && this.current !== page)
             this.handleClick(page > this.current ? 'next' : 'previous', page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\" #component>\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate:{'0': current, '1': last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.dcf-disabled]=\"current === 1\">\n        <ion-icon name=\"chevron-back-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n      @for(page of pages; track page) {\n        <div tabindex=\"0\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.dcf-disabled]=\"current === last\">\n        <ion-icon name=\"chevron-forward-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n      @for (page of pages; track page) {\n        <div\n          tabindex=\"0\"\n          [class]=\"page['class']\"\n          (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\"\n        >\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\" #component>\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate:{'0': current, '1': last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.dcf-disabled]=\"current === 1\">\n        <ion-icon name=\"chevron-back-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n      @for(page of pages; track page) {\n        <div tabindex=\"0\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.dcf-disabled]=\"current === last\">\n        <ion-icon name=\"chevron-forward-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"] }]
+            args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n      @for (page of pages; track page) {\n        <div\n          tabindex=\"0\"\n          [class]=\"page['class']\"\n          (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\"\n        >\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { totalPages: [{
                 type: Input,
                 args: [{ required: true }]
@@ -12374,14 +12448,14 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .map((item) => `${item.index} ${item.condition} ${item.value}`)
             .join(', ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { 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: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { 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: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { 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: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { 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: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], ListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-list', standalone: true, imports: [
                         TranslatePipe,
@@ -12807,14 +12881,14 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
         this.actionMenuComponent.event = event;
         this.actionMenuOpen = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo", emitEvent: "emitEvent" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"\n        operations?.includes(OperationKeys.READ)\n          ? handleAction($event, OperationKeys.READ, component)\n          : ''\n      \"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\" />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                  <span [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\"></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if (\n              (operations?.includes(OperationKeys.DELETE) ||\n                operations?.includes(OperationKeys.UPDATE)) &&\n              uid\n            ) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if (actionsType === 'popover') {\n                  <ion-button\n                    shape=\"round\"\n                    fill=\"clear\"\n                    color=\"primary\"\n                    (click)=\"presentActionsMenu($event)\"\n                    [attr.aria-label]=\"locale + '.actions' | translate\"\n                  >\n                    <ion-icon\n                      slot=\"icon-only\"\n                      aria-hidden=\"true\"\n                      name=\"ellipsis-vertical-outline\"\n                    />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\"\n                  >\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4\n                              class=\"dcf-text-capitalize\"\n                              [innerHTML]=\"'actions' | translate\"\n                            ></h4>\n                          </ion-list-header>\n                          @for (\n                            operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                            track operation\n                          ) {\n                            @if (operations?.includes(operation)) {\n                              <ion-item\n                                [button]=\"true\"\n                                (click)=\"handleAction($event, operation, component)\"\n                              >\n                                <div slot=\"start\">\n                                  @if (operation === OperationKeys.UPDATE) {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      name=\"ti-edit\"\n                                    />\n                                  } @else {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      color=\"danger\"\n                                      name=\"ti-trash\"\n                                    />\n                                  }\n                                </div>\n                                <ion-label class=\"dcf-text-capitalize\">\n                                  {{ operation | translate }}\n                                </ion-label>\n                              </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex\">\n                    @for (\n                      operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                      track operation\n                    ) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction($event, operation, component)\"\n                            fill=\"clear\"\n                            shape=\"round\"\n                            [attr.aria-label]=\"locale + '.operations.' + operation | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options\n        side=\"end\"\n        (ionSwipe)=\"operations.length === 1 ? handleAction($event, operations[0], component) : ''\"\n      >\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option\n            class=\"dcf-update\"\n            (click)=\"handleAction($event, OperationKeys.UPDATE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n          <ion-item-option\n            class=\"dcf-delete\"\n            (click)=\"handleAction($event, OperationKeys.DELETE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "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: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo", emitEvent: "emitEvent" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"\n        operations?.includes(OperationKeys.READ)\n          ? handleAction($event, OperationKeys.READ, component)\n          : ''\n      \"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\" />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                  <span [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\"></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if (\n              (operations?.includes(OperationKeys.DELETE) ||\n                operations?.includes(OperationKeys.UPDATE)) &&\n              uid\n            ) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if (actionsType === 'popover') {\n                  <ion-button\n                    shape=\"round\"\n                    fill=\"clear\"\n                    color=\"primary\"\n                    (click)=\"presentActionsMenu($event)\"\n                    [attr.aria-label]=\"locale + '.actions' | translate\"\n                  >\n                    <ion-icon\n                      slot=\"icon-only\"\n                      aria-hidden=\"true\"\n                      name=\"ellipsis-vertical-outline\"\n                    />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\"\n                  >\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4\n                              class=\"dcf-text-capitalize\"\n                              [innerHTML]=\"'actions' | translate\"\n                            ></h4>\n                          </ion-list-header>\n                          @for (\n                            operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                            track operation\n                          ) {\n                            @if (operations?.includes(operation)) {\n                              <ion-item\n                                [button]=\"true\"\n                                (click)=\"handleAction($event, operation, component)\"\n                              >\n                                <div slot=\"start\">\n                                  @if (operation === OperationKeys.UPDATE) {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      name=\"ti-edit\"\n                                    />\n                                  } @else {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      color=\"danger\"\n                                      name=\"ti-trash\"\n                                    />\n                                  }\n                                </div>\n                                <ion-label class=\"dcf-text-capitalize\">\n                                  {{ operation | translate }}\n                                </ion-label>\n                              </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex\">\n                    @for (\n                      operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                      track operation\n                    ) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction($event, operation, component)\"\n                            fill=\"clear\"\n                            shape=\"round\"\n                            [attr.aria-label]=\"locale + '.operations.' + operation | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options\n        side=\"end\"\n        (ionSwipe)=\"operations.length === 1 ? handleAction($event, operations[0], component) : ''\"\n      >\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option\n            class=\"dcf-update\"\n            (click)=\"handleAction($event, OperationKeys.UPDATE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n          <ion-item-option\n            class=\"dcf-delete\"\n            (click)=\"handleAction($event, OperationKeys.DELETE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "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: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], ListItemComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-list-item', standalone: true, imports: [
                         TranslatePipe,
@@ -13146,14 +13220,14 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
         this.activeIndex = this.activeIndex - 1;
         this.getActivePage(this.activeIndex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form\n  class=\"dcf-steped-form\"\n  [class.paginated]=\"paginated\"\n  novalidate\n  #component\n>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for (page of pageTitles; track $index) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div\n              class=\"dcf-step\"\n              [class.dcf-active]=\"activeIndex === $index + 1\"\n              [class.dcf-passed]=\"$index + 1 < activeIndex\"\n            >\n              {{ $index + 1 }}\n            </div>\n            @if (page?.title || page?.description) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">\n                    {{ page?.description | translate }}\n                  </div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg\n                  width=\"8\"\n                  height=\"12\"\n                  viewBox=\"0 0 8 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (\n      pageTitles[activeIndex - 1]?.title ||\n      pageTitles[activeIndex - 1]?.description\n    ) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">\n              {{ pageTitles[activeIndex - 1]?.title | translate }}\n            </div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">\n              {{ pageTitles[activeIndex - 1]?.description | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activePage?.length) {\n      <ngx-decaf-layout\n        [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n        [children]=\"activePage || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [match]=\"false\"\n        [cardBody]=\"cardBody\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType\"\n        [rows]=\"rows\"\n        [cols]=\"cols\"\n        [match]=\"false\"\n      />\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%\"\n        ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n      ></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%\"\n        ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n      ></ion-text>\n    }\n    <div\n      class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n    >\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">{{ locale + \".previous\" | translate }}</ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\" (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{ locale + \".submit\" | translate }}\n          } @else {\n            {{ locale + \".next\" | translate }}\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ngx-decaf-card\n          [className]=\"className\"\n          [body]=\"cardBody\"\n          [type]=\"cardType\"\n        >\n          <div>\n            @if (item.title || item.description) {\n              <div class=\"dcf-information\">\n                <div>\n                  @if (item.title) {\n                    <div class=\"dcf-title\">{{ item.title | translate }}</div>\n                  }\n                  @if (item.description) {\n                    <div class=\"dcf-description\">\n                      {{ item.description | translate }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n              @if (initialized && item.items?.length) {\n                <ngx-decaf-layout\n                  [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                  [children]=\"item.items || []\"\n                  [parentForm]=\"formGroup || parentForm\"\n                  [flexMode]=\"props.flexMode || false\"\n                  [gap]=\"'small'\"\n                  [cardBody]=\"cardBody\"\n                  [cardType]=\"cardType\"\n                  [rows]=\"rows\"\n                  [cols]=\"cols\"\n                  [match]=\"false\"\n                />\n              }\n            </div>\n          </div>\n        </ngx-decaf-card>\n      }\n      <div\n        class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button color=\"light\" (click)=\"handleBack()\">\n            {{ locale + \".cancel\" | translate }}\n          </ion-button>\n        </div>\n\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button fill=\"solid\" (click)=\"handleNext(true)\">\n            {{ locale + \".submit\" | translate }}\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\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: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form\n  class=\"dcf-steped-form\"\n  [class.paginated]=\"paginated\"\n  novalidate\n  #component\n>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for (page of pageTitles; track $index) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div\n              class=\"dcf-step\"\n              [class.dcf-active]=\"activeIndex === $index + 1\"\n              [class.dcf-passed]=\"$index + 1 < activeIndex\"\n            >\n              {{ $index + 1 }}\n            </div>\n            @if (page?.title || page?.description) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">\n                    {{ page?.description | translate }}\n                  </div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg\n                  width=\"8\"\n                  height=\"12\"\n                  viewBox=\"0 0 8 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (\n      pageTitles[activeIndex - 1]?.title ||\n      pageTitles[activeIndex - 1]?.description\n    ) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">\n              {{ pageTitles[activeIndex - 1]?.title | translate }}\n            </div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">\n              {{ pageTitles[activeIndex - 1]?.description | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activePage?.length) {\n      <ngx-decaf-layout\n        [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n        [children]=\"activePage || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [match]=\"false\"\n        [cardBody]=\"cardBody\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType\"\n        [rows]=\"rows\"\n        [cols]=\"cols\"\n        [match]=\"false\"\n      />\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%\"\n        ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n      ></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%\"\n        ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n      ></ion-text>\n    }\n    <div\n      class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n    >\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">{{ locale + \".previous\" | translate }}</ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\" (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{ locale + \".submit\" | translate }}\n          } @else {\n            {{ locale + \".next\" | translate }}\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ngx-decaf-card\n          [className]=\"className\"\n          [body]=\"cardBody\"\n          [type]=\"cardType\"\n        >\n          <div>\n            @if (item.title || item.description) {\n              <div class=\"dcf-information\">\n                <div>\n                  @if (item.title) {\n                    <div class=\"dcf-title\">{{ item.title | translate }}</div>\n                  }\n                  @if (item.description) {\n                    <div class=\"dcf-description\">\n                      {{ item.description | translate }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n              @if (initialized && item.items?.length) {\n                <ngx-decaf-layout\n                  [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                  [children]=\"item.items || []\"\n                  [parentForm]=\"formGroup || parentForm\"\n                  [flexMode]=\"props.flexMode || false\"\n                  [gap]=\"'small'\"\n                  [cardBody]=\"cardBody\"\n                  [cardType]=\"cardType\"\n                  [rows]=\"rows\"\n                  [cols]=\"cols\"\n                  [match]=\"false\"\n                />\n              }\n            </div>\n          </div>\n        </ngx-decaf-card>\n      }\n      <div\n        class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button color=\"light\" (click)=\"handleBack()\">\n            {{ locale + \".cancel\" | translate }}\n          </ion-button>\n        </div>\n\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button fill=\"solid\" (click)=\"handleNext(true)\">\n            {{ locale + \".submit\" | translate }}\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\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: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SteppedFormComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], SteppedFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SteppedFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SteppedFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-stepped-form', imports: [
                         TranslatePipe,
@@ -13765,14 +13839,14 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
             reader.readAsDataURL(file);
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", valueType: "valueType", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize", subType: "subType" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"decaf-file-component\"\n  #component\n>\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\n    [className]=\"className\"\n    [body]=\"'blank'\"\n  >\n    @if (['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area ' +\n            ' dcf-' +\n            size +\n            ' dcf-flex dcf-flex-' +\n            position +\n            ' dcf-text-' +\n            position\n          \"\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n          (dragover)=\"\n            !files?.length ? handleDragOver($event) : (dragging = false)\n          \"\n          (dragleave)=\"\n            !files?.length ? handleDragLeave($event) : (dragging = false)\n          \"\n        >\n          <div>\n            @if (!previewFile) {\n              @if (showIcon) {\n                <ngx-decaf-icon\n                  name=\"cloud-upload-outline\"\n                  size=\"large\"\n                />\n              }\n              <p class=\"dcf-drag-description\">\n                {{\n                  label\n                    ? (label | translate)\n                    : (locale + '.drag_file' | translate)\n                }}\n              </p>\n              <ion-button\n                class=\"dcf-button-select\"\n                (click)=\"handleClickToSelect()\"\n                size=\"small\"\n              >\n                {{\n                  buttonLabel\n                    ? (buttonLabel | translate)\n                    : (locale +\n                        (enableDirectoryMode\n                          ? '.buttons.select_directory'\n                          : '.buttons.select') | translate)\n                }}\n              </ion-button>\n              <div #container>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </div>\n            } @else {\n              @if (!directoryMode && !multiple) {\n                <div\n                  class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n                >\n                  <div\n                    class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n                  >\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\n                          (click)=\"preview(previewFile)\"\n                          fill=\"clear\"\n                          color=\"light\"\n                          size=\"small\"\n                        >\n                          {{ locale + '.buttons.preview' | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n                  >\n                    <div>\n                      <p class=\"dcf-title\">\n                        {{ locale + '.preview' | translate }}\n                      </p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button\n                        (click)=\"handleClear()\"\n                        fill=\"clear\"\n                        color=\"danger\"\n                        size=\"small\"\n                      >\n                        {{ locale + '.buttons.clear' | translate }}\n                      </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 />\n                    <span class=\"dcf-error-message\">\n                      {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n                    </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\n                        lines=\"full\"\n                        class=\"dcf-error-item\"\n                      >\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div\n                          class=\"dcf-error-message\"\n                          slot=\"end\"\n                        >\n                          {{\n                            locale + '.errors.' + file.error\n                              | translate\n                                : {\n                                    '0':\n                                      file.error === 'max_size'\n                                        ? maxFileSize / 1024 / 1024\n                                        : file.name.split('.'),\n                                  }\n                          }}\n                        </div>\n                        <ion-note slot=\"end\">\n                          {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n                        </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\">\n                          {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n                        </ion-note>\n                        <div\n                          class=\"dcf-flex dcf-flex-middle\"\n                          slot=\"end\"\n                        >\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            (click)=\"preview(file?.source || file, file.type)\"\n                            [name]=\"\n                              file.type.includes('image')\n                                ? 'image-outline'\n                                : 'document-text-outline'\n                            \"\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]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n        <ion-label [class]=\"operation ?? 'read'\">\n          {{ label | translate }}\n        </ion-label>\n        @if (!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if (files?.length === 1 && isImageFile(files[0])) {\n            <div\n              class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\"\n            >\n              <div\n                class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n              >\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\n                      (click)=\"preview(previewFile)\"\n                      fill=\"clear\"\n                      color=\"light\"\n                      size=\"small\"\n                    >\n                      {{ locale + '.buttons.preview' | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n              >\n                <div>\n                  <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\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\n                    class=\"dcf-flex dcf-flex-middle\"\n                    slot=\"end\"\n                  >\n                    <ngx-decaf-icon\n                      [button]=\"true\"\n                      [slot]=\"'icon-only'\"\n                      (click)=\"preview(file.source, file.type)\"\n                      [name]=\"\n                        file.type.includes('image')\n                          ? 'image-outline'\n                          : 'document-text-outline'\n                      \"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.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{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", valueType: "valueType", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize", subType: "subType" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"decaf-file-component\"\n  #component\n>\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\n    [className]=\"className\"\n    [body]=\"'blank'\"\n  >\n    @if (['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area ' +\n            ' dcf-' +\n            size +\n            ' dcf-flex dcf-flex-' +\n            position +\n            ' dcf-text-' +\n            position\n          \"\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n          (dragover)=\"\n            !files?.length ? handleDragOver($event) : (dragging = false)\n          \"\n          (dragleave)=\"\n            !files?.length ? handleDragLeave($event) : (dragging = false)\n          \"\n        >\n          <div>\n            @if (!previewFile) {\n              @if (showIcon) {\n                <ngx-decaf-icon\n                  name=\"cloud-upload-outline\"\n                  size=\"large\"\n                />\n              }\n              <p class=\"dcf-drag-description\">\n                {{\n                  label\n                    ? (label | translate)\n                    : (locale + '.drag_file' | translate)\n                }}\n              </p>\n              <ion-button\n                class=\"dcf-button-select\"\n                (click)=\"handleClickToSelect()\"\n                size=\"small\"\n              >\n                {{\n                  buttonLabel\n                    ? (buttonLabel | translate)\n                    : (locale +\n                        (enableDirectoryMode\n                          ? '.buttons.select_directory'\n                          : '.buttons.select') | translate)\n                }}\n              </ion-button>\n              <div #container>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </div>\n            } @else {\n              @if (!directoryMode && !multiple) {\n                <div\n                  class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n                >\n                  <div\n                    class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n                  >\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\n                          (click)=\"preview(previewFile)\"\n                          fill=\"clear\"\n                          color=\"light\"\n                          size=\"small\"\n                        >\n                          {{ locale + '.buttons.preview' | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n                  >\n                    <div>\n                      <p class=\"dcf-title\">\n                        {{ locale + '.preview' | translate }}\n                      </p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button\n                        (click)=\"handleClear()\"\n                        fill=\"clear\"\n                        color=\"danger\"\n                        size=\"small\"\n                      >\n                        {{ locale + '.buttons.clear' | translate }}\n                      </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 />\n                    <span class=\"dcf-error-message\">\n                      {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n                    </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\n                        lines=\"full\"\n                        class=\"dcf-error-item\"\n                      >\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div\n                          class=\"dcf-error-message\"\n                          slot=\"end\"\n                        >\n                          {{\n                            locale + '.errors.' + file.error\n                              | translate\n                                : {\n                                    '0':\n                                      file.error === 'max_size'\n                                        ? maxFileSize / 1024 / 1024\n                                        : file.name.split('.'),\n                                  }\n                          }}\n                        </div>\n                        <ion-note slot=\"end\">\n                          {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n                        </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\">\n                          {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n                        </ion-note>\n                        <div\n                          class=\"dcf-flex dcf-flex-middle\"\n                          slot=\"end\"\n                        >\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            (click)=\"preview(file?.source || file, file.type)\"\n                            [name]=\"\n                              file.type.includes('image')\n                                ? 'image-outline'\n                                : 'document-text-outline'\n                            \"\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]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n        <ion-label [class]=\"operation ?? 'read'\">\n          {{ label | translate }}\n        </ion-label>\n        @if (!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if (files?.length === 1 && isImageFile(files[0])) {\n            <div\n              class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\"\n            >\n              <div\n                class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n              >\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\n                      (click)=\"preview(previewFile)\"\n                      fill=\"clear\"\n                      color=\"light\"\n                      size=\"small\"\n                    >\n                      {{ locale + '.buttons.preview' | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n              >\n                <div>\n                  <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\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\n                    class=\"dcf-flex dcf-flex-middle\"\n                    slot=\"end\"\n                  >\n                    <ngx-decaf-icon\n                      [button]=\"true\"\n                      [slot]=\"'icon-only'\"\n                      (click)=\"preview(file.source, file.type)\"\n                      [name]=\"\n                        file.type.includes('image')\n                          ? 'image-outline'\n                          : 'document-text-outline'\n                      \"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.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{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.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(),
     __metadata("design:paramtypes", [])
 ], FileUploadComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [
                         CommonModule,
@@ -14166,10 +14240,10 @@ class NgxRouterService {
             return await this.navController.navigateForward(page, options);
         return await this.navController.navigateBack(page, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRouterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRouterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxRouterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -14394,13 +14468,13 @@ let TableComponent = class TableComponent extends ListComponent {
             await this.clearSearch();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
 ], TableComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-table', standalone: true, imports: [
                         CommonModule,
@@ -14455,8 +14529,8 @@ const Components = [
     TableComponent
 ];
 class ForAngularComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ForAngularComponentsModule, imports: [ModelRendererComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: ForAngularComponentsModule, imports: [ModelRendererComponent,
             ComponentRendererComponent,
             CrudFieldComponent,
             CrudFormComponent,
@@ -14491,7 +14565,7 @@ class ForAngularComponentsModule {
             CardComponent,
             FileUploadComponent,
             TableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
             CrudFormComponent,
             EmptyStateComponent,
             ListComponent,
@@ -14508,7 +14582,7 @@ class ForAngularComponentsModule {
             FileUploadComponent,
             TableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...Components],
@@ -14653,8 +14727,8 @@ class ForAngularCommonModule {
             ngModule: ForAngularCommonModule,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -14663,7 +14737,7 @@ class ForAngularCommonModule {
             ReactiveFormsModule,
             TranslateModule,
             TranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -14672,7 +14746,7 @@ class ForAngularCommonModule {
             ReactiveFormsModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForAngularCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ForAngularCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: CommonModules,
@@ -14704,5 +14778,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTranslatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map