@decaf-ts/for-angular 0.1.17 → 0.1.20

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

@@ -1,6 +1,6 @@
 import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, Pipe, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, Pipe, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
 import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
@@ -842,6 +842,10 @@ function getMenuIcon(label, menu) {
     const item = menu.find((m) => m.label?.toLowerCase() === label.toLowerCase());
     return item?.icon || '';
 }
+function dateFromString(value) {
+    const dateArray = value.includes('T') ? value.split('T') : value.split(' ');
+    return new Date(dateArray.length === 1 ? `${value}T00:00:00` : value);
+}
 
 function getDbAdapterFlavour() {
     return (getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || '');
@@ -1612,11 +1616,7 @@ class NgxFormService {
         const { name, childOf } = componentProps;
         if (isMultiple)
             componentProps['pk'] = componentProps['pk'] || parentProps?.['pk'] || '';
-        const fullPath = childOf
-            ? isMultiple
-                ? `${childOf}.${index}.${name}`
-                : `${childOf}.${name}`
-            : name;
+        const fullPath = childOf ? (isMultiple ? `${childOf}.${index}.${name}` : `${childOf}.${name}`) : name;
         const [parentGroup, controlName] = this.resolveParentGroup(formGroup, fullPath, componentProps, parentProps);
         if (!parentGroup.get(controlName)) {
             const control = NgxFormService.fromProps(componentProps, componentProps.updateMode || 'change');
@@ -1793,9 +1793,7 @@ class NgxFormService {
      * @static
      */
     static addControlFromProps(id, props, parentProps) {
-        const componentPages = (typeof props?.pages === Primitives.NUMBER
-            ? props?.pages
-            : props?.pages?.length);
+        const componentPages = (typeof props?.pages === Primitives.NUMBER ? props?.pages : props?.pages?.length);
         const parentPages = (typeof parentProps?.pages === Primitives.NUMBER
             ? parentProps?.pages
             : parentProps?.pages?.length);
@@ -1806,9 +1804,7 @@ class NgxFormService {
             const parentChildOf = parentProps?.childOf || '';
             const index = props.page || parentProps?.page;
             // dont check page in nested childs with same childOf
-            if ((!(typeof index === 'number') || index === 0) &&
-                childOf.length &&
-                childOf !== parentChildOf)
+            if ((!(typeof index === 'number') || index === 0) && childOf.length && childOf !== parentChildOf)
                 throw Error(`Property 'page' is required and greather than 0 on ${props.name}`);
             // if(index > formLength) {
             //   if((form as KeyValue)?.['lastIndex'] && index === (form as KeyValue)['lastIndex']['page']) {
@@ -1875,18 +1871,19 @@ class NgxFormService {
         const parentProps = NgxFormService.getPropsFromControl(formGroup);
         for (const key in formGroup.controls) {
             const control = formGroup.controls[key];
+            const props = NgxFormService.getPropsFromControl(control);
             if (!(control instanceof FormControl)) {
                 if (control.disabled) {
-                    if (control instanceof FormGroup)
+                    if (control instanceof FormGroup) {
+                        const hasValue = this.controlHasValue(control);
+                        if (!hasValue) {
+                            continue;
+                        }
                         data[key] = NgxFormService.getFormData(control);
+                        continue;
+                    }
                     if (control instanceof FormArray) {
-                        const value = control.controls
-                            .map((c) => {
-                            if (Object.values(c.value).some((p) => p !== undefined && String(p).trim() !== ''))
-                                return c.value;
-                            return undefined;
-                        })
-                            .filter((v) => v !== undefined);
+                        const value = this.getFormArrayControlsValue(control);
                         if (Array.isArray(value)) {
                             if (value.length > 0) {
                                 data[key] = value.reduce((acc, curr, i) => {
@@ -1902,9 +1899,9 @@ class NgxFormService {
                 }
                 const value = control.value;
                 const isValid = control.valid;
-                if (parentProps.multiple) {
+                if (parentProps?.multiple) {
                     if (isValid) {
-                        data[key] = value;
+                        data[key] = Array.isArray(value) ? value : [value];
                     }
                     else {
                         this.reset(control);
@@ -1914,7 +1911,6 @@ class NgxFormService {
                 data[key] = NgxFormService.getFormData(control);
                 continue;
             }
-            const props = NgxFormService.getPropsFromControl(control);
             // const { readonly } = (props as IFormComponentProperties) || false; TODO: dont send readonly fields?
             let value = control.value;
             if (!HTML5CheckTypes.includes(props['type'])) {
@@ -1924,7 +1920,7 @@ class NgxFormService {
                         break;
                     case HTML5InputTypes.DATE:
                     case HTML5InputTypes.DATETIME_LOCAL:
-                        value = typeof value === Primitives.STRING ? new Date(`${value}T00:00:00`) : value;
+                        value = typeof value === Primitives.STRING ? dateFromString(value) : value;
                         break;
                     default:
                         value = !isNaN(value) ? value : escapeHtml(value)?.trim();
@@ -1932,14 +1928,23 @@ class NgxFormService {
             }
             else {
                 if (props['type'] === HTML5InputTypes.CHECKBOX)
-                    value =
-                        Array.isArray(value) || typeof value === Primitives.STRING ? value : (value ?? false);
+                    value = Array.isArray(value) || typeof value === Primitives.STRING ? value : (value ?? false);
             }
             data[key] = value;
         }
         NgxFormService.enableAllGroupControls(formGroup);
         return data;
     }
+    static getFormArrayControlsValue(formArray) {
+        return formArray.controls
+            .map((c) => {
+            return this.controlHasValue(c) ? c.value : undefined;
+        })
+            .filter((v) => v !== undefined);
+    }
+    static controlHasValue(control) {
+        return Object.values(control.value).some((p) => p !== undefined && String(p).trim() !== '');
+    }
     /**
      * @description Validates fields in a form control or form group.
      * @summary Recursively validates all fields in a form control or form group, marking them as touched and dirty.
@@ -3227,26 +3232,6 @@ function provideDecafI18nConfig(config = { fallbackLang: 'en', lang: 'en' }, res
         provideDecafI18nLoader(resources, versionedSuffix),
     ];
 }
-class DecafTranslatePipe {
-    constructor() {
-        this.translate = inject(TranslateService);
-    }
-    transform(value, ...args) {
-        if (I18nLoader.enabled && value) {
-            return this.translate.instant(value, ...args);
-        }
-        return `<div class="dcf-translation-key">${sf(value, args)}</div>`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, isStandalone: true, name: "translate", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'translate',
-                    pure: false,
-                }]
-        }] });
 
 /**
  * @module NgxMediaService
@@ -3650,8 +3635,11 @@ class NgxTranslateService extends DecafTranslateService {
     instant(key, interpolateParams) {
         return this.translateService.instant(key, interpolateParams);
     }
-    translate(key, params) {
-        return this.instant(key, params);
+    async translate(key, params) {
+        if (typeof params === Primitives.STRING) {
+            params = { '0': params };
+        }
+        return firstValueFrom(this.translateService.instant(key, params));
     }
     async get(key, params) {
         if (key) {
@@ -3909,10 +3897,11 @@ class NgxRepositoryDirective extends DecafComponent {
             const handler = this.handlers?.[hook] || undefined;
             const model = this.buildTransactionModel(data || {}, repository, operation);
             if (handler && typeof handler === 'function') {
-                const result = (await handler.bind(this)(model, repository, this.modelId));
+                const result = await handler.bind(this)(model, repository, this.modelId);
                 if (result === false) {
                     return undefined;
                 }
+                return result;
             }
             return model;
         }
@@ -3926,7 +3915,7 @@ class NgxRepositoryDirective extends DecafComponent {
             const hook = `after${operation.charAt(0).toUpperCase() + operation.slice(1)}`;
             const handler = this.handlers?.[hook] || undefined;
             if (handler && typeof handler === 'function') {
-                const result = (await handler.bind(this)(model, repository, this.modelId));
+                const result = await handler.bind(this)(model, repository, this.modelId);
                 if (result === false) {
                     return undefined;
                 }
@@ -5378,7 +5367,7 @@ class NgxModelPageDirective extends NgxPageDirective {
         }
         if (handler && role) {
             this.handlers = handlers || {};
-            return await handler.bind(this)(event, data || {}, role);
+            return await handler.bind(this)(event, data || {}, this, role);
         }
         switch (name) {
             case ComponentEventNames.Submit:
@@ -6515,12 +6504,70 @@ function Dynamic() {
 //   };
 // }
 
+/**
+ * @module lib/directives/NgxSvgDirective
+ * @description Standalone directive that inlines SVG assets into the host element.
+ * @summary Provides {@link NgxSvgDirective}, a lightweight Angular directive that resolves
+ * an SVG file path from either its input binding or the host element's `src` attribute and
+ * delegates the HTTP fetch and DOM injection to {@link NgxMediaService}.
+ * @link {@link NgxSvgDirective}
+ */
+/**
+ * @description Angular directive that fetches an SVG file and inlines it into the host element.
+ * @summary Standalone directive bound to the `[ngx-decaf-svg]` attribute selector. On
+ * initialisation it resolves the SVG asset path from the `[ngx-decaf-svg]` input binding or,
+ * as a fallback, the host element's native `src` attribute. Once a non-empty path is determined
+ * it calls {@link NgxMediaService.loadSvgObserver}, which performs the HTTP request via
+ * {@link HttpClient} and injects the SVG markup directly into the host element's DOM, enabling
+ * full CSS styling of the inlined SVG.
+ * @class NgxSvgDirective
+ * @implements {OnInit}
+ * @example
+ * ```html
+ * <!-- Via directive binding -->
+ * <div [ngx-decaf-svg]="'/assets/icons/logo.svg'"></div>
+ *
+ * <!-- Fallback to src attribute -->
+ * <img ngx-decaf-svg src="/assets/icons/arrow.svg" />
+ * ```
+ */
 class NgxSvgDirective {
     constructor() {
+        /**
+         * @description Service responsible for fetching and inlining the SVG markup.
+         * @summary Injected {@link NgxMediaService} instance used by `ngOnInit` to perform the
+         * HTTP request and inject the resulting SVG markup into the host element's DOM.
+         * @type {NgxMediaService}
+         * @memberOf module:lib/directives/NgxSvgDirective
+         */
         this.mediaService = inject(NgxMediaService);
+        /**
+         * @description Reference to the host DOM element into which the SVG will be injected.
+         * @summary Obtained via Angular's `inject(ElementRef)`. Provides access to the native
+         * element forwarded to {@link NgxMediaService.loadSvgObserver} as the injection target,
+         * and used as a fallback source for the `src` attribute when `path` is not set.
+         * @type {ElementRef}
+         * @memberOf module:lib/directives/NgxSvgDirective
+         */
         this.element = inject(ElementRef);
+        /**
+         * @description HTTP client instance forwarded to the media service for the SVG fetch.
+         * @summary Injected {@link HttpClient} passed directly to
+         * {@link NgxMediaService.loadSvgObserver} so the service can issue the GET request for
+         * the SVG file without managing its own HTTP dependency.
+         * @type {HttpClient}
+         * @memberOf module:lib/directives/NgxSvgDirective
+         */
         this.http = inject(HttpClient);
     }
+    /**
+     * @description Resolves the SVG path and triggers the inline load.
+     * @summary Trims `path` and, when empty, falls back to the host element's `src` attribute.
+     * When a valid path is found, delegates to {@link NgxMediaService.loadSvgObserver} to
+     * fetch the file and inject the SVG markup into the host element.
+     * @returns {void}
+     * @memberOf module:lib/directives/NgxSvgDirective
+     */
     ngOnInit() {
         this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
         if (this.path) {
@@ -6534,7 +6581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             type: Directive,
             args: [{
                     selector: '[ngx-decaf-svg]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], propDecorators: { path: [{
                 type: Input,
@@ -6543,7 +6590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 let IconComponent = class IconComponent {
     constructor() {
-        this.color = "dark";
+        this.color = 'dark';
         this.slot = 'icon-only';
         this.button = false;
         this.buttonFill = 'clear';
@@ -6568,7 +6615,7 @@ let IconComponent = class IconComponent {
             this.type = 'icon';
             this.name = `ti-${this.name.replace(/ti-/g, '')}`;
         }
-        this.mediaService.isDarkMode().subscribe(isDark => {
+        this.mediaService.isDarkMode().subscribe((isDark) => {
             this.isDarkMode = isDark;
         });
         this.initialized = true;
@@ -9704,7 +9751,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 (\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\n          class=\"dcf-fieldset-read-item\"\n          [class.dcf-accordion]=\"multiple\"\n        >\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [accordion]=\"multiple\"\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-read-item.dcf-accordion{margin-top:.5rem}.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", "accordion"] }, { 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\n          class=\"dcf-fieldset-read-item\"\n          [class.dcf-accordion]=\"multiple\"\n        >\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [accordion]=\"multiple\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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", "accordion"] }, { 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(),
@@ -9726,7 +9773,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 (\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\n          class=\"dcf-fieldset-read-item\"\n          [class.dcf-accordion]=\"multiple\"\n        >\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [accordion]=\"multiple\"\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-read-item.dcf-accordion{margin-top:.5rem}.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\n          class=\"dcf-fieldset-read-item\"\n          [class.dcf-accordion]=\"multiple\"\n        >\n          <div>\n            <ngx-decaf-layout\n              [isModalChild]=\"isModalChild\"\n              [className]=\"operation\"\n              [accordion]=\"multiple\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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: [{
@@ -13985,6 +14032,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }] } });
 
+class DecafTruncatePipe {
+    transform(value, limit = 30, trail = '...') {
+        if (!value) {
+            return '';
+        }
+        const sanitized = this.sanitize(value);
+        return sanitized.length > limit ? `${sanitized.substring(0, limit)}${trail}` : sanitized;
+    }
+    sanitize(value) {
+        return value.replace(/<[^>]+>/g, '').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DecafTruncatePipe, isStandalone: true, name: "truncate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate',
+                    // pure: true,
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @module DecafTooltipDirective
+ * @description Provides a tooltip directive for the decaf-ts for-angular library.
+ * @summary This module defines the {@link DecafTooltipDirective}, a standalone Angular directive
+ * that dynamically appends a tooltip element to any host element it decorates. It also supports
+ * optional text truncation using the {@link DecafTruncatePipe}.
+ */
+/**
+ * @description Angular directive that appends a tooltip `<span>` to the host element and
+ * optionally truncates its visible text content.
+ * @summary The `DecafTooltipDirective` is a standalone Angular directive bound to the
+ * `[ngx-decaf-tooltip]` attribute selector. It processes the {@link TooltipConfig} provided
+ * via the `options` input, sanitizes the text, and appends a `.dcf-tooltip` `<span>` containing
+ * the sanitized full text to the host element. The directive also applies the `dcf-tooltip-parent`
+ * CSS class to the host for tooltip positioning. When truncation is enabled, the host element's
+ * inner content is replaced with the truncated text before the tooltip span is added.
+ * @example
+ * ```html
+ * <!-- Basic tooltip -->
+ * <span [ngx-decaf-tooltip]="{ text: 'Full description here' }">Hover me</span>
+ *
+ * <!-- Truncated visible text with tooltip showing the full content -->
+ * <span [ngx-decaf-tooltip]="{ text: veryLongLabel, truncate: true, limit: 20, trail: '…' }">
+ *   {{ veryLongLabel }}
+ * </span>
+ * ```
+ * @class DecafTooltipDirective
+ */
+/**
+ * @description Angular lifecycle hook invoked whenever one or more input properties change.
+ * @summary Processes the {@link ITooltipConfig} options, sanitizes the text, and updates the
+ * host element's content and tooltip span accordingly. Applies the `dcf-tooltip-parent` CSS class
+ * to the host for styling.
+ * @return {void}
+ */
+class DecafTooltipDirective {
+    constructor() {
+        /**
+         * @description Reference to the host DOM element into which the SVG will be injected.
+         * @summary Obtained via Angular's `inject(ElementRef)`. Provides access to the native
+         * element forwarded to {@link NgxMediaService.loadSvgObserver} as the injection target,
+         * and used as a fallback source for the `src` attribute when `path` is not set.
+         * @type {ElementRef}
+         * @memberOf module:lib/directives/NgxSvgDirective
+         */
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.truncatePipe = inject(DecafTruncatePipe);
+    }
+    /**
+     * @description Angular lifecycle hook invoked whenever one or more input properties change.
+     * @summary Processes the {@link TooltipConfig} options, sanitizes the text, and updates the
+     * host element's content and tooltip span accordingly. Applies the `dcf-tooltip-parent` CSS class
+     * to the host for styling.
+     * @return {void}
+     */
+    ngOnChanges() {
+        const options = {
+            truncate: false,
+            limit: 30,
+            ...this.options,
+        };
+        if (options?.text && options?.text.trim().length) {
+            const value = options.text.replace(/<[^>]+>/g, '').trim();
+            const text = !options.truncate
+                ? value
+                : this.truncatePipe.transform(value, options.limit, options.trail || '...');
+            const element = this.element?.nativeElement ? this.element?.nativeElement : this.element;
+            if (options.truncate) {
+                this.renderer.setProperty(element, 'innerHTML', '');
+                const textNode = this.renderer.createText(text);
+                this.renderer.appendChild(element, textNode);
+            }
+            // creating tooltip element
+            const tooltip = this.renderer.createElement('span');
+            this.renderer.addClass(tooltip, 'dcf-tooltip');
+            this.renderer.appendChild(tooltip, this.renderer.createText(this.truncatePipe.sanitize(value)));
+            this.renderer.appendChild(element, tooltip);
+            this.renderer.addClass(element, 'dcf-tooltip-parent');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: DecafTooltipDirective, isStandalone: true, selector: "[ngx-decaf-tooltip]", inputs: { options: ["ngx-decaf-tooltip", "options"] }, providers: [DecafTruncatePipe], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-decaf-tooltip]',
+                    providers: [DecafTruncatePipe],
+                    standalone: true,
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['ngx-decaf-tooltip']
+            }] } });
+
+/**
+ * @description Abstract base class for dynamic Angular modules
+ * @summary The DynamicModule serves as a base class for Angular modules that need to be
+ * dynamically loaded or configured at runtime. It provides a common type for the rendering
+ * engine to identify and work with dynamic modules.
+ * @class DynamicModule
+ * @example
+ * ```typescript
+ * @NgModule({
+ *   declarations: [MyComponent],
+ *   imports: [CommonModule]
+ * })
+ * export class MyDynamicModule extends DynamicModule {}
+ * ```
+ */
+class DynamicModule {
+}
+
+class NgxEventHandler extends DecafEventHandler {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor() {
+        super();
+        this._data = null;
+    }
+    async handle(event, data, instance, ...args) {
+        this.log.for(this.handle).info(`Handle called with args: ${event}, ${data}, ${instance}, ${args}`);
+    }
+    from(...args) {
+        this.log.for(this.process).info(`Process called with args: ${args}`);
+        return this;
+    }
+    async process(...args) {
+        this.log.for(this.process).info(`Process called with args: ${args}`);
+    }
+    async delete(...args) {
+        this.log.for(this.delete).info(`Delete called with args: ${args}`);
+    }
+    async batchOperation(...args) {
+        this.log.for(this.batchOperation).info(`batchOperation called with args: ${args}`);
+    }
+    async beforeCreate(...args) {
+        this.log.for(this.beforeCreate).info(`beforeCreate called with args: ${args}`);
+    }
+    async beforeUpdate(...args) {
+        this.log.for(this.beforeUpdate).info(`beforeUpdate called with args: ${args}`);
+    }
+    async afterCreate(...args) {
+        this.log.for(this.afterCreate).info(`afterCreate called with args: ${args}`);
+    }
+    async afterUpdate(...args) {
+        this.log.for(this.afterUpdate).info(`afterUpdate called with args: ${args}`);
+    }
+}
+
+/**
+ * @module engine
+ * @description Angular rendering engine for Decaf applications
+ * @summary The engine module provides core functionality for rendering Angular components
+ * in Decaf applications. It includes constants, decorators, rendering engines, and utility types
+ * that enable dynamic component creation, property mapping, and component lifecycle management.
+ * Key exports include {@link NgxRenderingEngine}, {@link DynamicModule}, and various decorators
+ * for component configuration.
+ */
+
 /**
  * @description Service for handling routing operations in the application.
  * @summary The RouterService provides a unified interface for navigation and route management,
@@ -14339,10 +14569,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 let TableComponent = class TableComponent extends ListComponent {
     constructor() {
         super(...arguments);
+        /**
+         * @description Maximum character count before cell content is truncated. `-1` disables truncation.
+         * @type {number}
+         * @default -1
+         */
+        this.maxContentLength = -1;
+        /**
+         * @description Column keys whose values are never truncated regardless of `maxContentLength`.
+         * @type {string[]}
+         * @default ['userId']
+         */
+        this.preserve = ['userId'];
+        /**
+         * @description Column header label array, mirrors `cols` after `getOperations()` resolves.
+         * @type {string[]}
+         */
         this.headers = [];
+        /**
+         * @description When `true`, row-level action buttons are rendered if the user has the required permissions.
+         * @type {boolean}
+         * @default true
+         */
         this.allowOperations = true;
+        /**
+         * @description Injected {@link NgxRouterService} used to read URL query parameters for pre-populating the search state.
+         * @type {NgxRouterService}
+         */
         this.routerService = inject(NgxRouterService);
     }
+    /**
+     * @description Resolves and sorts the visible column keys from the current mapper metadata.
+     * @summary Reads `this._mapper` to obtain all columns that carry a `sequence` property,
+     * then sorts them so that columns anchored to `UIKeys.FIRST` appear first, numerically
+     * sequenced columns are ordered by their value, and `UIKeys.LAST` anchored columns appear
+     * last. Returns the final sorted array of column key strings.
+     * @return {string[]} Sorted array of column keys derived from the mapper.
+     * @mermaid
+     * sequenceDiagram
+     *   participant TC as TableComponent
+     *   participant M as _mapper
+     *   TC->>M: Object.entries(_mapper)
+     *   M-->>TC: [key, value][] entries
+     *   TC->>TC: sort by sequence weight (FIRST=0, number=1, LAST=100)
+     *   TC-->>TC: return sorted keys[]
+     */
     get _cols() {
         this.mapper = this._mapper;
         return Object.entries(this.mapper)
@@ -14362,9 +14633,20 @@ let TableComponent = class TableComponent extends ListComponent {
         })
             .map(([key]) => key);
     }
+    /**
+     * @description Returns the column header labels derived directly from the resolved `cols` array.
+     * @return {string[]} Shallow copy of `cols` used as table header labels.
+     */
     get _headers() {
         return this.cols.map((col) => col);
     }
+    /**
+     * @description Filters the raw mapper to only the entries that declare a `sequence` property.
+     * @summary Iterates over `this.mapper`, retains only keys whose value is a plain object
+     * containing a `sequence` field, and returns the resulting subset as a {@link KeyValue} map
+     * used by `_cols` for ordered column resolution.
+     * @return {KeyValue} Filtered mapper containing only sequenced column definitions.
+     */
     get _mapper() {
         return Object.keys(this.mapper).reduce((accum, curr) => {
             const mapper = this.mapper[curr];
@@ -14373,8 +14655,13 @@ let TableComponent = class TableComponent extends ListComponent {
             return accum;
         }, {});
     }
+    /**
+     * @description Angular lifecycle hook that initializes the table and loads its first page of data.
+     * @summary Sets up the table by resolving columns, headers, and filter options. It also reads URL query parameters
+     * to pre-populate the search state and triggers the initial data refresh.
+     * @return {Promise<void>}
+     */
     async ngOnInit() {
-        // this.parseProps(this);
         await super.initialize();
         this.type = ListComponentsTypes.PAGINATED;
         this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
@@ -14383,7 +14670,6 @@ let TableComponent = class TableComponent extends ListComponent {
             .subscribe(([model, action, uid, data]) => this.handleObserveEvent(model, action, uid, data));
         this.cols = this._cols;
         this.getOperations();
-        this.searchValue = undefined;
         const filter = this.routerService.getQueryParamValue('filter');
         if (filter) {
             const value = this.routerService.getQueryParamValue('value');
@@ -14406,6 +14692,11 @@ let TableComponent = class TableComponent extends ListComponent {
         }
         await this.refresh();
     }
+    /**
+     * @description Determines which row-level CRUD operations are permitted and finalizes the column list.
+     * @summary Checks user permissions for `UPDATE` and `DELETE` operations. Updates the `cols` and `headers` arrays accordingly.
+     * @return {void}
+     */
     getOperations() {
         if (this.allowOperations) {
             this.allowOperations = this.isAllowed(OperationKeys.UPDATE) || this.isAllowed(OperationKeys.DELETE);
@@ -14418,25 +14709,45 @@ let TableComponent = class TableComponent extends ListComponent {
         }
         this.headers = this._headers;
     }
+    /**
+     * @description Populates `filterOptions` from a function call or a decorator-bound repository.
+     * @summary Resolves filter options dynamically based on the provided `filterModel`. Supports both
+     * async functions and repository-based data sources.
+     * @return {Promise<void>}
+     */
     async getFilterOptions() {
-        const repo = getModelAndRepository(this.filterModel);
-        if (repo) {
-            const { repository, pk } = repo;
-            if (!this.filterBy)
+        const getFilterOptionsMapper = (pk) => {
+            if (!this.filterBy) {
                 this.filterBy = pk;
+            }
             if (!this.filterOptionsMapper) {
-                this.filterOptionsMapper =
-                    this.filterOptionsMapper ||
-                        ((item) => ({
-                            text: `${item[pk]}`,
-                            value: `${item[pk]}`,
-                        }));
-            }
-            const query = await repository.select().execute();
-            if (query?.length)
+                this.filterOptionsMapper = (item) => ({
+                    text: `${item[pk]}`,
+                    value: `${item[pk]}`,
+                });
+            }
+        };
+        if (typeof this.filterModel === 'function') {
+            this.filterOptions = await this.filterModel();
+        }
+        else {
+            const repo = getModelAndRepository(this.filterModel);
+            if (repo) {
+                const { repository, pk } = repo;
+                getFilterOptionsMapper(pk);
+                const query = await repository.select().execute();
                 this.filterOptions = query.map((item) => this.filterOptionsMapper(item));
+            }
         }
     }
+    /**
+     * @description Maps a single raw data row to the cell-structured format expected by the table template.
+     * @summary Applies transformations and event bindings to each row of data, preparing it for rendering.
+     * @param {KeyValue} item - Raw data object representing a single table row.
+     * @param {KeyValue} mapper - Column mapper definitions.
+     * @param {KeyValue} [props={}] - Additional rendering props.
+     * @return {Promise<KeyValue>} Mapped row object.
+     */
     async itemMapper(item, mapper, props = {}) {
         this.model = item;
         const mapped = super.itemMapper(item, this.cols.filter((c) => c !== 'actions'), props);
@@ -14501,12 +14812,27 @@ let TableComponent = class TableComponent extends ListComponent {
         }
         return mapped;
     }
+    /**
+     * @description Maps an array of raw data objects to the cell-structured rows used by the template.
+     * @summary Resolves all rows concurrently via `Promise.all`, delegating each item to `itemMapper`.
+     * @param {KeyValue[]} data - Raw row objects returned by the data source.
+     * @return {Promise<KeyValue[]>} Array of structured row objects.
+     */
     async mapResults(data) {
         this._data = [...data];
         if (!data || !data.length)
             return [];
         return await Promise.all(data.map(async (curr) => await this.itemMapper(curr, this.mapper, { uid: curr[this.pk] })));
     }
+    /**
+     * @description Handles a CRUD action triggered by a row action button.
+     * @summary Invokes a custom handler or navigates to the appropriate route for the given action.
+     * @param {IBaseCustomEvent} event - The originating event.
+     * @param {UIFunctionLike | undefined} handler - Optional custom handler.
+     * @param {string} uid - Primary key value of the target row.
+     * @param {CrudOperations} action - The CRUD operation type.
+     * @return {Promise<void>}
+     */
     async handleAction(event, handler, uid, action) {
         if (handler) {
             const handlerFn = await handler(this, event, uid);
@@ -14514,6 +14840,14 @@ let TableComponent = class TableComponent extends ListComponent {
         }
         await this.handleRedirect(event, uid, action);
     }
+    /**
+     * @description Navigates to the CRUD action route for the specified row.
+     * @summary Verifies the requested `action` and navigates to the appropriate route.
+     * @param {Event | IBaseCustomEvent} event - The originating event.
+     * @param {string} uid - Primary key value of the target row.
+     * @param {CrudOperations} action - The CRUD operation to navigate to.
+     * @return {Promise<void>}
+     */
     async handleRedirect(event, uid, action) {
         if (event instanceof Event) {
             event.preventDefault();
@@ -14523,6 +14857,12 @@ let TableComponent = class TableComponent extends ListComponent {
             await this.router.navigate([`/${this.route}/${action}/${uid}`]);
         }
     }
+    /**
+     * @description Opens the filter select UI, allowing the user to narrow table results by a field value.
+     * @summary Determines the presentation mode and handles user selection.
+     * @param {Event} event - The click event that triggered the filter open action.
+     * @return {Promise<void>}
+     */
     async openFilterSelectOptions(event) {
         const type = this.filterOptions.length > 10 ? SelectFieldInterfaces.MODAL : SelectFieldInterfaces.POPOVER;
         if (type === SelectFieldInterfaces.MODAL) {
@@ -14546,6 +14886,12 @@ let TableComponent = class TableComponent extends ListComponent {
             }
         }
     }
+    /**
+     * @description Clears the active filter selection and resets the table to an unfiltered state.
+     * @summary Resets `filterValue` and reloads the full data set.
+     * @param {CustomEvent} event - The clear event emitted by the filter select control.
+     * @return {Promise<void>}
+     */
     async handleFilterSelectClear(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -14555,7 +14901,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=\"\">\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", 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                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? { text: col.value.value, truncate: maxContentLength }\n                      : {}\n                  \"\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: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14571,8 +14917,13 @@ 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=\"\">\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: [{
+                        DecafTooltipDirective,
+                    ], 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                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? { text: col.value.value, truncate: maxContentLength }\n                      : {}\n                  \"\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: { maxContentLength: [{
+                type: Input
+            }], preserve: [{
+                type: Input
+            }], filterModel: [{
                 type: Input
             }], filterOptions: [{
                 type: Input
@@ -14690,72 +15041,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  */
 // Component exports
 
-/**
- * @description Abstract base class for dynamic Angular modules
- * @summary The DynamicModule serves as a base class for Angular modules that need to be
- * dynamically loaded or configured at runtime. It provides a common type for the rendering
- * engine to identify and work with dynamic modules.
- * @class DynamicModule
- * @example
- * ```typescript
- * @NgModule({
- *   declarations: [MyComponent],
- *   imports: [CommonModule]
- * })
- * export class MyDynamicModule extends DynamicModule {}
- * ```
- */
-class DynamicModule {
-}
-
-class NgxEventHandler extends DecafEventHandler {
-    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-    constructor() {
-        super();
-        this._data = null;
-    }
-    async handle(event, data, instance, ...args) {
-        this.log
-            .for(this.handle)
-            .info(`Handle called with args: ${event}, ${data}, ${instance}, ${args}`);
-    }
-    from(...args) {
-        this.log.for(this.process).info(`Process called with args: ${args}`);
-        return this;
-    }
-    async process(...args) {
-        this.log.for(this.process).info(`Process called with args: ${args}`);
-    }
-    async delete(...args) {
-        this.log.for(this.delete).info(`Delete called with args: ${args}`);
-    }
-    async batchOperation(...args) {
-        this.log.for(this.batchOperation).info(`batchOperation called with args: ${args}`);
-    }
-    async beforeCreate(...args) {
-        this.log.for(this.beforeCreate).info(`beforeCreate called with args: ${args}`);
-    }
-    async beforeUpdate(...args) {
-        this.log.for(this.beforeUpdate).info(`beforeUpdate called with args: ${args}`);
-    }
-    async afterCreate(...args) {
-        this.log.for(this.afterCreate).info(`afterCreate called with args: ${args}`);
-    }
-    async afterUpdate(...args) {
-        this.log.for(this.afterUpdate).info(`afterUpdate called with args: ${args}`);
-    }
-}
-
-/**
- * @module engine
- * @description Angular rendering engine for Decaf applications
- * @summary The engine module provides core functionality for rendering Angular components
- * in Decaf applications. It includes constants, decorators, rendering engines, and utility types
- * that enable dynamic component creation, property mapping, and component lifecycle management.
- * Key exports include {@link NgxRenderingEngine}, {@link DynamicModule}, and various decorators
- * for component configuration.
- */
-
 /**
  * @module lib/for-angular-common.module
  * @description Core Angular module and providers for Decaf's for-angular package.
@@ -14843,6 +15128,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }]
         }] });
 
+/**
+ * @module DecafTranslatePipe
+ * @description Angular pipe for translating text using the `@ngx-translate/core` library.
+ * @summary The `DecafTranslatePipe` provides a mechanism to translate text keys into localized
+ * strings based on the current language settings. It integrates with the `TranslateService`
+ * to fetch translations dynamically and supports fallback rendering for untranslated keys.
+ * @class DecafTranslatePipe
+ * @implements {PipeTransform}
+ */
+class DecafTranslatePipe {
+    constructor() {
+        /**
+         * @description Injected instance of the `TranslateService` for handling translations.
+         * @type {TranslateService}
+         */
+        this.translate = inject(TranslateService);
+    }
+    /**
+     * @description Transforms a text key into its localized string representation.
+     * @summary Uses the `TranslateService` to fetch the translated string for the provided key.
+     * If translations are disabled or the key is not found, it returns a fallback HTML-wrapped key.
+     * @param {string} value - The translation key to be transformed.
+     * @param {...any[]} args - Optional arguments to interpolate within the translation string.
+     * @return {string} The translated string or a fallback HTML-wrapped key.
+     * @example
+     * ```html
+     * {{ 'HELLO_WORLD' | translate }}
+     * ```
+     */
+    transform(value, ...args) {
+        if (I18nLoader.enabled && value) {
+            return this.translate.instant(value, ...args);
+        }
+        return `<div class="dcf-translation-key">${sf(value, args)}</div>`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, isStandalone: true, name: "translate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    // pure: false,
+                    standalone: true,
+                }]
+        }] });
+
 /**
  * @module module:lib/public-apis
  * @description Public exports for the for-angular package.
@@ -14864,5 +15196,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTranslatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, dateFromString, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map