@decaf-ts/for-angular 0.1.18 → 0.1.21

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, effect, 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';
@@ -17,6 +17,7 @@ import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, t
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { Router, NavigationStart, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { MenuController } from '@ionic/angular';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { map, distinctUntilChanged, takeUntil, shareReplay, tap, switchMap } from 'rxjs/operators';
@@ -842,6 +843,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) || '');
@@ -1867,6 +1872,7 @@ 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) {
@@ -1875,6 +1881,7 @@ class NgxFormService {
                             continue;
                         }
                         data[key] = NgxFormService.getFormData(control);
+                        continue;
                     }
                     if (control instanceof FormArray) {
                         const value = this.getFormArrayControlsValue(control);
@@ -1893,7 +1900,7 @@ class NgxFormService {
                 }
                 const value = control.value;
                 const isValid = control.valid;
-                if (parentProps.multiple) {
+                if (parentProps?.multiple) {
                     if (isValid) {
                         data[key] = Array.isArray(value) ? value : [value];
                     }
@@ -1905,7 +1912,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'])) {
@@ -1915,7 +1921,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();
@@ -3227,39 +3233,7 @@ 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
- * @description Provides utilities for managing media-related features such as color scheme detection,
- * window resize observation, and SVG injection.
- * @summary
- * This module exposes the `NgxMediaService` class, which includes methods for observing the
- * application's color scheme, handling window resize events, and dynamically injecting SVG content
- * into the DOM. It leverages Angular's dependency injection system and RxJS for reactive programming.
- *
- * Key exports:
- * - {@link NgxMediaService}: The main service class providing media-related utilities.
- */
 /**
  * @description Service for managing media-related features in an Angular application.
  * @summary
@@ -3378,7 +3352,7 @@ class NgxMediaService {
         const win = this._window;
         this.angularZone.runOutsideAngular(() => {
             fromEvent(win, 'resize')
-                .pipe(distinctUntilChanged(), takeUntil(this.destroy$), shareReplay(1))
+                .pipe(distinctUntilChanged(), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }))
                 .subscribe(() => {
                 const dimensions = {
                     width: win.innerWidth,
@@ -3464,7 +3438,7 @@ class NgxMediaService {
             }
             // store the latest schema value
             this.currentSchema = scheme;
-        }), takeUntil(this.destroy$), shareReplay(1));
+        }), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * @description Observes the scroll state of the active page.
@@ -3486,12 +3460,9 @@ class NgxMediaService {
         // await delay for page change to complete
         return timer(awaitDelay).pipe(switchMap(() => new Observable((observer) => {
             const activeContent = this._document.querySelector('ion-router-outlet .ion-page:not(.ion-page-hidden) ion-content');
-            if (!(activeContent &&
-                typeof activeContent.getScrollElement === 'function'))
+            if (!(activeContent && typeof activeContent.getScrollElement === 'function'))
                 return this.angularZone.run(() => observer.next(false));
-            activeContent
-                .getScrollElement()
-                .then((element) => {
+            activeContent.getScrollElement().then((element) => {
                 const emitScrollState = () => {
                     const scrollTop = element.scrollTop || 0;
                     this.angularZone.run(() => observer.next(scrollTop > offset));
@@ -3500,7 +3471,7 @@ class NgxMediaService {
                 emitScrollState();
                 return () => element.removeEventListener('scroll', emitScrollState);
             });
-        })), distinctUntilChanged(), takeUntil(this.destroy$), shareReplay(1));
+        })), distinctUntilChanged(), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * @description Loads an SVG file and injects it into a target element.
@@ -3522,7 +3493,7 @@ class NgxMediaService {
         this.angularZone.runOutsideAngular(() => {
             const svg$ = http
                 .get(path, { responseType: 'text' })
-                .pipe(takeUntil(this.destroy$), shareReplay(1));
+                .pipe(takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
             svg$.subscribe((svg) => {
                 this.angularZone.run(() => {
                     target.innerHTML = svg;
@@ -3547,8 +3518,7 @@ class NgxMediaService {
         if (!this.darkModeEnabled())
             return of(false);
         const documentElement = this._document.documentElement;
-        return this.colorScheme$.pipe(map((scheme) => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) ||
-            scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay(1), takeUntil(this.destroy$));
+        return this.colorScheme$.pipe(map((scheme) => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) || scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }), takeUntil(this.destroy$));
     }
     /**
      * @description Toggles dark mode for a specific component.
@@ -3650,8 +3620,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) {
@@ -3825,7 +3798,7 @@ class NgxRepositoryDirective extends DecafComponent {
                     this.repository?.observe(this.repositoryObserver);
                     this.log.for(this.observe).info(`Registered repository observer for model ${this.modelName}`);
                     this.repositoryObserverSubject
-                        .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+                        .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
                         .subscribe(([model, action, uid, data]) => this.handleObserveEvent(data, model, action, uid));
                 }
             }
@@ -3909,10 +3882,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 +3900,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;
                 }
@@ -4416,6 +4390,11 @@ class NgxComponentDirective extends NgxRepositoryDirective {
          * @default WindowColorSchemes.light
          */
         this.colorSchema = WindowColorSchemes.light;
+        this.popState$ = fromEvent(window, 'popstate').pipe(shareReplay$1({ bufferSize: 1, refCount: true }));
+        // Convertendo o Observable em Signal
+        this.popStateSignal = toSignal(this.popState$, {
+            initialValue: null,
+        });
         this.value = undefined;
         this.componentName = componentName || this.constructor.name || 'NgxComponentDirective';
         this.localeRoot = localeRoot;
@@ -4430,6 +4409,36 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                 this.colorSchema = WindowColorSchemes.dark;
             }
         });
+        effect(async () => {
+            const event = this.popStateSignal();
+            if (event) {
+                console.log(`Back detectado!' no component ${this.componentName}`);
+                await this.beforeInitialize(this);
+            }
+        });
+    }
+    async beforeInitialize(component) {
+        console.log(`calling render for component ${this.componentName}`);
+        if (!component) {
+            component = this;
+        }
+        const instance = component;
+        if (this.propsMapperFn) {
+            for (const [key, fn] of Object.entries(this.propsMapperFn)) {
+                if (key in instance)
+                    instance[key] = await fn(instance);
+            }
+        }
+        // search for handler render
+        const handler = this.handlers?.[ComponentEventNames.Render] || undefined;
+        if (handler && typeof handler === 'function') {
+            await handler.bind(instance)(instance, this.name, this.value);
+        }
+        // search for event render
+        const event = this.events?.[ComponentEventNames.Render] || undefined;
+        if (event && typeof event === 'function') {
+            await event.bind(instance)(instance, this.name, this.value);
+        }
     }
     async initialize() {
         this.mediaService.darkModeEnabled();
@@ -4441,7 +4450,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         if (this.operation === OperationKeys.CREATE) {
             this.refreshing = false;
         }
-        this.router.events.pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$)).subscribe(async (event) => {
+        this.router.events
+            .pipe(shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
+            .subscribe(async (event) => {
             if (event instanceof NavigationStart) {
                 if (this.value) {
                     await this.ngOnDestroy();
@@ -4449,24 +4460,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
             }
         });
         this.route = this.router.url.replace('/', '');
-        const instance = this;
-        if (this.propsMapperFn) {
-            for (const [key, fn] of Object.entries(this.propsMapperFn)) {
-                if (key in instance)
-                    instance[key] = await fn(instance);
-            }
-        }
         // search for handler to render event
         if (!this.initialized) {
-            const handler = this.handlers?.[ComponentEventNames.Render] || undefined;
-            if (handler && typeof handler === 'function') {
-                await handler.bind(instance)(instance, this.name, this.value);
-            }
-            // search for event to render event
-            const event = this.events?.[ComponentEventNames.Render] || undefined;
-            if (event && typeof event === 'function') {
-                await event.bind(instance)(instance, this.name, this.value);
-            }
+            await this.beforeInitialize(this);
         }
         await super.initialize();
         this.initialized = true;
@@ -5166,7 +5162,9 @@ class NgxPageDirective extends NgxComponentDirective {
      * @memberOf module:lib/engine/NgxPageDirective
      */
     async ngAfterViewInit() {
-        this.router.events.pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1(1)).subscribe(async (event) => {
+        this.router.events
+            .pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1({ bufferSize: 1, refCount: true }))
+            .subscribe(async (event) => {
             if (event instanceof NavigationEnd) {
                 const url = (event?.url || '').replace('/', '');
                 this.currentRoute = url;
@@ -5378,7 +5376,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:
@@ -5810,7 +5808,7 @@ class NgxRenderableComponentDirective extends NgxModelPageDirective {
                 const value = this.instance[key];
                 if (value instanceof EventEmitter)
                     this.instance[key]
-                        .pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+                        .pipe(shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
                         .subscribe(async (event) => {
                         await this.handleEvent({
                             component: component.name || '',
@@ -6515,12 +6513,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 +6590,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 +6599,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 +6624,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;
@@ -10483,7 +10539,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
     async ngOnInit() {
         this.windowWidth = getWindowWidth();
         this.windowResizeSubscription = fromEvent(window, 'resize')
-            .pipe(debounceTime(300), takeUntil$1(this.destroySubscriptions$), shareReplay$1(1))
+            .pipe(debounceTime(300), takeUntil$1(this.destroySubscriptions$), shareReplay$1({ bufferSize: 1, refCount: true }))
             .subscribe(() => {
             this.windowWidth = getWindowWidth();
         });
@@ -11679,7 +11735,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!this.searchbarPlaceholder)
             this.searchbarPlaceholder = `${this.locale}.search.placeholder`;
         this.clickItemSubject
-            .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+            .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
             .subscribe((event) => this.clickEventEmit(event));
         this.limit = Number(this.limit);
         this.start = Number(this.start);
@@ -13985,6 +14041,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 +14578,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 +14642,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,17 +14664,21 @@ 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);
         this.repositoryObserverSubject
-            .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+            .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
             .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 +14701,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,18 +14718,22 @@ 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 getFilterOptionsMapper = (pk) => {
             if (!this.filterBy) {
                 this.filterBy = pk;
             }
             if (!this.filterOptionsMapper) {
-                this.filterOptionsMapper =
-                    this.filterOptionsMapper ||
-                        ((item) => ({
-                            text: `${item[pk]}`,
-                            value: `${item[pk]}`,
-                        }));
+                this.filterOptionsMapper = (item) => ({
+                    text: `${item[pk]}`,
+                    value: `${item[pk]}`,
+                });
             }
         };
         if (typeof this.filterModel === 'function') {
@@ -14445,6 +14749,14 @@ let TableComponent = class TableComponent extends ListComponent {
             }
         }
     }
+    /**
+     * @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);
@@ -14509,12 +14821,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);
@@ -14522,6 +14849,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();
@@ -14531,6 +14866,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) {
@@ -14554,6 +14895,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();
@@ -14563,7 +14910,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()
@@ -14579,8 +14926,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
@@ -14698,72 +15050,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.
@@ -14851,6 +15137,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.
@@ -14872,5 +15205,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