@decaf-ts/for-angular 0.0.83 → 0.0.85

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

@@ -1815,7 +1815,7 @@ class NgxFormService {
                         value = typeof value === Primitives.STRING ? new Date(`${value}T00:00:00`) : value;
                         break;
                     default:
-                        value = escapeHtml(value)?.trim();
+                        value = !isNaN(value) ? value : escapeHtml(value)?.trim();
                 }
             }
             else {
@@ -2789,7 +2789,8 @@ var operations = {
 	multiple: {
 		success: "Successfully processed all operations.",
 		error: "Error processing operations."
-	}
+	},
+	processing: "Processing {0}..."
 };
 var component = {
 	crud_form: {
@@ -3857,6 +3858,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
      * @param {string} [localeRoot] - Optional locale root key for internationalization
      * @memberOf module:lib/engine/NgxComponentDirective
      */
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(componentName, localeRoot) {
         super();
         /**
@@ -4286,7 +4288,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                     this._repository = repository;
                     if (this.model && !this.pk)
                         this.pk = pk;
-                    this.pkType = pkType || Model.pk(repository.class);
+                    this.pkType = pkType;
                     if (!this.modelName)
                         this.modelName = repository.class.name;
                 }
@@ -4737,7 +4739,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         await this.initialize();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", label: "label", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn" }, outputs: { listenEvent: "listenEvent", refreshEvent: "refreshEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", label: "label", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn", refreshing: "refreshing" }, outputs: { listenEvent: "listenEvent", refreshEvent: "refreshEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
@@ -4803,6 +4805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], propsMapperFn: [{
                 type: Input
+            }], refreshing: [{
+                type: Input
             }] } });
 
 /**
@@ -4990,7 +4994,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class NgxModelPageDirective extends NgxPageDirective {
     constructor() {
         super(...arguments);
-        this.refreshing = true;
         /**
          * @description The CRUD operation type to be performed on the model.
          * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
@@ -5049,6 +5052,7 @@ class NgxModelPageDirective extends NgxPageDirective {
         return this._repository;
     }
     async initialize() {
+        this.refreshing = true;
         await super.initialize();
         this.getLocale(this.modelName);
     }
@@ -5362,10 +5366,8 @@ class NgxModelPageDirective extends NgxPageDirective {
             model = this.model;
         }
         await iterate(event, model);
-        if (!submit) {
-            return result;
-        }
-        return (await this.batchOperation(result));
+        return result;
+        // return (await this.batchOperation(result)) as IModelComponentSubmitEvent<M>;
     }
     /**
      * @description Handles form submission events for CRUD operations.
@@ -5443,25 +5445,6 @@ class NgxModelPageDirective extends NgxPageDirective {
         }
         return { ...event, success, message, model: result, aborted: false };
     }
-    async batchOperation(context, redirect = false) {
-        // const { data, repository, pk } = context.context;
-        // return data;
-        // return await this.submit({data}, false, repository, pk);
-        // const result: boolean[] = [];
-        // let resultMessage = '';
-        // const promises = Object.keys(models).map(async(m) => {
-        //   const {model, repository} = models[m];
-        //   const {success} = await this.submit({data: model}, false, repository as IRepository<Model>);
-        //   if(success)
-        //     resultMessage = await this.translate('operations.multiple.success');
-        //   result.push(success);
-        // })
-        // await Promise.all(promises);
-        // const success = result.every((r: boolean) => r);
-        // if (success && redirect)
-        //   this.location.back();
-        // return {...{data: models}, success, message: resultMessage};
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxModelPageDirective, isStandalone: true, inputs: { operation: "operation" }, usesInheritance: true, ngImport: i0 }); }
 }
@@ -7409,7 +7392,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         return this.formControl.value.includes(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            {{ label | translate }}\n            <br />\n            @if (type !== 'checkbox' && value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              @if (type === 'checkbox') {\n                <ion-badge mode=\"md\" color=\"light\">\n                  <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</ion-text>\n                </ion-badge>\n              } @else {\n                <ion-text [innerHTML]=\"value\"></ion-text>\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (option of options; track trackItemFn($index, option.text)) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (option of options; track trackItemFn($index, option.text)) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic(),
@@ -7432,7 +7415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonText,
                         IonTextarea,
                         IconComponent,
-                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            {{ label | translate }}\n            <br />\n            @if (type !== 'checkbox' && value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              @if (type === 'checkbox') {\n                <ion-badge mode=\"md\" color=\"light\">\n                  <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</ion-text>\n                </ion-badge>\n              } @else {\n                <ion-text [innerHTML]=\"value\"></ion-text>\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (option of options; track trackItemFn($index, option.text)) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (option of options; track trackItemFn($index, option.text)) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges()\"\n            (ionChange)=\"handleModalChildChanges()\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8217,7 +8200,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
                 // to prevent layout glitches, before send class to child component remove width classes
                 if (c?.['props']?.className)
                     c['props'].className = filterString(c?.['props']?.className, '-width-', false);
-                return Object.assign(c, { colClass });
+                return Object.assign(c, { colClass }, { refreshing: this.refreshing });
             });
             return row;
         });
@@ -8244,7 +8227,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         await super.initialize();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-label>\n                        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        <ion-text style=\"width: 100%\">\n                          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        </ion-text>\n                      </ion-label>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -8252,7 +8235,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-label>\n                        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        <ion-text style=\"width: 100%\">\n                          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        </ion-text>\n                      </ion-label>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  @if (refreshing) {\n                    <ion-item>\n                      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], grid: [{
@@ -8609,7 +8592,7 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-empty-state-component\"  #component>\n  <ngx-decaf-card [className]=\"className\"\n    [borders]=\"borders\"\n    [body]=\"body\"\n  >\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n            />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p [class]=\"isDarkMode ? 'light' : subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\">\n              {{  buttonText || (locale + '.button_create' | translate)  }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n            {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n          </ion-button>\n        </div>\n\n      }\n    </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\" [borders]=\"borders\" [body]=\"body\">\n    @if (refreshing) {\n      <div class=\"dcf-spinner-container\">\n        <ion-spinner color=\"primary\" name=\"circular\" />\n      </div>\n    } @else {\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p\n          [class]=\"isDarkMode ? 'light' : subtitleColor\"\n          [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"\n        ></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\"\n            >\n              {{ buttonText || (locale + '.button_create' | translate) }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\"\n            fill=\"clear\"\n          >\n            {{ buttonText?.length ? buttonText : (locale + '.button_create' | translate) }}\n          </ion-button>\n        </div>\n      }\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}.dcf-spinner-container{padding:var(--dcf-padding)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
@@ -8617,7 +8600,7 @@ EmptyStateComponent = __decorate([
 ], EmptyStateComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [IconComponent, TranslatePipe, IonButton, CardComponent], template: "<div class=\"decaf-empty-state-component\"  #component>\n  <ngx-decaf-card [className]=\"className\"\n    [borders]=\"borders\"\n    [body]=\"body\"\n  >\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n            />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p [class]=\"isDarkMode ? 'light' : subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\">\n              {{  buttonText || (locale + '.button_create' | translate)  }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n            {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n          </ion-button>\n        </div>\n\n      }\n    </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [IconComponent, TranslatePipe, IonSpinner, IonButton, CardComponent], template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\" [borders]=\"borders\" [body]=\"body\">\n    @if (refreshing) {\n      <div class=\"dcf-spinner-container\">\n        <ion-spinner color=\"primary\" name=\"circular\" />\n      </div>\n    } @else {\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p\n          [class]=\"isDarkMode ? 'light' : subtitleColor\"\n          [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"\n        ></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\"\n            >\n              {{ buttonText || (locale + '.button_create' | translate) }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\"\n            fill=\"clear\"\n          >\n            {{ buttonText?.length ? buttonText : (locale + '.button_create' | translate) }}\n          </ion-button>\n        </div>\n      }\n    }\n  </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}.dcf-spinner-container{padding:var(--dcf-padding)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], titleColor: [{
@@ -10615,7 +10598,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         this.searchEvent.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { multiple: "multiple", conditions: "conditions", sortOptions: "sortOptions", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative;z-index:1000!important}:host *{z-index:1000!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { multiple: "multiple", conditions: "conditions", sortOptions: "sortOptions", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
@@ -10634,7 +10617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonIcon,
                         SearchbarComponent,
                         IconComponent,
-                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative;z-index:1000!important}:host *{z-index:1000!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
+                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "@if (!indexes.length) {\n  <ngx-decaf-searchbar\n    [emitEventToWindow]=\"false\"\n    [debounce]=\"500\"\n    (searchEvent)=\"handleSearch($event)\"\n  />\n}\n\n<div\n  [id]=\"uid\"\n  class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\"\n  [class.dcf-hidden]=\"!indexes.length\"\n  #component\n>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for (filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon\n                tabindex=\"0\"\n                name=\"close-outline\"\n                (click)=\"removeFilter(filter?.['value'])\"\n                size=\"small\"\n              ></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            autocomplete=\"off\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n          />\n          @if (windowWidth >= 768) {\n            <div\n              [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n              #optionsFilterElement\n            >\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for (key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\"\n                    >\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon\n              aria-hidden=\"true\"\n              name=\"trash-outline\"\n              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon\n            aria-hidden=\"true\"\n            name=\"search-outline\"\n            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n            slot=\"icon-only\"\n          ></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div\n        [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\"\n        #optionsFilterElement\n      >\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for (key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\"\n              >\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div\n              class=\"dcf-empty\"\n              (click)=\"filteredOptions = options; value = ''\"\n              tabindex=\"0\"\n              (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            class=\"dcf-sort-select\"\n            (ionChange)=\"handleSortChange($event)\"\n            interface=\"popover\"\n            [value]=\"sortValue\"\n            label-placement=\"floating\"\n            fill=\"outline\"\n            [label]=\"locale + '.sort' | translate\"\n          >\n            @for (sort of sortOptions; track sort) {\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ngx-decaf-icon\n            (click)=\"handleSortDirectionChange()\"\n            [button]=\"true\"\n            fill=\"clear\"\n            slot=\"icon-only\"\n            [color]=\"!isDarkMode ? 'primary' : 'light'\"\n            [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"\n          />\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{position:relative}:host ion-select{z-index:1!important}input:disabled::placeholder{color:transparent}.dcf-filter-component{margin-top:1rem!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:40px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;height:40px;margin-top:.25rem;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute!important;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
                 args: ['optionsFilterElement', { read: ElementRef, static: false }]
@@ -11189,6 +11172,16 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.enableFilter = true;
+        /**
+         * @description Controls whether multiple filter groups can be applied simultaneously.
+         * @summary When true, the filter component allows users to build compound queries with
+         * several filter rows. When false, only a single filter row is available.
+         *
+         * @type {boolean}
+         * @default true
+         * @memberOf ListComponent
+         */
+        this.multipleFilter = true;
         /**
          * @description Controls whether sorting functionality is disabled.
          * @summary When set to true, disables the sort controls and prevents users from
@@ -11845,14 +11838,17 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!this._repository) {
             this._repository = this.repository;
         }
-        // if (!this.repositoryObserver) {
-        //   this.repositoryObserver = {
-        //     refresh: async (...args) => this.handleRepositoryRefresh(...args),
-        //   };
-        // }
+        if (!this.repositoryObserver) {
+            this.repositoryObserver = {
+                refresh: async (...args) => this.handleRepositoryRefresh(...args),
+            };
+        }
         try {
+            // const observerHandler = (this._repository as DecafRepository<Model>)['observerHandler'];
+            // if (!observerHandler)
+            //   (this._repository as DecafRepository<Model>).observe(this.repositoryObserver);
             const observerHandler = this._repository['observerHandler'];
-            if (!observerHandler)
+            if (!observerHandler?.observers?.length)
                 this._repository.observe(this.repositoryObserver);
         }
         catch (error) {
@@ -11878,7 +11874,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 }
                 else {
                     this.changeDetectorRef.detectChanges();
-                    request = await this.parseResult(await repo.query(this.parseConditions(this.searchValue), (this.sortBy || this.pk), this.sortDirection));
+                    request = await this.parseResult(await repo
+                        .select()
+                        .where(this.parseConditions(this.searchValue))
+                        .orderBy((this.sortBy || this.pk), this.sortDirection)
+                        .execute());
                     data = [];
                     this.changeDetectorRef.detectChanges();
                 }
@@ -11900,7 +11900,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this.items = [...data];
             }
         }
-        if (this.type === ListComponentsTypes.PAGINATED && this.paginator)
+        if (this.type === ListComponentsTypes.PAGINATED && this.paginator && !this.pages)
             this.getMoreData(this.paginator.total);
         return data || [];
     }
@@ -11928,8 +11928,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     parseConditions(value) {
         let _condition;
         const model = this.model;
-        if (typeof value === Primitives.STRING || !isNaN(value)) {
-            _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
+        if (typeof value === Primitives.STRING) {
+            _condition = Condition.attribute(this.pk).eq(this.pkType.toLocaleLowerCase() === Primitives.STRING ? value : Number(value));
             for (const index of this.indexes) {
                 if (index === this.pk)
                     continue;
@@ -12008,7 +12008,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             const paginator = result;
             try {
                 result = await paginator.page(this.page);
-                this.getMoreData(paginator.total);
+                this.getMoreData(paginator.total || this.pages);
             }
             catch (error) {
                 this.log.info(error?.message ||
@@ -12142,7 +12142,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -12170,7 +12170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent,
-                    ], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -12201,6 +12201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], enableFilter: [{
                 type: Input
+            }], multipleFilter: [{
+                type: Input
             }], disableSort: [{
                 type: Input
             }], empty: [{
@@ -14104,7 +14106,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14120,7 +14122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         IconComponent,
                         PaginationComponent,
-                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
+                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
         }], propDecorators: { filterModel: [{
                 type: Input
             }], filterOptions: [{
@@ -14264,7 +14266,9 @@ class NgxEventHandler extends DecafEventHandler {
         this._data = null;
     }
     async handle(event, data, instance, ...args) {
-        this.log.for(this.handle).info(`Handle called with args: ${event}, ${data}, ${instance}`);
+        this.log
+            .for(this.handle)
+            .info(`Handle called with args: ${event}, ${data}, ${instance}, ${args}`);
     }
     from(...args) {
         this.log.for(this.process).info(`Process called with args: ${args}`);