@decaf-ts/for-angular 0.0.82 → 0.0.84

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 {
@@ -3155,7 +3155,7 @@ class NgxMediaService {
          */
         this.resizeSubject = new BehaviorSubject({
             width: this._window.innerWidth,
-            height: this._window.innerHeight
+            height: this._window.innerHeight,
         });
         /**
          * @description Angular's NgZone service for running code outside Angular's zone.
@@ -3214,7 +3214,6 @@ class NgxMediaService {
     }
     darkModeEnabled() {
         return this._document.documentElement.classList.contains('has-dark-mode');
-        ;
     }
     /**
      * @description Observes window resize events and emits the updated dimensions.
@@ -3239,7 +3238,7 @@ class NgxMediaService {
                 .subscribe(() => {
                 const dimensions = {
                     width: win.innerWidth,
-                    height: win.innerHeight
+                    height: win.innerHeight,
                 };
                 // update within the zone to reflect in Angular
                 this.angularZone.run(() => this.resizeSubject.next(dimensions));
@@ -3281,24 +3280,25 @@ class NgxMediaService {
         }
         return merge(of(mediaFn.matches ? WindowColorSchemes.dark : WindowColorSchemes.light), 
         // observe media query changes
-        new Observable(observer => {
+        new Observable((observer) => {
             this.angularZone.runOutsideAngular(() => {
                 const mediaQuery = mediaFn;
                 const subscription = fromEvent(mediaQuery, 'change')
-                    .pipe(map(event => (event.matches ? WindowColorSchemes.dark : WindowColorSchemes.light)))
-                    .subscribe(value => {
+                    .pipe(map((event) => (event.matches ? WindowColorSchemes.dark : WindowColorSchemes.light)))
+                    .subscribe((value) => {
                     this.angularZone.run(() => observer.next(value));
                 });
                 return () => subscription.unsubscribe();
             });
         }), 
         // observe ngx-dcf-palettedark class changes
-        new Observable(observer => {
+        new Observable((observer) => {
             this.angularZone.runOutsideAngular(() => {
                 const observerConfig = { attributes: true, attributeFilter: ['class'] };
                 const mutationObserver = new MutationObserver(() => {
-                    const theme = documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) ?
-                        WindowColorSchemes.dark : WindowColorSchemes.light;
+                    const theme = documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS)
+                        ? WindowColorSchemes.dark
+                        : WindowColorSchemes.light;
                     this.angularZone.run(() => observer.next(theme));
                 });
                 mutationObserver.observe(documentElement, observerConfig);
@@ -3306,7 +3306,7 @@ class NgxMediaService {
                 // this.angularZone.run(() => observer.next(theme));
                 return () => mutationObserver.disconnect();
             });
-        })).pipe(distinctUntilChanged(), tap(scheme => {
+        })).pipe(distinctUntilChanged(), tap((scheme) => {
             const shouldAdd = scheme === WindowColorSchemes.dark;
             if (shouldAdd) {
                 // always add when the emitted scheme is dark
@@ -3340,12 +3340,14 @@ class NgxMediaService {
      */
     observePageScroll(offset, awaitDelay = 500) {
         // await delay for page change to complete
-        return timer(awaitDelay)
-            .pipe(switchMap(() => new Observable(observer => {
+        return timer(awaitDelay).pipe(switchMap(() => new Observable((observer) => {
             const activeContent = this._document.querySelector('ion-router-outlet .ion-page:not(.ion-page-hidden) ion-content');
-            if (!(activeContent && typeof activeContent.getScrollElement === 'function'))
+            if (!(activeContent &&
+                typeof activeContent.getScrollElement === 'function'))
                 return this.angularZone.run(() => observer.next(false));
-            activeContent.getScrollElement().then((element) => {
+            activeContent
+                .getScrollElement()
+                .then((element) => {
                 const emitScrollState = () => {
                     const scrollTop = element.scrollTop || 0;
                     this.angularZone.run(() => observer.next(scrollTop > offset));
@@ -3374,8 +3376,10 @@ class NgxMediaService {
      */
     loadSvgObserver(http, path, target) {
         this.angularZone.runOutsideAngular(() => {
-            const svg$ = http.get(path, { responseType: 'text' }).pipe(takeUntil(this.destroy$), shareReplay(1));
-            svg$.subscribe(svg => {
+            const svg$ = http
+                .get(path, { responseType: 'text' })
+                .pipe(takeUntil(this.destroy$), shareReplay(1));
+            svg$.subscribe((svg) => {
                 this.angularZone.run(() => {
                     target.innerHTML = svg;
                 });
@@ -3399,7 +3403,8 @@ class NgxMediaService {
         if (!this.darkModeEnabled())
             return of(false);
         const documentElement = this._document.documentElement;
-        return this.colorScheme$.pipe(map(scheme => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) || scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay(1), takeUntil(this.destroy$));
+        return this.colorScheme$.pipe(map((scheme) => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) ||
+            scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay(1), takeUntil(this.destroy$));
     }
     /**
      * @description Toggles dark mode for a specific component.
@@ -3442,7 +3447,7 @@ class NgxMediaService {
      */
     toggleClass(component, className, add = true) {
         const components = Array.isArray(component) ? component : [component];
-        components.forEach(element => {
+        components.forEach((element) => {
             if (element?.nativeElement)
                 element = element.nativeElement;
             if (element instanceof HTMLElement) {
@@ -3561,7 +3566,12 @@ class NgxRepositoryDirective extends DecafComponent {
     async initialize() {
         if (this.repository) {
             if (this.filter) {
-                this._data = await this.query(this.filter.eq(this.modelId));
+                const value = !this.modelId || !`${this.modelId}`.trim().length ? null : this.modelId;
+                if (value === null) {
+                    this._data = [];
+                    return;
+                }
+                this._data = await this.query(this.filter.eq(value));
                 if (this._data) {
                     await this.refresh();
                 }
@@ -3600,14 +3610,14 @@ class NgxRepositoryDirective extends DecafComponent {
         if (!attr) {
             attr = (this.filterBy || this.pk);
         }
-        const condtion = this.filter || Condition.attribute(attr);
+        const condition = this.filter || Condition.attribute(attr);
         const type = this.getModelPropertyType(this.repository.class, attr);
         if (this.modelId) {
-            return condtion.eq([Primitives.NUMBER, Primitives.BIGINT].includes(type)
+            return condition.eq([Primitives.NUMBER, Primitives.BIGINT].includes(type)
                 ? Number(this.modelId)
                 : this.modelId);
         }
-        return condtion.dif(null);
+        return condition.dif(null);
     }
     async read(uid) {
         return (await this.repository.read(uid));
@@ -3626,11 +3636,26 @@ class NgxRepositoryDirective extends DecafComponent {
         }
         await this.repository.deleteAll(data);
     }
-    async query(condtion, sortBy = (this.sortBy || this.pk), sortDirection = this.sortDirection) {
-        if (!condtion) {
-            condtion = this.buildCondition();
+    async query(condition, sortBy = (this.sortBy || this.pk), sortDirection = this.sortDirection) {
+        if (!condition) {
+            condition = this.buildCondition();
+        }
+        try {
+            return (await this.repository.query(condition, sortBy, sortDirection));
+        }
+        catch (error) {
+            this.log.for(this).error(error?.message || String(error));
+            return [];
         }
-        return (await this.repository.query(condtion, sortBy, sortDirection));
+        // const paginator = await this.repository
+        //   .select()
+        //   .where(condition)
+        //   .orderBy([(this.sortBy || this.pk) as keyof M, sortDirection])
+        //   .paginate(250);
+        // if (paginator.total === 0) {
+        //   return [];
+        // }
+        // return await paginator.page(1);
     }
     async paginate(limit = this.limit, sortDirection = this.sortDirection, condition) {
         if (!condition) {
@@ -3832,6 +3857,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();
         /**
@@ -4178,6 +4204,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         if (!this.initialized && Object.keys(this.props || {}).length) {
             this.parseProps(this);
         }
+        if (this.operation === OperationKeys.CREATE) {
+            this.refreshing = false;
+        }
         this.router.events
             .pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
             .subscribe(async (event) => {
@@ -4709,7 +4738,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,
@@ -4775,6 +4804,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], propsMapperFn: [{
                 type: Input
+            }], refreshing: [{
+                type: Input
             }] } });
 
 /**
@@ -5020,11 +5051,13 @@ class NgxModelPageDirective extends NgxPageDirective {
         return this._repository;
     }
     async initialize() {
+        this.refreshing = true;
         await super.initialize();
-        await this.refresh(this.modelId);
-        this.changeDetectorRef.detectChanges();
         this.getLocale(this.modelName);
     }
+    async ionViewWillEnter() {
+        await this.refresh(this.modelId);
+    }
     // /**
     //  * @description Angular lifecycle hook for component initialization.
     //  * @summary Initializes the component by setting up the logger instance using the getLogger
@@ -5044,6 +5077,7 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {string} [uid] - The unique identifier of the model to load; defaults to modelId
      */
     async refresh(uid) {
+        this.refreshing = true;
         if (!uid) {
             uid = this.modelId;
         }
@@ -5054,8 +5088,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                 case OperationKeys.UPDATE:
                 case OperationKeys.DELETE:
                     {
-                        this.model = await this.handleRead(uid);
-                        this.changeDetectorRef.detectChanges();
+                        await this.handleRead(uid);
                     }
                     break;
             }
@@ -5066,6 +5099,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             }
             this.log.error(error);
         }
+        this.refreshing = false;
     }
     /**
      * @description Enables CRUD operations except those specified.
@@ -5231,18 +5265,16 @@ class NgxModelPageDirective extends NgxPageDirective {
                         this.pkType = pkType;
                     }
                     uid = this.parsePkValue(uid, this.pkType);
-                    if (!this.modelId)
+                    if (!this.modelId) {
                         this.modelId = uid;
-                    const query = await repository
-                        .select()
-                        .where(Condition.attribute(this.pk).eq(uid))
-                        .execute();
+                    }
                     if (modelName === this.modelName) {
-                        const data = query?.length ? (query?.length === 1 ? query[0] : query) : undefined;
+                        const data = await repository.read(uid);
                         acc[prop] = data;
-                        const model = await this.transactionEnd(data, repository, OperationKeys.READ);
+                        const _model = (await this.transactionEnd(data, repository, OperationKeys.READ)) ||
+                            Model.build(data, model.constructor.name);
                         this.name = prop;
-                        this.model = Model.build({ [prop]: model ? model : data }, modelName);
+                        this.model = Model.build({ [prop]: _model }, modelName);
                     }
                     else {
                         // model[parent] = {
@@ -5264,8 +5296,7 @@ class NgxModelPageDirective extends NgxPageDirective {
         try {
             if (!this.pk)
                 this.pk = Model.pk(repository.class);
-            const res = await repository.read(this.parsePkValue(uid, this.getModelPkType(repository.class)));
-            return res;
+            return await repository.read(this.parsePkValue(uid, this.getModelPkType(repository.class)));
         }
         catch (error) {
             this.log
@@ -5334,10 +5365,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.
@@ -5415,25 +5444,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 }); }
 }
@@ -6290,6 +6300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class NgxParentComponentDirective extends NgxComponentDirective {
     constructor() {
         super(...arguments);
+        this.refreshing = false;
         /**
          * @description Unique identifier for the current record.
          * @summary A unique identifier for the current record being displayed or manipulated.
@@ -6403,9 +6414,6 @@ class NgxParentComponentDirective extends NgxComponentDirective {
          */
         this.preloadCards = new Array(1);
     }
-    ngOnInit() {
-        throw new Error('Method not implemented.');
-    }
     async initialize(model) {
         await super.initialize();
         if (model) {
@@ -6433,11 +6441,13 @@ class NgxParentComponentDirective extends NgxComponentDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxParentComponentDirective, isStandalone: true, inputs: { page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxParentComponentDirective, isStandalone: true, inputs: { refreshing: "refreshing", page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
             type: Directive
-        }], propDecorators: { page: [{
+        }], propDecorators: { refreshing: [{
+                type: Input
+            }], page: [{
                 type: Input
             }], pages: [{
                 type: Input
@@ -7381,7 +7391,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(),
@@ -7404,7 +7414,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 }]
@@ -8189,7 +8199,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;
         });
@@ -8216,7 +8226,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                  <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              </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(),
@@ -8224,7 +8234,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                  <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              </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: [{
@@ -8275,7 +8285,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         super.submitEventEmit(this.model, 'CrudFormComponent', ComponentEventNames.Submit, this.handlers, OperationKeys.DELETE);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -8283,7 +8293,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [refreshing]=\"refreshing\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\"\n      />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8581,7 +8591,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(),
@@ -8589,7 +8599,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: [{
@@ -10587,7 +10597,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(),
@@ -10606,7 +10616,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 }]
@@ -11161,6 +11171,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
@@ -11334,7 +11354,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             const repo = this._repository;
             //TODO: fix check observerHandler
             const observeHandler = repo['observerHandler'];
-            if (observeHandler) {
+            if (observeHandler && observeHandler?.observers?.length) {
                 try {
                     repo.unObserve(this.repositoryObserver);
                 }
@@ -11527,21 +11547,21 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async handleUpdate(uid) {
-        const item = this.itemMapper((await this._repository?.read(uid)) || {}, this.mapper);
+        const item = await this._repository?.read(uid);
+        // const item: KeyValue = this.itemMapper((await this._repository?.read(uid)) || {}, this.mapper);
         this.data = [];
         this.changeDetectorRef.detectChanges();
         for (const key in this.items) {
             const child = this.items[key];
             if (`${child['uid']}`.trim() === `${uid}`.trim()) {
-                this.items[key] = Object.assign({}, child, item);
+                this.items[key] = Object.assign({}, child, this.itemMapper(item || {}, this.mapper), {
+                    model: item || {},
+                });
                 break;
             }
         }
-        const updateSubsriber$ = timer(0).subscribe(() => {
-            this.data = [...this.items];
-            this.changeDetectorRef.detectChanges();
-            updateSubsriber$.unsubscribe();
-        });
+        this.data = [...this.items];
+        this.changeDetectorRef.detectChanges();
     }
     /**
      * @description Removes an item from the list by ID.
@@ -11823,7 +11843,12 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             };
         }
         try {
-            this._repository.observe(this.repositoryObserver);
+            // 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?.observers?.length)
+                this._repository.observe(this.repositoryObserver);
         }
         catch (error) {
             this.log.info(error?.message);
@@ -11848,7 +11873,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();
                 }
@@ -11870,7 +11899,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 || [];
     }
@@ -11978,7 +12007,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 ||
@@ -12112,7 +12141,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(),
@@ -12140,7 +12169,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: [{
@@ -12171,6 +12200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], enableFilter: [{
                 type: Input
+            }], multipleFilter: [{
+                type: Input
             }], disableSort: [{
                 type: Input
             }], empty: [{
@@ -13611,8 +13642,12 @@ class NgxRouterService {
      * @memberOf RouterService
      */
     parseAllQueryParams(params) {
-        if (typeof params === Primitives.STRING)
+        if (!params) {
+            params = Object.keys(this.route.snapshot.queryParams);
+        }
+        if (typeof params === Primitives.STRING) {
             params = [params];
+        }
         return params.reduce((acc, param) => {
             const item = {
                 [param]: this.route.snapshot.queryParamMap.get(param) || null,
@@ -14070,7 +14105,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) {\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()
@@ -14086,7 +14121,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) {\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: [{
@@ -14230,7 +14265,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}`);