@decaf-ts/for-angular 0.0.81 → 0.0.83

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

@@ -1799,10 +1799,11 @@ class NgxFormService {
                     }
                     continue;
                 }
-                data[key] = value;
+                data[key] = NgxFormService.getFormData(control);
                 continue;
             }
             const props = NgxFormService.getPropsFromControl(control);
+            // const { readonly } = (props as IFormComponentProperties) || false; TODO: dont send readonly fields?
             let value = control.value;
             if (!HTML5CheckTypes.includes(props['type'])) {
                 switch (props['type']) {
@@ -1811,7 +1812,7 @@ class NgxFormService {
                         break;
                     case HTML5InputTypes.DATE:
                     case HTML5InputTypes.DATETIME_LOCAL:
-                        value = typeof value === Primitives.STRING ? new Date(value) : value;
+                        value = typeof value === Primitives.STRING ? new Date(`${value}T00:00:00`) : value;
                         break;
                     default:
                         value = escapeHtml(value)?.trim();
@@ -2394,8 +2395,10 @@ class NgxRenderingEngine extends RenderingEngine {
                 delete inputs[input];
             return !isMapped;
         });
-        if (unmappedKeys.length > 0 && isDevelopmentMode())
-            getLogger(this).warn(`Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`);
+        // if (unmappedKeys.length > 0 && isDevelopmentMode())
+        //   getLogger(this).warn(
+        //     `Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`,
+        //   );
         const operation = NgxRenderingEngine._operation;
         const hiddenOn = inputs?.hidden || [];
         if (hiddenOn.includes(operation))
@@ -3152,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.
@@ -3211,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.
@@ -3236,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));
@@ -3278,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);
@@ -3303,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
@@ -3337,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));
@@ -3371,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;
                 });
@@ -3396,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.
@@ -3439,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) {
@@ -3558,12 +3566,18 @@ 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();
                 }
             }
             else {
+                // this._data = await this.read(this.modelId as PrimaryKeyType);
                 // if (String(this.modelName) === this.model?.constructor.name) {
                 //   const model = await this.repository.read(this.modelId as PrimaryKeyType);
                 //   if (model) {
@@ -3596,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));
@@ -3622,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();
         }
-        return (await this.repository.query(condtion, sortBy, sortDirection));
+        try {
+            return (await this.repository.query(condition, sortBy, sortDirection));
+        }
+        catch (error) {
+            this.log.for(this).error(error?.message || String(error));
+            return [];
+        }
+        // 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) {
@@ -4174,6 +4203,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) => {
@@ -4958,6 +4990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class NgxModelPageDirective extends NgxPageDirective {
     constructor() {
         super(...arguments);
+        this.refreshing = true;
         /**
          * @description The CRUD operation type to be performed on the model.
          * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
@@ -5017,10 +5050,11 @@ class NgxModelPageDirective extends NgxPageDirective {
     }
     async initialize() {
         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
@@ -5040,6 +5074,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;
         }
@@ -5050,8 +5085,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;
             }
@@ -5062,6 +5096,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             }
             this.log.error(error);
         }
+        this.refreshing = false;
     }
     /**
      * @description Enables CRUD operations except those specified.
@@ -5227,17 +5262,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);
-                        this.model = Model.build({ [prop]: model ? model : data }, modelName);
+                        const _model = (await this.transactionEnd(data, repository, OperationKeys.READ)) ||
+                            Model.build(data, model.constructor.name);
+                        this.name = prop;
+                        this.model = Model.build({ [prop]: _model }, modelName);
                     }
                     else {
                         // model[parent] = {
@@ -5259,8 +5293,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
@@ -6285,6 +6318,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.
@@ -6398,9 +6432,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) {
@@ -6428,11 +6459,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
@@ -8211,7 +8244,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-label>\n                        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        <ion-text style=\"width: 100%\">\n                          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        </ion-text>\n                      </ion-label>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -8219,7 +8252,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-label>\n                        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        <ion-text style=\"width: 100%\">\n                          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n                        </ion-text>\n                      </ion-label>\n                    </ion-item>\n                  } @else {\n                    <ngx-decaf-component-renderer\n                      [tag]=\"child.tag\"\n                      [pk]=\"pk\"\n                      [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                      [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                      [children]=\"child?.children || []\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      [globals]=\"{ props: child.props }\"\n                    />\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], grid: [{
@@ -8270,7 +8303,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        [modelId]=\"modelId\"\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(),
@@ -8278,7 +8311,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        [modelId]=\"modelId\"\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: () => [] });
 
 /**
@@ -11329,7 +11362,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);
                 }
@@ -11522,21 +11555,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.
@@ -11812,13 +11845,15 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!this._repository) {
             this._repository = this.repository;
         }
-        if (!this.repositoryObserver) {
-            this.repositoryObserver = {
-                refresh: async (...args) => this.handleRepositoryRefresh(...args),
-            };
-        }
+        // if (!this.repositoryObserver) {
+        //   this.repositoryObserver = {
+        //     refresh: async (...args) => this.handleRepositoryRefresh(...args),
+        //   };
+        // }
         try {
-            this._repository.observe(this.repositoryObserver);
+            const observerHandler = this._repository['observerHandler'];
+            if (!observerHandler)
+                this._repository.observe(this.repositoryObserver);
         }
         catch (error) {
             this.log.info(error?.message);
@@ -13606,8 +13641,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,
@@ -13947,63 +13986,75 @@ let TableComponent = class TableComponent extends ListComponent {
     }
     async itemMapper(item, mapper, props = {}) {
         this.model = item;
-        const mapped = await super.itemMapper(item, this.cols.filter((c) => c !== 'actions'), props);
+        const mapped = super.itemMapper(item, this.cols.filter((c) => c !== 'actions'), props);
         const { children } = this.props || [];
         const entries = Object.entries(mapped);
-        const resultEntries = await Promise.all(entries.map(async ([curr, value], index) => {
-            try {
-                const child = children[index];
-                if (child) {
-                    const { events, name } = child?.['props'] || {};
-                    if (events) {
-                        const sequence = (mapper[name]?.sequence || index) + (!this.cols.includes('actions') ? 1 : 0);
-                        const evts = this.parseEvents(events, this);
-                        for (const [key, evt] of Object.entries(evts)) {
-                            const handler = evt;
-                            if (key === ComponentEventNames.Render) {
-                                if (handler?.name === ComponentEventNames.Render) {
-                                    value = await handler.bind(this)(this, name, value);
+        for (const [curr, value] of entries) {
+            const getEvents = async (index, name) => {
+                try {
+                    const child = children.find((c) => c?.['props']?.name === name);
+                    if (child) {
+                        const { events, name } = child?.['props'] || {};
+                        if (events) {
+                            const sequence = String(index);
+                            const evts = this.parseEvents(events, this);
+                            for (const [key, evt] of Object.entries(evts)) {
+                                const handler = evt;
+                                if (key === ComponentEventNames.Render) {
+                                    if (handler?.name === ComponentEventNames.Render) {
+                                        mapped[sequence] = {
+                                            ...mapped[sequence],
+                                            value: await handler.bind(this)(this, name, value),
+                                        };
+                                    }
+                                    else {
+                                        const handlerFn = await handler(this, name, value);
+                                        mapped[sequence] = {
+                                            ...mapped[sequence],
+                                            value: name + ' ' + typeof handlerFn === 'function' || handlerFn instanceof Promise
+                                                ? await handlerFn.bind(this)(this, name, value)
+                                                : handlerFn,
+                                        };
+                                    }
                                 }
-                                else {
-                                    const handlerFn = await handler(this, name, value);
-                                    value =
-                                        typeof handlerFn === 'function' || handlerFn instanceof Promise
-                                            ? await handlerFn.bind(this)(this, name, value)
-                                            : handlerFn;
+                                if (key === 'handleClick' || key === 'handleAction') {
+                                    mapped[sequence] = {
+                                        ...mapped[sequence],
+                                        handler: {
+                                            index: Number(sequence),
+                                            handle: handler.bind(this),
+                                        },
+                                    };
                                 }
                             }
-                            if (key === 'handleClick' || key === 'handleAction') {
-                                props = {
-                                    ...props,
-                                    handler: {
-                                        col: String(sequence),
-                                        handle: handler.bind(this),
-                                    },
-                                };
-                            }
                         }
                     }
+                    return value;
                 }
-            }
-            catch (error) {
-                this.log
-                    .for(this.itemMapper)
-                    .error(`Error mapping child events. ${error?.message || error}`);
-            }
-            const propName = this.cols[index];
-            const parserFn = mapper[propName]?.valueParserFn || undefined;
-            const resolvedValue = parserFn ? await parserFn(this, propName, value) : value;
-            return [curr, resolvedValue];
-        }));
-        return resultEntries.reduce((accum, [key, value]) => ({ ...accum, [key]: value }), {
-            ...props,
-        });
+                catch (error) {
+                    this.log
+                        .for(this.itemMapper)
+                        .error(`Error mapping child events. ${error?.message || error}`);
+                }
+            };
+            const name = this.cols[Number(curr)];
+            const index = Number(curr);
+            const parserFn = mapper[name]?.valueParserFn || undefined;
+            const resolvedValue = parserFn ? await parserFn(this, name, value) : value;
+            mapped[curr] = {
+                prop: name ?? this.pk,
+                value: resolvedValue,
+                index: index || 0,
+            };
+            await getEvents(index, name);
+        }
+        return mapped;
     }
     async mapResults(data) {
         this._data = [...data];
         if (!data || !data.length)
             return [];
-        return await Promise.all(data.map((curr) => this.itemMapper(curr, this.mapper, { uid: curr[this.pk] })));
+        return await Promise.all(data.map(async (curr) => await this.itemMapper(curr, this.mapper, { uid: curr[this.pk] })));
     }
     async handleAction(event, handler, uid, action) {
         if (handler) {
@@ -14053,7 +14104,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                      item?.handler && item?.handler.col === col.key\n                        ? item.handler.handle\n                        : undefined,\n                      item.uid,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.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)=\"handleRedirect($event, item.uid, OperationKeys.UPDATE, true)\"\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)=\"handleRedirect($event, item.uid, OperationKeys.DELETE, true)\"\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        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14069,7 +14120,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                      item?.handler && item?.handler.col === col.key\n                        ? item.handler.handle\n                        : undefined,\n                      item.uid,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.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)=\"handleRedirect($event, item.uid, OperationKeys.UPDATE, true)\"\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)=\"handleRedirect($event, item.uid, OperationKeys.DELETE, true)\"\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        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
         }], propDecorators: { filterModel: [{
                 type: Input
             }], filterOptions: [{