@decaf-ts/for-angular 0.1.11 → 0.1.14

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

@@ -550,6 +550,9 @@ function isNotUndefined(prop) {
 function getLocaleFromClassName(instance, suffix) {
     if (typeof instance !== Primitives.STRING)
         instance = instance.name || instance?.constructor?.name;
+    if (typeof instance === 'string' && instance.includes('.')) {
+        return instance;
+    }
     let name = instance;
     if (suffix)
         name = `${instance}${suffix.charAt(0).toUpperCase() + suffix.slice(1)}`;
@@ -2956,7 +2959,9 @@ var component = {
 		}
 	},
 	pagination: {
-		resume: "Showing page <span class=\"text-bold\">{0} of {1}</span>"
+		resume: "Showing page <span class=\"text-bold\">{0} of {1}</span>",
+		next: "Next",
+		previous: "Previous"
 	},
 	modal: {
 		confirm: {
@@ -5070,7 +5075,7 @@ class NgxPageDirective extends NgxComponentDirective {
     localeRoot = 'NgxPageDirective', 
     // eslint-disable-next-line @angular-eslint/prefer-inject
     hasMenu = true) {
-        super(localeRoot);
+        super('NgxPageDirective', localeRoot);
         /**
          * @description Page title text for the current view.
          * @summary Stores the title text to be displayed for this page. This can be set dynamically
@@ -5157,9 +5162,7 @@ class NgxPageDirective extends NgxComponentDirective {
      * @memberOf module:lib/engine/NgxPageDirective
      */
     async ngAfterViewInit() {
-        this.router.events
-            .pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1(1))
-            .subscribe(async (event) => {
+        this.router.events.pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1(1)).subscribe(async (event) => {
             if (event instanceof NavigationEnd) {
                 const url = (event?.url || '').replace('/', '');
                 this.currentRoute = url;
@@ -9477,7 +9480,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             if (formArray.length === 1) {
                 const currentGroup = formArray.at(0);
                 Object.keys(currentGroup?.controls).forEach((controlName) => {
-                    currentGroup.get(controlName)?.setValue(null);
+                    currentGroup.get(controlName)?.setValue(undefined);
                 });
             }
             else {
@@ -9637,12 +9640,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             }
             this.items = [
                 ...value
-                    .map((v) => {
-                    return {
-                        ...v,
-                        index: this.items?.length ? this.items.length + 1 : 1,
-                    };
-                })
                     .filter((v) => {
                     // return `${v[this.pk] || ""}`.trim().length;
                     return Object.entries(v).some(([k, v]) => k !== 'index' && v !== undefined && String(v).trim().length);
@@ -9653,7 +9650,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                             [this.pk]: this.pk || undefined,
                         }),
                     };
-                    index = v.index > 1 ? v.index : index + 1;
+                    index = v?.['index'] > 1 ? v?.['index'] : index + 1;
                     return {
                         ...item,
                         index,
@@ -9692,7 +9689,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\n              [children]=\"activePage || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"activePage?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          </div>\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ $index + 1 }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </ion-text>\n                </div>\n              </div>\n            </div>\n          }\n\n          @if (max) {\n            <div class=\"dcf-width-1-1 dcf-max-message-container\">\n              <ion-text\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\n              [flexMode]=\"item?.props?.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'collapse'\"\n              [children]=\"item || []\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"item?.props?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\n              [children]=\"activePage || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"activePage?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          </div>\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (\n                  item of items;\n                  track trackItemFn(item.index, item.title)\n                ) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ item.index }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </ion-text>\n                </div>\n              </div>\n            </div>\n          }\n\n          @if (max) {\n            <div class=\"dcf-width-1-1 dcf-max-message-container\">\n              <ion-text\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\n              [flexMode]=\"item?.props?.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'collapse'\"\n              [children]=\"item || []\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"item?.props?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -9714,7 +9711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         LayoutComponent,
                         IonSpinner,
                         IconComponent,
-                    ], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\n              [children]=\"activePage || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"activePage?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          </div>\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ $index + 1 }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </ion-text>\n                </div>\n              </div>\n            </div>\n          }\n\n          @if (max) {\n            <div class=\"dcf-width-1-1 dcf-max-message-container\">\n              <ion-text\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\n              [flexMode]=\"item?.props?.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'collapse'\"\n              [children]=\"item || []\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"item?.props?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
+                    ], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\n        <div\n          class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n        >\n          <div class=\"dcf-width-expand\">\n            <legend>{{ (title ? title : name) | translate }}</legend>\n          </div>\n          @if (!isRequired && ['create'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length\n                    ? locale + '.clear_items'\n                    : locale + '.hidden_form'\n                  ) | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\n              [children]=\"activePage || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"activePage?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          </div>\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (\n                  item of items;\n                  track trackItemFn(item.index, item.title)\n                ) {\n                  <ion-item\n                    [class.not-unique]=\"\n                      isUniqueError && item.title === isUniqueError\n                    \"\n                    [class.updating]=\"\n                      updatingItem?.['index'] === item.index - 1\n                    \"\n                    lines=\"full\"\n                    [button]=\"false\"\n                    [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n                  >\n                    @if (ordenable) {\n                      @if (items?.length > 1 && !updatingItem) {\n                        <ion-reorder slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            name=\"swap-vertical-outline\"\n                          ></ion-icon>\n                        </ion-reorder>\n                      } @else {\n                        <div slot=\"start\">\n                          <ion-icon\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError &&\n                        !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      {{ item.index }}.{{ item.title }}\n                      <!-- @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      } -->\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">\n                          {{ item.description }}\n                        </ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (\n                          !updatingItem || updatingItem?.[pk] !== item.title\n                        ) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"\n                              locale + '.edit_item' | translate\n                            \"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"\n                            locale + '.remove_item' | translate\n                          \"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\n              <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n                <div\n                  class=\"dcf-auto\"\n                  [attr.style]=\"'max-width: 50px'\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"alert-circle-outline\"\n                  ></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text\n                    color=\"danger\"\n                    class=\"dcf-text-small\"\n                  >\n                    {{\n                      locale + '.not_unique'\n                        | translate: { value: isUniqueError }\n                    }}\n                  </ion-text>\n                </div>\n              </div>\n            </div>\n          }\n\n          @if (max) {\n            <div class=\"dcf-width-1-1 dcf-max-message-container\">\n              <ion-text\n                class=\"dcf-text-small\"\n                [color]=\"\n                  items.length !== max\n                    ? !isDarkMode\n                      ? 'medium'\n                      : ''\n                    : 'primary'\n                \"\n              >\n                {{\n                  locale +\n                    (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon\n                    aria-hidden=\"true\"\n                    name=\"refresh-outline\"\n                    slot=\"start\"\n                  ></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon\n                      slot=\"icon-only\"\n                      name=\"ti-code-plus\"\n                      slot=\"start\"\n                    />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  @if (refreshing) {\n    <div class=\"dcf-loading-container\">\n      <ion-spinner\n        name=\"crescent\"\n        color=\"primary\"\n      ></ion-spinner>\n    </div>\n  } @else {\n    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\n              [flexMode]=\"item?.props?.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'collapse'\"\n              [children]=\"item || []\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [borders]=\"item?.props?.borders ?? false\"\n              [breakpoint]=\"breakpoint ?? 'large'\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControl: [{
                 type: Input
             }], customTypes: [{
@@ -11021,10 +11018,20 @@ class PaginationComponent extends NgxComponentDirective {
          * @summary If true, the pagination component will display a subset of pages with ellipses to indicate skipped pages. If false, all pages will be displayed.
          *
          * @type {boolean}
-         * @default false
+         * @default true
          * @memberOf PaginationComponent
          */
-        this.truncatePages = false;
+        this.truncatePages = true;
+        /**
+         * @description Controls whether all pages are disabled.
+         * @summary When set to true, disables the display and functionality of all pages, effectively hiding pagination
+         * and preventing navigation between pages.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf ListComponent
+         */
+        this.disablePages = false;
         /**
          * @description Event emitter for pagination navigation events.
          * @summary Emits a custom event when users navigate between pages, either by clicking
@@ -11059,6 +11066,9 @@ class PaginationComponent extends NgxComponentDirective {
      * @memberOf PaginationComponent
      */
     ngOnInit() {
+        if (this.disablePages) {
+            this.truncatePages = false;
+        }
         // this.locale = this.getLocale(this.translatable);
         this.pages = this.getPages(this.totalPages, this.current);
         this.last = this.totalPages;
@@ -11099,6 +11109,9 @@ class PaginationComponent extends NgxComponentDirective {
             },
             component: this.componentName,
         });
+        if (this.table && this.table?.nativeElement) {
+            this.table.nativeElement.focus();
+        }
     }
     /**
      * @description Generates the array of page objects for display.
@@ -11262,16 +11275,22 @@ class PaginationComponent extends NgxComponentDirective {
             this.handleClick(page > this.current ? 'next' : 'previous', page);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n      @for (page of pages; track page) {\n        <div\n          tabindex=\"0\"\n          [class]=\"page['class']\"\n          (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\"\n        >\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { table: "table", totalPages: "totalPages", current: "current", truncatePages: "truncatePages", disablePages: "disablePages" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          [class]=\"disablePages ? 'dcf-nav dcf-nav-prev' : ''\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n\n          @if (disablePages) {\n            {{ locale + '.previous' | translate }}\n          }\n        </div>\n      }\n      @if (!disablePages) {\n        @for (page of pages; track page) {\n          <div\n            tabindex=\"0\"\n            [class]=\"page['class']\"\n            (click)=\"navigate(page['index'])\"\n            (keydown.enter)=\"navigate(page['index'])\"\n            [class.dcf-active]=\"current === page['index']\"\n          >\n            <span class=\"page-item\">{{ page['text'] }}</span>\n          </div>\n        }\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          [class]=\"disablePages ? 'dcf-nav dcf-nav-next' : ''\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          @if (disablePages) {\n            {{ locale + '.next' | translate }}\n          }\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}.dcf-nav{background:var(--dcf-color-gray-2);padding:.5rem;border-radius:var(--dcf-border-radius-small)!important}.dcf-nav .ti,.dcf-nav ion-icon{position:relative;top:2px}.dcf-nav.dcf-nav-next{padding-left:1rem!important;padding-right:.5rem!important}.dcf-nav.dcf-nav-prev{padding-right:1rem!important;padding-left:.5rem!important}.dcf-nav:hover,.dcf-nav:active{color:var(--dcf-color-primary)!important}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n      @for (page of pages; track page) {\n        <div\n          tabindex=\"0\"\n          [class]=\"page['class']\"\n          (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\"\n        >\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { totalPages: [{
+            args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div\n  [id]=\"uid\"\n  class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n  #component\n>\n  <div class=\"dcf-width-1-1\">\n    <div\n      class=\"dcf-pagination-resume\"\n      [innerHTML]=\"locale + '.resume' | translate: { '0': current, '1': last }\"\n    ></div>\n\n    <div\n      #paginationComponent\n      class=\"dcf-pagination dcf-flex-center\"\n    >\n      @if (pages?.length > 1) {\n        <div\n          aria-label=\"previous\"\n          tabindex=\"0\"\n          [class]=\"disablePages ? 'dcf-nav dcf-nav-prev' : ''\"\n          (click)=\"previous()\"\n          (keydown.enter)=\"previous()\"\n          [class.dcf-disabled]=\"current === 1\"\n        >\n          <ion-icon\n            name=\"chevron-back-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n\n          @if (disablePages) {\n            {{ locale + '.previous' | translate }}\n          }\n        </div>\n      }\n      @if (!disablePages) {\n        @for (page of pages; track page) {\n          <div\n            tabindex=\"0\"\n            [class]=\"page['class']\"\n            (click)=\"navigate(page['index'])\"\n            (keydown.enter)=\"navigate(page['index'])\"\n            [class.dcf-active]=\"current === page['index']\"\n          >\n            <span class=\"page-item\">{{ page['text'] }}</span>\n          </div>\n        }\n      }\n      @if (pages?.length > 1) {\n        <div\n          tabindex=\"0\"\n          [class]=\"disablePages ? 'dcf-nav dcf-nav-next' : ''\"\n          (click)=\"next()\"\n          (keydown.enter)=\"next()\"\n          [class.dcf-disabled]=\"current === last\"\n        >\n          @if (disablePages) {\n            {{ locale + '.next' | translate }}\n          }\n          <ion-icon\n            name=\"chevron-forward-outline\"\n            aria-hidden=\"true\"\n          ></ion-icon>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}.dcf-nav{background:var(--dcf-color-gray-2);padding:.5rem;border-radius:var(--dcf-border-radius-small)!important}.dcf-nav .ti,.dcf-nav ion-icon{position:relative;top:2px}.dcf-nav.dcf-nav-next{padding-left:1rem!important;padding-right:.5rem!important}.dcf-nav.dcf-nav-prev{padding-right:1rem!important;padding-left:.5rem!important}.dcf-nav:hover,.dcf-nav:active{color:var(--dcf-color-primary)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { table: [{
+                type: Input
+            }], totalPages: [{
                 type: Input,
                 args: [{ required: true }]
             }], current: [{
                 type: Input
+            }], truncatePages: [{
+                type: Input
+            }], disablePages: [{
+                type: Input
             }], clickEvent: [{
                 type: Output
             }] } });
@@ -11521,6 +11540,26 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.disableSort = false;
+        /**
+         * @description Controls whether pagination pages are disabled.
+         * @summary When set to true, disables the pagination controls, preventing users from navigating between pages.
+         * This is useful for scenarios where pagination is not required or should be hidden.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf ListComponent
+         */
+        this.disablePaginationPages = false;
+        /**
+         * @description Controls whether pagination pages are truncated.
+         * @summary When set to true, truncates the pagination controls to show fewer pages, improving the user interface
+         * for lists with a large number of pages.
+         *
+         * @type {boolean}
+         * @default true
+         * @memberOf ListComponent
+         */
+        this.truncatePaginationPages = true;
         /**
          * @description Configuration for the empty state display.
          * @summary Customizes how the empty state is displayed when no data is available.
@@ -12184,11 +12223,13 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 }
                 else {
                     this.changeDetectorRef.detectChanges();
-                    request = await this.parseResult(await repo
-                        .select()
-                        .where(this.parseConditions(this.searchValue))
-                        .orderBy((this.sortBy || this.pk), this.sortDirection)
-                        .execute());
+                    request = await this.parseResult(typeof this.searchValue === 'string'
+                        ? await repo.find(this.searchValue, this.sortDirection)
+                        : await repo
+                            .select()
+                            .where(this.parseConditions(this.searchValue))
+                            .orderBy((this.sortBy || this.pk), this.sortDirection)
+                            .execute());
                     data = [];
                     this.changeDetectorRef.detectChanges();
                 }
@@ -12342,9 +12383,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     getMoreData(length) {
         if (this.type === ListComponentsTypes.INFINITE) {
             if (this.paginator) {
-                length = length * this.limit;
+                length = this.paginator['_recordCount'] || length * this.limit;
             }
-            if (length <= this.limit) {
+            if (length >= this.limit) {
                 this.loadMoreData = false;
             }
             else {
@@ -12356,9 +12397,18 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
         }
         else {
-            this.pages = length;
-            if (this.pages === 1)
-                this.loadMoreData = false;
+            if (!this.paginator) {
+                this.pages = length * this.limit;
+                if (this.pages === 1) {
+                    this.loadMoreData = false;
+                }
+            }
+            else {
+                this.pages = this.paginator?.total || this.paginator['_totalPages'];
+                if (this.pages === 1) {
+                    this.loadMoreData = false;
+                }
+            }
         }
     }
     /**
@@ -12448,7 +12498,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", disablePaginationPages: "disablePaginationPages", truncatePaginationPages: "truncatePaginationPages", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"\n        'dcf-grid dcf-grid-actions ' + enableFilter\n          ? 'dcf-grid-small'\n          : 'dcf-grid-collapse'\n      \"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button\n              expand=\"block\"\n              (click)=\"changeOperation(OperationKeys.CREATE)\"\n            >\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (initialized && data?.length) {\n  <div\n    class=\"dcf-list-component\"\n    #component\n  >\n    <ion-list\n      [id]=\"uid\"\n      [inset]=\"inset\"\n      [lines]=\"lines\"\n    >\n      @if (item?.tag) {\n        @for (child of items; track trackItemFn($index, child)) {\n          <ngx-decaf-component-renderer\n            [tag]=\"item.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [globals]=\"{\n              item: child,\n              mapper: mapper,\n              route: isModalChild ? route : undefined,\n              model: child,\n              isModalChild: child.isModalChild,\n              emitEvent: child.emitEvent,\n            }\"\n          ></ngx-decaf-component-renderer>\n        }\n      } @else {\n        <ng-content></ng-content>\n      }\n    </ion-list>\n  </div>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [disablePages]=\"disablePaginationPages\"\n        [truncatePages]=\"truncatePaginationPages\"\n        [totalPages]=\"pages\"\n        [table]=\"component\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text\n            class=\"date\"\n            style=\"width: 20%\"\n          >\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"\n          empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\n        \"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"\n          locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -12476,7 +12526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent,
-                    ], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"'dcf-grid dcf-grid-actions ' + enableFilter ? 'dcf-grid-small' : 'dcf-grid-collapse'\"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for (child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{\n            item: child,\n            mapper: mapper,\n            route: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\n          }\"\n        ></ngx-decaf-component-renderer>\n      }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div\n      [class]=\"\n        'dcf-grid dcf-grid-actions ' + enableFilter\n          ? 'dcf-grid-small'\n          : 'dcf-grid-collapse'\n      \"\n    >\n      <div class=\"dcf-width-expand@m dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [multiple]=\"multipleFilter\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n        >\n          <div>\n            <ion-button\n              expand=\"block\"\n              (click)=\"changeOperation(OperationKeys.CREATE)\"\n            >\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (initialized && data?.length) {\n  <div\n    class=\"dcf-list-component\"\n    #component\n  >\n    <ion-list\n      [id]=\"uid\"\n      [inset]=\"inset\"\n      [lines]=\"lines\"\n    >\n      @if (item?.tag) {\n        @for (child of items; track trackItemFn($index, child)) {\n          <ngx-decaf-component-renderer\n            [tag]=\"item.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [globals]=\"{\n              item: child,\n              mapper: mapper,\n              route: isModalChild ? route : undefined,\n              model: child,\n              isModalChild: child.isModalChild,\n              emitEvent: child.emitEvent,\n            }\"\n          ></ngx-decaf-component-renderer>\n        }\n      } @else {\n        <ng-content></ng-content>\n      }\n    </ion-list>\n  </div>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [disablePages]=\"disablePaginationPages\"\n        [truncatePages]=\"truncatePaginationPages\"\n        [totalPages]=\"pages\"\n        [table]=\"component\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for (skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text\n            class=\"date\"\n            style=\"width: 20%\"\n          >\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"\n          empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\n        \"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"\n          locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -12511,6 +12561,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], disableSort: [{
                 type: Input
+            }], disablePaginationPages: [{
+                type: Input
+            }], truncatePaginationPages: [{
+                type: Input
             }], empty: [{
                 type: Input
             }], clickEvent: [{
@@ -13534,7 +13588,6 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         this.previewFile = undefined;
         if (this.formControl instanceof FormControl) {
             this.formControl.setValue(null);
-            console.log(this.formControl.value);
         }
         this.files = [];
     }
@@ -14472,7 +14525,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </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\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\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(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\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(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\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: ["table", "totalPages", "current", "truncatePages", "disablePages"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14488,7 +14541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         EmptyStateComponent,
                         IconComponent,
                         PaginationComponent,
-                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n@if (loadMoreData && !refreshing) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
+                    ], 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=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </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\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\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(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\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(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\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: [{