@decaf-ts/for-angular 0.0.84 → 0.0.86

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

@@ -1,24 +1,24 @@
-import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, ComponentEventNames, UIKeys, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
+import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, DecafTranslateService, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, provideEnvironmentInitializer, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
-import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
+import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
 import { OperationKeys, InternalError, NotFoundError } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, AbstractControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
 import { Logging, LoggedClass, sf } from '@decaf-ts/logging';
+import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { uses, Metadata, apply, metadata } from '@decaf-ts/decoration';
 import { AnimationController, provideIonicAngular, LoadingController, IonIcon, IonButton, IonModal, IonSpinner, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonBadge, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, NavController } from '@ionic/angular/standalone';
 import { faker } from '@faker-js/faker';
-import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, timer, shareReplay as shareReplay$1, takeUntil as takeUntil$1, firstValueFrom, debounceTime } from 'rxjs';
+import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, timer, firstValueFrom, shareReplay as shareReplay$1, takeUntil as takeUntil$1, debounceTime } from 'rxjs';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { Router, NavigationStart, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { MenuController } from '@ionic/angular';
-import { TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
+import { TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { map, distinctUntilChanged, takeUntil, shareReplay, tap, switchMap } from 'rxjs/operators';
 import { __decorate, __metadata } from 'tslib';
 import { addIcons } from 'ionicons';
@@ -27,6 +27,19 @@ import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, addO
 import { modalController } from '@ionic/core';
 
 const DB_ADAPTER_FLAVOUR_TOKEN = 'DbAdapterFlavour';
+/**
+ * Maps validation keys for password, email, and URL to their corresponding regex patterns.
+ * These patterns are used to validate field values against standard format requirements.
+ */
+/**
+ * Maps validation keys for password, email, and URL to their corresponding regex patterns.
+ * These patterns are used to validate field values against standard format requirements.
+ */
+const patternValidators = {
+    [ValidationKeys.PASSWORD]: DEFAULT_PATTERNS.PASSWORD.CHAR8_ONE_OF_EACH,
+    [ValidationKeys.EMAIL]: DEFAULT_PATTERNS.EMAIL,
+    [ValidationKeys.URL]: DEFAULT_PATTERNS.URL,
+};
 /**
  * @description Injection token for registering the database adapter provider.
  * @summary Used to inject the database adapter instance that implements DecafRepositoryAdapter.
@@ -167,6 +180,7 @@ const AngularEngineKeys = {
     RENDERED: 'rendered-as-',
     MAPPER: 'mapper',
     CHILDREN: 'children',
+    ERRORS: 'errors',
     LISTABLE: 'listable',
     RENDER: 'render',
     RENDERED_ID: 'rendered-as-{0}',
@@ -332,291 +346,6 @@ const SelectFieldInterfaces = {
     MODAL: 'modal',
 };
 
-/**
- * @module module:lib/engine/ValidatorFactory
- * @description Factory for generating Angular ValidatorFn from Decaf validation metadata.
- * @summary ValidatorFactory maps validation keys defined by the Decaf validation system
- * into Angular ValidatorFn instances. It supports type-based resolution and comparison
- * validators and provides helpers to create proxies for nested control validation.
- *
- * @link {@link ValidatorFactory}
- */
-/**
- *
- * Resolves the correct validator key and its associated properties based on the input key and type.
- *
- * When the validation key is TYPE, it's necessary to resolve the actual validator based on the
- * field's type (e.g., 'password', 'email', 'url') instead of using the generic getValidator("type") logic.
- * This allows directly invoking specific validators like getValidator('password'), ensuring the correct
- * behavior for type-based validation.
- *
- * @param key - The validation key (e.g., 'type', 'required', etc.).
- * @param value - The value that needs be provided to the validator.
- * @param type - The field's declared type.
- * @returns An object containing the resolved validator key and its corresponding props.
- */
-const resolveValidatorKeyProps = (key, value, type) => {
-    const patternValidators = {
-        [ValidationKeys.PASSWORD]: DEFAULT_PATTERNS.PASSWORD.CHAR8_ONE_OF_EACH,
-        [ValidationKeys.EMAIL]: DEFAULT_PATTERNS.EMAIL,
-        [ValidationKeys.URL]: DEFAULT_PATTERNS.URL,
-    };
-    const isTypeBased = key === ValidationKeys.TYPE && Object.keys(patternValidators).includes(type);
-    const validatorKey = isTypeBased ? type : key;
-    if (key === ValidationKeys.TYPE && HTML5InputTypes.CHECKBOX && value !== type)
-        value = type;
-    const props = {
-        // [validatorKey]: (!isTypeBased && key === 'type') ? parseType(type) : value,
-        [validatorKey]: (!isTypeBased && validatorKey === ValidationKeys.TYPE) ? NgxRenderingEngine.get().translate(value, false) : value,
-        // Email, Password, and URL are validated using the "pattern" key
-        ...(isTypeBased && { [ValidationKeys.PATTERN]: patternValidators[type] }),
-    };
-    return { validatorKey, props };
-};
-class ValidatorFactory {
-    static spawn(fieldProps, key) {
-        if (!Validation.keys().includes(key))
-            throw new Error('Unsupported custom validation');
-        const validatorFn = (control) => {
-            const { type, customTypes, options } = fieldProps;
-            let fieldType = (customTypes || type);
-            if ((fieldType === HTML5InputTypes.CHECKBOX || fieldType === Array.name) && Array.isArray(options))
-                fieldType = Primitives.STRING;
-            const { validatorKey, props } = resolveValidatorKeyProps(key, fieldProps[key], fieldType);
-            const validator = Validation.get(validatorKey);
-            // parseValueByType does not support undefined values
-            const value = typeof control.value !== 'undefined'
-                ? parseValueByType(fieldType, control.value, fieldProps)
-                : undefined;
-            // Create a proxy to enable access to parent and child values
-            let proxy = ValidatorFactory.createProxy({});
-            if (Object.values(ComparisonValidationKeys).includes(key)) {
-                const parent = control instanceof FormGroup ? control : control[AngularEngineKeys.PARENT];
-                proxy = ValidatorFactory.createProxy(parent);
-            }
-            let errs;
-            try {
-                errs = validator.hasErrors(value, props, proxy);
-            }
-            catch (e) {
-                errs = `${key} validator failed to validate: ${e}`;
-                console.error(errs);
-            }
-            return errs ? { [validatorKey]: true } : null;
-        };
-        Object.defineProperty(validatorFn, 'name', {
-            value: `${key}Validator`,
-        });
-        return validatorFn;
-    }
-    /**
-     * @summary Creates a proxy wrapper for an Angular AbstractControl to assist with custom validation logic.
-     * @description Returns a structured proxy object that simulates a hierarchical tree of form values.
-     * Enables Validators handling method to access parent and child properties using consistent dot-notation in Angular forms.
-     *
-     * @param {AbstractControl} control - The control to wrap in a proxy.
-     * @returns {PathProxy<unknown>} A proxy object exposing form values and enabling recursive parent access.
-     */
-    static createProxy(control) {
-        return PathProxyEngine.create(control, {
-            getValue(target, prop) {
-                if (target instanceof FormControl)
-                    return target.value;
-                if (target instanceof FormGroup) {
-                    const control = target.controls[prop];
-                    return control instanceof FormControl ? control.value : control;
-                }
-                // const value = target[prop];
-                // if (value instanceof FormControl)
-                //   return value.value;
-                //
-                // if (value instanceof FormGroup) {
-                //   const control = value.controls[prop];
-                //   return control instanceof FormControl ? control.value : control;
-                // }
-                return target?.[prop];
-            },
-            getParent: function (target) {
-                return target?.['_parent'];
-            },
-            ignoreUndefined: true,
-            ignoreNull: true,
-        });
-    }
-}
-
-function getDbAdapterFlavour() {
-    return (getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || '');
-}
-/**
- * @description Provides an array of component types for dynamic rendering.
- * @summary Helper function to package component constructors for registration with the
- * rendering engine. This function accepts component classes and returns them as an array
- * suitable for use with the CPTKN injection token.
- * @param {...Constructor[]} components - Component constructor classes to register
- * @return {Constructor} Array of component constructors
- * @memberOf module:lib/for-angular-common.module
- * @example
- * // Register multiple custom components
- * providers: [
- *   { provide: CPTKN, useValue: provideDynamicComponents(MyComponent, AnotherComponent) }
- * ]
- */
-function provideDecafDynamicComponents(...components) {
-    return components;
-}
-/**
- * @description Retrieves the repository instance for a given model.
- * @summary Creates or retrieves a DecafRepository instance for the specified model. This function
- * resolves the model by name or class, locates the registered database adapter, and returns
- * a fully initialized repository instance for performing CRUD operations.
- * @param {Model | string} model - The model class or model name string
- * @return {DecafRepository<Model>} Repository instance for the model
- * @throws {InternalError} If model is not found or not registered with @model decorator
- * @memberOf module:lib/for-angular-common.module
- * @example
- * // Get repository by model class
- * const userRepo = getModelAndRepository(User);
- *
- * // Get repository by model name
- * const productRepo = getModelAndRepository('Product');
- *
- * // Use repository for queries
- * const users = await userRepo.findAll();
- */
-function getModelAndRepository(model, clazz) {
-    try {
-        const modelName = (typeof model === Primitives.STRING ? model : model.constructor.name);
-        const constructor = Model.get((modelName.charAt(0).toUpperCase() + modelName.slice(1)));
-        if (!constructor)
-            return undefined;
-        const dbAdapterFlavour = getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || undefined;
-        if (dbAdapterFlavour)
-            uses(dbAdapterFlavour)(constructor);
-        const repository = Repository.forModel(constructor);
-        model = new constructor();
-        const pk = Model.pk(repository.class);
-        if (!pk)
-            return undefined;
-        const pkType = Metadata.type(repository.class, pk).name;
-        if (clazz) {
-            clazz.repository = repository;
-            clazz.model = model;
-            clazz.pk = pk;
-            clazz.pkType = Metadata.type(repository.class, pk).name;
-        }
-        return { repository, model, pk, pkType };
-    }
-    catch (error) {
-        getLogger(getModelAndRepository).warn(error?.message || error);
-        return undefined;
-    }
-}
-/**
- * @description Provides a database adapter for dependency injection.
- * @summary Creates an Angular provider that registers a database adapter instance. This function
- * instantiates the adapter class, registers its flavour globally, and returns a provider object
- * for use in Angular's dependency injection system.
- * @template DbAdapter - The database adapter class type extending {flavour: string}
- * @param {Constructor<DbAdapter>} adapterClass - Database adapter constructor class
- * @param {KeyValue} [options={}] - Configuration options passed to adapter constructor
- * @param {string} [flavour] - Optional flavour override; uses adapter.flavour if not provided
- * @return {Provider} Angular provider object for DB_ADAPTER_PROVIDER_TOKEN
- * @memberOf module:lib/for-angular-common.module
- * @example
- * // Register a SQLite adapter
- * providers: [
- *   provideDbAdapter(SqliteAdapter, { database: 'myapp.db' }, 'sqlite')
- * ]
- *
- * // Register with default flavour from adapter
- * providers: [
- *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
- * ]
- */
-function provideDecafDbAdapter(clazz, options = {}, flavour) {
-    const adapter = new clazz(options);
-    if (!flavour)
-        flavour = adapter.flavour;
-    getLogger(provideDecafDbAdapter).info(`Using ${adapter.constructor.name} ${flavour} as Db Provider`);
-    setOnWindow(DB_ADAPTER_FLAVOUR_TOKEN, flavour);
-    return {
-        provide: DB_ADAPTER_PROVIDER_TOKEN,
-        useValue: adapter,
-    };
-}
-/**
- * Creates a custom page transition animation using the Ionic `AnimationController`.
- *
- * @param baseEl - The base HTML element for the animation.
- * @param opts - Optional parameters for the animation, including:
- *   - `enteringEl`: The HTML element that is entering the view.
- *   - `leavingEl`: The HTML element that is leaving the view.
- *
- * @returns An object containing the `navAnimation`, which is a composed animation
- *          of the entering and leaving animations.
- *
- * The entering animation fades in and slides the element upwards, while the leaving
- * animation fades out and slides the element downwards. Both animations use a cubic-bezier
- * easing function for smooth transitions.
- */
-const decafPageTransition = (baseEl, opts) => {
-    const animationCtrl = new AnimationController();
-    const enteringAnimation = animationCtrl
-        .create()
-        .addElement(opts?.['enteringEl'])
-        .duration(280)
-        .easing('cubic-bezier(0.36,0.66,0.04,1)')
-        .fromTo('opacity', '0.01', '1')
-        .fromTo('transform', 'translateY(40px)', 'translateY(0)');
-    const leavingAnimation = animationCtrl
-        .create()
-        .addElement(opts?.['leavingEl'])
-        .duration(200)
-        .easing('cubic-bezier(0.36,0.66,0.04,1)')
-        .fromTo('opacity', '1', '0')
-        .fromTo('transform', 'translateY(0)', 'translateY(20px)');
-    return animationCtrl.create().addAnimation([enteringAnimation, leavingAnimation]);
-};
-function provideDecafPageTransition() {
-    return provideIonicAngular({
-        navAnimation: decafPageTransition,
-    });
-}
-function provideDecafDarkMode() {
-    return provideEnvironmentInitializer(() => {
-        const doc = getWindowDocument();
-        doc?.documentElement.classList.add('has-dark-mode');
-    });
-}
-/**
- * @const {Logger}
- * @private
- * @description Base logger instance for the for-angular module.ẑ
- * @memberOf module:lib/for-angular-common.module
- */
-const log = Logging.for('for-angular');
-/**
- * @description Retrieves a logger instance for the given context.
- * @summary Creates or retrieves a namespaced logger instance using the Decaf logging system.
- * The logger is automatically namespaced under "for-angular" and can be further scoped
- * to a specific instance, function, or string identifier.
- * @param {string | FunctionLike | unknown} instance - The instance, function, or string to scope the logger to
- * @return {Logger} Logger instance for the specified context
- * @memberOf module:lib/for-angular-common.module
- * @example
- * // Get logger for a class
- * const logger = getLogger(MyComponent);
- * logger.info('Component initialized');
- *
- * // Get logger with string identifier
- * const serviceLogger = getLogger('UserService');
- * serviceLogger.error('Operation failed', error);
- */
-function getLogger(instance) {
-    return log.for(instance);
-}
-
 /**
  * @module module:lib/helpers/utils
  * @description General helper utilities used across the library.
@@ -1058,57 +787,441 @@ function removeFocusTrap() {
  * @param {boolean} [lowercase=false] - Whether to convert the result to lowercase
  * @return {string} The cleaned and normalized string
  *
- * @function cleanSpaces
- * @memberOf module:for-angular
+ * @function cleanSpaces
+ * @memberOf module:for-angular
+ */
+function cleanSpaces(value = '', lowercase = false) {
+    value = `${value}`.trim().replace(/\s+/g, ' ');
+    return lowercase ? value.toLowerCase() : value;
+}
+/**
+ * @description Determines if the user's system is currently in dark mode
+ * @summary This function checks the user's color scheme preference using the CSS media query
+ * '(prefers-color-scheme: dark)'. It returns a boolean indicating whether the system is
+ * currently set to dark mode. This is useful for implementing theme-aware functionality
+ * and adjusting UI elements based on the user's preferred color scheme.
+ *
+ * @return {Promise<boolean>} True if the system is in dark mode, false otherwise
+ *
+ * @function isDarkMode
+ * @memberOf module:for-angular
+ */
+async function isDarkMode() {
+    const { matches } = getWindow().matchMedia('(prefers-color-scheme: dark)');
+    return matches;
+}
+/**
+ * @description Filters out strings containing or not containing a specific substring from an array or space-separated string.
+ * @summary This function removes or retains strings based on whether they include the specified substring.
+ * If the input is a single string, it is split into an array using spaces as delimiters before filtering.
+ *
+ * @param {string | string[]} original - The input string or array of strings to filter.
+ * @param {string} value - The substring to filter by.
+ * @param {boolean} [contain=true] - Determines the filtering behavior. If true, retains strings containing the substring; otherwise, removes them.
+ * @returns {string} A string that contains or excludes the specified substring based on the `contain` parameter.
+ *
+ * @function filterString
+ * @memberOf module:lib/helpers/utils
+ */
+function filterString(original, value, contain = true) {
+    if (typeof original === Primitives.STRING)
+        original = original.split(' ');
+    return (original.filter((str) => contain ? str.includes(value) : !str.includes(value)) || []).join(' ');
+}
+/**
+ * @summary Retrieves the icon associated with a menu item based on its label.
+ *
+ * @param {string} label - The label of the menu item to search for. The search is case-insensitive.
+ * @param {IMenuItem[]} menu - An array of menu items to search within.
+ * @returns {string} The icon associated with the menu item if found, otherwise an empty string.
+ */
+function getMenuIcon(label, menu) {
+    const item = menu.find((m) => m.label?.toLowerCase() === label.toLowerCase());
+    return item?.icon || '';
+}
+
+function getDbAdapterFlavour() {
+    return (getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || '');
+}
+/**
+ * @description Provides an array of component types for dynamic rendering.
+ * @summary Helper function to package component constructors for registration with the
+ * rendering engine. This function accepts component classes and returns them as an array
+ * suitable for use with the CPTKN injection token.
+ * @param {...Constructor[]} components - Component constructor classes to register
+ * @return {Constructor} Array of component constructors
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register multiple custom components
+ * providers: [
+ *   { provide: CPTKN, useValue: provideDynamicComponents(MyComponent, AnotherComponent) }
+ * ]
+ */
+function provideDecafDynamicComponents(...components) {
+    return components;
+}
+/**
+ * @description Retrieves the repository instance for a given model.
+ * @summary Creates or retrieves a DecafRepository instance for the specified model. This function
+ * resolves the model by name or class, locates the registered database adapter, and returns
+ * a fully initialized repository instance for performing CRUD operations.
+ * @param {Model | string} model - The model class or model name string
+ * @return {DecafRepository<Model>} Repository instance for the model
+ * @throws {InternalError} If model is not found or not registered with @model decorator
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get repository by model class
+ * const userRepo = getModelAndRepository(User);
+ *
+ * // Get repository by model name
+ * const productRepo = getModelAndRepository('Product');
+ *
+ * // Use repository for queries
+ * const users = await userRepo.findAll();
+ */
+function getModelAndRepository(model, clazz) {
+    if (!model)
+        return undefined;
+    try {
+        const modelName = (typeof model === Primitives.STRING ? model : model.constructor.name);
+        const constructor = Model.get((modelName.charAt(0).toUpperCase() + modelName.slice(1)));
+        if (!constructor)
+            return undefined;
+        const dbAdapterFlavour = getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || undefined;
+        if (dbAdapterFlavour)
+            uses(dbAdapterFlavour)(constructor);
+        const repository = Repository.forModel(constructor);
+        model = new constructor();
+        const pk = Model.pk(repository.class);
+        if (!pk)
+            return undefined;
+        const pkType = Metadata.type(repository.class, pk).name;
+        if (clazz) {
+            clazz.repository = repository;
+            clazz.model = model;
+            clazz.pk = pk;
+            clazz.pkType = Metadata.type(repository.class, pk).name;
+        }
+        return { repository, model, pk, pkType };
+    }
+    catch (error) {
+        getLogger(getModelAndRepository).warn(error?.message || error);
+        return undefined;
+    }
+}
+/**
+ * @description Provides a database adapter for dependency injection.
+ * @summary Creates an Angular provider that registers a database adapter instance. This function
+ * instantiates the adapter class, registers its flavour globally, and returns a provider object
+ * for use in Angular's dependency injection system.
+ * @template DbAdapter - The database adapter class type extending {flavour: string}
+ * @param {Constructor<DbAdapter>} adapterClass - Database adapter constructor class
+ * @param {KeyValue} [options={}] - Configuration options passed to adapter constructor
+ * @param {string} [flavour] - Optional flavour override; uses adapter.flavour if not provided
+ * @return {Provider} Angular provider object for DB_ADAPTER_PROVIDER_TOKEN
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register a SQLite adapter
+ * providers: [
+ *   provideDbAdapter(SqliteAdapter, { database: 'myapp.db' }, 'sqlite')
+ * ]
+ *
+ * // Register with default flavour from adapter
+ * providers: [
+ *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
+ * ]
+ */
+function provideDecafDbAdapter(clazz, options = {}, flavour) {
+    const adapter = new clazz(options);
+    if (!flavour)
+        flavour = adapter.flavour;
+    getLogger(provideDecafDbAdapter).info(`Using ${adapter.constructor.name} ${flavour} as Db Provider`);
+    setOnWindow(DB_ADAPTER_FLAVOUR_TOKEN, flavour);
+    return {
+        provide: DB_ADAPTER_PROVIDER_TOKEN,
+        useValue: adapter,
+    };
+}
+/**
+ * Creates a custom page transition animation using the Ionic `AnimationController`.
+ *
+ * @param baseEl - The base HTML element for the animation.
+ * @param opts - Optional parameters for the animation, including:
+ *   - `enteringEl`: The HTML element that is entering the view.
+ *   - `leavingEl`: The HTML element that is leaving the view.
+ *
+ * @returns An object containing the `navAnimation`, which is a composed animation
+ *          of the entering and leaving animations.
+ *
+ * The entering animation fades in and slides the element upwards, while the leaving
+ * animation fades out and slides the element downwards. Both animations use a cubic-bezier
+ * easing function for smooth transitions.
  */
-function cleanSpaces(value = '', lowercase = false) {
-    value = `${value}`.trim().replace(/\s+/g, ' ');
-    return lowercase ? value.toLowerCase() : value;
+const decafPageTransition = (baseEl, opts) => {
+    const animationCtrl = new AnimationController();
+    const enteringAnimation = animationCtrl
+        .create()
+        .addElement(opts?.['enteringEl'])
+        .duration(280)
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .fromTo('opacity', '0.01', '1')
+        .fromTo('transform', 'translateY(40px)', 'translateY(0)');
+    const leavingAnimation = animationCtrl
+        .create()
+        .addElement(opts?.['leavingEl'])
+        .duration(200)
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .fromTo('opacity', '1', '0')
+        .fromTo('transform', 'translateY(0)', 'translateY(20px)');
+    return animationCtrl.create().addAnimation([enteringAnimation, leavingAnimation]);
+};
+function provideDecafPageTransition() {
+    return provideIonicAngular({
+        navAnimation: decafPageTransition,
+    });
+}
+function provideDecafDarkMode() {
+    return provideEnvironmentInitializer(() => {
+        const doc = getWindowDocument();
+        doc?.documentElement.classList.add('has-dark-mode');
+    });
 }
 /**
- * @description Determines if the user's system is currently in dark mode
- * @summary This function checks the user's color scheme preference using the CSS media query
- * '(prefers-color-scheme: dark)'. It returns a boolean indicating whether the system is
- * currently set to dark mode. This is useful for implementing theme-aware functionality
- * and adjusting UI elements based on the user's preferred color scheme.
- *
- * @return {Promise<boolean>} True if the system is in dark mode, false otherwise
- *
- * @function isDarkMode
- * @memberOf module:for-angular
+ * @const {Logger}
+ * @private
+ * @description Base logger instance for the for-angular module.ẑ
+ * @memberOf module:lib/for-angular-common.module
  */
-async function isDarkMode() {
-    const { matches } = getWindow().matchMedia('(prefers-color-scheme: dark)');
-    return matches;
-}
+const log = Logging.for('for-angular');
 /**
- * @description Filters out strings containing or not containing a specific substring from an array or space-separated string.
- * @summary This function removes or retains strings based on whether they include the specified substring.
- * If the input is a single string, it is split into an array using spaces as delimiters before filtering.
- *
- * @param {string | string[]} original - The input string or array of strings to filter.
- * @param {string} value - The substring to filter by.
- * @param {boolean} [contain=true] - Determines the filtering behavior. If true, retains strings containing the substring; otherwise, removes them.
- * @returns {string} A string that contains or excludes the specified substring based on the `contain` parameter.
+ * @description Retrieves a logger instance for the given context.
+ * @summary Creates or retrieves a namespaced logger instance using the Decaf logging system.
+ * The logger is automatically namespaced under "for-angular" and can be further scoped
+ * to a specific instance, function, or string identifier.
+ * @param {string | FunctionLike | unknown} instance - The instance, function, or string to scope the logger to
+ * @return {Logger} Logger instance for the specified context
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get logger for a class
+ * const logger = getLogger(MyComponent);
+ * logger.info('Component initialized');
  *
- * @function filterString
- * @memberOf module:lib/helpers/utils
+ * // Get logger with string identifier
+ * const serviceLogger = getLogger('UserService');
+ * serviceLogger.error('Operation failed', error);
  */
-function filterString(original, value, contain = true) {
-    if (typeof original === Primitives.STRING)
-        original = original.split(' ');
-    return (original.filter((str) => contain ? str.includes(value) : !str.includes(value)) || []).join(' ');
+function getLogger(instance) {
+    return log.for(instance);
 }
+
 /**
- * @summary Retrieves the icon associated with a menu item based on its label.
+ * @module module:lib/engine/ValidatorFactory
+ * @description Factory for generating Angular ValidatorFn from Decaf validation metadata.
+ * @summary ValidatorFactory maps validation keys defined by the Decaf validation system
+ * into Angular ValidatorFn instances. It supports type-based resolution and comparison
+ * validators and provides helpers to create proxies for nested control validation.
  *
- * @param {string} label - The label of the menu item to search for. The search is case-insensitive.
- * @param {IMenuItem[]} menu - An array of menu items to search within.
- * @returns {string} The icon associated with the menu item if found, otherwise an empty string.
+ * @link {@link ValidatorFactory}
  */
-function getMenuIcon(label, menu) {
-    const item = menu.find((m) => m.label?.toLowerCase() === label.toLowerCase());
-    return item?.icon || '';
+class ValidatorFactory {
+    /**
+     * @summary Extracts and parses the value from an Angular control.
+     * @description Retrieves the control's value and converts it to the appropriate type based on field properties.
+     * Handles undefined values gracefully by returning undefined without parsing.
+     *
+     * @param {AbstractControl} control - The Angular form control to extract the value from.
+     * @param {string} fieldType - The declared type of the field.
+     * @param {FieldProperties} fieldProps - The field properties containing type conversion metadata.
+     * @returns {unknown} The parsed value or undefined if the control value is undefined.
+     */
+    static getFieldValue(control, fieldType, fieldProps) {
+        return typeof control.value !== 'undefined'
+            ? parseValueByType(fieldType, control.value, fieldProps)
+            : undefined;
+    }
+    /**
+     * @summary Resolves the effective field type from multiple possible type sources.
+     * @description Determines the field's type by checking customTypes, subType, or type in order of priority.
+     * For checkbox and array fields with options, converts the type to STRING for proper validation.
+     *
+     * @param {string} [type] - The primary field type.
+     * @param {string | string[]} [customTypes] - Custom type definition with highest priority.
+     * @param {unknown[]} [options] - Available options for the field (affects checkbox/array handling).
+     * @param {string} [subType] - Secondary type definition.
+     * @returns {string} The resolved field type.
+     */
+    static getFieldType(type, customTypes, options, subType) {
+        const fieldType = (customTypes || subType || type);
+        if ((fieldType === HTML5InputTypes.CHECKBOX || fieldType === Array.name) &&
+            Array.isArray(options)) {
+            return Primitives.STRING;
+        }
+        return fieldType;
+    }
+    /**
+     * @summary Creates a ValidatorFn for a specific validation key.
+     * @description Generates an Angular ValidatorFn that applies Decaf validation logic to a form control.
+     * Resolves the appropriate validator based on field type, parses the control value, constructs validation properties,
+     * and handles comparison validators through proxy access to parent/child form values.
+     *
+     * @param {FieldProperties} fieldProps - The field properties containing type and validation metadata.
+     * @param {string} key - The validation key to create a validator for.
+     * @returns {ValidatorFn} A validator function that returns ValidationErrors or null.
+     * @throws {Error} If the validation key is not supported.
+     */
+    static spawn(fieldProps, key) {
+        if (!Validation.keys().includes(key)) {
+            throw new Error('Unsupported custom validation');
+        }
+        const validatorFn = (control) => {
+            const { type, customTypes, options, subType } = fieldProps || {};
+            const fieldType = ValidatorFactory.getFieldType(type, customTypes, options, subType);
+            const customValidator = key === UIKeys.TYPE && subType;
+            const { validatorKey, props } = this.resolveValidatorKeyProps(key, fieldType, fieldProps, customValidator ? subType : undefined);
+            const validator = Validation.get(validatorKey);
+            // parseValueByType does not support undefined values
+            const value = ValidatorFactory.getFieldValue(control, fieldType, fieldProps);
+            // Create a proxy to enable access to parent and child values
+            const proxy = ValidatorFactory.getValidatorProxy(control, key);
+            let errs;
+            try {
+                const validationMessage = fieldProps?.validationMessage;
+                if (validationMessage && customValidator) {
+                    Object.assign(props, { message: validationMessage });
+                }
+                errs = validator.hasErrors(value, props, proxy);
+            }
+            catch (e) {
+                errs = `${key} validator failed to validate: ${e}`;
+                getLogger(ValidatorFactory).error(errs);
+            }
+            return errs ? { [validatorKey]: props?.['message'] ? errs : true } : null;
+        };
+        Object.defineProperty(validatorFn, 'name', {
+            value: `${key}Validator`,
+        });
+        return validatorFn;
+    }
+    /**
+     * Retrieves the validator value from field properties, with special handling for checkbox types.
+     * Returns the field property value, or the type if the field is a checkbox and the types differ.
+     *
+     * @param key - The validation key.
+     * @param type - The field's type.
+     * @param fieldProps - The field properties object.
+     * @returns The validator value to use.
+     */
+    static getValidatorValue(key, type, fieldProps) {
+        return key === ValidationKeys.TYPE &&
+            HTML5InputTypes.CHECKBOX &&
+            fieldProps[key] !== type
+            ? type
+            : fieldProps[key];
+    }
+    /**
+     * Determines whether a validation should be resolved based on the field's type.
+     * Returns true for TYPE validations with custom types or pattern-based validators.
+     *
+     * @param key - The validation key to evaluate.
+     * @param type - The field's declared type.
+     * @param customTypes - Optional custom type definition.
+     * @returns True if validation should use type-based resolution.
+     */
+    static isTypeBasedValidation(key, type, customTypes) {
+        return (key === ValidationKeys.TYPE &&
+            (typeof customTypes === Primitives.STRING || Object.keys(patternValidators).includes(type)));
+    }
+    /**
+     * @summary Creates or retrieves a proxy for validator access to parent/child form values.
+     * @description Returns a PathProxy configured for the given validation key.
+     * For comparison validators, creates a proxy rooted at the parent FormGroup to enable cross-field validation.
+     * For other validators, returns an empty proxy for type safety.
+     *
+     * @param {AbstractControl | FormGroup} control - The form control to create a proxy for.
+     * @param {ComparisonValidationKey} key - The validation key determining proxy scope.
+     * @returns {PathProxy<unknown>} A proxy object for form value access.
+     */
+    static getValidatorProxy(control, key) {
+        const proxy = ValidatorFactory.createProxy({});
+        if (Object.values(ComparisonValidationKeys).includes(key)) {
+            return ValidatorFactory.createProxy((control instanceof FormGroup ? control : control.parent));
+        }
+        return proxy;
+    }
+    /**
+     * @summary Creates a proxy wrapper for an Angular AbstractControl to assist with custom validation logic.
+     * @description Returns a structured proxy object that simulates a hierarchical tree of form values.
+     * Enables Validators handling method to access parent and child properties using consistent dot-notation in Angular forms.
+     *
+     * @param {AbstractControl} control - The control to wrap in a proxy.
+     * @returns {PathProxy<unknown>} A proxy object exposing form values and enabling recursive parent access.
+     */
+    static createProxy(control) {
+        return PathProxyEngine.create(control, {
+            getValue(target, prop) {
+                if (target instanceof FormControl)
+                    return target.value;
+                if (target instanceof FormGroup) {
+                    const control = target.controls[prop];
+                    return control instanceof FormControl ? control.value : control;
+                }
+                // const value = target[prop];
+                // if (value instanceof FormControl)
+                //   return value.value;
+                //
+                // if (value instanceof FormGroup) {
+                //   const control = value.controls[prop];
+                //   return control instanceof FormControl ? control.value : control;
+                // }
+                return target?.[prop];
+            },
+            getParent: function (target) {
+                return target?.['_parent'];
+            },
+            ignoreUndefined: true,
+            ignoreNull: true,
+        });
+    }
+    /**
+     *
+     * Resolves the correct validator key and its associated properties based on the input key and type.
+     *
+     * When the validation key is TYPE, it's necessary to resolve the actual validator based on the
+     * field's type (e.g., 'password', 'email', 'url') instead of using the generic getValidator("type") logic.
+     * This allows directly invoking specific validators like getValidator('password'), ensuring the correct
+     * behavior for type-based validation.
+     *
+     * @param key - The validation key (e.g., 'type', 'required', etc.).
+     * @param value - The value that needs be provided to the validator.
+     * @param type - The field's declared type.
+     * @returns An object containing the resolved validator key and its corresponding props.
+     */
+    static { this.resolveValidatorKeyProps = (key, type, fieldProps, customTypes = undefined) => {
+        const isTypeBased = this.isTypeBasedValidation(key, type, customTypes);
+        const validatorKey = isTypeBased ? type : key;
+        const value = this.getValidatorValue(key, type, fieldProps);
+        const props = this.getValidatorProps(validatorKey, type, isTypeBased, value);
+        return { validatorKey, props };
+    }; }
+    /**
+     * Constructs the properties object to be passed to a validator.
+     * Handles translation of string values and applies pattern validators for type-based validations.
+     *
+     * @param validatorKey - The resolved validator key.
+     * @param type - The field's type.
+     * @param isTypeBased - Whether this is a type-based validation.
+     * @param value - The value to validate.
+     * @returns An object containing validator properties.
+     */
+    static getValidatorProps(validatorKey, type, isTypeBased, value) {
+        return {
+            [validatorKey]: !isTypeBased && validatorKey === ValidationKeys.TYPE
+                ? NgxRenderingEngine.get().translate(value, false)
+                : value,
+            // Email, Password, and URL are validated using the "pattern" key
+            ...(isTypeBased && { [ValidationKeys.PATTERN]: patternValidators[type] }),
+        };
+    }
 }
 
 /**
@@ -1989,18 +2102,19 @@ class NgxFormService {
     static fromProps(props, updateMode = 'change') {
         const validators = this.validatorsFromProps(props);
         const composed = validators.length ? Validators.compose(validators) : null;
-        return new FormControl({
-            value: props.value
-                ? props.type === HTML5InputTypes.CHECKBOX
-                    ? Array.isArray(props.value)
-                        ? props.value
-                        : undefined
-                    : props.type === HTML5InputTypes.DATE
-                        ? !isValidDate$1(parseDate(props.format, props.value))
-                            ? undefined
-                            : props.value
+        const value = props.value
+            ? props.type === HTML5InputTypes.CHECKBOX
+                ? Array.isArray(props.value)
+                    ? props.value
+                    : undefined
+                : props.type === HTML5InputTypes.DATE
+                    ? !isValidDate$1(parseDate(props.format, props.value))
+                        ? undefined
                         : props.value
-                : undefined,
+                    : props.value
+            : undefined;
+        return new FormControl({
+            value,
             disabled: props.disabled,
         }, {
             validators: composed,
@@ -2389,12 +2503,11 @@ class NgxRenderingEngine extends RenderingEngine {
         }
         const { inputs: possibleInputs } = componentMetadata;
         const inputs = { ...fieldDef.props };
-        const unmappedKeys = Object.keys(inputs).filter((input) => {
-            const isMapped = possibleInputs.find(({ propName }) => propName === input);
-            if (!isMapped)
-                delete inputs[input];
-            return !isMapped;
-        });
+        // const unmappedKeys = Object.keys(inputs).filter((input) => {
+        //   const isMapped = possibleInputs.find(({ propName }) => propName === input);
+        //   if (!isMapped) delete inputs[input];
+        //   return !isMapped;
+        // });
         // if (unmappedKeys.length > 0 && isDevelopmentMode())
         //   getLogger(this).warn(
         //     `Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`,
@@ -2789,7 +2902,8 @@ var operations = {
 	multiple: {
 		success: "Successfully processed all operations.",
 		error: "Error processing operations."
-	}
+	},
+	processing: "Processing {0}..."
 };
 var component = {
 	crud_form: {
@@ -3611,6 +3725,12 @@ class NgxRepositoryDirective extends DecafComponent {
             attr = (this.filterBy || this.pk);
         }
         const condition = this.filter || Condition.attribute(attr);
+        if (!this.repository) {
+            const repo = getModelAndRepository(Model.tableName(this.model));
+            if (repo) {
+                this._repository = repo.repository;
+            }
+        }
         const type = this.getModelPropertyType(this.repository.class, attr);
         if (this.modelId) {
             return condition.eq([Primitives.NUMBER, Primitives.BIGINT].includes(type)
@@ -3760,7 +3880,16 @@ class NgxRepositoryDirective extends DecafComponent {
         return Metadata.properties(clazz);
     }
     getModelPropertyType(constructor, prop) {
-        return Metadata.type(constructor, prop).name;
+        try {
+            return Metadata.type(constructor, prop)?.name;
+        }
+        catch (error) {
+            this.log
+                .for(this)
+                .info(`${error?.message || String(error)}. Tryng get with table Name`);
+            constructor = Model.get(Model.tableName(this.repository.class));
+            return Metadata.type(constructor, prop)?.name;
+        }
     }
     getModelPkType(clazz) {
         return this.getModelPropertyType(clazz, Model.pk(clazz));
@@ -3816,6 +3945,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class NgxTranslateService extends DecafTranslateService {
+    constructor() {
+        super(...arguments);
+        this.translateService = inject(TranslateService);
+    }
+    instant(key, interpolateParams) {
+        return this.translateService.instant(key, interpolateParams);
+    }
+    translate(key, params) {
+        return this.instant(key, params);
+    }
+    async get(key, params) {
+        if (key) {
+            if (typeof params === Primitives.STRING) {
+                params = { '0': params };
+            }
+            return await firstValueFrom(this.translateService.get(key, (params || {})));
+        }
+        return key;
+    }
+    setFallbackLang(lang) {
+        return this.translateService.setFallbackLang(lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * @module lib/engine/NgxComponentDirective
  * @description Base decaf component abstraction providing shared inputs and utilities.
@@ -4047,10 +4209,10 @@ class NgxComponentDirective extends NgxRepositoryDirective {
          * Used to translate button labels, validation messages, and other text content based
          * on the current locale setting, enabling multilingual support throughout the application.
          * @protected
-         * @type {TranslateService}
+         * @type {NgxTranslateService}
          * @memberOf module:lib/engine/NgxComponentDirective
          */
-        this.translateService = inject(TranslateService);
+        this.translateService = inject(NgxTranslateService);
         /**
          * @description Event emitter for custom component events.
          * @summary Emits custom events that occur within child components or the component itself.
@@ -4287,7 +4449,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                     this._repository = repository;
                     if (this.model && !this.pk)
                         this.pk = pk;
-                    this.pkType = pkType || Model.pk(repository.class);
+                    this.pkType = pkType;
                     if (!this.modelName)
                         this.modelName = repository.class.name;
                 }
@@ -4383,11 +4545,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
      * @memberOf module:lib/engine/NgxComponentDirective
      */
     async translate(phrase, params) {
-        if (!phrase)
-            return '';
-        if (typeof params === Primitives.STRING)
-            params = { '0': params };
-        return await firstValueFrom(this.translateService.get(phrase, (params || {})));
+        return await this.translateService.get(phrase, params || {});
     }
     checkDarkMode() {
         this.mediaService.isDarkMode().subscribe((isDark) => {
@@ -4650,9 +4808,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         this.listenEvent.emit(event);
     }
     // passed for ui decorators
-    async submit(...args) {
-        this.log.for(this.submit).info(`submit for ${this.componentName} with ${JSON.stringify(args)}`);
-    }
+    // override async submit(...args: unknown[]): Promise<any> {
+    //   this.log.for(this.submit).info(`submit for ${this.componentName} with ${JSON.stringify(args)}`);
+    // }
     /**
      * @description Determines if a specific operation is allowed in the current context.
      * @summary This method checks if an operation is included in the list of available
@@ -5856,6 +6014,13 @@ class NgxFormFieldDirective extends NgxComponentDirective {
          * @public
          */
         this.optionsMapper = {};
+        /**
+         * @description Whether the field is currently checked.
+         * @summary Used for checkbox and radio button fields to track the checked state independently from the value.
+         * @type {boolean}
+         * @default false
+         * @public
+         */
         this.checked = false;
         /**
          * @description Flag tracking if validation error event has been dispatched.
@@ -5882,7 +6047,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
          * @type {function(string, ...string): string}
          * @public
          */
-        this.sf = sf$1;
+        this.sf = sf;
         /**
          * @description Callback function invoked when the field value changes.
          * @summary Function registered by Angular's forms system through registerOnChange.
@@ -5901,6 +6066,9 @@ class NgxFormFieldDirective extends NgxComponentDirective {
          */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouch = () => { };
+        if (!UIValidator.translateService) {
+            UIValidator.translateService = this.translateService;
+        }
     }
     /**
      * @description Gets the currently active form group based on context.
@@ -6072,13 +6240,54 @@ class NgxFormFieldDirective extends NgxComponentDirective {
      * @return {void}
      * @public
      */
-    handleModalChildChanges(event) {
+    handleModalChildChanges(event, formControl) {
+        const element = this.component?.nativeElement;
         if (this.type === HTML5InputTypes.SELECT && event) {
             const { value } = event.detail;
             this.value = value;
         }
-        if (this.isModalChild)
+        if (element && formControl && !formControl.valid && formControl.updateOn === 'change') {
+            element.dispatchEvent(new Event('ionBlur'));
+        }
+        if (this.isModalChild) {
             this.changeDetectorRef.detectChanges();
+        }
+    }
+    validateControl(formControl) {
+        return ((!formControl.valid && (formControl.touched || !formControl.pristine)) ||
+            (!formControl.valid && formControl.dirty && formControl.updateOn === 'change'));
+    }
+    getErrorMessage(error) {
+        const instance = this;
+        let { message, key } = error;
+        const prop = instance[key];
+        let args = [];
+        if (typeof message === Primitives.STRING) {
+            if (message.includes('|')) {
+                const parts = message.split('|');
+                message = parts[0];
+                parts.shift();
+                parts.forEach((part) => {
+                    args = [...args, part];
+                });
+            }
+            else {
+                if (prop) {
+                    args = [prop];
+                }
+            }
+        }
+        else {
+            args = Object.values(message).map((v) => `${v || prop}`);
+            message = key;
+        }
+        // Check if string already be translated by validator
+        const translate = (message, args) => {
+            return this.translateService.instant(!message.includes(AngularEngineKeys.ERRORS)
+                ? `${AngularEngineKeys.ERRORS}.${message}`
+                : message, args);
+        };
+        return /\s/.test(message) && message !== key ? message : translate(message, args);
     }
     /**
      * @description Retrieves validation error messages for the field.
@@ -6095,11 +6304,15 @@ class NgxFormFieldDirective extends NgxComponentDirective {
             const accordionComponent = parent
                 .closest('ngx-decaf-fieldset')
                 ?.querySelector('ion-accordion-group');
-            if ((!formControl.pristine || formControl.touched) && !formControl.valid) {
-                const errors = Object.keys(formControl.errors ?? {}).map((key) => ({
-                    key: key,
-                    message: key,
-                }));
+            const invalid = this.validateControl(formControl);
+            if (invalid) {
+                const errors = Object.entries(formControl.errors ?? {}).map(([key, value]) => {
+                    const message = typeof value === 'boolean' ? key : value;
+                    return {
+                        key: key,
+                        message,
+                    };
+                });
                 if (errors.length) {
                     if (accordionComponent && !this.validationErrorEventDispatched) {
                         const validationErrorEvent = new CustomEvent(ComponentEventNames.ValidationError, {
@@ -6111,8 +6324,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
                     }
                 }
                 for (const error of errors) {
-                    const instance = this;
-                    return `* ${this.translateService.instant(`errors.${error?.['message']}`, { '0': `${instance[error?.['key']] ?? ''}` })}`;
+                    return `* ${this.getErrorMessage(error)}`;
                 }
             }
         }
@@ -7164,7 +7376,6 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
          * @summary Determines the fill style of the field, such as 'outline' or 'solid'.
          * This affects the border and background of the field.
          *
-         * @type {'outline' | 'solid'}
          * @default 'outline'
          * @memberOf CrudFieldComponent
          */
@@ -7391,7 +7602,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.16", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", 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 (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\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 [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</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()\"\n            (ionChange)=\"handleModalChildChanges()\"\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 class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\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 class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\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>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\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                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\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 (option of options; track trackItemFn($index, option.text)) {\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 ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\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()\"\n            (ionChange)=\"handleModalChildChanges()\"\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            [pattern]=\"pattern !== undefined ? pattern : 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      </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}.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}\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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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.16", 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 (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\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 [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</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 class=\"dcf-width-1-1\" [hidden]=\"hidden\">\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 class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"option.text\"\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>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</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]=\"name\"\n                  [errorText]=\"getErrors(container)\"\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                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 (option of options; track trackItemFn($index, option.text)) {\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 ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\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            [pattern]=\"pattern !== undefined ? pattern : 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}\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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic(),
@@ -7414,7 +7625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonText,
                         IonTextarea,
                         IconComponent,
-                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\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 [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</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()\"\n            (ionChange)=\"handleModalChildChanges()\"\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 class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\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 class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"option.text\"\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>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [errorText]=\"getErrors(container)\"\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                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges()\"\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 (option of options; track trackItemFn($index, option.text)) {\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 ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\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()\"\n            (ionChange)=\"handleModalChildChanges()\"\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            [pattern]=\"pattern !== undefined ? pattern : 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      </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}.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}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === OperationKeys.READ || operation === OperationKeys.DELETE || readonly) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\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 [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge mode=\"md\" color=\"light\">\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{ value }}</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 class=\"dcf-width-1-1\" [hidden]=\"hidden\">\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 class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                    [id]=\"option.text\"\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>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 class=\"dcf-radio-group-label\" [for]=\"path\">{{ label | translate }}</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]=\"name\"\n                  [errorText]=\"getErrors(container)\"\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                  {{ option?.text | translate }}\n                </ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></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 (option of options; track trackItemFn($index, option.text)) {\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 ((value && !required) || (!required && value !== undefined && value !== '')) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\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            [pattern]=\"pattern !== undefined ? pattern : 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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7431,6 +7642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], type: [{
                 type: Input,
                 args: [{ required: true }]
+            }], subType: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -11927,8 +12142,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     parseConditions(value) {
         let _condition;
         const model = this.model;
-        if (typeof value === Primitives.STRING || !isNaN(value)) {
-            _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
+        if (typeof value === Primitives.STRING) {
+            _condition = Condition.attribute(this.pk).eq(this.pkType.toLocaleLowerCase() === Primitives.STRING ? value : Number(value));
             for (const index of this.indexes) {
                 if (index === this.pk)
                     continue;
@@ -13906,7 +14121,22 @@ let TableComponent = class TableComponent extends ListComponent {
     get _cols() {
         this.mapper = this._mapper;
         return Object.entries(this.mapper)
-            .sort(([, a], [, b]) => Number(a?.['sequence'] ?? 0) - Number(b?.['sequence'] ?? 0))
+            .sort(([, a], [, b]) => {
+            const aSequence = a?.sequence ?? 0;
+            const bSequence = b?.sequence ?? 0;
+            const weight = (v) => v === UIKeys.FIRST ? 0 : typeof v === Primitives.NUMBER ? 1 : v === UIKeys.LAST ? 100 : 1;
+            const aWeight = weight(aSequence);
+            const bWeight = weight(bSequence);
+            if (aWeight !== bWeight) {
+                return aWeight - bWeight;
+            }
+            if (aWeight === 1 &&
+                typeof aSequence === Primitives.NUMBER &&
+                typeof bSequence === Primitives.NUMBER) {
+                return aSequence - bSequence;
+            }
+            return 0;
+        })
             .map(([key]) => key);
     }
     get _headers() {
@@ -14414,5 +14644,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, 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, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map