@decaf-ts/for-angular 0.0.17 → 0.0.18

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

@@ -1,6 +1,6 @@
 import { UIKeys, parseValueByType, HTML5InputTypes, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, isDevMode, reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, ElementRef, HostListener, Inject, Injector, Directive, ChangeDetectorRef, Renderer2 } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, isDevMode, reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, InjectionToken, ElementRef, HostListener, Inject, Injector, Directive, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, ComparisonValidationKeys, PathProxyEngine, Primitives, ModelKeys, isValidDate as isValidDate$1, parseDate, sf, Model } from '@decaf-ts/decorator-validation';
 import { OperationKeys, InternalError } from '@decaf-ts/db-decorators';
 import * as i2$1 from '@angular/forms';
@@ -9,7 +9,7 @@ import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
 import * as i2 from '@angular/common';
 import { CommonModule, Location, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@ionic/angular/standalone';
-import { IonApp, IonRouterOutlet, IonSplitPane, IonImg, IonText, IonTitle, IonButton, IonRouterLink, IonContent, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonIcon, NavController, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonLoading } from '@ionic/angular/standalone';
+import { IonApp, IonRouterOutlet, IonSplitPane, IonImg, IonText, IonTitle, IonButton, IonRouterLink, IonContent, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonIcon, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonLoading } from '@ionic/angular/standalone';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Logging } from '@decaf-ts/logging';
@@ -18,11 +18,14 @@ import { apply, metadata } from '@decaf-ts/reflection';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { forkJoin, fromEvent, debounceTime, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { RamAdapter } from '@decaf-ts/core/ram';
 import { DomSanitizer } from '@angular/platform-browser';
-import { fromEvent, debounceTime, Subject } from 'rxjs';
-import { NavController as NavController$1 } from '@ionic/angular';
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
 
 /**
  * @description Angular engine key constants
@@ -587,20 +590,16 @@ function isNotUndefined(prop) {
  * @memberOf module:for-angular
  */
 function getLocaleFromClassName(instance, suffix) {
-    if (typeof instance !== 'string')
-        instance =
-            instance.name || instance?.constructor?.name;
+    if (typeof instance !== Primitives.STRING)
+        instance = instance.name || instance?.constructor?.name;
     let name = instance;
     if (suffix)
         name = `${instance}${suffix.charAt(0).toUpperCase() + suffix.slice(1)}`;
-    name = name
-        .replace(/_|-/g, '')
-        .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
+    name = name.replace(/_|-/g, '').replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
         if (index > 1)
             word = '.' + word;
         return word.toLowerCase();
-    })
-        .split('.');
+    }).split('.');
     if (name.length < 3)
         return name.reverse().join('.');
     const preffix = name[name.length - 1];
@@ -608,27 +607,6 @@ function getLocaleFromClassName(instance, suffix) {
     name = name.join('_');
     return `${preffix}.${name}`;
 }
-/**
- * @description Generates a localized string by combining locale and phrase
- * @summary This utility function creates a properly formatted locale string by combining
- * a locale identifier with a phrase. It handles edge cases such as empty phrases,
- * missing locales, and phrases that already include the locale prefix. This function
- * is useful for ensuring consistent formatting of localized strings throughout the application.
- *
- * @param {string} locale - The locale identifier (e.g., 'en', 'fr')
- * @param {string | undefined} phrase - The phrase to localize
- * @return {string} The formatted locale string, or empty string if phrase is undefined
- *
- * @function generateLocaleFromString
- * @memberOf module:for-angular
- */
-function generateLocaleFromString(locale, phrase) {
-    if (!phrase)
-        return '';
-    if (!locale || phrase.includes(`${locale}.`))
-        return phrase;
-    return `${locale}.${phrase}`;
-}
 /**
  * @description Retrieves the current locale language
  * @summary This utility function gets the current locale language based on the user's browser settings.
@@ -799,20 +777,62 @@ function dataMapper(data, mapper, props) {
         const item = itemMapper(curr, mapper, props);
         const hasValues = [...new Set(Object.values(item))].filter((value) => value).length >
             0;
-        // caso o item filtrado não possua nenhum valor, passar o objeto original
         accum.push(hasValues ? item : curr);
         return accum;
     }, []);
 }
+/**
+ * @description Removes focus from the currently active DOM element
+ * @summary This utility function blurs the currently focused element in the document,
+ * effectively removing focus traps that might prevent proper navigation or keyboard
+ * interaction. It safely accesses the document's activeElement and calls blur() if
+ * an element is currently focused. This is useful for accessibility and user experience
+ * improvements, particularly when closing modals or dialogs.
+ *
+ * @return {void}
+ *
+ * @function removeFocusTrap
+ * @memberOf module:for-angular
+ */
 function removeFocusTrap() {
     const doc = getWindowDocument();
     if (doc?.activeElement)
         doc.activeElement?.blur();
 }
-function cleanSpaces(value, lowercase = false) {
+/**
+ * @description Cleans and normalizes whitespace in a string value
+ * @summary This utility function trims leading and trailing whitespace from a string
+ * and replaces multiple consecutive whitespace characters with a single space.
+ * Optionally converts the result to lowercase for consistent text processing.
+ * This is useful for normalizing user input, search terms, or data sanitization.
+ *
+ * @param {string} value - The string value to clean and normalize
+ * @param {boolean} [lowercase=false] - Whether to convert the result to lowercase
+ * @return {string} The cleaned and normalized string
+ *
+ * @function cleanSpaces
+ * @memberOf module:for-angular
+ */
+function cleanSpaces(value = "", lowercase = false) {
     value = `${value}`.trim().replace(/\s+/g, ' ');
     return lowercase ? value.toLowerCase() : value;
 }
+/**
+ * @description Determines if the user's system is currently in dark mode
+ * @summary This function checks the user's color scheme preference using the CSS media query
+ * '(prefers-color-scheme: dark)'. It returns a boolean indicating whether the system is
+ * currently set to dark mode. This is useful for implementing theme-aware functionality
+ * and adjusting UI elements based on the user's preferred color scheme.
+ *
+ * @return {Promise<boolean>} True if the system is in dark mode, false otherwise
+ *
+ * @function isDarkMode
+ * @memberOf module:for-angular
+ */
+async function isDarkMode() {
+    const { matches } = getWindow().matchMedia('(prefers-color-scheme: dark)');
+    return matches;
+}
 
 /**
  * @module helpers
@@ -1381,11 +1401,27 @@ class NgxFormService {
  *   Engine-->>Client: return AngularDynamicOutput
  */
 class NgxRenderingEngine extends RenderingEngine {
+    /**
+     * @description Current operation context for component visibility control
+     * @summary Static property that stores the current operation being performed,
+     * which is used to determine component visibility through the 'hidden' property.
+     * Components can specify operations where they should be hidden, and this property
+     * provides the context for those visibility checks. The value is typically extracted
+     * from the global properties during the rendering process.
+     *
+     * @private
+     * @static
+     * @type {string | undefined}
+     */
     static { this._operation = undefined; }
     /**
-     * @description Creates a new instance of NgxRenderingEngine
-     * @summary Initializes the rendering engine with the 'angular' engine type.
-     * This constructor sets up the base configuration needed for Angular-specific rendering.
+     * @description Constructs a new NgxRenderingEngine instance
+     * @summary Initializes a new instance of the Angular rendering engine by calling the parent
+     * constructor with the 'angular' engine type identifier. This constructor sets up the base
+     * rendering engine functionality with Angular-specific configurations and prepares the
+     * instance for component registration and rendering operations.
+     *
+     * @constructor
      */
     constructor() {
         super('angular');
@@ -2159,6 +2195,83 @@ function Dynamic() {
     }, metadata(NgxRenderingEngine.key(AngularEngineKeys.DYNAMIC), true));
 }
 
+class I18nLoader {
+    static loadFromHttp(http) {
+        function getSuffix() {
+            const today = new Date();
+            return `.json?version=${today.getFullYear()}${today.getMonth()}${today.getDay()}`;
+        }
+        return new (class extends TranslateHttpLoader {
+            getTranslation(lang) {
+                const res = super.getTranslation(lang);
+                return res;
+            }
+        })(http, './assets/i18n/', getSuffix());
+    }
+}
+function getLocaleContext(clazz, suffix) {
+    return getLocaleFromClassName(clazz, suffix);
+}
+/**
+ * @description Generates a localized string by combining locale and phrase
+ * @summary This utility function creates a properly formatted locale string by combining
+ * a locale identifier with a phrase. It handles edge cases such as empty phrases,
+ * missing locales, and phrases that already include the locale prefix. This function
+ * is useful for ensuring consistent formatting of localized strings throughout the application.
+ *
+ * @param {string} locale - The locale identifier (e.g., 'en', 'fr')
+ * @param {string | undefined} phrase - The phrase to localize
+ * @return {string} The formatted locale string, or empty string if phrase is undefined
+ *
+ * @function generateLocaleFromString
+ * @memberOf module:for-angular
+ */
+function getLocaleContextByKey(locale, phrase) {
+    if (!phrase)
+        return locale;
+    if (!locale || phrase.includes(`${locale}.`))
+        return phrase;
+    const parts = phrase.split(' ');
+    return `${locale}.${cleanSpaces(parts.join('.'), true)}`;
+}
+const I18N_CONFIG_TOKEN = new InjectionToken('I18N_CONFIG_TOKEN');
+function I18nLoaderFactory(http) {
+    const { resources, versionedSuffix } = inject(I18N_CONFIG_TOKEN, { optional: true }) ?? getI18nLoaderFactoryProviderConfig().useValue;
+    return new MultiI18nLoader(http, resources, versionedSuffix);
+}
+function getI18nLoaderFactoryProviderConfig(resources = [], versionedSuffix = false) {
+    if (!Array.isArray(resources))
+        resources = [resources];
+    return {
+        provide: I18N_CONFIG_TOKEN,
+        useValue: { resources: [
+                { prefix: './assets/i18n/', suffix: '.json' },
+                ...resources
+            ], versionedSuffix }
+    };
+}
+class MultiI18nLoader {
+    constructor(http, resources = [], versionedSuffix = false) {
+        this.http = http;
+        this.resources = resources;
+        this.versionedSuffix = versionedSuffix;
+    }
+    getSuffix(suffix) {
+        if (!this.versionedSuffix)
+            return suffix;
+        const today = new Date();
+        return `${suffix}?version=${today.getFullYear()}${today.getMonth()}${today.getDay()}`;
+    }
+    getTranslation(lang) {
+        const requests = this.resources.map(config => this.http.get(`${config.prefix}${lang}${this.getSuffix(config.suffix)}`));
+        return forkJoin(requests).pipe(map(responseArray => {
+            return responseArray.reduce((acc, current) => {
+                return { ...acc, ...current };
+            }, {});
+        }));
+    }
+}
+
 /**
  * @description A dynamic form field component for CRUD operations.
  * @summary The CrudFieldComponent is a versatile form field component that adapts to different
@@ -2358,6 +2471,23 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
             ? formGroup.parent?.at(this.activeFormGroup)
             : formGroup;
     }
+    /**
+     * Returns a list of options for select or radio inputs, with their `text` property
+     * localized if it does not already include the word 'options'. The localization key
+     * is generated from the component's label, replacing 'label' with 'options'.
+     *
+     * @returns {CrudFieldOption[]} The array of parsed and localized options.
+     * @memberOf CrudFieldComponent
+     */
+    get parsedOptions() {
+        return this.options.map((option) => {
+            return {
+                ...option,
+                text: !option.text.includes('options') ?
+                    getLocaleContextByKey(`${this.label.toLowerCase().replace('label', 'options')}`, option.text) : option.text
+            };
+        });
+    }
     /**
      * @description Component initialization lifecycle method.
      * @summary Initializes the field component based on the operation type and field configuration.
@@ -2369,6 +2499,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
      * @memberOf CrudFieldComponent
      */
     ngOnInit() {
+        if (this.options?.length)
+            this.options = this.parsedOptions;
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
             this.formGroup = undefined;
         }
@@ -2492,7 +2624,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
         component.dispatchEvent(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600;color:var(--dcf-color-gray-7)}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important;color:var(--dcf-color-gray-5)}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--dcf-color-primary);--background-activated-opacity: .15;--background-focused: var(--dcf-color-primary);--background-focused-opacity: .15;--border-color: var(--dcf-color-gray-2)}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--dcf-color-primary);padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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"] }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
@@ -2512,7 +2644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonText,
                         IonTextarea,
                         IonIcon
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600;color:var(--dcf-color-gray-7)}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important;color:var(--dcf-color-gray-5)}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--dcf-color-primary);--background-activated-opacity: .15;--background-focused: var(--dcf-color-primary);--background-focused-opacity: .15;--border-color: var(--dcf-color-gray-2)}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--dcf-color-primary);padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2735,7 +2867,7 @@ class NgxBaseComponent {
      *   A->>C: new Component(instance)
      *   C->>B: super(instance)
      *   B->>B: Set componentName = instance
-     *   B->>U: getLocaleFromClassName(instance)
+     *   B->>U: getLocaleContext(instance)
      *   U-->>B: Return derived locale
      *   B->>B: Set componentLocale
      *   B->>L: getLogger(this)
@@ -2745,7 +2877,7 @@ class NgxBaseComponent {
      * @memberOf NgxBaseComponent
      */
     // eslint-disable-next-line @angular-eslint/prefer-inject
-    constructor(instance, icons = {}) {
+    constructor(instance) {
         this.instance = instance;
         /**
          * @description Dynamic properties configuration object.
@@ -2870,10 +3002,8 @@ class NgxBaseComponent {
          * @type {NgxRenderingEngine}
          */
         this.renderingEngine = NgxRenderingEngine.get();
-        if (Object.keys(icons).length)
-            addIcons(icons);
         this.componentName = instance;
-        this.componentLocale = getLocaleFromClassName(instance);
+        this.componentLocale = getLocaleContext(instance);
         this.logger = getLogger(this);
         this.getLocale(this.translatable);
         this.uid = generateRandomValue(12);
@@ -2915,47 +3045,6 @@ class NgxBaseComponent {
         }
         return this._repository;
     }
-    /**
-     * @description Parses and applies properties from the props object to the component instance.
-     * @summary This method iterates through the properties of the provided instance object
-     * and applies any matching properties from the component's props configuration to the
-     * component instance. This allows for dynamic property assignment based on configuration
-     * stored in the props object, enabling flexible component customization without requiring
-     * explicit property binding for every possible configuration option.
-     *
-     * The method performs a safe property assignment by checking if each key from the instance
-     * exists in the props object before applying it. This prevents accidental property
-     * overwriting and ensures only intended properties are modified.
-     *
-     * @param {KeyValue} instance - The component instance object to process
-     * @return {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as Component
-     *   participant B as NgxBaseComponent
-     *   participant P as Props Object
-     *
-     *   C->>B: parseProps(instance)
-     *   B->>B: Get Object.keys(instance)
-     *   loop For each key in instance
-     *     B->>P: Check if key exists in this.props
-     *     alt Key exists in props
-     *       B->>B: Set this[key] = this.props[key]
-     *     else Key not in props
-     *       Note over B: Skip this key
-     *     end
-     *   end
-     *
-     * @protected
-     * @memberOf NgxBaseComponent
-     */
-    parseProps(instance) {
-        Object.keys(instance).forEach((key) => {
-            if (Object.keys(this.props).includes(key))
-                this[key] = this.props[key];
-        });
-    }
     /**
      * @description Handles changes to component inputs
      * @summary This Angular lifecycle hook is called when input properties change.
@@ -3130,7 +3219,48 @@ class NgxBaseComponent {
     trackItemFn(index, item) {
         return `${index}-${item}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }, { token: 'iconsToken' }], target: i0.ɵɵFactoryTarget.Component }); }
+    /**
+     * @description Parses and applies properties from the props object to the component instance.
+     * @summary This method iterates through the properties of the provided instance object
+     * and applies any matching properties from the component's props configuration to the
+     * component instance. This allows for dynamic property assignment based on configuration
+     * stored in the props object, enabling flexible component customization without requiring
+     * explicit property binding for every possible configuration option.
+     *
+     * The method performs a safe property assignment by checking if each key from the instance
+     * exists in the props object before applying it. This prevents accidental property
+     * overwriting and ensures only intended properties are modified.
+     *
+     * @param {KeyValue} instance - The component instance object to process
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant B as NgxBaseComponent
+     *   participant P as Props Object
+     *
+     *   C->>B: parseProps(instance)
+     *   B->>B: Get Object.keys(instance)
+     *   loop For each key in instance
+     *     B->>P: Check if key exists in this.props
+     *     alt Key exists in props
+     *       B->>B: Set this[key] = this.props[key]
+     *     else Key not in props
+     *       Note over B: Skip this key
+     *     end
+     *   end
+     *
+     * @protected
+     * @memberOf NgxBaseComponent
+     */
+    parseProps(instance) {
+        Object.keys(instance).forEach((key) => {
+            if (Object.keys(this.props).includes(key))
+                this[key] = this.props[key];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxBaseComponent, isStandalone: true, selector: "ng-component", inputs: { rendererId: "rendererId", model: "model", props: "props", item: "item", pk: "pk", route: "route", operations: "operations", uid: "uid", mapper: "mapper", locale: "locale", translatable: "translatable", className: "className", mode: "mode", renderChild: "renderChild" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<div><div>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBaseComponent, decorators: [{
@@ -3143,9 +3273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['instanceToken']
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['iconsToken']
                 }] }], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { read: ElementRef, static: true }]
@@ -3269,6 +3396,30 @@ let CrudFormComponent = class CrudFormComponent {
          * @memberOf CrudFormComponent
          */
         this.uid = generateRandomValue(12);
+        /**
+         * @description Unique identifier for the current record instance.
+         * @summary This property holds a unique string value that identifies the specific record being managed by the form.
+         * It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
+         * The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
+         * in conjunction with the primary key for CRUD operations.
+         *
+         * @type {string}
+         * @default Randomly generated 12-character string
+         * @memberOf CrudFormComponent
+         */
+        this.allowClear = true;
+        /**
+         * @description Reference to CRUD operation constants for template usage.
+         * @summary Exposes the OperationKeys enum to the component template, enabling
+         * conditional rendering and behavior based on operation types. This protected
+         * readonly property ensures that template logic can access operation constants
+         * while maintaining encapsulation and preventing accidental modification.
+         *
+         * @protected
+         * @readonly
+         * @memberOf CrudFormComponent
+         */
+        this.OperationKeys = OperationKeys;
         /**
          * @description Event emitter for form submission events.
          * @summary Emits CrudFormEvent objects when the form is submitted, providing
@@ -3290,19 +3441,6 @@ let CrudFormComponent = class CrudFormComponent {
          * @memberOf CrudFormComponent
          */
         this.location = inject(Location);
-        /**
-         * @description Reference to CRUD operation constants for template usage.
-         * @summary Exposes the OperationKeys enum to the component template, enabling
-         * conditional rendering and behavior based on operation types. This protected
-         * readonly property ensures that template logic can access operation constants
-         * while maintaining encapsulation and preventing accidental modification.
-         *
-         * @type {CrudOperations}
-         * @protected
-         * @readonly
-         * @memberOf CrudFormComponent
-         */
-        this.OperationKeys = OperationKeys;
     }
     // ngAfterViewInit() {
     // if (![OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
@@ -3373,7 +3511,7 @@ let CrudFormComponent = class CrudFormComponent {
      * @memberOf CrudFormComponent
      */
     handleReset() {
-        if (![OperationKeys.DELETE, OperationKeys.READ].includes(this.operation))
+        if (![OperationKeys.DELETE, OperationKeys.READ].includes(this.operation) && this.allowClear)
             return NgxFormService.reset(this.formGroup);
         this.location.back();
     }
@@ -3389,22 +3527,24 @@ let CrudFormComponent = class CrudFormComponent {
      */
     handleDelete() {
         this.submitEvent.emit({
-            data: this.uid,
+            data: this.modelId,
             component: 'CrudFormComponent',
             name: EventConstants.SUBMIT,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      <div>\n          @if(options.buttons.clear) {\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if(options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              {{ ['create', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n            </ion-button>\n          }\n        </div>\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n\n    @if(operation === 'delete' && uid) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", modelId: "modelId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic()
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ForAngularModule, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      <div>\n          @if(options.buttons.clear) {\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if(options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              {{ ['create', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n            </ion-button>\n          }\n        </div>\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n\n    @if(operation === 'delete' && uid) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ForAngularModule, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
+            }], modelId: [{
+                type: Input
             }], updateOn: [{
                 type: Input
             }], component: [{
@@ -3431,6 +3571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], uid: [{
                 type: Input
+            }], allowClear: [{
+                type: Input
             }], submitEvent: [{
                 type: Output
             }] } });
@@ -3453,14 +3595,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  *     +StringOrBoolean showIcon
  *     +string icon
  *     +string iconSize
- *     +PredefinedColors iconColor
+ *     +string iconColor
  *     +string|Function buttonLink
  *     +string buttonText
  *     +string buttonFill
- *     +Color buttonColor
+ *     +string buttonColor
  *     +string buttonSize
  *     +string searchValue
- *     -NavController navController
+ *     -Router Router
  *     +ngOnInit()
  *     +handleClick()
  *   }
@@ -3582,7 +3724,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
          * @summary Specifies the color for the button using Ionic's color system.
          * This allows the button to match the application's color scheme.
          *
-         * @type {Color}
+         * @type {string}
          * @default 'primary'
          * @memberOf EmptyStateComponent
          */
@@ -3603,10 +3745,10 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
          * This service is used when the buttonLink is a string URL to navigate to that location.
          *
          * @private
-         * @type {NavController}
+         * @type {Router}
          * @memberOf EmptyStateComponent
          */
-        this.navController = inject(NavController);
+        this.router = inject(Router);
         this.sanitizer = inject(DomSanitizer);
         this.translate = inject(TranslateService);
         addIcons(allIcons);
@@ -3665,7 +3807,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
      * sequenceDiagram
      *   participant U as User
      *   participant E as EmptyStateComponent
-     *   participant N as NavController
+     *   participant N as Router
      *
      *   U->>E: Click action button
      *   E->>E: handleClick()
@@ -3692,7 +3834,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
             return false;
         if (fn instanceof Function)
             return fn();
-        return this.navController.navigateForward(fn);
+        this.router.navigate([fn]);
     }
     /**
       * @description Generates a localized and sanitized subtitle for search results.
@@ -3855,7 +3997,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
      * @memberOf FieldsetComponent
      */
     constructor() {
-        super('FieldsetComponent', { alertCircleOutline, createOutline });
+        super('FieldsetComponent');
         /**
          * @description The display name or title of the fieldset section.
          * @summary Sets the legend or header text that appears in the accordion header. This text
@@ -4047,6 +4189,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
          * @memberOf FieldsetComponent
          */
         this.translateService = inject(TranslateService);
+        addIcons({ alertCircleOutline, createOutline });
     }
     /**
      * @description Component initialization lifecycle method.
@@ -4061,6 +4204,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
         if (this.model)
             this._repository = this.repository;
         this.buttonLabel = this.translateService.instant(this.locale + '.add');
+        this.buttonCancelLabel = this.translateService.instant(this.locale + '.cancel');
     }
     /**
     * @description Initializes the component state after view and child components are rendered.
@@ -4403,7 +4547,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [ngClass]=\"{'open': isOpen, 'hasValidationErrors': hasValidationErrors}\"  (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [ngClass]=\"{'not-unique': item.title === isUniqueError}\" lines=\"full\" [button]=\"false\" [ngClass]=\"{'updating': updatingItem?.[pk] === item.title}\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"item.title === isUniqueError ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" color=\"dark\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--dcf-color-gray-2);border-radius:8px;height:100%}.dcf-fieldset.read{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content]{padding-top:0!important;background:red}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2);border:1px solid transparent;box-sizing:border-box}ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [ngClass]=\"{'open': isOpen, 'hasValidationErrors': hasValidationErrors}\"  (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [ngClass]=\"{'not-unique': item.title === isUniqueError}\" lines=\"full\" [button]=\"false\" [ngClass]=\"{'updating': updatingItem?.[pk] === item.title}\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem.title === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;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:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -4411,7 +4555,7 @@ FieldsetComponent = __decorate([
 ], FieldsetComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ForAngularModule, IonAccordionGroup, IonAccordion, IonList, IonItem, IonLabel, IonReorder, IonButton, IonReorderGroup, CollapsableDirective], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [ngClass]=\"{'open': isOpen, 'hasValidationErrors': hasValidationErrors}\"  (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [ngClass]=\"{'not-unique': item.title === isUniqueError}\" lines=\"full\" [button]=\"false\" [ngClass]=\"{'updating': updatingItem?.[pk] === item.title}\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"item.title === isUniqueError ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" color=\"dark\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--dcf-color-gray-2);border-radius:8px;height:100%}.dcf-fieldset.read{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content]{padding-top:0!important;background:red}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2);border:1px solid transparent;box-sizing:border-box}ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ForAngularModule, IonAccordionGroup, IonAccordion, IonList, IonItem, IonLabel, IonReorder, IonButton, IonReorderGroup, CollapsableDirective], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [ngClass]=\"{'open': isOpen, 'hasValidationErrors': hasValidationErrors}\"  (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [ngClass]=\"{'not-unique': item.title === isUniqueError}\" lines=\"full\" [button]=\"false\" [ngClass]=\"{'updating': updatingItem?.[pk] === item.title}\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem.title === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;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:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -5113,6 +5257,15 @@ let FilterComponent = class FilterComponent extends NgxBaseComponent {
          * @memberOf FilterComponent
          */
         this.sortDirection = OrderDirection.DSC;
+        /**
+         * @description Browsing mode (dark or light).
+         * @summary Indicates whether the dark mode theme is currently enabled.
+         * Defaults to `false`.
+         *
+         * @type {boolean}
+         * @memberOf FilterComponent
+         */
+        this.isDarkMode = false;
         /**
          * @description Event emitter for filter changes.
          * @summary Emits filter events when the user creates, modifies, or clears filters.
@@ -5155,10 +5308,11 @@ let FilterComponent = class FilterComponent extends NgxBaseComponent {
      *   end
      *   F->>F: Call initialize()
      *
-     * @returns {void}
+     * @returns {Promise<void>}
      * @memberOf FilterComponent
      */
-    ngOnInit() {
+    async ngOnInit() {
+        this.isDarkMode = await isDarkMode();
         this.windowWidth = getWindowWidth();
         this.windowResizeSubscription = fromEvent(window, 'resize')
             .pipe(debounceTime(300))
@@ -5560,7 +5714,7 @@ let FilterComponent = class FilterComponent extends NgxBaseComponent {
         this.searchEvent.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\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 name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\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            [readonly]=\"step !== 3\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ '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 name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></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 name=\"search-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ '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            >\n            @for(sort of sortBy; track sort) {\n              aa\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;border:1px solid var(--dcf-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter 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 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;color:var(--dcf-color-gray-7);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;max-height:200px;overflow-y:auto;background-color:#fff;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:1px solid var(--dcf-color-gray-2);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;color:var(--dcf-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-primary)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{border-color:var(--dcf-color-gray-7)!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\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 name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></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\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div 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 name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></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 name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                {{ key }}\n              </div>\n            }\n          } @else {\n            <div 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 sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}}.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}@media (prefers-color-scheme: light){.dcf-filter ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter 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}}@media (prefers-color-scheme: dark){.dcf-filter ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}}.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}@media (prefers-color-scheme: light){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-1)}}.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;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}@media (prefers-color-scheme: light){.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}}@media (prefers-color-scheme: dark){.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}}.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}@media (prefers-color-scheme: light){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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: 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"] }] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
@@ -5577,7 +5731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonSelect,
                         IonIcon,
                         SearchbarComponent
-                    ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\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 name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\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            [readonly]=\"step !== 3\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ '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 name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></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 name=\"search-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ '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            >\n            @for(sort of sortBy; track sort) {\n              aa\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;border:1px solid var(--dcf-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter 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 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;color:var(--dcf-color-gray-7);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;max-height:200px;overflow-y:auto;background-color:#fff;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:1px solid var(--dcf-color-gray-2);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;color:var(--dcf-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-primary)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{border-color:var(--dcf-color-gray-7)!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}\n"] }]
+                    ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\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 name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></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\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div 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 name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></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 name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\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                {{ key }}\n              </div>\n            }\n          } @else {\n            <div 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 sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}}.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}@media (prefers-color-scheme: light){.dcf-filter ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter 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}}@media (prefers-color-scheme: dark){.dcf-filter ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}}.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}@media (prefers-color-scheme: light){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-1)}}.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;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}@media (prefers-color-scheme: light){.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}}@media (prefers-color-scheme: dark){.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}}.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}@media (prefers-color-scheme: light){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
                 args: ['optionsFilterElement', { read: ElementRef, static: false }]
@@ -5880,11 +6034,11 @@ class LayoutComponent extends NgxBaseComponent {
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [ForAngularModule, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [ForAngularModule, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cols: [{
                 type: Input
             }], rows: [{
@@ -5954,7 +6108,7 @@ let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
          * @default 'inset'
          * @memberOf ListItemComponent
          */
-        this.lines = 'inset';
+        this.lines = 'full';
         /**
          * @description Position of the icon within the list item.
          * @summary Determines whether the icon appears at the start (left in LTR languages)
@@ -6019,7 +6173,7 @@ let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
          * @type {NavController}
          * @memberOf ListItemComponent
          */
-        this.navController = inject(NavController$1);
+        this.navController = inject(NavController);
         addIcons(allIcons);
     }
     /**
@@ -6236,7 +6390,7 @@ let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
         this.actionMenuOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" } }, viewQueries: [{ propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-button shape=\"round\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n          </ion-button>\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 dcf-grid-icon\">\n              <ion-button shape=\"round\" fill=\"clear\">\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\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 side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n          <ion-item-option class=\"delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2)}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--dcf-color-gray-2)}ion-item:hover .dcf-info{background:transparent!important}ion-item .dcf-info{min-width:10vw;color:var(--dcf-color-gray-6)}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{color:var(--dcf-color-gray-8);font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dcf-color-gray-6);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;background:#fff}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: 768px){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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: 768px){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: 578px){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--dcf-color-gray-1) !important}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{transform:scale(.9);background:var(--dcf-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.15)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.25)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-7)!important}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)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: IonPopover, selector: "ion-popover" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" } }, viewQueries: [{ propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\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\"></ion-icon>\n          </ion-avatar>\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 dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\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 side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["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)}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25}}@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1}}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}@media (prefers-color-scheme: light){ion-item{--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}}@media (prefers-color-scheme: dark){ion-item{--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}}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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}@media (prefers-color-scheme: light){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}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)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: IonPopover, selector: "ion-popover" }] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
@@ -6257,7 +6411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonButton,
                         IonContent,
                         IonPopover
-                    ], template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-button shape=\"round\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n          </ion-button>\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 dcf-grid-icon\">\n              <ion-button shape=\"round\" fill=\"clear\">\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\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 side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n          <ion-item-option class=\"delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2)}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--dcf-color-gray-2)}ion-item:hover .dcf-info{background:transparent!important}ion-item .dcf-info{min-width:10vw;color:var(--dcf-color-gray-6)}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{color:var(--dcf-color-gray-8);font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dcf-color-gray-6);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;background:#fff}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: 768px){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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: 768px){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: 578px){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--dcf-color-gray-1) !important}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{transform:scale(.9);background:var(--dcf-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.15)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.25)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-7)!important}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)}\n"] }]
+                    ], template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\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\"></ion-icon>\n          </ion-avatar>\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 dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\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 side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["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)}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25}}@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1}}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}@media (prefers-color-scheme: light){ion-item{--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}}@media (prefers-color-scheme: dark){ion-item{--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}}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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}@media (prefers-color-scheme: light){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}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)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actionMenuComponent: [{
                 type: ViewChild,
                 args: ['actionMenuComponent']
@@ -6457,10 +6611,10 @@ class PaginationComponent extends NgxBaseComponent {
         if (!current)
             current = this.current;
         const pages = [];
-        function getPage(index, text = '') {
+        function getPage(index, text = '', clazz = 'button') {
             if (pages.some(item => item['index'] === index))
                 return;
-            pages.push({ index, text: index != null ? index.toString().padStart(2, '0') : text });
+            pages.push({ index, text: index != null ? index.toString().padStart(2, '0') : text, class: clazz });
         }
         if (total <= 5) {
             for (let i = 1; i <= total; i++)
@@ -6478,7 +6632,7 @@ class PaginationComponent extends NgxBaseComponent {
                 getPage(current);
             // Adiciona "..." entre os blocos
             if (current && current < total - 2)
-                getPage(null, '...');
+                getPage(null, '...', 'separator');
             // Adiciona os dois últimos
             getPage(total - 1);
             getPage(total);
@@ -6582,14 +6736,14 @@ class PaginationComponent extends NgxBaseComponent {
             this.handleClick(page > this.current ? 'next' : 'previous', page);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, usesInheritance: true, ngImport: i0, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination aeon-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [ngClass]=\"{'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\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [ngClass]=\"{'dcf-active': current === page['index'], 'dcf-disabled': page['index'] === ndivl}\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [ngClass]=\"{'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-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:top;color:var(--dcf-color-gray-7);font-weight:600;width:36px;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}.dcf-pagination>*:not(.disabled){cursor:pointer}.dcf-pagination>*:hover .page-item{color:var(--dcf-color-primary)}.dcf-pagination>* .page-item{color:var(--dcf-color-gray-7);font-weight:600}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*>*{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--dcf-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination>*>:hover{color:var(--dcf-color-gray-6);text-decoration:none}.dcf-pagination .dcf-disabled>*{opacity:.5;color:var(--dcf-color-gray-6)}.dcf-pagination-resume{color:var(--dcf-color-gray-8);margin:1rem 0px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, usesInheritance: true, ngImport: i0, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: 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()\" [ngClass]=\"{'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          [ngClass]=\"{'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        [ngClass]=\"{'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-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}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.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}@media (prefers-color-scheme: light){.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}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-pagination', imports: [
                         ForAngularModule,
                         IonIcon
-                    ], standalone: true, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination aeon-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [ngClass]=\"{'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\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [ngClass]=\"{'dcf-active': current === page['index'], 'dcf-disabled': page['index'] === ndivl}\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [ngClass]=\"{'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-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:top;color:var(--dcf-color-gray-7);font-weight:600;width:36px;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}.dcf-pagination>*:not(.disabled){cursor:pointer}.dcf-pagination>*:hover .page-item{color:var(--dcf-color-primary)}.dcf-pagination>* .page-item{color:var(--dcf-color-gray-7);font-weight:600}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*>*{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--dcf-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination>*>:hover{color:var(--dcf-color-gray-6);text-decoration:none}.dcf-pagination .dcf-disabled>*{opacity:.5;color:var(--dcf-color-gray-6)}.dcf-pagination-resume{color:var(--dcf-color-gray-8);margin:1rem 0px;text-align:center}\n"] }]
+                    ], standalone: true, template: " <div [id]=\"uid\" class=\"dcf-paginator-container dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: 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()\" [ngClass]=\"{'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          [ngClass]=\"{'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        [ngClass]=\"{'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-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}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.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}@media (prefers-color-scheme: light){.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}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { totalPages: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7886,5 +8040,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularComponentsModule, ForAngularModule, FormConstants, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, cleanSpaces, dataMapper, formatDate, generateLocaleFromString, generateRandomValue, getInjectablesRegistry, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularComponentsModule, ForAngularModule, FormConstants, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map