@decaf-ts/for-angular 0.1.42 → 0.1.44

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, uihandlers, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 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 { 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, Pipe, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
 import { OperationKeys, InternalError, NotFoundError } from '@decaf-ts/db-decorators';
@@ -130,6 +130,7 @@ const ActionRoles = {
     confirm: 'confirm',
     submit: 'submit',
     clear: 'clear',
+    close: 'close',
     back: 'back',
     [OperationKeys.CREATE]: OperationKeys.CREATE,
     [OperationKeys.READ]: OperationKeys.READ,
@@ -5702,6 +5703,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                 .for(this.submit)
                 .error(`Error during ${this.operation} operation: ${error instanceof Error ? error.message : error}`);
             message = error instanceof Error ? error.message : error;
+            console.log(message);
         }
         if (this.isModalChild) {
             this.listenEvent.emit({
@@ -6064,6 +6066,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @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) {
+            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NgxSvgDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-decaf-svg]',
+                    standalone: true,
+                }]
+        }], propDecorators: { path: [{
+                type: Input,
+                args: ['ngx-decaf-svg']
+            }] } });
+
+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.18", ngImport: i0, type: DecafTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DecafTruncatePipe, isStandalone: true, name: "truncate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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,
+            ...{ position: 'top' },
+            ...this.options,
+        };
+        if (options?.text && options?.text.trim().length) {
+            const value = options.text.replace(/<[^>]+>/g, '').trim();
+            if (value.length > options.limit) {
+                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.addClass(tooltip, `dcf-tooltip-${options.position}`);
+                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.18", ngImport: i0, type: DecafTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", 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.18", ngImport: i0, type: DecafTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-decaf-tooltip]',
+                    providers: [DecafTruncatePipe],
+                    standalone: true,
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['ngx-decaf-tooltip']
+            }] } });
+
 /**
  * @module lib/engine/NgxFormFieldDirective
  * @description Base directive for CRUD form fields in Decaf Angular applications.
@@ -6527,90 +6736,6 @@ 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) {
-            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NgxSvgDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-decaf-svg]',
-                    standalone: true,
-                }]
-        }], propDecorators: { path: [{
-                type: Input,
-                args: ['ngx-decaf-svg']
-            }] } });
-
 let IconComponent = class IconComponent {
     constructor() {
         this.color = 'dark';
@@ -7225,7 +7350,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", borders: "borders", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton", handlers: "handlers" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-no-borders]=\"!borders\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", borders: "borders", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton", handlers: "handlers" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-no-borders]=\"!borders\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px}.dcf-modal-component.dcf-modal-confirm:not(.dcf-modal-alert){--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container{display:flex;align-items:center;border:1px}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container .dcf-title{margin:0!important;color:var(--dcf-color-danger)!important}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container .ti{margin-right:10px!important}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ModalComponent = __decorate([
     Dynamic(),
@@ -7246,7 +7371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         IonHeader,
                         IonTitle,
                         IonToolbar,
-                    ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-no-borders]=\"!borders\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-no-borders]=\"!borders\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px}.dcf-modal-component.dcf-modal-confirm:not(.dcf-modal-alert){--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container{display:flex;align-items:center;border:1px}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container .dcf-title{margin:0!important;color:var(--dcf-color-danger)!important}.dcf-modal-component.dcf-modal-confirm.dcf-modal-alert ::ng-deep .dcf-title-container .ti{margin-right:10px!important}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['component']
@@ -7286,6 +7411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
+    constructor() {
+        super(...arguments);
+        this.alert = false;
+    }
     async ngOnInit() {
         const { uid, item, pk } = this.data || {};
         const role = this.role || OperationKeys.DELETE;
@@ -7318,20 +7447,22 @@ let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
         return await this.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ModalConfirmComponent, isStandalone: true, selector: "ngx-decaf-modal-confirm", inputs: { data: "data", role: "role", message: "message", title: "title" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <div>\n\n  <h2 class=\"dcf-title\" [innerHTML]=\"translatable ? (title | translate) : title\"></h2>\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\">\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleAction('cancel')\" color=\"primary\">{{ locale +'.confirm.buttons.cancel' | translate }}</ion-button>\n    </div>\n\n      <div>\n      <ion-button (click)=\"handleAction()\" [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\">{{ locale +'.confirm.buttons.confirm' | translate }}</ion-button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalConfirmComponent, isStandalone: true, selector: "ngx-decaf-modal-confirm", inputs: { data: "data", role: "role", message: "message", alert: "alert", title: "title" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div>\n  @if (alert) {\n    <div class=\"dcf-title-container\">\n      <ngx-decaf-icon\n        name=\"ti-alert-square-rounded\"\n        color=\"danger\"\n      />\n      <h2\n        class=\"dcf-title\"\n        [innerHTML]=\"translatable ? (title | translate) : title\"\n      ></h2>\n    </div>\n  } @else {\n    <h2\n      class=\"dcf-title\"\n      [innerHTML]=\"translatable ? (title | translate) : title\"\n    ></h2>\n  }\n\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div\n    class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\"\n  >\n    @if (!alert) {\n      <div>\n        <ion-button\n          fill=\"clear\"\n          (click)=\"handleAction('cancel')\"\n          color=\"primary\"\n        >\n          {{ locale + '.confirm.buttons.cancel' | translate }}\n        </ion-button>\n      </div>\n\n      <div>\n        <ion-button\n          (click)=\"handleAction()\"\n          [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\"\n        >\n          {{ locale + '.confirm.buttons.confirm' | translate }}\n        </ion-button>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ 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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ModalConfirmComponent = __decorate([
     Dynamic()
 ], ModalConfirmComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-modal-confirm', standalone: true, imports: [TranslatePipe, IonButton], host: { '[attr.id]': 'uid' }, template: " <div>\n\n  <h2 class=\"dcf-title\" [innerHTML]=\"translatable ? (title | translate) : title\"></h2>\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\">\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleAction('cancel')\" color=\"primary\">{{ locale +'.confirm.buttons.cancel' | translate }}</ion-button>\n    </div>\n\n      <div>\n      <ion-button (click)=\"handleAction()\" [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\">{{ locale +'.confirm.buttons.confirm' | translate }}</ion-button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ngx-decaf-modal-confirm', standalone: true, imports: [TranslatePipe, IonButton, IconComponent], host: { '[attr.id]': 'uid' }, template: "<div>\n  @if (alert) {\n    <div class=\"dcf-title-container\">\n      <ngx-decaf-icon\n        name=\"ti-alert-square-rounded\"\n        color=\"danger\"\n      />\n      <h2\n        class=\"dcf-title\"\n        [innerHTML]=\"translatable ? (title | translate) : title\"\n      ></h2>\n    </div>\n  } @else {\n    <h2\n      class=\"dcf-title\"\n      [innerHTML]=\"translatable ? (title | translate) : title\"\n    ></h2>\n  }\n\n  <div class=\"dcf-content\">\n    <div [innerHTML]=\"translatable ? (message | translate) : message\"></div>\n  </div>\n  <div\n    class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-right\"\n  >\n    @if (!alert) {\n      <div>\n        <ion-button\n          fill=\"clear\"\n          (click)=\"handleAction('cancel')\"\n          color=\"primary\"\n        >\n          {{ locale + '.confirm.buttons.cancel' | translate }}\n        </ion-button>\n      </div>\n\n      <div>\n        <ion-button\n          (click)=\"handleAction()\"\n          [color]=\"role === OperationKeys.DELETE ? 'danger' : 'primary'\"\n        >\n          {{ locale + '.confirm.buttons.confirm' | translate }}\n        </ion-button>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], role: [{
                 type: Input
             }], message: [{
                 type: Input
+            }], alert: [{
+                type: Input
             }], title: [{
                 type: Input
             }] } });
@@ -7447,7 +7578,7 @@ async function getNgxSelectOptionsModal(title, options, uid, injector) {
     };
     return await getNgxModalComponent(props, {}, injector || undefined);
 }
-async function presentModalConfirm(props = {}, role, injector) {
+async function presentModalConfirm(props = {}, role = ActionRoles.confirm, injector) {
     return await getNgxModalComponent({
         tag: 'ngx-decaf-modal-confirm',
         headerTransparent: true,
@@ -7456,6 +7587,15 @@ async function presentModalConfirm(props = {}, role, injector) {
         globals: Object.assign({}, { role }, props),
     }, {}, injector);
 }
+async function presentModalAlert(props = {}, role = ActionRoles.close, injector) {
+    return await getNgxModalComponent({
+        tag: 'ngx-decaf-modal-confirm',
+        headerTransparent: true,
+        className: `dcf-modal-confirm dcf-modal-alert dcf-${role}`,
+        showCloseButton: true,
+        globals: Object.assign({}, { role }, props, { alert: true }),
+    }, {}, injector);
+}
 
 /**
  * @description A dynamic form field component for CRUD operations.
@@ -7522,6 +7662,12 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
          * @memberOf CrudFieldComponent
          */
         this.childOf = '';
+        /**
+         * @description Maximum character count before text content is truncated. `-1` disables truncation.
+         * @type {number}
+         * @default -1
+         */
+        this.maxContentLength = -1;
         /**
          * @description The initial value of the field.
          * @summary Sets the initial value of the form field. This can be a string, number, or Date
@@ -7676,6 +7822,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
                 this.hidden = true;
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
             this.formGroup = undefined;
+            this.value = `${this.value ?? ''}`;
         }
         else {
             this.options = await this.getOptions();
@@ -7857,7 +8004,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         return this.formControl.value.includes(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"path\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"path\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin!important;margin-bottom:.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", maxContentLength: "maxContentLength", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\" />\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox') {\n                <ion-text\n                  [class.dcf-empty]=\"!value?.length\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && value?.length\n                      ? {\n                          text: value,\n                          truncate: true,\n                          limit: maxContentLength,\n                          position: 'over',\n                        }\n                      : {}\n                  \"\n                  [innerHTML]=\"\n                    type === 'password'\n                      ? '********'\n                      : value?.length\n                        ? value\n                        : '-'\n                  \"\n                />\n              } @else {\n                <ion-badge\n                  mode=\"md\"\n                  color=\"light\"\n                >\n                  <ion-text\n                    [color]=\"!value ? 'danger' : 'primary'\"\n                    [innerHTML]=\"value\"\n                  />\n                </ion-badge>\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"path\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"path\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item .dcf-empty{padding-left:.05rem}ion-item.dcf-input-item ::ng-deep a{cursor:pointer}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin!important;margin-bottom:.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic(),
@@ -7880,7 +8027,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         IonText,
                         IonTextarea,
                         IconComponent,
-                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"path\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"path\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin!important;margin-bottom:.5rem!important}\n"] }]
+                        DecafTooltipDirective,
+                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\" />\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox') {\n                <ion-text\n                  [class.dcf-empty]=\"!value?.length\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && value?.length\n                      ? {\n                          text: value,\n                          truncate: true,\n                          limit: maxContentLength,\n                          position: 'over',\n                        }\n                      : {}\n                  \"\n                  [innerHTML]=\"\n                    type === 'password'\n                      ? '********'\n                      : value?.length\n                        ? value\n                        : '-'\n                  \"\n                />\n              } @else {\n                <ion-badge\n                  mode=\"md\"\n                  color=\"light\"\n                >\n                  <ion-text\n                    [color]=\"!value ? 'danger' : 'primary'\"\n                    [innerHTML]=\"value\"\n                  />\n                </ion-badge>\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n        [id]=\"uid\"\n        #container\n        [class]=\"'dcf-input-item ' + (operation || 'create')\"\n        [class.dcf-field-required]=\"required\"\n        [class.dcf-field-readonly]=\"readonly\"\n      >\n        @if (type === HTML5InputTypes.TEXTAREA) {\n          <ion-textarea\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n            #component\n          ></ion-textarea>\n        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                [id]=\"name\"\n                [mode]=\"'md'\"\n                [errorText]=\"getErrors(container)\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [justify]=\"justify || 'start'\"\n                [value]=\"value\"\n                [checked]=\"checked\"\n                [attr.readonly]=\"readonly\"\n                [formControlName]=\"name\"\n                #component\n              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"path\"\n                    [mode]=\"'md'\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [justify]=\"justify\"\n                    [value]=\"option.value\"\n                    [attr.readonly]=\"readonly\"\n                    [checked]=\"isOptionChecked(option.value)\"\n                    (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                    #component\n                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"path\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\n              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [interface]=\"interface\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden || !options?.length\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"label | translate\"\n              [value]=\"value ?? null\"\n              (click)=\"openSelectOptions($event, interface)\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\n                  <ion-select-option\n                    [value]=\"option.value\"\n                    [class.dcf-disabled]=\"option.disabled\"\n                    [class.dcf-hidden]=\"option.hidden\"\n                    [hidden]=\"option.hidden\"\n                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\n            [id]=\"name\"\n            [type]=\"type\"\n            [mode]=\"'md'\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n        }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate: { '0': name } }}\n      </p>\n    </div>\n  }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item .dcf-empty{padding-left:.05rem}ion-item.dcf-input-item ::ng-deep a{cursor:pointer}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin!important;margin-bottom:.5rem!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7901,6 +8049,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], validationMessage: [{
                 type: Input
+            }], maxContentLength: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -14236,127 +14386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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.18", ngImport: i0, type: DecafTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DecafTruncatePipe, isStandalone: true, name: "truncate" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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();
-            if (value.length > options.limit) {
-                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.18", ngImport: i0, type: DecafTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", 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.18", 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
@@ -15455,5 +15484,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormButtonsOptions, 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, isValidBase64, 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, DefaultFormButtonsOptions, 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, isValidBase64, isValidDate, itemMapper, patternValidators, presentModalAlert, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map