@decaf-ts/for-angular 0.0.36 → 0.0.37

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

@@ -1,7 +1,7 @@
 import { UIKeys, HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, isDevMode, reflectComponentType, inject, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, ViewEncapsulation, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, Injector } from '@angular/core';
-import { CommonModule, NgComponentOutlet, Location } from '@angular/common';
+import { CommonModule, Location, NgComponentOutlet } from '@angular/common';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf, ReservedModels } from '@decaf-ts/decorator-validation';
 import { InternalError, OperationKeys } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
@@ -11,9 +11,9 @@ import { TranslateModule, TranslatePipe, TranslateParser, provideTranslateServic
 import { Logging, LoggedClass } from '@decaf-ts/logging';
 import { uses, Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { apply, metadata } from '@decaf-ts/reflection';
-import { Router } from '@angular/router';
-import { provideHttpClient, HttpClient } from '@angular/common/http';
+import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { forkJoin, firstValueFrom, fromEvent, debounceTime, Subject, timer } from 'rxjs';
+import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 import { MenuController, NavController } from '@ionic/angular';
 import { Title, DomSanitizer } from '@angular/platform-browser';
@@ -24,9 +24,11 @@ import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
 
 /**
- * @description Angular engine key constants
+ * @description Angular engine key constants.
  * @summary Contains key strings used by the Angular rendering engine for reflection,
- * dynamic component creation, and other engine operations.
+ * dynamic component creation, and other engine operations. These constants provide
+ * consistent naming for metadata keys, DOM attributes, and component identification
+ * throughout the rendering system.
  * @typedef {Object} AngularEngineKeys
  * @property {string} REFLECT - Prefix for reflection metadata keys
  * @property {string} DYNAMIC - Key for dynamic component identification
@@ -40,8 +42,10 @@ import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline
  * @property {string} RENDER - Key for renderable components
  * @property {string} RENDERED_ID - Template for rendered component IDs
  * @property {string} PARENT - Key for comparison decorators and validators
+ * @property {string} VALIDATION_PARENT_KEY - Key for validation parent reference
+ * @property {string} FLAVOUR - Identifier for the Angular engine flavor
  * @const AngularEngineKeys
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 const AngularEngineKeys = {
     REFLECT: `${UIKeys.REFLECT}.angular.`,
@@ -57,32 +61,40 @@ const AngularEngineKeys = {
     RENDERED_ID: 'rendered-as-{0}',
     PARENT: '_parent',
     VALIDATION_PARENT_KEY: VALIDATION_PARENT_KEY,
+    FLAVOUR: "angular",
 };
 /**
- * @description Form validation state constants
+ * @description Form validation state constants.
  * @summary Contains constants representing the possible validation states of a form.
  * These are used to check and handle form validation throughout the application.
+ * The VALID state indicates all form controls pass validation, while INVALID
+ * indicates one or more validation errors exist.
  * @typedef {Object} FormConstants
  * @property {string} VALID - Constant representing a valid form state
  * @property {string} INVALID - Constant representing an invalid form state
  * @const FormConstants
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 const FormConstants = {
     VALID: 'VALID',
     INVALID: 'INVALID',
 };
 /**
- * @description Event name constants
- * @summary Enum containing constants for event names used throughout the application.
- * These are used to standardize event naming and handling.
- * @enum {string}
- * @readonly
+ * @description Event name constants.
+ * @summary Contains constants for standardized event names used throughout the application.
+ * These constants ensure consistent event naming across components and make it easier to
+ * track and handle events. Each constant represents a specific application event type.
+ * @typedef {Object} EventConstants
  * @property {string} BACK_BUTTON_NAVIGATION - Event fired when back button navigation ends
- * @property {string} REFRESH_EVENT - Event fired when a refresh action occurs
- * @property {string} CLICK_EVENT - Event fired when a click action occurs
- * @property {string} SUBMIT_EVENT - Event fired when a form submission occurs
- * @memberOf module:engine
+ * @property {string} REFRESH - Event fired when a refresh action occurs
+ * @property {string} CLICK - Event fired when a click action occurs
+ * @property {string} SUBMIT - Event fired when a form submission occurs
+ * @property {string} VALIDATION_ERROR - Event fired when a validation error occurs
+ * @property {string} FIELDSET_ADD_GROUP - Event fired when adding a group to a fieldset
+ * @property {string} FIELDSET_UPDATE_GROUP - Event fired when updating a fieldset group
+ * @property {string} FIELDSET_REMOVE_GROUP - Event fired when removing a fieldset group
+ * @const EventConstants
+ * @memberOf module:lib/engine/constants
  */
 const EventConstants = {
     BACK_BUTTON_NAVIGATION: 'backButtonNavigationEndEvent',
@@ -96,9 +108,11 @@ const EventConstants = {
     // FIELDSET_GROUP_VALIDATION: 'fieldsetGroupValidationEvent'
 };
 /**
- * @description Logger level constants
- * @summary Enum defining the logging levels used in the application's logging system.
- * Lower values represent more verbose logging, while higher values represent more critical logs.
+ * @description Logger level constants.
+ * @summary Defines the logging levels used in the application's logging system.
+ * Lower numeric values represent more verbose logging, while higher values represent
+ * more critical logs. These levels control which log messages are output based on
+ * the configured logging threshold.
  * @enum {number}
  * @readonly
  * @property {number} ALL - Log everything (most verbose)
@@ -107,7 +121,7 @@ const EventConstants = {
  * @property {number} WARN - Log warnings
  * @property {number} ERROR - Log errors
  * @property {number} CRITICAL - Log critical errors (least verbose)
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 var LoggerLevels;
 (function (LoggerLevels) {
@@ -120,15 +134,16 @@ var LoggerLevels;
 })(LoggerLevels || (LoggerLevels = {}));
 ;
 /**
- * @description Route direction constants
- * @summary Enum defining the possible navigation directions in the application.
- * Used for controlling navigation flow and animation directions.
+ * @description Route direction constants.
+ * @summary Defines the possible navigation directions in the application.
+ * Used for controlling navigation flow and animation directions during route transitions.
+ * These constants help maintain consistent navigation behavior throughout the app.
  * @enum {string}
  * @readonly
  * @property {string} BACK - Navigate back to the previous page
  * @property {string} FORWARD - Navigate forward to the next page
  * @property {string} ROOT - Navigate to the root/home page
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 var RouteDirections;
 (function (RouteDirections) {
@@ -137,15 +152,18 @@ var RouteDirections;
     RouteDirections["ROOT"] = "root";
 })(RouteDirections || (RouteDirections = {}));
 /**
- * @description Component tag name constants
- * @summary Enum defining the tag names for custom components used in the application.
- * These tag names are used for component registration and rendering.
+ * @description Component tag name constants.
+ * @summary Defines the custom HTML tag names for specialized components used in the application.
+ * These tag names are registered with Angular and used for component rendering and identification.
+ * Each constant represents the selector for a specific custom component type.
  * @enum {string}
  * @readonly
  * @property {string} LIST_ITEM - Tag name for list item component
  * @property {string} LIST_INFINITE - Tag name for infinite scrolling list component
  * @property {string} LIST_PAGINATED - Tag name for paginated list component
- * @memberOf module:engine
+ * @property {string} CRUD_FIELD - Tag name for CRUD form field component
+ * @property {string} LAYOUT_COMPONENT - Tag name for layout container component
+ * @memberOf module:lib/engine/constants
  */
 var ComponentsTagNames;
 (function (ComponentsTagNames) {
@@ -156,13 +174,16 @@ var ComponentsTagNames;
     ComponentsTagNames["LAYOUT_COMPONENT"] = "ngx-decaf-layout";
 })(ComponentsTagNames || (ComponentsTagNames = {}));
 /**
- * @description Base component property name constants
- * @summary Enum defining the standard property names used by base components in the application.
- * These property names are used for consistent property access across components.
+ * @description Base component property name constants.
+ * @summary Defines the standard property names used by base components throughout the application.
+ * These constants ensure consistent property naming across components and facilitate
+ * property access, validation, and data binding. Used primarily for component input
+ * properties and change detection.
  * @enum {string}
  * @readonly
  * @property {string} MODEL - Property name for the component's data model
  * @property {string} LOCALE - Property name for localization settings
+ * @property {string} LOCALE_ROOT - Property name for the locale root identifier
  * @property {string} PK - Property name for primary key
  * @property {string} ITEMS - Property name for collection items
  * @property {string} ROUTE - Property name for routing information
@@ -171,7 +192,10 @@ var ComponentsTagNames;
  * @property {string} TRANSLATABLE - Property name for translation flag
  * @property {string} MAPPER - Property name for property mapper
  * @property {string} INITIALIZED - Property name for initialization state
- * @memberOf module:engine
+ * @property {string} COMPONENT_NAME - Property name for component identifier
+ * @property {string} PARENT_COMPONENT - Property name for parent component reference
+ * @property {string} FORM_GROUP_COMPONENT_PROPS - Property name for form group component properties
+ * @memberOf module:lib/engine/constants
  */
 var BaseComponentProps;
 (function (BaseComponentProps) {
@@ -190,14 +214,48 @@ var BaseComponentProps;
     BaseComponentProps["PARENT_COMPONENT"] = "parentComponent";
     BaseComponentProps["FORM_GROUP_COMPONENT_PROPS"] = "componentProps";
 })(BaseComponentProps || (BaseComponentProps = {}));
+/**
+ * @description List component type constants.
+ * @summary Defines the available types for list components, determining their
+ * pagination and scrolling behavior. Used to configure list rendering strategies.
+ * @enum {string}
+ * @readonly
+ * @property {string} INFINITE - Infinite scroll list type
+ * @property {string} PAGINATED - Paginated list type with page navigation
+ * @memberOf module:lib/engine/constants
+ */
 var ListComponentsTypes;
 (function (ListComponentsTypes) {
     ListComponentsTypes["INFINITE"] = "infinite";
     ListComponentsTypes["PAGINATED"] = "paginated";
 })(ListComponentsTypes || (ListComponentsTypes = {}));
+/**
+ * @description CSS class name constants.
+ * @summary Contains predefined CSS class names used for consistent styling
+ * across components. These constants help maintain a unified visual language
+ * and make it easier to apply standard styles.
+ * @typedef {Object} CssClasses
+ * @property {string} BUTTONS_CONTAINER - CSS class for button container elements
+ * @const CssClasses
+ * @memberOf module:lib/engine/constants
+ */
 const CssClasses = {
     BUTTONS_CONTAINER: 'buttons-container',
 };
+/**
+ * @description Default options for reactive CRUD forms.
+ * @summary Provides default configuration for form buttons in CRUD operations.
+ * Includes default text labels for submit and clear buttons, which can be
+ * overridden by individual form implementations.
+ * @type {ICrudFormOptions}
+ * @property {Object} buttons - Configuration for form action buttons
+ * @property {Object} buttons.submit - Submit button configuration
+ * @property {string} buttons.submit.text - Default text for submit button
+ * @property {Object} buttons.clear - Clear button configuration
+ * @property {string} buttons.clear.text - Default text for clear button
+ * @const DefaultFormReactiveOptions
+ * @memberOf module:lib/engine/constants
+ */
 const DefaultFormReactiveOptions = {
     buttons: {
         submit: {
@@ -208,6 +266,30 @@ const DefaultFormReactiveOptions = {
         },
     },
 };
+/**
+ * @description Default options for empty list state display.
+ * @summary Provides default configuration for displaying empty state in list components
+ * when no data is available. Includes default text for title and subtitle, icon name,
+ * button text and visibility settings. These defaults can be overridden by individual
+ * list component implementations to customize the empty state presentation.
+ * @type {IListEmptyOptions}
+ * @property {string} title - Default translation key for empty list title
+ * @property {string} subtitle - Default translation key for empty list subtitle
+ * @property {boolean} showButton - Whether to show action button in empty state
+ * @property {string} icon - Default Ionic icon name for empty state
+ * @property {string} buttonText - Default translation key for button text
+ * @property {string} link - Default navigation link (empty string)
+ * @const DefaultListEmptyOptions
+ * @memberOf module:lib/engine/constants
+ */
+const DefaultListEmptyOptions = {
+    title: 'empty.title',
+    subtitle: 'empty.subtitle',
+    showButton: false,
+    icon: 'folder-open-outline',
+    buttonText: 'locale.empty.button',
+    link: ''
+};
 
 /**
  * @module module:lib/engine/ValidatorFactory
@@ -706,11 +788,17 @@ function generateRandomValue(length = 8, onlyNumbers = false) {
     return result;
 }
 /**
- * Converts a string representation of a boolean or a boolean value to a boolean type.
+ * @description Converts a string representation of a boolean or a boolean value to a boolean type.
+ * @summary This utility function handles conversion of string-based boolean values ('true', 'false')
+ * to actual boolean types. It performs case-insensitive string comparison and returns the
+ * corresponding boolean value. This is particularly useful when parsing configuration values,
+ * URL parameters, or form inputs that may come as strings but need to be used as booleans.
  *
- * @export
- * @param {('true' | 'false' | boolean)} prop - The value to convert. Can be the string 'true', 'false', or a boolean.
- * @returns {boolean} The boolean representation of the input value. Returns true if the input is the string 'true' or boolean true, false otherwise.
+ * @param {'true' | 'false' | boolean} prop - The value to convert. Can be the string 'true', 'false', or a boolean
+ * @returns {boolean} The boolean representation of the input value. Returns true if the input is the string 'true' or boolean true, false otherwise
+ *
+ * @function stringToBoolean
+ * @memberOf module:lib/helpers/utils
  */
 function stringToBoolean(prop) {
     if (typeof prop === 'string')
@@ -718,10 +806,18 @@ function stringToBoolean(prop) {
     return prop;
 }
 /**
- * Checks if a value is a valid Date object
+ * @description Checks if a value is a valid Date object.
+ * @summary This validation function determines whether a given value represents a valid date.
+ * It handles multiple input types including Date objects, timestamp numbers, and date strings.
+ * For string inputs, it supports ISO 8601 format (YYYY-MM-DD) with or without time components.
+ * The function performs comprehensive validation including regex pattern matching and Date
+ * object creation to ensure the date is not only parseable but also represents a real date.
+ *
+ * @param {string | Date | number} date - The value to check. Can be a Date object, a timestamp number, or a date string
+ * @returns {boolean} Returns true if the value is a valid Date object (not NaN), otherwise false
  *
- * @param {(string | Date | number)} date - The value to check. Can be a Date object, a timestamp number, or a date string
- * @return {boolean} Returns true if the value is a valid Date object (not NaN), otherwise false
+ * @function isValidDate
+ * @memberOf module:lib/helpers/utils
  */
 function isValidDate(date) {
     try {
@@ -741,12 +837,21 @@ function isValidDate(date) {
     }
 }
 /**
- * Formats a date into a localized string representation
+ * @description Formats a date into a localized string representation.
+ * @summary This function converts a date value into a formatted string according to a specified
+ * or system locale. It accepts multiple input formats (Date objects, timestamps, or date strings)
+ * and returns a consistently formatted date string in DD/MM/YYYY format. If the input date is
+ * invalid, the function returns the original input as a string. The function automatically
+ * uses the system locale if none is provided and handles string format conversions by replacing
+ * forward slashes with hyphens for proper Date parsing.
  *
- * @param {(string | Date | number)} date - The date to format. Can be a Date object, a timestamp number, or a date string
+ * @param {string | Date | number} date - The date to format. Can be a Date object, a timestamp number, or a date string
  * @param {string} [locale] - The locale to use for formatting. If not provided, the system's locale will be used
- * @return {(Date | string)} A formatted date string in the format DD/MM/YYYY according to the specified locale,
- *                           or the original input as a string if the date is invalid
+ * @returns {Date | string} A formatted date string in the format DD/MM/YYYY according to the specified locale,
+ *                          or the original input as a string if the date is invalid
+ *
+ * @function formatDate
+ * @memberOf module:lib/helpers/utils
  */
 function formatDate(date, locale) {
     if (!locale)
@@ -763,12 +868,21 @@ function formatDate(date, locale) {
     return r;
 }
 /**
- * Attempts to parse a date string, Date object, or number into a valid Date object
+ * @description Attempts to parse a date string, Date object, or number into a valid Date object.
+ * @summary This function provides robust date parsing functionality that handles the specific
+ * format "DD/MM/YYYY HH:MM:SS:MS". It first validates the input date, and if already valid,
+ * returns it as-is. For string inputs, it parses the date and time components separately,
+ * extracts numeric values, and constructs a new Date object. The function includes validation
+ * to ensure the resulting Date object is valid and logs a warning if parsing fails.
+ * Returns null for invalid or unsupported date formats.
+ *
+ * @param {string | Date | number} date - The date to parse. Can be a Date object, a timestamp number,
+ *                                        or a date string in the format "DD/MM/YYYY HH:MM:SS:MS"
+ * @returns {Date | null} A valid Date object if parsing is successful, or null if the date is invalid
+ *                        or doesn't match the expected format
  *
- * @param {(string | Date | number)} date - The date to parse. Can be a Date object, a timestamp number,
- *                                         or a date string in the format "DD/MM/YYYY HH:MM:SS:MS"
- * @return {(Date | null)} A valid Date object if parsing is successful, or null if the date is invalid
- *                         or doesn't match the expected format
+ * @function parseToValidDate
+ * @memberOf module:lib/helpers/utils
  */
 function parseToValidDate(date) {
     if (isValidDate(date))
@@ -786,13 +900,22 @@ function parseToValidDate(date) {
     return date;
 }
 /**
- * Maps an item object using a provided mapper object and optional additional properties.
+ * @description Maps an item object using a provided mapper object and optional additional properties.
+ * @summary This function transforms a source object into a new object based on mapping rules defined
+ * in the mapper parameter. It supports dot notation for nested property access (e.g., 'user.name.first')
+ * and handles various data types including strings and complex objects. For date values, it automatically
+ * formats them using the formatDate function. The function also allows merging additional properties
+ * into the result. When a mapped value is null or undefined, it uses the original mapper value as
+ * a fallback.
  *
- * @param {KeyValue} item - The source object to be mapped.
+ * @param {KeyValue} item - The source object to be mapped
  * @param {KeyValue} mapper - An object that defines the mapping rules. Keys represent the new property names,
- *                            and values represent the path to the corresponding values in the source object.
- * @param {KeyValue} [props] - Optional additional properties to be included in the mapped object.
- * @returns {KeyValue} A new object with properties mapped according to the mapper object and including any additional properties.
+ *                            and values represent the path to the corresponding values in the source object
+ * @param {KeyValue} [props] - Optional additional properties to be included in the mapped object
+ * @returns {KeyValue} A new object with properties mapped according to the mapper object and including any additional properties
+ *
+ * @function itemMapper
+ * @memberOf module:lib/helpers/utils
  */
 function itemMapper(item, mapper, props) {
     return Object.entries(mapper).reduce((accum, [key, value]) => {
@@ -819,15 +942,23 @@ function itemMapper(item, mapper, props) {
     }, {});
 }
 /**
- * Maps an array of data objects using a provided mapper object.
+ * @description Maps an array of data objects using a provided mapper object.
+ * @summary This function transforms an array of objects by applying mapping rules to each item
+ * using the itemMapper function. It processes each element in the data array and creates
+ * new mapped objects based on the mapper configuration. The function includes validation
+ * to ensure meaningful data: if a mapped item contains only null/undefined values, it
+ * preserves the original item instead. This prevents data loss during transformation.
+ * Returns an empty array if the input data is null, undefined, or empty.
  *
- * @template T - The type of the resulting mapped items.
- * @param {any[]} data - The array of data objects to be mapped.
- * @param {KeyValue} mapper - An object that defines the mapping rules.
- * @param {KeyValue} [props] - Additional properties to be included in the mapped items.
+ * @template T - The type of the resulting mapped items
+ * @param {T[]} data - The array of data objects to be mapped
+ * @param {KeyValue} mapper - An object that defines the mapping rules
+ * @param {KeyValue} [props] - Additional properties to be included in the mapped items
+ * @returns {T[]} The array of mapped items. If an item in the original array does not have any non-null values after mapping,
+ *                the original item is returned instead
  *
- * @returns {T[]} - The array of mapped items. If an item in the original array does not have any non-null values after mapping,
- * the original item is returned instead.
+ * @function dataMapper
+ * @memberOf module:lib/helpers/utils
  */
 function dataMapper(data, mapper, props) {
     if (!data || !data.length)
@@ -906,13 +1037,11 @@ async function isDarkMode() {
  */
 
 /**
- * @module module:lib/engine/NgxDecafFormService
+ * @module lib/engine/NgxDecafFormService
  * @description Utilities to create and manage Angular forms in Decaf components.
  * @summary The NgxDecafFormService exposes helpers to build FormGroup/FormArray instances
  * from component metadata or UI model definitions, register forms in a registry,
  * validate and extract form data, and create controls with appropriate validators.
- *
- * @link {@link NgxDecafFormService}
  */
 /**
  * @description Service for managing Angular forms and form controls.
@@ -935,7 +1064,6 @@ async function isDarkMode() {
  *
  * // Getting form data
  * const formData = NgxDecafFormService.getFormData(form);
- *
  * @mermaid
  * sequenceDiagram
  *   participant C as Component
@@ -957,46 +1085,42 @@ class NgxDecafFormService {
      * @description WeakMap that stores control properties for form controls.
      * @summary A WeakMap that associates AbstractControl instances with their corresponding FieldProperties.
      * This allows the service to track metadata for form controls without creating memory leaks.
-     *
      * @type {WeakMap<AbstractControl, FieldProperties>}
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     static { this.controls = new WeakMap(); }
     /**
      * @description Registry of form groups indexed by their unique identifiers.
      * @summary A Map that stores FormGroup instances with their unique string identifiers.
      * This allows global access to registered forms throughout the application.
-     *
      * @type {Map<string, FormGroup>}
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     static { this.formRegistry = new Map(); }
     /**
      * @description Creates a new form group or form array with the specified identifier.
-     * @summary Generates a FormGroup or FormArray based on the provided properties. If pages are specified
-     * and greater than 1, creates a FormArray; otherwise creates a FormGroup. The form can optionally
-     * be registered in the global form registry for later access throughout the application.
-     *
+     * @summary Generates a FormGroup or FormArray based on the provided parameters. If formArray is true,
+     * creates a FormArray; otherwise creates a FormGroup. The form can optionally be registered in the
+     * global form registry for later access throughout the application. If a form with the given id
+     * already exists in the registry, it returns the existing form.
      * @param {string} id - Unique identifier for the form
-     * @param {Partial<IComponentInput>} [props={}] - Configuration properties for the form
+     * @param {boolean} [formArray=false] - Whether to create a FormArray instead of a FormGroup
      * @param {boolean} [registry=true] - Whether to register the form in the global registry
-     * @return {FormGroup | FormArray} The created form instance
-     *
+     * @return {FormGroup | FormArray} The created or existing form instance
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant FR as Form Registry
      *   participant AF as Angular Forms
-     *
-     *   C->>NFS: createForm(id, props, registry)
+     *   C->>NFS: createForm(id, formArray, registry)
      *   NFS->>FR: Check if form exists
-     *   alt Form doesn't exist
-     *     alt props.pages > 1
+     *   alt Form exists
+     *     FR-->>NFS: Return existing form
+     *   else Form doesn't exist
+     *     alt formArray is true
      *       NFS->>AF: new FormArray([])
      *     else
      *       NFS->>AF: new FormGroup({})
@@ -1006,9 +1130,7 @@ class NgxDecafFormService {
      *     end
      *   end
      *   NFS-->>C: Return FormGroup | FormArray
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createForm(id, formArray = false, registry = true) {
         const form = this.formRegistry.get(id) ?? (formArray ? new FormArray([]) : new FormGroup({}));
@@ -1021,20 +1143,26 @@ class NgxDecafFormService {
      * @summary Registers a FormGroup or FormArray with a unique identifier for global access throughout
      * the application. This allows forms to be retrieved and managed centrally. Throws an error if
      * the identifier is already in use to prevent conflicts.
-     *
      * @param {string} formId - The unique identifier for the form
      * @param {FormParent} formGroup - The FormGroup or FormArray to be registered
      * @return {void}
      * @throws {Error} If a FormGroup with the given id is already registered
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addRegistry(formId, formGroup) {
         if (this.formRegistry.has(formId))
             throw new Error(`A FormGroup with id '${formId}' is already registered.`);
         this.formRegistry.set(formId, formGroup);
     }
+    /**
+     * @description Retrieves a form from the registry by its identifier.
+     * @summary Gets a FormGroup or FormArray from the registry using its unique identifier.
+     * Returns undefined if the form is not found in the registry. This method provides
+     * safe access to registered forms without throwing errors.
+     * @param {string} [id] - The unique identifier of the form to retrieve
+     * @return {FormParent | undefined} The FormGroup or FormArray if found, undefined otherwise
+     * @static
+     */
     static getOnRegistry(id) {
         return this.formRegistry.get(id);
     }
@@ -1043,12 +1171,9 @@ class NgxDecafFormService {
      * @summary Deletes a FormGroup or FormArray from the registry using its unique identifier.
      * This cleans up the registry and allows the identifier to be reused. The form itself
      * is not destroyed, only removed from the central registry.
-     *
      * @param {string} formId - The unique identifier of the form to be removed
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static removeRegistry(formId) {
         this.formRegistry.delete(formId);
@@ -1058,20 +1183,17 @@ class NgxDecafFormService {
      * @summary Traverses the form group structure to find the parent group and control name for a given path.
      * Handles complex nested structures including arrays and sub-groups. Creates missing intermediate
      * groups as needed and properly configures FormArray controls for multiple value scenarios.
-     *
      * @param {FormGroup} formGroup - The root FormGroup to traverse
      * @param {string} path - The dot-separated path to the control (e.g., 'user.address.street')
      * @param {IComponentInput} componentProps - Properties defining the component configuration
      * @param {KeyValue} parentProps - Properties from the parent component for context
      * @return {FormParentGroup} A tuple containing the parent FormGroup and the control name
-     *
      * @private
      * @mermaid
      * sequenceDiagram
      *   participant NFS as NgxDecafFormService
      *   participant FG as FormGroup
      *   participant FA as FormArray
-     *
      *   NFS->>NFS: Split path into parts
      *   loop For each path part
      *     alt Control doesn't exist
@@ -1085,9 +1207,7 @@ class NgxDecafFormService {
      *     NFS->>NFS: Navigate to next level
      *   end
      *   NFS-->>NFS: Return [parentGroup, controlName]
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static resolveParentGroup(formGroup, path, componentProps, parentProps) {
         const isMultiple = parentProps?.multiple || parentProps?.type === Array.name || false;
@@ -1134,14 +1254,11 @@ class NgxDecafFormService {
      * @description Retrieves component properties from a FormGroup or FormArray.
      * @summary Extracts component properties stored in the form group metadata. If a FormGroup is provided
      * and groupArrayName is specified, it will look for the FormArray within the form structure.
-     *
      * @param {FormGroup | FormArray} formGroup - The form group or form array to extract properties from
      * @param {string} [key] - Optional key to retrieve a specific property
      * @param {string} [groupArrayName] - Optional name of the group array if formGroup is not a FormArray
      * @return {Partial<FieldProperties>} The component properties or a specific property if key is provided
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getComponentPropsFromGroupArray(formGroup, key, groupArrayName) {
         if (!(formGroup instanceof FormArray) && typeof groupArrayName === Primitives.STRING)
@@ -1153,14 +1270,12 @@ class NgxDecafFormService {
      * @description Adds a new group to a parent FormArray.
      * @summary Creates and adds a new FormGroup to the specified parent FormArray based on the
      * component properties stored in the parent's metadata. This is used for dynamic form arrays
-     * where new groups need to be added at runtime.
-     *
-     * @param {FormParent} parentForm - The root form group containing the parent FormArray
-     * @param {number} index - The index position where the new group should be added
-     * @return {FormGroup} The newly created and added FormGroup
-     *
+     * where new groups need to be added at runtime. Clones the control at the specified index
+     * to maintain the same structure and validators.
+     * @param {FormParent} parentForm - The FormArray or FormGroup containing the parent FormArray
+     * @param {number} [index] - The index position to clone from; defaults to last index if length > 0, otherwise 0
+     * @return {FormArray} The parent FormArray after adding the new group
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addGroupToParent(parentForm, index) {
         if (parentForm instanceof FormGroup)
@@ -1173,14 +1288,11 @@ class NgxDecafFormService {
      * @description Retrieves a FormGroup from a parent FormArray at the specified index.
      * @summary Gets a FormGroup from the specified parent FormArray. If the group doesn't exist
      * at the given index, it will create a new one using addGroupToParent.
-     *
-     * @param {FormGroup} formGroup - The root form group containing the parent FormArray
+     * @param {FormParent} formGroup - The root form group containing the parent FormArray
      * @param {string} parentName - The name of the parent FormArray to retrieve the group from
      * @param {number} [index=1] - The index of the group to retrieve
      * @return {FormGroup} The FormGroup at the specified index
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getGroupFromParent(formGroup, parentName, index = 1) {
         const childGroup = (formGroup.get(parentName) || formGroup).at(index);
@@ -1188,6 +1300,17 @@ class NgxDecafFormService {
             return childGroup;
         return this.addGroupToParent(formGroup, index).at(index);
     }
+    /**
+     * @description Clones a form control with its validators.
+     * @summary Creates a deep copy of a FormControl, FormGroup, or FormArray, preserving
+     * validators but resetting values and state. This is useful for creating new instances
+     * of form controls with the same validation rules, particularly in dynamic FormArrays
+     * where new groups need to be added with identical structure.
+     * @param {AbstractControl} control - The control to clone (FormControl, FormGroup, or FormArray)
+     * @return {AbstractControl} A new instance of the control with the same validators
+     * @throws {Error} If the control type is not supported
+     * @static
+     */
     static cloneFormControl(control) {
         const syncValidators = (control.validator ? [control.validator] : []).filter(fn => {
             // if(lastIndex > 0)
@@ -1225,14 +1348,13 @@ class NgxDecafFormService {
      * @description Checks if a value is unique within a FormArray group.
      * @summary Validates that the primary key value in a FormGroup is unique among all groups
      * in the parent FormArray. The uniqueness check behavior differs based on the operation type.
-     *
+     * For both CREATE and UPDATE operations, it checks that no other group in the array has the same
+     * primary key value.
      * @param {FormGroup} formGroup - The FormGroup to check for uniqueness
-     * @param {number} index - The index of the current group within the FormArray
      * @param {OperationKeys} [operation=OperationKeys.CREATE] - The type of operation being performed
+     * @param {number} [index] - The index of the current group within the FormArray
      * @return {boolean} True if the value is unique, false otherwise
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static isUniqueOnGroup(formGroup, operation = OperationKeys.CREATE, index) {
         const formArray = formGroup.parent;
@@ -1258,12 +1380,9 @@ class NgxDecafFormService {
      * @description Enables all controls within a FormGroup or FormArray.
      * @summary Recursively enables all form controls within the provided FormGroup or FormArray.
      * This is useful for making all controls interactive after they have been disabled.
-     *
      * @param {FormArray | FormGroup} formGroup - The FormGroup or FormArray to enable all controls for
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static enableAllGroupControls(formGroup) {
         Object.keys(formGroup.controls).forEach(key => {
@@ -1282,17 +1401,15 @@ class NgxDecafFormService {
      * @description Adds a form control to a form group based on component properties.
      * @summary Creates and configures a FormControl within the specified FormGroup using the provided
      * component properties. Handles nested paths, multiple controls (FormArrays), and control registration.
-     * This method supports complex form structures with nested groups and arrays.
-     *
-     * @param {FormGroup} formGroup - The form group to add the control to
+     * This method supports complex form structures with nested groups and arrays. It also manages
+     * page-based forms and FormArray indexing.
+     * @param {FormParent} formGroup - The form group or form array to add the control to
      * @param {IComponentInput} componentProps - The component properties defining the control configuration
-     * @param {KeyValue} [parentProps={}] - Properties from the parent component for context
+     * @param {Partial<IComponentInput>} [parentProps={}] - Properties from the parent component for context
      * @param {number} [index=0] - The index for multiple controls in FormArrays
-     * @return {void}
-     *
+     * @return {FormParent} The updated form parent (FormGroup or FormArray)
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addFormControl(formGroup, componentProps, parentProps = {}, index = 0) {
         const isMultiple = parentProps?.['multiple'] || parentProps?.['type'] === 'Array' || false;
@@ -1328,18 +1445,15 @@ class NgxDecafFormService {
      * @summary Finds and returns an AbstractControl from a registered form using the form id and optional path.
      * This method provides centralized access to form controls across the application by leveraging
      * the form registry system.
-     *
      * @param {string} formId - The unique identifier of the form in the registry
      * @param {string} [path] - The optional dot-separated path to a specific control within the form
      * @return {AbstractControl} The requested AbstractControl (FormGroup, FormArray, or FormControl)
      * @throws {Error} If the form is not found in the registry or the control is not found in the form
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant FR as Form Registry
-     *
      *   C->>NFS: getControlFromForm(formId, path?)
      *   NFS->>FR: Get form by formId
      *   alt Form not found
@@ -1358,9 +1472,7 @@ class NgxDecafFormService {
      *       NFS-->>C: Return form
      *     end
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getControlFromForm(formId, path) {
         const form = this.formRegistry.get(formId);
@@ -1378,18 +1490,15 @@ class NgxDecafFormService {
      * @summary Generates a FormGroup from an array of UIModelMetadata objects, extracting component
      * properties and creating appropriate form controls. This method is specifically designed to work
      * with the UI decorator system and provides automatic form generation from metadata.
-     *
      * @param {string} id - Unique identifier for the form
      * @param {boolean} [registry=false] - Whether to register the created form in the global registry
      * @param {UIModelMetadata[]} [children] - Array of UI model metadata objects to create controls from
      * @return {FormGroup} The created FormGroup with controls for each child metadata
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: createFormFromChildren(id, registry, children)
      *   NFS->>AF: new FormGroup({})
      *   loop For each child metadata
@@ -1400,9 +1509,7 @@ class NgxDecafFormService {
      *     NFS->>NFS: addRegistry(id, form)
      *   end
      *   NFS-->>C: Return FormGroup
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createFormFromChildren(id, registry = false, children) {
         const form = new FormGroup({});
@@ -1419,18 +1526,15 @@ class NgxDecafFormService {
      * @summary Generates a FormGroup based on an array of component configurations and optionally registers it.
      * This method processes component input configurations to create appropriate form controls with
      * validation and initial values.
-     *
      * @param {string} id - The unique identifier for the form
      * @param {IComponentConfig[]} components - An array of component configurations defining the form structure
      * @param {boolean} [registry=false] - Whether to register the created form in the global registry
      * @return {FormGroup} The created FormGroup with controls for each component configuration
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: createFormFromComponents(id, components, registry)
      *   NFS->>AF: new FormGroup({})
      *   loop For each component config
@@ -1441,9 +1545,7 @@ class NgxDecafFormService {
      *     NFS->>NFS: addRegistry(id, form)
      *   end
      *   NFS-->>C: Return FormGroup
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createFormFromComponents(id, components, registry = false) {
         const form = new FormGroup({});
@@ -1458,54 +1560,51 @@ class NgxDecafFormService {
      * @description Adds a control to a form based on component properties.
      * @summary Creates and adds a form control to a form (existing or new) based on the provided component properties.
      * Handles multi-page forms by managing FormArray structures and proper indexing. This method supports
-     * complex form scenarios including nested controls and page-based form organization.
-     *
+     * complex form scenarios including nested controls and page-based form organization. It automatically
+     * creates FormArrays for forms with multiple pages and manages page indexing.
      * @param {string} id - The unique identifier of the form
      * @param {FieldProperties} componentProperties - The properties of the component to create the control from
      * @param {FieldProperties} [parentProps] - Optional parent properties for context and configuration
-     * @return {AbstractControl} The form or created control
-     *
+     * @return {FormParent} The form or created control (FormGroup or FormArray)
+     * @throws {Error} If page property is required but not provided or is invalid
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant F as Form
-     *
      *   C->>NFS: addControlFromProps(id, componentProps, parentProps?)
-     *   NFS->>NFS: createForm(id, parentProps, true)
-     *   alt Multi-page form (parentProps.pages > 1)
+     *   NFS->>NFS: createForm(id, formArray, true)
+     *   alt Multi-page form (parentProps.pages > 0)
      *     NFS->>NFS: Calculate page index
-     *     NFS->>F: Get or create FormGroup at index
+     *     alt Group doesn't exist at index
+     *       NFS->>F: Create new FormGroup at index
+     *     end
      *     NFS->>NFS: Set form to page FormGroup
      *   end
      *   alt componentProperties has path
      *     NFS->>NFS: addFormControl(form, componentProperties, parentProps)
      *   end
      *   NFS-->>C: Return form/control
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addControlFromProps(id, componentProperties, parentProps) {
         const formArray = (componentProperties?.pages && componentProperties?.pages >= 1 || componentProperties.multiple === true);
         let form = this.createForm(id, formArray, true);
-        const formLength = form.length;
         if (parentProps?.pages && parentProps?.pages > 0) {
-            let index = componentProperties.page || parentProps.page;
+            const index = componentProperties.page || parentProps.page;
             if (!(typeof index === 'number') || index === 0)
                 throw Error(`Property 'page' is required and greather than 0 on ${componentProperties.name}`);
-            if (index > formLength) {
-                if (form?.['lastIndex'] && index === form['lastIndex']['page']) {
-                    index = form['lastIndex']['index'];
-                }
-                else {
-                    form['lastIndex'] = {
-                        page: index,
-                        index: formLength + 1
-                    };
-                    index = formLength + 1;
-                }
-            }
+            // if(index > formLength) {
+            //   if((form as KeyValue)?.['lastIndex'] && index === (form as KeyValue)['lastIndex']['page']) {
+            //     index = (form as KeyValue)['lastIndex']['index'];
+            //   } else {
+            //     (form as KeyValue)['lastIndex'] = {
+            //       page: index,
+            //       index: formLength + 1
+            //     };
+            //     index = formLength + 1;
+            //   }
+            // }
             let group = form.controls[index - 1];
             if (!group) {
                 group = new FormGroup({});
@@ -1522,17 +1621,14 @@ class NgxDecafFormService {
      * @summary Extracts and processes the data from a FormGroup, handling different input types and nested form groups.
      * Performs type conversion for various HTML5 input types, validates nested controls, and manages
      * multiple control scenarios. Automatically enables all group controls after data extraction.
-     *
      * @param {FormGroup} formGroup - The FormGroup to extract data from
      * @return {Record<string, unknown>} An object containing the processed form data with proper type conversions
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant FG as FormGroup
      *   participant FC as FormControl
-     *
      *   C->>NFS: getFormData(formGroup)
      *   loop For each control in formGroup
      *     alt Control is not FormControl
@@ -1556,9 +1652,7 @@ class NgxDecafFormService {
      *   end
      *   NFS->>NFS: enableAllGroupControls(formGroup)
      *   NFS-->>C: Return processed data object
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getFormData(formGroup) {
         const data = {};
@@ -1609,13 +1703,11 @@ class NgxDecafFormService {
      * @summary Recursively validates all fields in a form control or form group, marking them as touched and dirty.
      * Performs comprehensive validation including uniqueness checks for primary keys in FormArray scenarios.
      * This method ensures all validation rules are applied and form state is properly updated.
-     *
      * @param {AbstractControl} control - The control or form group to validate
      * @param {string} [pk] - Optional primary key field name for uniqueness validation
      * @param {string} [path] - The path to the control within the form for error reporting
      * @return {boolean} True if all fields are valid, false otherwise
      * @throws {Error} If no control is found at the specified path or if the control type is unknown
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
@@ -1623,7 +1715,6 @@ class NgxDecafFormService {
      *   participant FC as FormControl
      *   participant FG as FormGroup
      *   participant FA as FormArray
-     *
      *   C->>NFS: validateFields(control, pk?, path?)
      *   alt Control is FormControl
      *     NFS->>FC: markAsTouched()
@@ -1649,9 +1740,7 @@ class NgxDecafFormService {
      *   else Unknown control type
      *     NFS-->>C: Throw Error
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static validateFields(control, pk, path) {
         control = path ? control.get(path) : control;
@@ -1702,8 +1791,12 @@ class NgxDecafFormService {
     /**
      * @description Generates validators from component properties.
      * @summary Creates an array of ValidatorFn based on the supported validation keys in the component properties.
-     * @param {KeyValue} props - The component properties.
-     * @return {ValidatorFn[]} An array of validator functions.
+     * Maps each validation property to its corresponding Angular validator function using the ValidatorFactory.
+     * Only processes properties that are recognized as validation keys by the Validation utility.
+     * @param {KeyValue} props - The component properties containing validation rules
+     * @return {ValidatorFn[]} An array of validator functions
+     * @private
+     * @static
      */
     static validatorsFromProps(props) {
         const supportedValidationKeys = Validation.keys();
@@ -1718,18 +1811,15 @@ class NgxDecafFormService {
      * @summary Generates a FormControl with validators and initial configuration based on the provided
      * component properties. Handles different input types, sets initial values, and configures
      * validation rules and update modes.
-     *
      * @param {FieldProperties} props - The component properties defining the control configuration
      * @param {FieldUpdateMode} [updateMode='change'] - The update mode for the control ('change', 'blur', 'submit')
      * @return {FormControl} The created FormControl with proper configuration and validators
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant VF as ValidatorFactory
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: fromProps(props, updateMode?)
      *   NFS->>NFS: validatorsFromProps(props)
      *   NFS->>VF: Create validators from props
@@ -1744,9 +1834,7 @@ class NgxDecafFormService {
      *   NFS->>AF: new FormControl(config)
      *   AF-->>NFS: Return FormControl
      *   NFS-->>C: Return configured FormControl
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static fromProps(props, updateMode = 'change') {
         const validators = this.validatorsFromProps(props);
@@ -1770,12 +1858,9 @@ class NgxDecafFormService {
      * @summary Gets the FieldProperties associated with a form control from the internal WeakMap.
      * This method provides access to the original component properties that were used to create
      * the control, enabling validation, rendering, and behavior configuration.
-     *
      * @param {FormControl | FormArray | FormGroup} control - The form control to get properties for
      * @return {FieldProperties} The properties associated with the control, or empty object if not found
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getPropsFromControl(control) {
         return this.controls.get(control) || {};
@@ -1785,18 +1870,15 @@ class NgxDecafFormService {
      * @summary Traverses up the DOM tree to find the nearest parent element with the specified tag name.
      * This is useful for finding container elements or specific parent components in the DOM hierarchy.
      * The search is case-insensitive for tag name matching.
-     *
      * @param {HTMLElement} el - The starting element to traverse from
      * @param {string} tag - The tag name to search for (case-insensitive)
      * @return {HTMLElement} The found parent element with the specified tag
      * @throws {Error} If no parent with the specified tag is found in the DOM tree
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
      *   participant NFS as NgxDecafFormService
      *   participant DOM as DOM Tree
-     *
      *   C->>NFS: getParentEl(element, tagName)
      *   loop Traverse up DOM tree
      *     NFS->>DOM: Get parentElement
@@ -1807,9 +1889,7 @@ class NgxDecafFormService {
      *       NFS-->>C: Throw Error
      *     end
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getParentEl(el, tag) {
         let parent;
@@ -1826,30 +1906,35 @@ class NgxDecafFormService {
      * @summary Associates a form control with its component properties for later retrieval.
      * This enables the service to maintain metadata about controls without creating memory leaks,
      * as WeakMap automatically cleans up references when controls are garbage collected.
-     *
      * @param {AbstractControl} control - The control to register (FormControl, FormGroup, or FormArray)
      * @param {FieldProperties} props - The properties to associate with the control
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static register(control, props) {
         this.controls.set(control, props);
     }
     /**
-     * @description Unregisters a control.
+     * @description Unregisters a control from the internal WeakMap.
      * @summary Removes a control and its associated properties from the internal WeakMap.
-     * @param {AbstractControl} control - The control to unregister.
-     * @return {boolean} True if the control was successfully unregistered, false otherwise.
+     * This cleans up the metadata tracking for the control and frees up memory. Returns
+     * true if the control was found and removed, false if it was not in the registry.
+     * @param {AbstractControl} control - The control to unregister (FormControl, FormGroup, or FormArray)
+     * @return {boolean} True if the control was successfully unregistered, false otherwise
+     * @static
      */
     static unregister(control) {
         return this.controls.delete(control);
     }
     /**
-     * @description Resets a form group.
-     * @summary Recursively resets all controls in a form group, clearing values, errors, and marking them as pristine and untouched.
-     * @param {FormGroup} formGroup - The form group to reset.
+     * @description Resets a form group or form control.
+     * @summary Recursively resets all controls in a form group or a single form control, clearing values,
+     * errors, and marking them as pristine and untouched. For FormControls, it sets the value to empty
+     * string (except for checkbox types) and clears validation errors. For FormGroups, it recursively
+     * resets all child controls.
+     * @param {FormGroup | FormControl} formGroup - The form group or form control to reset
+     * @return {void}
+     * @static
      */
     static reset(formGroup) {
         if (formGroup instanceof FormControl) {
@@ -1873,32 +1958,29 @@ class NgxDecafFormService {
 }
 
 /**
- * @module module:lib/engine/NgxRenderingEngine
+ * @module lib/engine/NgxRenderingEngine
  * @description Angular rendering engine for Decaf model-driven UIs.
  * @summary Implements NgxRenderingEngine which converts model decorator metadata
  * into Angular components, manages component registration, and orchestrates
  * dynamic component creation and input mapping.
- *
  * @link {@link NgxRenderingEngine}
  */
 /**
- * @description Angular implementation of the RenderingEngine with enhanced features
- * @summary This class extends the base RenderingEngine to provide Angular-specific rendering capabilities
- * with additional features compared to NgxRenderingEngine. It handles the conversion of field definitions
- * to Angular components, manages component registration, and provides utilities for component creation
- * and input handling. This implementation uses Angular's newer component APIs.
- *
+ * @description Angular implementation of the RenderingEngine for Decaf components.
+ * @summary This class extends the base RenderingEngine to provide Angular-specific rendering capabilities.
+ * It handles the conversion of field definitions to Angular components, manages component registration,
+ * and provides utilities for component creation and input handling. The engine converts model decorator
+ * metadata into dynamically created Angular components with proper input binding and lifecycle management.
  * @template AngularFieldDefinition - Type for Angular-specific field definitions
  * @template AngularDynamicOutput - Type for Angular-specific component output
- *
  * @class NgxRenderingEngine
+ * @extends {RenderingEngine<AngularFieldDefinition, AngularDynamicOutput>}
  * @example
  * ```typescript
  * const engine = NgxRenderingEngine.get();
  * engine.initialize();
  * const output = engine.render(myModel, {}, viewContainerRef, injector, templateRef);
  * ```
- *
  * @mermaid
  * sequenceDiagram
  *   participant Client
@@ -1914,49 +1996,61 @@ class NgxDecafFormService {
  *   Components-->>Engine: component constructor
  *   Engine->>Engine: createComponent(component, inputs, metadata, vcr, injector, template)
  *   Engine-->>Client: return AngularDynamicOutput
+ * @memberOf module:lib/engine/NgxRenderingEngine
  */
 class NgxRenderingEngine extends RenderingEngine {
     /**
-     * @description Current operation context for component visibility control
+     * @description Current operation context for component visibility control.
      * @summary Static property that stores the current operation being performed,
      * which is used to determine component visibility through the 'hidden' property.
      * Components can specify operations where they should be hidden, and this property
      * provides the context for those visibility checks. The value is typically extracted
      * from the global properties during the rendering process.
-     *
      * @private
      * @static
      * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static { this._operation = undefined; }
     // private static _projectable: boolean = true
+    /**
+     * @description Parent component properties for child component inheritance.
+     * @summary Static property that stores parent component properties that should be
+     * inherited by child components. This is particularly used for passing page configuration
+     * down to child components in multi-page forms. The property is cleared after rendering
+     * to prevent property leakage between unrelated component trees.
+     * @private
+     * @static
+     * @type {KeyValue | undefined}
+     * @memberOf module:lib/engine/NgxRenderingEngine
+     */
     static { this._parentProps = undefined; }
     /**
-     * @description Constructs a new NgxRenderingEngine instance
+     * @description Constructs a new NgxRenderingEngine instance.
      * @summary Initializes a new instance of the Angular rendering engine by calling the parent
      * constructor with the 'angular' engine type identifier. This constructor sets up the base
      * rendering engine functionality with Angular-specific configurations and prepares the
      * instance for component registration and rendering operations.
-     *
      * @constructor
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     constructor() {
-        super('angular');
+        super(AngularEngineKeys.FLAVOUR);
     }
     /**
-     * @description Converts a field definition to an Angular component output
+     * @description Converts a field definition to an Angular component output.
      * @summary This private method takes a field definition and creates the corresponding Angular component.
-     * It handles component instantiation, input property mapping, and child component rendering.
-     * The method validates input properties against the component's metadata and processes
+     * It handles component instantiation, input property mapping, child component rendering, and visibility
+     * control. The method validates input properties against the component's metadata and processes
      * child components recursively.
-     *
      * @param {FieldDefinition<AngularFieldDefinition>} fieldDef - The field definition to convert
      * @param {ViewContainerRef} vcr - The view container reference for component creation
      * @param {Injector} injector - The Angular injector for dependency injection
      * @param {TemplateRef<any>} tpl - The template reference for content projection
      * @param {string} registryFormId - Form identifier for the component renderer
+     * @param {boolean} createComponent - Whether to create the component instance
+     * @param {FormParent} [formGroup] - Optional form group for form components
      * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
-     *
      * @mermaid
      * sequenceDiagram
      *   participant Method as fromFieldDefinition
@@ -1977,6 +2071,8 @@ class NgxRenderingEngine extends RenderingEngine {
      *     Method->>Method: Create component instance
      *   end
      *   Method-->>Caller: return AngularDynamicOutput
+     * @private
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     fromFieldDefinition(fieldDef, vcr, injector, tpl, registryFormId = Date.now().toString(36).toUpperCase(), createComponent = true, formGroup) {
         const cmp = fieldDef?.['component'] || NgxRenderingEngine.components(fieldDef.tag);
@@ -2046,11 +2142,10 @@ class NgxRenderingEngine extends RenderingEngine {
         return result;
     }
     /**
-     * @description Creates an Angular component instance
+     * @description Creates an Angular component instance with inputs and template projection.
      * @summary This static utility method creates an Angular component instance with the specified
      * inputs and template. It uses Angular's component creation API to instantiate the component
      * and then sets the input properties using the provided metadata.
-     *
      * @param {Type<unknown>} component - The component type to create
      * @param {KeyValue} [inputs={}] - The input properties to set on the component
      * @param {ComponentMirror<unknown>} metadata - The component metadata for input validation
@@ -2058,6 +2153,8 @@ class NgxRenderingEngine extends RenderingEngine {
      * @param {Injector} injector - The Angular injector for dependency injection
      * @param {Node[]} [template=[]] - The template nodes to project into the component
      * @return {ComponentRef<unknown>} The created component reference
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static createComponent(component, inputs = {}, metadata, vcr, injector, template = []) {
         const componentInstance = vcr.createComponent(component, {
@@ -2068,26 +2165,29 @@ class NgxRenderingEngine extends RenderingEngine {
         return componentInstance;
     }
     /**
-     * @description Extracts decorator metadata from a model
+     * @description Extracts decorator metadata from a model.
      * @summary This method provides access to the field definition generated from a model's
      * decorators. It's a convenience wrapper around the toFieldDefinition method that
      * converts a model to a field definition based on its decorators and the provided
      * global properties.
-     *
      * @param {Model} model - The model to extract decorators from
      * @param {Record<string, unknown>} globalProps - Global properties to include in the field definition
      * @return {FieldDefinition<AngularFieldDefinition>} The field definition generated from the model
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     getDecorators(model, globalProps) {
         return this.toFieldDefinition(model, globalProps);
     }
     /**
-     * @description Destroys the current engine instance
-     * @summary This static method clears the current instance reference, effectively
-     * destroying the singleton instance of the rendering engine. This can be used
-     * to reset the engine state or to prepare for a new instance creation.
-     *
+     * @description Destroys the current engine instance and cleans up resources.
+     * @summary This static method clears the current instance reference and parent props,
+     * effectively destroying the singleton instance of the rendering engine. Optionally
+     * removes the form registry for the specified form ID. This can be used to reset the
+     * engine state or to prepare for a new instance creation.
+     * @param {string} [formId] - Optional form ID to remove from registry
      * @return {Promise<void>} A promise that resolves when the instance is destroyed
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static async destroy(formId) {
         if (formId)
@@ -2096,12 +2196,11 @@ class NgxRenderingEngine extends RenderingEngine {
         NgxRenderingEngine._parentProps = undefined;
     }
     /**
-     * @description Renders a model into an Angular component output
+     * @description Renders a model into an Angular component output.
      * @summary This method takes a model and converts it to an Angular component output.
      * It first stores a reference to the model, then converts it to a field definition
      * using the base RenderingEngine's toFieldDefinition method, and finally converts
      * that field definition to an Angular component output using fromFieldDefinition.
-     *
      * @template M - Type extending Model
      * @param {M} model - The model to render
      * @param {Record<string, unknown>} globalProps - Global properties to pass to the component
@@ -2109,7 +2208,6 @@ class NgxRenderingEngine extends RenderingEngine {
      * @param {Injector} injector - The Angular injector for dependency injection
      * @param {TemplateRef<any>} tpl - The template reference for content projection
      * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
-     *
      * @mermaid
      * sequenceDiagram
      *   participant Client as Client Code
@@ -2124,6 +2222,8 @@ class NgxRenderingEngine extends RenderingEngine {
      *   Render->>FromField: fromFieldDefinition(fieldDef, vcr, injector, tpl)
      *   FromField-->>Render: AngularDynamicOutput
      *   Render-->>Client: return AngularDynamicOutput
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     render(model, globalProps, vcr, injector, tpl) {
         let result;
@@ -2147,12 +2247,13 @@ class NgxRenderingEngine extends RenderingEngine {
         return result;
     }
     /**
-     * @description Initializes the rendering engine
+     * @description Initializes the rendering engine.
      * @summary This method initializes the rendering engine. It checks if the engine is already initialized
      * and sets the initialized flag to true. This method is called before the engine is used
      * to ensure it's properly set up for rendering operations.
-     *
      * @return {Promise<void>} A promise that resolves when initialization is complete
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     async initialize() {
         if (this.initialized)
@@ -2161,15 +2262,16 @@ class NgxRenderingEngine extends RenderingEngine {
         this.initialized = true;
     }
     /**
-     * @description Registers a component with the rendering engine
+     * @description Registers a component with the rendering engine.
      * @summary This static method registers a component constructor with the rendering engine
      * under a specific name. It initializes the components registry if needed and throws
      * an error if a component is already registered under the same name to prevent
      * accidental overrides.
-     *
      * @param {string} name - The name to register the component under
      * @param {Constructor<unknown>} constructor - The component constructor
      * @return {void}
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static registerComponent(name, constructor) {
         if (!this._components)
@@ -2181,14 +2283,15 @@ class NgxRenderingEngine extends RenderingEngine {
         };
     }
     /**
-     * @description Retrieves registered components from the rendering engine
+     * @description Retrieves registered components from the rendering engine.
      * @summary This static method retrieves either all registered components or a specific component
      * by its selector. When called without a selector, it returns an array of all registered
      * components. When called with a selector, it returns the specific component if found,
      * or throws an error if the component is not registered.
-     *
      * @param {string} [selector] - Optional selector to retrieve a specific component
      * @return {Object|Array} Either a specific component or an array of all components
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static components(selector) {
         if (!selector)
@@ -2198,30 +2301,30 @@ class NgxRenderingEngine extends RenderingEngine {
         return this._components[selector];
     }
     /**
-     * @description Generates a key for reflection metadata
+     * @description Generates a key for reflection metadata storage.
      * @summary This static method generates a key for reflection metadata by prefixing the input key
      * with the Angular engine's reflection prefix. This is used for storing and retrieving
      * metadata in a namespaced way to avoid conflicts with other metadata.
-     *
      * @param {string} key - The base key to prefix
      * @return {string} The prefixed key for reflection metadata
+     * @static
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static key(key) {
         return `${AngularEngineKeys.REFLECT}${key}`;
     }
     /**
-     * @description Sets input properties on a component instance
+     * @description Sets input properties on a component instance.
      * @summary This static utility method sets input properties on a component instance
      * based on the provided inputs object and component metadata. It handles both simple
      * values and nested objects, recursively processing object properties. The method
      * validates each input against the component's metadata to ensure only valid inputs
      * are set.
-     *
      * @param {ComponentRef<unknown>} component - The component reference to set inputs on
      * @param {KeyValue} inputs - The input properties to set
      * @param {ComponentMirror<unknown>} metadata - The component metadata for input validation
      * @return {void}
-     *
      * @mermaid
      * sequenceDiagram
      *   participant Caller
@@ -2241,6 +2344,8 @@ class NgxRenderingEngine extends RenderingEngine {
      *       SetInputs->>Component: setInput(key, value)
      *     end
      *   end
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static setInputs(component, inputs, metadata) {
         function parseInputValue(component, input) {
@@ -2343,7 +2448,8 @@ var errors = {
 	lessThanOrEqual: "This field must be less than or equal to field {0}",
 	greaterThan: "This field must be greater than field {0}",
 	greaterThanOrEqual: "This field must be greater than or equal to field {0}",
-	form_control: "Controlador do formulário não encontrado para {0}."
+	form_control: "Controlador do formulário não encontrado para {0}.",
+	not_found: "No records found with <span class=\"text-bold\">{0}: {1} in {2}</span>."
 };
 var component = {
 	fieldset: {
@@ -2377,7 +2483,7 @@ var component = {
 	},
 	empty_state: {
 		title: "No data found",
-		button: "Create",
+		button_create: "Create",
 		search: {
 			title: "Not data found for search",
 			subtitle: "You searched for: <ion-text color=\"primary\" class=\"display-block ion-text-center text-bold\">{0}</ion-text>",
@@ -2506,12 +2612,11 @@ function provideI18n(config = { fallbackLang: 'en', lang: 'en' }, resources = []
 }
 
 /**
- * @module module:lib/engine/NgxDecafComponentDirective
+ * @module lib/engine/NgxDecafComponentDirective
  * @description Base decaf component abstraction providing shared inputs and utilities.
  * @summary NgxDecafComponentDirective is the abstract foundation for Decaf components and provides common
  * inputs (model, mapper, pk, props), logging, repository resolution, and event dispatch helpers.
  * It centralizes shared behavior for child components and simplifies integration with the rendering engine.
- *
  * @link {@link NgxDecafComponentDirective}
  */
 try {
@@ -2520,194 +2625,250 @@ try {
 catch (e) {
     throw new Error(`Failed to load rendering engine: ${e}`);
 }
+/**
+ * @description Base directive for Decaf components in Angular applications.
+ * @summary Abstract base class that provides common functionality for all Decaf components.
+ * This directive establishes a foundation for component development by offering shared inputs
+ * (model, mapper, pk, props), logging infrastructure, repository access, event handling, and
+ * internationalization support. It implements OnChanges to respond to input property changes
+ * and includes utilities for navigation, localization, and dynamic property binding. All Decaf
+ * components should extend this directive to inherit its foundational capabilities.
+ * @class NgxDecafComponentDirective
+ * @extends {LoggedClass}
+ * @implements {OnChanges}
+ * @memberOf module:lib/engine/NgxDecafComponentDirective
+ */
 class NgxDecafComponentDirective extends LoggedClass {
+    /**
+     * @description Constructor for NgxDecafComponentDirective.
+     * @summary Initializes the directive by setting up the component name, locale root,
+     * and logger. Calls the parent LoggedClass constructor and configures localization
+     * context. The component name and locale root can be optionally injected via the
+     * CPTKN token, otherwise defaults are used.
+     * @param {string} [componentName] - Optional component name for identification and logging
+     * @param {string} [localeRoot] - Optional locale root key for internationalization
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(componentName, localeRoot) {
         super();
-        this.componentName = componentName;
-        this.localeRoot = localeRoot;
         /**
-         * @description Unique identifier for the current record.
-         * @summary A unique identifier for the current record being displayed or manipulated.
-         * This is typically used in conjunction with the primary key for operations on specific records.
-         *
+         * @description Unique identifier for the component instance.
+         * @summary A unique identifier automatically generated for each component instance.
+         * This UID is used for DOM element identification, component tracking, and debugging purposes.
+         * By default, it generates a random 16-character value, but it can be explicitly set via input.
          * @type {string | number}
-         * @memberOf NgxDecafComponentDirective
+         * @default generateRandomValue(16)
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.uid = generateRandomValue(16);
         /**
-         * @description Field mapping configuration.
+         * @description Field mapping configuration object or function.
          * @summary Defines how fields from the data model should be mapped to properties used by the component.
-         * This allows for flexible data binding between the model and the component's display logic.
-         *
-         * @type {Record<string, string>}
-         * @memberOf NgxDecafComponentDirective
+         * This allows for flexible data binding between the model and the component's display logic. Can be
+         * provided as a static object mapping or as a function for dynamic mapping transformations.
+         * @type {Record<string, string> | FunctionLike}
+         * @default {}
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.mapper = {};
         /**
-         * @description Available CRUD operations for this component.
+         * @description Available CRUD operations for this component instance.
          * @summary Defines which CRUD operations (Create, Read, Update, Delete) are available
-         * for this component. This affects which operations can be performed on the data.
-         *
+         * for this component. This affects which operations can be performed on the data and
+         * which operation buttons are displayed in the UI. By default, only READ operations are enabled.
+         * @type {CrudOperations[]}
          * @default [OperationKeys.READ]
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.operations = [OperationKeys.READ];
         /**
-         * @description Primary key field name for the model.
-         * @summary Specifies which field in the model should be used as the primary key.
-         * This is typically used for identifying unique records in operations like update and delete.
+         * @description The CRUD operation type to be performed on the model.
+         * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
+         * should perform. This determines the UI behavior, form configuration, and available actions.
+         * The operation affects form validation, field availability, and the specific repository
+         * method called during data submission.
          *
+         * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+         * @default OperationKeys.READ
+         *  @memberOf ModelPage
+         */
+        this.operation = OperationKeys.READ;
+        /**
+         * @description Row position in a grid-based layout system.
+         * @summary Specifies the row position of this component when rendered within a grid-based layout.
+         * This property is used for positioning components in multi-row, multi-column layouts and helps
+         * establish the component's vertical placement within the grid structure.
          * @type {number}
          * @default 1
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.row = 1;
         /**
-         * @description Primary key field name for the model.
-         * @summary Specifies which field in the model should be used as the primary key.
-         * This is typically used for identifying unique records in operations like update and delete.
-         *
+         * @description Column position in a grid-based layout system.
+         * @summary Specifies the column position of this component when rendered within a grid-based layout.
+         * This property is used for positioning components in multi-row, multi-column layouts and helps
+         * establish the component's horizontal placement within the grid structure.
          * @type {number}
          * @default 1
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.col = 1;
         /**
-         * @description Additional CSS class names to apply to the component.
+         * @description Additional CSS class names for component styling.
          * @summary Allows custom CSS classes to be added to the component's root element.
          * These classes are appended to any automatically generated classes based on other
          * component properties. Multiple classes can be provided as a space-separated string.
          * This provides a way to customize the component's appearance beyond the built-in styling options.
-         *
          * @type {string}
          * @default ""
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.className = '';
         /**
-         * @description Root component of the Decaf-ts for Angular application
-         * @summary This component serves as the main entry point for the application.
-         * It sets up the navigation menu, handles routing events, and initializes
-         * the application state. It also manages the application title and menu visibility.
-         *
-         * @private
+         * @description Ionic menu controller service for menu management.
+         * @summary Injected service that provides programmatic control over Ionic menu components.
+         * This service allows the component to open, close, toggle, and manage menu states within
+         * the application. It provides access to menu functionality for implementing navigation
+         * and layout features that require menu interaction.
+         * @protected
          * @type {MenuController}
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.menuController = inject(MenuController);
         /**
-          * @description Angular change detection service.
-          * @summary Injected service that provides manual control over change detection cycles.
-          * This is essential for ensuring that programmatic DOM changes (like setting accordion
-          * attributes) are properly reflected in the component's state and trigger appropriate
-          * view updates when modifications occur outside the normal Angular change detection flow.
-          *
-          * @protected
-          * @type {ChangeDetectorRef}
-          * @memberOf CrudFormComponent
-          */
+         * @description Angular change detection service for manual change detection control.
+         * @summary Injected service that provides manual control over change detection cycles.
+         * This is essential for ensuring that programmatic DOM changes (like setting accordion
+         * attributes) are properly reflected in the component's state and trigger appropriate
+         * view updates when modifications occur outside the normal Angular change detection flow.
+         * @protected
+         * @type {ChangeDetectorRef}
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /**
-         * @description Angular Renderer2 service for safe DOM manipulation.
+         * @description Angular Renderer2 service for platform-agnostic DOM manipulation.
          * @summary Injected service that provides a safe, platform-agnostic way to manipulate DOM elements.
          * This service ensures proper handling of DOM operations across different platforms and environments,
-         * including server-side rendering and web workers.
-         *
+         * including server-side rendering and web workers, without direct DOM access.
          * @protected
          * @type {Renderer2}
-         * @memberOf CrudFormComponent
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.renderer = inject(Renderer2);
         /**
-         * @description Translation service for internationalization.
+         * @description Translation service for application internationalization.
          * @summary Injected service that provides translation capabilities for UI text.
-         * Used to translate button labels and validation messages based on the current locale.
-         *
+         * 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}
-         * @memberOf CrudFormComponent
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.translateService = inject(TranslateService);
         /**
-         * @description Event emitter for custom renderer events.
-         * @summary Emits custom events that occur within child components or the layout itself.
+         * @description Event emitter for custom component events.
+         * @summary Emits custom events that occur within child components or the component itself.
          * This allows parent components to listen for and respond to user interactions or
-         * state changes within the grid layout. Events are passed up the component hierarchy
-         * to enable coordinated behavior across the application.
-         *
+         * state changes. Events are passed up the component hierarchy to enable coordinated
+         * behavior across the application.
          * @type {EventEmitter<IBaseCustomEvent>}
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.listenEvent = new EventEmitter();
         /**
-         * @description Angular Router instance for navigation
-         * @summary Injected Router service used for programmatic navigation
-         * to other pages after successful login or other routing operations.
-         *
-         * @private
+         * @description Angular Router instance for programmatic navigation.
+         * @summary Injected Router service used for programmatic navigation between routes
+         * in the application. This service enables navigation to different views and operations,
+         * handles route parameters, and manages the browser's navigation history.
+         * @protected
          * @type {Router}
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.router = inject(Router);
         /**
-         * @description Configuration for list item rendering
+         * @description Configuration for list item rendering behavior.
          * @summary Defines how list items should be rendered in the component.
          * This property holds a configuration object that specifies the tag name
          * and other properties needed to render list items correctly. The tag property
          * identifies which component should be used to render each item in a list.
          * Additional properties can be included to customize the rendering behavior.
-         *
          * @type {Record<string, unknown>}
          * @default {tag: ""}
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.item = { tag: '' };
         /**
-         * @description Dynamic properties configuration object.
+         * @description Dynamic properties configuration for runtime customization.
          * @summary Contains key-value pairs of dynamic properties that can be applied to the component
          * at runtime. This flexible configuration object allows for dynamic property assignment without
          * requiring explicit input bindings for every possible configuration option. Properties from
          * this object are parsed and applied to the component instance through the parseProps method,
          * enabling customizable component behavior based on external configuration.
-         *
          * @type {Record<string, unknown>}
          * @default {}
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.props = {};
         /**
-         * @description Flag indicating if the component has been initialized
+         * @description Initialization status flag for the component.
          * @summary Tracks whether the component has completed its initialization process.
          * This flag is used to prevent duplicate initialization and to determine if
          * certain operations that require initialization can be performed.
-         *
          * @type {boolean}
          * @default false
-         * @memberOf NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
          */
         this.initialized = false;
-        this.componentName = this.componentName || "NgxDecafComponentDirective";
-        if (!this.localeRoot)
+        /**
+         * @description Reference to CRUD operation constants for template usage.
+         * @summary Exposes the OperationKeys enum to the component template, enabling
+         * conditional rendering and behavior based on operation types. This protected
+         * readonly property ensures that template logic can access operation constants
+         * while maintaining encapsulation and preventing accidental modification.
+         * @protected
+         * @readonly
+         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         */
+        this.OperationKeys = OperationKeys;
+        /**
+         * @description Angular Location service.
+         * @summary Injected service that provides access to the browser's URL and history.
+         * This service is used for interacting with the browser's history API, allowing
+         * for back navigation and URL manipulation outside of Angular's router.
+         *
+         * @private
+         * @type {Location}
+         */
+        this.location = inject(Location);
+        this.componentName = componentName || "NgxDecafComponentDirective";
+        this.localeRoot = localeRoot;
+        if (!this.localeRoot && this.componentName)
             this.localeRoot = this.componentName;
+        if (this.localeRoot)
+            this.getLocale(this.localeRoot);
         this.logger = this.log;
     }
+    /**
+     * @description Getter for the current locale context identifier.
+     * @summary Returns the current locale identifier by calling the getLocale method.
+     * This property provides convenient access to the component's active locale setting.
+     * @returns {string} The current locale identifier
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     get localeContext() {
         return this.getLocale();
     }
     /**
-     * @description Getter for the repository instance.
-     * @summary Provides a connection to the data layer for retrieving and manipulating data.
-     * This method initializes the `_repository` property if it is not already set, ensuring
-     * that a single instance of the repository is used throughout the component.
-     *
-     * The repository is used to perform CRUD operations on the data model, such as fetching data,
-     * creating new items, updating existing items, and deleting items. It also provides methods
-     * for querying and filtering data based on specific criteria.
-     *
-     * @returns {DecafRepository<Model>} The initialized repository instance.
-     * @private
-     * @memberOf NgxDecafComponentDirective
+     * @description Getter for the data repository instance.
+     * @summary Lazily initializes and returns the DecafRepository instance for the current model.
+     * This getter ensures the repository is created only when needed and reused for subsequent
+     * access. It also automatically sets the primary key field if not explicitly configured.
+     * @protected
+     * @returns {DecafRepository<Model>} The repository instance for the current model
+     * @throws {InternalError} If repository initialization fails
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     get repository() {
         try {
@@ -2724,16 +2885,14 @@ class NgxDecafComponentDirective extends LoggedClass {
         return this._repository;
     }
     /**
-     * @description Handles changes to component inputs
-     * @summary This Angular lifecycle hook is called when input properties change.
-     * It responds to changes in the model, locale, or translatable properties by
-     * updating the component's internal state accordingly. When the model changes,
-     * it calls getModel to process the new model and getLocale to update the locale.
-     * When locale or translatable properties change, it calls getLocale to update
-     * the translation settings.
-     *
-     * @param {SimpleChanges} changes - Object containing changed properties
+     * @description Angular lifecycle hook for handling input property changes.
+     * @summary Responds to changes in component input properties, specifically monitoring changes
+     * to the model, locale root, and component name properties. When the model changes, it triggers
+     * model initialization and locale context updates. When locale-related properties change,
+     * it updates the component's locale setting accordingly.
+     * @param {SimpleChanges} changes - Object containing the changed properties with their previous and current values
      * @return {void}
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     ngOnChanges(changes) {
         if (changes[BaseComponentProps.MODEL]) {
@@ -2745,6 +2904,18 @@ class NgxDecafComponentDirective extends LoggedClass {
         if (changes[BaseComponentProps.LOCALE_ROOT] || changes[BaseComponentProps.COMPONENT_NAME])
             this.locale = this.localeContext;
     }
+    /**
+     * @description Translates text phrases using the translation service.
+     * @summary Provides a promise-based wrapper around the translation service to translate
+     * UI text based on the current locale. Supports both single phrases and arrays of phrases,
+     * and accepts optional parameters for template interpolation. When a string parameter is
+     * provided, it's automatically converted to an object format for the translation service.
+     * @protected
+     * @param {string | string[]} phrase - The translation key or array of keys to translate
+     * @param {object | string} [params] - Optional parameters for interpolation in translated text
+     * @return {Promise<string>} A promise that resolves to the translated text
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     translate(phrase, params) {
         return new Promise((resolve) => {
             if (typeof params === Primitives.STRING)
@@ -2752,10 +2923,31 @@ class NgxDecafComponentDirective extends LoggedClass {
             return resolve(firstValueFrom(this.translateService.get(phrase, (params || {}))));
         });
     }
+    /**
+     * @description Initializes the component asynchronously with custom logic.
+     * @summary Abstract initialization method that can be overridden by child components to perform
+     * custom initialization logic. By default, it simply sets the initialized flag to true.
+     * Child components can extend this method to load data, configure settings, or perform
+     * other setup operations required before the component is fully functional.
+     * @protected
+     * @param {...unknown[]} args - Variable number of arguments that can be used by child implementations
+     * @return {Promise<void>} A promise that resolves when initialization is complete
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async initialize(...args) {
         this.initialized = true;
     }
+    /**
+     * @description Retrieves or sets the locale context for the component.
+     * @summary Gets the locale identifier from the locale context system. If a locale parameter
+     * is provided, it updates the localeRoot property and resolves the new locale context.
+     * If no locale is currently set, it initializes it from the localeRoot.
+     * @protected
+     * @param {string} [locale] - Optional locale identifier to set
+     * @return {string} The current locale identifier
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     getLocale(locale) {
         if (locale || !this.locale) {
             if (locale)
@@ -2765,13 +2957,13 @@ class NgxDecafComponentDirective extends LoggedClass {
         return this.locale;
     }
     /**
-     * @description Gets the route for the component
-     * @summary Retrieves the route path for the component, generating one based on the model
-     * if no route is explicitly set. This method checks if a route is already defined, and if not,
-     * it creates a default route based on the model's constructor name. The generated route follows
-     * the pattern '/model/{ModelName}'. This is useful for automatic routing in CRUD operations.
-     *
-     * @return {string} The route path for the component, or empty string if no route is available
+     * @description Retrieves or generates the route path for the component.
+     * @summary Gets the navigation route associated with this component. If no route is explicitly
+     * set and a model is available, it automatically generates a route based on the model's
+     * class name using the pattern `/model/{ModelName}`. Returns an empty string if neither
+     * a route nor a model is available.
+     * @return {string} The route path for this component
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     getRoute() {
         if (!this.route && this.model instanceof Model)
@@ -2779,14 +2971,15 @@ class NgxDecafComponentDirective extends LoggedClass {
         return this.route || '';
     }
     /**
-     * @description Resolves and sets the component's model
-     * @summary Processes the provided model parameter, which can be either a Model instance
-     * or a string identifier. If a string is provided, it attempts to resolve the actual model
-     * from the injectables registry. After resolving the model, it calls setModelDefinitions
-     * to configure the component based on the model's metadata.
-     *
-     * @param {string | Model} model - The model instance or identifier string
+     * @description Resolves and initializes a model from various input formats.
+     * @summary Accepts a model in multiple formats (string name, Model instance, or ModelConstructor)
+     * and resolves it to a Model instance. When a string is provided, it looks up the model
+     * by name in the Model registry. After resolution, it delegates to setModelDefinitions
+     * to complete the model initialization and configuration.
+     * @template M - The model type extending from Model
+     * @param {string | Model | ModelConstructor<M>} model - The model to resolve and initialize
      * @return {void}
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     getModel(model) {
         if (!(model instanceof Model) && typeof model === Primitives.STRING)
@@ -2794,16 +2987,16 @@ class NgxDecafComponentDirective extends LoggedClass {
         this.setModelDefinitions(this.model);
     }
     /**
-   * @description Configures component properties based on model metadata
-   * @summary Extracts and applies configuration from the model's decorators to set up
-   * the component. This method uses the rendering engine to retrieve decorator metadata
-   * from the model, then configures the component's mapper and item properties accordingly.
-   * It ensures the route is properly set and merges various properties from the model's
-   * metadata into the component's configuration.
-   *
-   * @param {Model} model - The model to extract configuration from
-   * @return {void}
-   */
+     * @description Configures component properties based on model decorators and metadata.
+     * @summary Extracts rendering configuration from the model's decorators using the rendering
+     * engine. This includes props, item configuration, and child component definitions. It sets
+     * up the mapper for field transformations, configures the item renderer with appropriate
+     * properties, and establishes the route for navigation. This method bridges the model's
+     * decorator metadata with the component's runtime configuration.
+     * @param {Model} model - The model instance to extract definitions from
+     * @return {void}
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     setModelDefinitions(model) {
         if (model instanceof Model) {
             this.getRoute();
@@ -2829,33 +3022,34 @@ class NgxDecafComponentDirective extends LoggedClass {
      * component instance. This allows for dynamic property assignment based on configuration
      * stored in the props object, enabling flexible component customization without requiring
      * explicit property binding for every possible configuration option.
-     *
      * The method performs a safe property assignment by checking if each key from the instance
      * exists in the props object before applying it. This prevents accidental property
      * overwriting and ensures only intended properties are modified.
-     *
      * @param {KeyValue} instance - The component instance object to process
+     * @param {string[]} [skip=[]] - Array of property names to skip during parsing
      * @return {void}
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant B as NgxBaseComponentDirective
+     *   participant D as NgxDecafComponentDirective
      *   participant P as Props Object
      *
-     *   C->>B: parseProps(instance)
-     *   B->>B: Get Object.keys(instance)
+     *   C->>D: parseProps(instance, skip)
+     *   D->>D: Get Object.keys(instance)
      *   loop For each key in instance
-     *     B->>P: Check if key exists in this.props
-     *     alt Key exists in props
-     *       B->>B: Set this[key] = this.props[key]
-     *     else Key not in props
-     *       Note over B: Skip this key
+     *     D->>D: Check if key in skip array
+     *     alt Key not in skip
+     *       D->>P: Check if key exists in this.props
+     *       alt Key exists in props
+     *         D->>D: Set this[key] = this.props[key]
+     *         D->>P: delete this.props[key]
+     *       else Key not in props
+     *         Note over D: Skip this key
+     *       end
      *     end
      *   end
-     *
      * @protected
-     * @memberOf NgxBaseComponentDirective
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     parseProps(instance, skip = []) {
         Object.keys(instance).forEach((key) => {
@@ -2866,21 +3060,55 @@ class NgxDecafComponentDirective extends LoggedClass {
         });
     }
     /**
-     * @description Tracks items in ngFor loops for optimal change detection.
+     * @description Tracks items in ngFor loops for optimal change detection performance.
      * @summary Provides a tracking function for Angular's *ngFor directive to optimize rendering
      * performance. This method generates unique identifiers for list items based on their index
      * and content, allowing Angular to efficiently track changes and minimize DOM manipulations
      * during list updates. The tracking function is essential for maintaining component state
      * and preventing unnecessary re-rendering of unchanged items.
-     *
+     * @protected
      * @param {number} index - The index of the item in the list
      * @param {KeyValue | string | number} item - The item data to track
-     * @returns {string | number} A unique identifier for the item
-     * @memberOf NgxDecafComponentDirective
+     * @return {string | number} A unique identifier for the item
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
      */
     trackItemFn(index, item) {
         return `${index}-${item}`;
     }
+    /**
+     * @description Handles custom events from child components or DOM elements.
+     * @summary Processes custom events by extracting event handlers and delegating to appropriate
+     * handler classes. Supports both CustomEvent format with detail property and direct event
+     * objects. If specific handlers are defined in the event, it instantiates the handler class
+     * and invokes its handle method. If no handler is found or defined, the event is emitted
+     * up the component hierarchy via the listenEvent output.
+     * @param {IBaseCustomEvent | ICrudFormEvent | CustomEvent} event - The event to handle
+     * @return {Promise<void>} A promise that resolves when event handling is complete
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Child Component
+     *   participant D as NgxDecafComponentDirective
+     *   participant H as Event Handler
+     *   participant P as Parent Component
+     *
+     *   C->>D: handleEvent(event)
+     *   alt Event is CustomEvent
+     *     D->>D: Extract event.detail
+     *   end
+     *   D->>D: Get event name and handlers
+     *   alt Handlers defined
+     *     alt Handler exists for event
+     *       D->>H: new Handler(router)
+     *       D->>H: handle(event)
+     *       H-->>D: return result
+     *     else No handler found
+     *       D->>D: log.debug("No handler found")
+     *     end
+     *   else No handlers
+     *     D->>P: listenEvent.emit(event)
+     *   end
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
     async handleEvent(event) {
         let name = "";
         const log = this.log.for(this.handleEvent);
@@ -2907,8 +3135,70 @@ class NgxDecafComponentDirective extends LoggedClass {
         }
         this.listenEvent.emit(event);
     }
+    /**
+     * @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
+     * CRUD operations and if it's not the current operation (unless the current operation
+     * is CREATE). This is used to enable/disable or show/hide operation buttons in the UI.
+     * Returns false if the operations array is undefined or the operation is not in the list.
+     * @param {string} operation - The operation to check
+     * @return {boolean} True if the operation is allowed, false otherwise
+     * @mermaid
+     * sequenceDiagram
+     *   participant D as NgxDecafComponentDirective
+     *   participant U as UI
+     *
+     *   U->>D: isAllowed(operation)
+     *   alt operations is undefined
+     *     D-->>U: Return false
+     *   else
+     *     D->>D: Check if operation is in operations
+     *     D->>D: Check if operation is not current operation
+     *     D-->>U: Return result
+     *   end
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
+    isAllowed(operation) {
+        if (!this.operations)
+            return false;
+        return this.operations.includes(operation) && (this.operation !== OperationKeys.CREATE && ((this.operation || "").toLowerCase() !== operation || !this.operation));
+    }
+    /**
+     * @description Navigates to a different operation for the current model.
+     * @summary This method constructs a navigation URL based on the component's base route,
+     * the requested operation, and optionally a model ID. It then uses the Angular router
+     * service to navigate to the constructed URL. This is typically used when switching
+     * between different CRUD operations (create, read, update, delete) on a model.
+     * The URL format is: {route}/{operation}/{id?}
+     * @param {string} operation - The operation to navigate to (e.g., 'create', 'read', 'update', 'delete')
+     * @param {string} [id] - Optional model ID to include in the navigation URL
+     * @return {Promise<boolean>} A promise that resolves to true if navigation was successful
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as UI
+     *   participant D as NgxDecafComponentDirective
+     *   participant R as Router
+     *
+     *   U->>D: Click operation button
+     *   D->>D: changeOperation(operation, id)
+     *   D->>D: Construct navigation URL
+     *   Note over D: URL: {route}/{operation}/{id?}
+     *   D->>R: navigateByUrl(page)
+     *   R->>R: Navigate to new route
+     *   R-->>D: Return navigation result
+     *   D-->>U: Display new operation view
+     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     */
+    async changeOperation(operation, id) {
+        let page = `${this.route}/${operation}/`.replace('//', '/');
+        if (!id)
+            id = this.modelId;
+        if (this.modelId)
+            page = `${page}${this.modelId || id}`;
+        return this.router.navigateByUrl(page);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafComponentDirective, isStandalone: true, inputs: { name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafComponentDirective, isStandalone: true, inputs: { name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafComponentDirective, decorators: [{
             type: Directive,
@@ -2938,6 +3228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Input
             }], operations: [{
                 type: Input
+            }], operation: [{
+                type: Input
             }], row: [{
                 type: Input
             }], col: [{
@@ -2957,12 +3249,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             }] } });
 
 /**
+ * @module lib/engine/NgxDecafFormFieldDirective
+ * @description Base directive for CRUD form fields in Decaf Angular applications.
+ * @summary Provides the NgxDecafFormFieldDirective abstract class that implements ControlValueAccessor
+ * and FieldProperties to enable form field integration with Angular's reactive forms system.
+ * This directive handles form control lifecycle, validation, multi-entry forms, and CRUD operations.
+ */
+/**
+ * @description Abstract base directive for CRUD form fields in Angular applications.
+ * @summary Provides the foundation for all form field components in Decaf applications by implementing
+ * Angular's ControlValueAccessor interface and FieldProperties for validation. This directive manages
+ * form control integration, validation state, multi-entry forms (FormArrays), and CRUD operation context.
+ * It handles form group lifecycle, error messaging, change detection, and parent-child form relationships.
+ * Extend this class to create custom form field components that seamlessly integrate with Angular's
+ * reactive forms and Decaf's validation system.
  * @class NgxDecafFormFieldDirective
- * @implements {FieldProperties}
+ * @extends {NgxDecafComponentDirective}
  * @implements {ControlValueAccessor}
- * @summary Abstract class representing a CRUD form field for Angular applications
- * @description This class provides the base implementation for CRUD form fields in Angular,
- * implementing both CrudFormField and ControlValueAccessor interfaces.
+ * @implements {FieldProperties}
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'app-text-field',
+ *   templateUrl: './text-field.component.html',
+ *   providers: [{
+ *     provide: NG_VALUE_ACCESSOR,
+ *     useExisting: forwardRef(() => TextFieldComponent),
+ *     multi: true
+ *   }]
+ * })
+ * export class TextFieldComponent extends NgxDecafFormFieldDirective {
+ *   constructor() {
+ *     super();
+ *   }
+ * }
+ * ```
  */
 class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
     constructor() {
@@ -2972,40 +3293,51 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
          * @summary When working with multiple form groups (form arrays), this indicates
          * which form group is currently active or being edited. This is used to manage
          * focus and data binding in multi-entry scenarios.
-         *
          * @type {number}
          * @default 0
-         * @memberOf NgxDecafFormFieldDirective
+         * @public
          */
         this.activeFormGroupIndex = 0;
+        this.operation = OperationKeys.CREATE;
         /**
-         * @description Field mapping configuration.
+         * @description Field mapping configuration for options.
          * @summary Defines how fields from the data model should be mapped to properties used by the component.
          * This allows for flexible data binding between the model and the component's display logic.
-         *
+         * Can be either a key-value mapping object or a function that performs the mapping.
          * @type {KeyValue | FunctionLike}
-         * @memberOf CrudFieldComponent
+         * @public
          */
         this.optionsMapper = {};
+        /**
+         * @description Flag tracking if validation error event has been dispatched.
+         * @summary Prevents duplicate validation error events from being dispatched.
+         * @type {boolean}
+         * @private
+         */
         this.validationErrorEventDispatched = false;
-        // protected constructor() {}
         /**
-         * @summary String formatting function
-         * @description Provides access to the sf function for error message formatting
-         * @prop {function(string, ...string): string} sf - String formatting function
+         * @description String formatting utility function.
+         * @summary Provides access to the sf (string format) function for formatting error messages
+         * and other string templates. Used primarily for localizing and parameterizing validation messages.
+         * @type {function(string, ...string): string}
+         * @public
          */
         this.sf = sf;
         /**
-         * @summary Change callback function
-         * @description Function called when the field value changes
-         * @property {function(): unknown} onChange - onChange event handler
+         * @description Callback function invoked when the field value changes.
+         * @summary Function registered by Angular's forms system through registerOnChange.
+         * Called automatically when the field's value is updated to notify the form of the change.
+         * @type {function(): unknown}
+         * @public
          */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
         /**
-         * @summary Touch callback function
-         * @description Function called when the field is touched
-         * @property {function(): unknown} onTouch - onTouch event handler
+         * @description Callback function invoked when the field is touched.
+         * @summary Function registered by Angular's forms system through registerOnTouched.
+         * Called when the field is blurred or otherwise marked as touched.
+         * @type {function(): unknown}
+         * @public
          */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouch = () => { };
@@ -3015,9 +3347,9 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
      * @summary Returns the appropriate FormGroup based on whether this field supports
      * multiple values. For single-value fields, returns the main form group.
      * For multi-value fields, returns the form group at the active index from the parent FormArray.
-     *
-     * @returns {FormGroup} The currently active FormGroup for this field
-     * @memberOf CrudFieldComponent
+     * If no formGroup is set, returns the parent of the formControl.
+     * @return {FormGroup} The currently active FormGroup for this field
+     * @public
      */
     get activeFormGroup() {
         if (!this.formGroup)
@@ -3028,53 +3360,61 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
             return this.formGroup;
         }
         return this.formGroup;
-        // const formGroup = this.formGroup as FormGroup;
-        // try {
-        //   const root = formGroup.root as FormGroup;
-        //   return this.multiple
-        //     ? ((root?.controls?.[this.name] as FormArray)?.at(this.activeFormGroupIndex) as FormGroup)
-        //     : formGroup;
-        // } catch (error: unknown) {
-        //   this.log.error("Error getting active form group:", error as Error);
-        //   return formGroup;
-        // }
     }
     /**
-     * @summary Write value to the field
-     * @description Sets the value of the field
+     * @description Writes a value to the form field.
+     * @summary Part of Angular's ControlValueAccessor interface. Sets the field's value
+     * when the form programmatically updates it. This is called by Angular forms when
+     * the model value changes.
      * @param {string} obj - The value to be set
+     * @return {void}
+     * @public
      */
     writeValue(obj) {
         this.value = obj;
     }
     /**
-     * @summary Register change callback
-     * @description Registers a function to be called when the field value changes
+     * @description Registers the onChange callback function.
+     * @summary Part of Angular's ControlValueAccessor interface. Stores the function
+     * that Angular forms provides to be called when the field value changes.
      * @param {function(): unknown} fn - The function to be called on change
+     * @return {void}
+     * @public
      */
     registerOnChange(fn) {
         this.onChange = fn;
     }
     /**
-     * @summary Register touch callback
-     * @description Registers a function to be called when the field is touched
+     * @description Registers the onTouched callback function.
+     * @summary Part of Angular's ControlValueAccessor interface. Stores the function
+     * that Angular forms provides to be called when the field is touched/blurred.
      * @param {function(): unknown} fn - The function to be called on touch
+     * @return {void}
+     * @public
      */
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
     /**
-     * @summary Set disabled state
-     * @description Sets the disabled state of the field
+     * @description Sets the disabled state of the field.
+     * @summary Part of Angular's ControlValueAccessor interface. Called by Angular forms
+     * when the disabled state of the control changes.
      * @param {boolean} isDisabled - Whether the field should be disabled
+     * @return {void}
+     * @public
      */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
     /**
-     * @summary After view initialization logic
-     * @description Performs necessary setup after the view has been initialized
-     * @returns {HTMLElement} The parent element of the field
+     * @description Performs setup after the view has been initialized.
+     * @summary Retrieves and returns the parent HTML element based on the current CRUD operation.
+     * For READ and DELETE operations, returns the immediate parent element. For CREATE and UPDATE
+     * operations, finds the parent div element and registers it with the form service.
+     * @return {HTMLElement} The parent element of the field
+     * @throws {RenderingError} If unable to retrieve parent form element for CREATE/UPDATE operations
+     * @throws {InternalError} If the operation is invalid
+     * @public
      */
     afterViewInit() {
         let parent;
@@ -3096,6 +3436,16 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
                 throw new InternalError(`Invalid operation: ${this.operation}`);
         }
     }
+    /**
+     * @description Angular lifecycle hook for detecting input property changes.
+     * @summary Overrides the parent ngOnChanges to handle changes to activeFormGroupIndex and value.
+     * When activeFormGroupIndex changes in a multiple field scenario, updates the active form group
+     * and form control. When value changes, updates the form control value. Delegates to parent
+     * implementation for initial change detection.
+     * @param {SimpleChanges} changes - Object containing the changed properties
+     * @return {void}
+     * @public
+     */
     ngOnChanges(changes) {
         if (!this.initialized)
             super.ngOnChanges(changes);
@@ -3109,14 +3459,38 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
             && (changes['value'].currentValue !== undefined && changes['value'].currentValue !== this.value))
             this.setValue(changes['value'].currentValue);
     }
+    /**
+     * @description Cleanup logic when the component is destroyed.
+     * @summary Unregisters the form group from the form service to prevent memory leaks
+     * and clean up form references.
+     * @return {void}
+     * @public
+     */
     onDestroy() {
         if (this.formGroup)
             NgxDecafFormService.unregister(this.formGroup);
     }
+    /**
+     * @description Sets the value of the form control.
+     * @summary Updates the form control's value and triggers validation. This is used
+     * when the value needs to be programmatically updated from outside the form control.
+     * @param {unknown} value - The value to set
+     * @return {void}
+     * @public
+     */
     setValue(value) {
         this.formControl.setValue(value);
         this.formControl.updateValueAndValidity();
     }
+    /**
+     * @description Retrieves validation error messages for the field.
+     * @summary Checks the form control for validation errors and returns formatted error messages.
+     * If errors exist, dispatches a validation error event to parent accordion components.
+     * Error messages are translated and formatted with relevant field properties.
+     * @param {HTMLElement} parent - The parent HTML element used to find accordion components
+     * @return {string | void} Formatted error message string, or void if no errors
+     * @public
+     */
     getErrors(parent) {
         const formControl = this.formControl;
         if (formControl) {
@@ -3142,12 +3516,15 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafFormFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", parentComponent: "parentComponent", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", operation: "operation", parentComponent: "parentComponent", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafFormFieldDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { activeFormGroupIndex: [{
                 type: Input
+            }], operation: [{
+                type: Input,
+                args: [{ required: true }]
             }], parentComponent: [{
                 type: Input
             }], optionsMapper: [{
@@ -3166,32 +3543,112 @@ class NgxEventHandler extends LoggedClass {
 }
 
 /**
- * @module module:lib/engine/NgxPageDirective
+ * @module lib/engine/NgxPageDirective
  * @description Base page component for Decaf Angular applications.
  * @summary Provides a page-level base class (NgxPageDirective) that extends NgxDecafComponentDirective and
  * offers page-focused utilities such as menu management, title handling and router event hooks.
- *
  * @link {@link NgxPageDirective}
  */
+/**
+ * @description Base directive for page-level components in Decaf Angular applications.
+ * @summary Abstract directive that provides foundational functionality for page components.
+ * Extends NgxDecafComponentDirective to add page-specific features including menu management,
+ * page title handling, and Ionic lifecycle hooks. This directive serves as the base class for
+ * all page-level components, providing consistent behavior for navigation, routing, and UI state.
+ * @class NgxPageDirective
+ * @extends {NgxDecafComponentDirective}
+ * @memberOf module:lib/engine/NgxPageDirective
+ */
 class NgxPageDirective extends NgxDecafComponentDirective {
+    /**
+     * @description Constructor for NgxPageDirective.
+     * @summary Initializes the page directive with optional locale root and menu visibility settings.
+     * Calls the parent NgxDecafComponentDirective constructor to set up base functionality including
+     * logging, localization, and component identification.
+     * @param {string} [localeRoot] - Optional locale root key for internationalization
+     * @param {boolean} [hasMenu=true] - Whether this page should display the menu
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
     // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(localeRoot, hasMenu = true) {
         super(localeRoot);
         this.localeRoot = localeRoot;
         this.hasMenu = hasMenu;
+        /**
+         * @description Page title text for the current view.
+         * @summary Stores the title text to be displayed for this page. This can be set dynamically
+         * based on the current route or menu configuration and is used to update the browser's
+         * title bar or page header.
+         * @type {string}
+         * @default ''
+         * @memberOf module:lib/engine/NgxPageDirective
+         */
         this.title = '';
+        /**
+         * @description Menu items array for page navigation.
+         * @summary Contains the collection of menu items available for this page. Each menu item
+         * defines a navigation option with properties like label, URL, icon, and visibility settings.
+         * This array is used to construct the application's navigation menu and can be filtered or
+         * customized per page.
+         * @protected
+         * @type {IMenuItem[]}
+         * @default []
+         * @memberOf module:lib/engine/NgxPageDirective
+         */
         this.menu = [];
+        /**
+         * @description Angular Title service for browser title management.
+         * @summary Injected service that provides control over the browser's document title.
+         * Used to dynamically set the page title based on the current route or active menu item,
+         * improving SEO and user experience.
+         * @protected
+         * @type {Title}
+         * @memberOf module:lib/engine/NgxPageDirective
+         */
         this.titleService = inject(Title);
     }
-    async ionViewWillEnter() {
+    /**
+     * @description Ionic lifecycle hook called when the page is about to enter view.
+     * @summary This lifecycle hook is triggered just before the page becomes visible to the user.
+     * It enables or disables the application menu based on the hasMenu property, allowing pages
+     * to control whether the menu should be accessible. This is useful for pages like login screens
+     * where the menu should be hidden.
+     * @return {Promise<void>} A promise that resolves when menu state is updated
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    async ngAfterViewInit() {
+        this.router.events.subscribe(async (event) => {
+            if (event instanceof NavigationEnd) {
+                const url = (event?.url || "").replace('/', '');
+                this.hasMenu = url !== "login" && url !== "";
+                this.setPageTitle(url);
+            }
+            if (event instanceof NavigationStart)
+                removeFocusTrap();
+        });
         await this.menuController.enable(this.hasMenu);
     }
+    /**
+     * @description Sets the browser page title based on the current route.
+     * @summary Updates the browser's document title by finding the active menu item that matches
+     * the provided route. If a matching menu item is found, it sets the title using the format
+     * "Decaf For Angular - {menu title or label}". This improves SEO and provides clear context
+     * to users about the current page. If a custom menu array is provided, it uses that instead
+     * of the component's default menu.
+     * @protected
+     * @param {string} route - The current route path to match against menu items
+     * @param {IMenuItem[]} [menu] - Optional custom menu array to search (uses this.menu if not provided)
+     * @return {void}
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
     setPageTitle(route, menu) {
+        if (!route)
+            route = this.router.url.replace('/', '');
         if (menu)
             menu = this.menu;
         const activeMenu = this.menu.find(item => item?.url?.includes(route));
         if (activeMenu)
-            this.titleService.setTitle(`Decaf For Angular - ${activeMenu?.title || activeMenu?.label}`);
+            this.titleService.setTitle(`${activeMenu?.title || activeMenu?.label}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxPageDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxPageDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
@@ -3778,7 +4235,6 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxDecafFormFieldDirec
         if (this.optionsMapper) {
             if (this.optionsMapper instanceof Function || typeof this.optionsMapper === 'function') {
                 const mapper = this.optionsMapper;
-                console.log(this.options);
                 this.options = this.options.map((option) => {
                     return mapper(option);
                 });
@@ -3847,48 +4303,6 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxDecafFormFieldDirec
             return false;
         return this.formControl.value.includes(value);
     }
-    /**
-     * @description Handles fieldset group creation events from parent fieldsets.
-     * @summary Processes events triggered when a new group needs to be added to a fieldset.
-     * Validates the current form group, checks for uniqueness if applicable, and either
-     * creates a new group or provides validation feedback. Updates the active form group
-     * and resets the field for new input after successful creation.
-     *
-     * @param {CustomEvent} event - The fieldset create group event containing group details
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    handleFieldsetCreateGroupEvent(event) {
-        event.stopImmediatePropagation();
-        const { formGroup } = event.detail;
-        // const formGroup = this.formGroup as FormGroup;
-        // const parentFormGroup = this.formGroup?.parent as FormArray;
-        // const isValid = NgxDecafFormService.validateFields(formGroup as FormGroup);
-        // const indexToCheck = operation === OperationKeys.CREATE ?
-        //   index === 0 ? index : parentFormGroup.length - 1 : index;
-        // const isUnique = NgxDecafFormService.isUniqueOnGroup(formGroup, indexToCheck, operation || OperationKeys.CREATE);
-        // event = new CustomEvent(EventConstants.FIELDSET_ADD_GROUP, {
-        //   detail: {isValid: isValid && isUnique, value: formGroup.value, formGroup: parentFormGroup, formService: NgxDecafFormService},
-        // });
-        // component.dispatchEvent(event);
-        // if(isValid && isUnique) {
-        //   const newIndex = parentFormGroup?.length;
-        //   if(operation === OperationKeys.CREATE) {
-        //     NgxDecafFormService.addGroupToParent(parentFormGroup?.parent as FormGroup, parent, newIndex);
-        //     this.activeFormGroup = newIndex;
-        //   } else {
-        //     this.activeFormGroup = newIndex - 1;
-        //   }
-        //   this.formGroup = this.activeFormGroup;
-        //   // NgxDecafFormService.reset(this.formGroup as FormGroup);
-        //   this.formControl = (this.formGroup as FormGroup).get(this.name) as FormControl;
-        //   // NgxDecafFormService.reset(this.formControl);
-        //   // this.component.nativeElement.setFocus();
-        // } else {
-        //   if(isUnique)
-        //     this.component.nativeElement.setFocus();
-        // }
-    }
     /**
      * @description Handles fieldset group update events from parent fieldsets.
      * @summary Processes events triggered when an existing group needs to be updated.
@@ -3906,31 +4320,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxDecafFormFieldDirec
         this.formControl = this.formGroup.get(this.name);
         this.value = this.formControl.value;
     }
-    /**
-     * @description Handles fieldset group removal events from parent fieldsets.
-     * @summary Processes events triggered when a group needs to be removed from a fieldset.
-     * Removes the specified group from the form array, updates the active form group index,
-     * and refreshes the form references. Dispatches a confirmation event back to the component.
-     *
-     * @param {CustomEvent} event - The fieldset remove group event containing removal details
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    handleFieldsetRemoveGroupEvent(event) {
-        const { component, index } = event.detail;
-        const formArray = this.formGroup?.parent;
-        formArray.removeAt(index);
-        this.activeFormGroupIndex = formArray.length === 1 ? 0 : formArray.length - 1;
-        this.formGroup = this.activeFormGroup;
-        this.formControl = this.formGroup.get(this.name);
-        this.parentComponent = formArray;
-        event = new CustomEvent(EventConstants.FIELDSET_REMOVE_GROUP, {
-            detail: { value: true },
-        });
-        component.dispatchEvent(event);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, 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 === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\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                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\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\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\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                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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\" #component />\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}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.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:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.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;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, 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 === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\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                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\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\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\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                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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\" #component />\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}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,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:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.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;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
@@ -3950,7 +4341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         IonLabel,
                         IonText,
                         IonTextarea
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\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                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\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\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\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                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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\" #component />\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}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.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:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.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;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\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                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\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\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\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                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [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\" #component />\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}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,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:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.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;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4049,15 +4440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Input
             }], translatable: [{
                 type: Input
-            }], handleFieldsetCreateGroupEvent: [{
-                type: HostListener,
-                args: ['window:fieldsetAddGroupEvent', ['$event']]
             }], handleFieldsetUpdateGroupEvent: [{
                 type: HostListener,
                 args: ['window:fieldsetUpdateGroupEvent', ['$event']]
-            }], handleFieldsetRemoveGroupEvent: [{
-                type: HostListener,
-                args: ['window:fieldsetRemoveGroupEvent', ['$event']]
             }] } });
 
 /**
@@ -4078,7 +4463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * @class NgxParentComponentDirective
  * @extends {NgxParentComponentDirective}
  * @implements {OnInit}
- * @memberOf NgxParentComponentDirective
  */
 class NgxParentComponentDirective extends NgxDecafComponentDirective {
     constructor() {
@@ -4091,7 +4475,6 @@ class NgxParentComponentDirective extends NgxDecafComponentDirective {
          * page assignment, and display properties.
          *
          * @type {UIModelMetadata[]}
-         * @memberOf NgxParentComponentDirective
          */
         this.children = [];
         /**
@@ -4103,7 +4486,6 @@ class NgxParentComponentDirective extends NgxDecafComponentDirective {
          *
          * @type {(number | string[])}
          * @default 1
-         * @memberOf NgxParentComponentDirective
          */
         this.cols = 1;
         /**
@@ -4114,7 +4496,6 @@ class NgxParentComponentDirective extends NgxDecafComponentDirective {
          *
          * @type {(number | string[])}
          * @default 1
-         * @memberOf NgxParentComponentDirective
          */
         this.rows = 1;
     }
@@ -4143,17 +4524,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
     constructor() {
         super(...arguments);
         this.crudFieldComponent = ComponentsTagNames.CRUD_FIELD;
-        /**
-         * @description Angular Location service.
-         * @summary Injected service that provides access to the browser's URL and history.
-         * This service is used for interacting with the browser's history API, allowing
-         * for back navigation and URL manipulation outside of Angular's router.
-         *
-         * @private
-         * @type {Location}
-         * @memberOf CrudFormComponent
-         */
-        this.location = inject(Location);
         /**
          * @description Field update trigger mode for form validation.
          * @summary Determines when form field validation should be triggered. Options include
@@ -4162,7 +4532,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
          *
          * @type {FieldUpdateMode}
          * @default 'change'
-         * @memberOf CrudFormComponent
          */
         this.updateOn = 'change';
         /**
@@ -4173,7 +4542,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
          *
          * @type {HTMLFormTarget}
          * @default '_self'
-         * @memberOf CrudFormComponent
          */
         this.target = '_self';
         /**
@@ -4184,9 +4552,18 @@ class NgxFormDirective extends NgxParentComponentDirective {
          *
          * @type {'get' | 'post' | 'event'}
          * @default 'event'
-         * @memberOf CrudFormComponent
          */
         this.method = 'event';
+        /**
+         * @description The current CRUD operation being performed.
+         * @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
+         * This is a required input that determines form behavior, validation rules, and available actions.
+         * The operation affects form state, button visibility, and submission logic.
+         *
+         * @type {CrudOperations}
+         * @required
+         */
+        this.operation = OperationKeys.CREATE;
         /**
          * @description Angular reactive FormGroup for form state management.
          * @summary The FormGroup instance that manages all form controls, validation,
@@ -4194,7 +4571,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
          * controlling form behavior. May be undefined for read-only operations.
          *
          * @type {FormGroup | undefined}
-         * @memberOf CrudFormComponent
          */
         this.formGroup = undefined;
         /**
@@ -4204,7 +4580,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
        * components. This enables decoupled handling of form submission logic.
        *
        * @type {EventEmitter<ICrudFormEvent>}
-       * @memberOf CrudFormComponent
        */
         this.submitEvent = new EventEmitter();
         /**
@@ -4216,7 +4591,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
          *
          * @type {string}
          * @default Randomly generated 12-character string
-         * @memberOf CrudFormComponent
          */
         this.allowClear = true;
         //   /**
@@ -4252,18 +4626,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
         //  * @memberOf CrudFormComponent
         //  */
         // protected translateService: TranslateService = inject(TranslateService);
-        /**
-        * @description Reference to CRUD operation constants for template usage.
-        * @summary Exposes the OperationKeys enum to the component template, enabling
-        * conditional rendering and behavior based on operation types. This protected
-        * readonly property ensures that template logic can access operation constants
-        * while maintaining encapsulation and preventing accidental modification.
-        *
-        * @protected
-        * @readonly
-        * @memberOf CrudFormComponent
-        */
-        this.OperationKeys = OperationKeys;
         this.activeFormGroupIndex = 0;
     }
     get activeFormGroup() {
@@ -4277,13 +4639,13 @@ class NgxFormDirective extends NgxParentComponentDirective {
     * form input. Configuration options are merged with default settings.
     *
     * @returns {Promise<void>}
-    * @memberOf CrudFormComponent
     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async ngOnInit(model) {
         // dont call super.ngOnInit to model conflicts
         if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
             this.formGroup = undefined;
+        this.initialized = true;
     }
     /**
      * @description Component cleanup lifecycle method.
@@ -4292,7 +4654,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
      * and ensure proper resource cleanup.
      *
      * @returns {void}
-     * @memberOf CrudFormComponent
      */
     ngOnDestroy() {
         if (this.formGroup)
@@ -4330,7 +4691,6 @@ class NgxFormDirective extends NgxParentComponentDirective {
      * since these operations don't have modifiable form data to reset.
      *
      * @returns {void}
-     * @memberOf CrudFormComponent
      */
     handleReset() {
         if (![OperationKeys.DELETE, OperationKeys.READ].includes(this.operation) && this.allowClear)
@@ -4554,8 +4914,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
      * @memberOf LayoutComponent
      */
     constructor() {
-        super();
-        this.initializeProps = true;
+        super('LayoutComponent');
         /**
          * @description Media breakpoint for responsive behavior.
          * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -4568,7 +4927,6 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
          * @memberOf LayoutComponent
          */
         this.gap = 'collapse';
-        this.match = true;
         /**
          * @description Media breakpoint for responsive behavior.
          * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -4581,7 +4939,30 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
          * @memberOf LayoutComponent
          */
         this.breakpoint = UIMediaBreakPoints.MEDIUM;
-        this.componentName = 'LayoutComponent';
+        /**
+         * @description Media breakpoint for responsive behavior.
+         * @summary Determines the responsive breakpoint at which the layout should adapt.
+         * This affects how the grid behaves on different screen sizes, allowing for
+         * mobile-first or desktop-first responsive design patterns. The breakpoint
+         * is automatically processed to ensure compatibility with the UI framework.
+         *
+         * @type {UIMediaBreakPointsType}
+         * @default 'medium'
+         * @memberOf LayoutComponent
+         */
+        this.grid = true;
+        /**
+         * @description Media breakpoint for responsive behavior.
+         * @summary Determines the responsive breakpoint at which the layout should adapt.
+         * This affects how the grid behaves on different screen sizes, allowing for
+         * mobile-first or desktop-first responsive design patterns. The breakpoint
+         * is automatically processed to ensure compatibility with the UI framework.
+         *
+         * @type {UIMediaBreakPointsType}
+         * @default 'medium'
+         * @memberOf LayoutComponent
+         */
+        this.match = true;
     }
     /**
      * @description Getter that converts columns input to an array format.
@@ -4616,10 +4997,13 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         if (typeof rows === Primitives.NUMBER)
             rows = Array.from({ length: Number(rows) }, () => ({ title: '' }));
         return rows.map((row, index) => {
+            const rowsLength = this.rows;
             return {
                 title: typeof row === Primitives.STRING ? row : row?.['title'] || "",
                 cols: this.children.filter((child) => {
-                    const row = child.props?.['row'] ?? 1;
+                    let row = child.props?.['row'] ?? 1;
+                    if (row > rowsLength)
+                        row = rowsLength;
                     child['col'] = child.props?.['col'] ?? this.cols?.length ?? 1;
                     if (row === index + 1)
                         return child;
@@ -4641,10 +5025,14 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
             this.breakpoint = `@${this.breakpoint}`.toLowerCase();
         this.cols = this._cols;
         this.rows = this._rows;
+        // if(this._rows.length === 1)
+        //   this.match = false;
+        // if(this._cols.length === 1)
+        //   this.grid = false;
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { initializeProps: "initializeProps", gap: "gap", match: "match", breakpoint: "breakpoint" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\"'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["globals", "projectable", "rendererId"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", breakpoint: "breakpoint", grid: "grid", match: "match" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["globals", "projectable", "rendererId"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -4652,21 +5040,20 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\"'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { initializeProps: [{
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
-            }], gap: [{
+            }], breakpoint: [{
                 type: Input
-            }], match: [{
+            }], grid: [{
                 type: Input
-            }], breakpoint: [{
+            }], match: [{
                 type: Input
             }] } });
 
 let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
     constructor() {
-        super();
-        this.componentName = 'CrudFormComponent';
+        super('CrudFormComponent');
     }
     /**
      * @description Component initialization lifecycle method.
@@ -4679,7 +5066,6 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
      * @memberOf CrudFormComponent
      */
     async ngOnInit() {
-        // console.log(this.formGroup);
         this.options = Object.assign({}, DefaultFormReactiveOptions, this.options || {});
         await super.ngOnInit();
     }
@@ -4715,7 +5101,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (submit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n\n      <!-- @for (child of children; track $index) {\n        <ngx-decaf-component-renderer\n          [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\"\n          [tag]=\"child?.tag\"\n          [projectable]=\"false\"\n          [formRoot]=\"formGroup\"\n          [children]=\"child?.children || []\"\n          [globals]=\"{props: child.props}\"\n        />\n      } -->\n    }\n    <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:.5rem;margin-bottom:0}.dcf-buttons-grid.read{margin-bottom:1rem}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid{padding:1rem}.dcf-form-grid .dcf-form-item{margin-bottom:1.8rem;margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:1rem}::ng-deep ngx-decaf-stepped-form .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}::ng-deep ngx-decaf-fieldset .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["initializeProps", "gap", "match", "breakpoint"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (submit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n\n      <!-- @for (child of children; track $index) {\n        <ngx-decaf-component-renderer\n          [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\"\n          [tag]=\"child?.tag\"\n          [projectable]=\"false\"\n          [formRoot]=\"formGroup\"\n          [children]=\"child?.children || []\"\n          [globals]=\"{props: child.props}\"\n        />\n      } -->\n    }\n    @if(initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if(options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if(!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if(options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:.5rem;margin-bottom:0}.dcf-buttons-grid.read{margin-bottom:1rem}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid{padding:1rem}.dcf-form-grid .dcf-form-item{margin-bottom:1.8rem;margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:1rem}::ng-deep ngx-decaf-stepped-form .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}::ng-deep ngx-decaf-fieldset .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -4723,7 +5109,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (submit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n\n      <!-- @for (child of children; track $index) {\n        <ngx-decaf-component-renderer\n          [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\"\n          [tag]=\"child?.tag\"\n          [projectable]=\"false\"\n          [formRoot]=\"formGroup\"\n          [children]=\"child?.children || []\"\n          [globals]=\"{props: child.props}\"\n        />\n      } -->\n    }\n    <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:.5rem;margin-bottom:0}.dcf-buttons-grid.read{margin-bottom:1rem}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid{padding:1rem}.dcf-form-grid .dcf-form-item{margin-bottom:1.8rem;margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:1rem}::ng-deep ngx-decaf-stepped-form .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}::ng-deep ngx-decaf-fieldset .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (submit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n\n      <!-- @for (child of children; track $index) {\n        <ngx-decaf-component-renderer\n          [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\"\n          [tag]=\"child?.tag\"\n          [projectable]=\"false\"\n          [formRoot]=\"formGroup\"\n          [children]=\"child?.children || []\"\n          [globals]=\"{props: child.props}\"\n        />\n      } -->\n    }\n    @if(initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if(options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if(!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if(options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if(!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div [class]=\"(child?.props?.className ? 'dcf-form-item ' + child.props.className : 'dcf-form-item')\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:.5rem;margin-bottom:0}.dcf-buttons-grid.read{margin-bottom:1rem}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid{padding:1rem}.dcf-form-grid .dcf-form-item{margin-bottom:1.8rem;margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:1rem}::ng-deep ngx-decaf-stepped-form .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}::ng-deep ngx-decaf-fieldset .dcf-input-item{margin-bottom:1.8rem;margin-top:0!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -4833,10 +5219,10 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxDecafComponentDir
          * and this value should correspond to an available icon name.
          *
          * @type {string}
-         * @default "ti-info-square-rounded"
+         * @default "folder-open-outline"
          * @memberOf EmptyStateComponent
          */
-        this.icon = "ti-info-square-rounded";
+        this.icon = "folder-open-outline";
         /**
          * @description The size of the displayed icon.
          * @summary Controls the size of the icon shown in the empty state.
@@ -4889,6 +5275,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxDecafComponentDir
          */
         this.buttonSize = 'default';
         this.sanitizer = inject(DomSanitizer);
+        this.enableCreationByModelRoute = false;
         addIcons(allIcons);
     }
     /**
@@ -4921,15 +5308,12 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxDecafComponentDir
     async ngOnInit() {
         this.initialize();
         this.showIcon = stringToBoolean(this.showIcon);
-        // if(this.translatable) {
-        //   this.title = generateLocaleFromString(this.locale, this.title);
-        //   this.subtitle = generateLocaleFromString(this.locale, this.subtitle);
-        //   this.buttonText = generateLocaleFromString(this.locale, this.buttonText);
-        // }
         this.titleColor = `dcf-title color-${this.titleColor}`;
         this.subtitleColor = `dcf-subtitle color-${this.titleColor}`;
         if (this.searchValue)
             this.searchSubtitle = await this.getSearchSubtitle(this.subtitle);
+        if (!this.buttonLink && this.model && this.route)
+            this.enableCreationByModelRoute = true;
     }
     /**
      * @description Handles click events on the action button.
@@ -5001,7 +5385,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxDecafComponentDir
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "\n<ion-card [id]=\"uid\" [class]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          name=\"alert-circle-outline\"\n          size=\"large\"\n          color=\"danger\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      @if(!searchValue) {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"subtitle\"></p>\n      } @else {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"searchSubtitle\"></p>\n      }\n    }\n    @if(buttonLink && buttonText) {\n      <div>\n        <ion-button\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"handleClick()\">\n          {{  buttonText }}\n        </ion-button>\n      </div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "\n<ion-card [id]=\"uid\" [class]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          [name]=\"icon\"\n          [size]=\"iconSize\"\n          [color]=\"iconColor\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      <p [class]=\"subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n    }\n    @if(!enableCreationByModelRoute) {\n       @if(buttonLink && buttonText) {\n        <div>\n          <ion-button\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"handleClick()\">\n            {{  buttonText }}\n          </ion-button>\n        </div>\n      }\n    } @else {\n\n      <div>\n        <ion-button\n          class=\"dcf-margin-top\"\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n          {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n        </ion-button>\n      </div>\n\n    }\n\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
@@ -5012,8 +5396,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [
                         IonCard,
                         IonCardContent,
-                        IonIcon
-                    ], template: "\n<ion-card [id]=\"uid\" [class]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          name=\"alert-circle-outline\"\n          size=\"large\"\n          color=\"danger\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      @if(!searchValue) {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"subtitle\"></p>\n      } @else {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"searchSubtitle\"></p>\n      }\n    }\n    @if(buttonLink && buttonText) {\n      <div>\n        <ion-button\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"handleClick()\">\n          {{  buttonText }}\n        </ion-button>\n      </div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"] }]
+                        IonIcon,
+                        TranslatePipe,
+                        IonButton
+                    ], template: "\n<ion-card [id]=\"uid\" [class]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          [name]=\"icon\"\n          [size]=\"iconSize\"\n          [color]=\"iconColor\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      <p [class]=\"subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n    }\n    @if(!enableCreationByModelRoute) {\n       @if(buttonLink && buttonText) {\n        <div>\n          <ion-button\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"handleClick()\">\n            {{  buttonText }}\n          </ion-button>\n        </div>\n      }\n    } @else {\n\n      <div>\n        <ion-button\n          class=\"dcf-margin-top\"\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n          {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n        </ion-button>\n      </div>\n\n    }\n\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], titleColor: [{
@@ -5244,11 +5630,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                 return child;
             });
         }
-        // if(this.model) {
-        //   this._repository = getModelRepository(this.model);
-        //   console.log(this._repository);
-        // }
-        // console.log(this._repository);
         this.initialized = true;
     }
     /**
@@ -5346,13 +5727,8 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
     async handleCreateItem(event) {
         if (event && event instanceof CustomEvent)
             event.stopImmediatePropagation();
-        // if(this.updatingItem)
-        //   return this.handleUpdateItem(this.updatingItem.index, true);
         const action = this.updatingItem ? OperationKeys.UPDATE : OperationKeys.CREATE;
         const formGroup = this.activeFormGroup;
-        // currentGroup.updateValueAndValidity();
-        // console.log((currentGroup.parent as FormArray).value);
-        const parent = formGroup.parent;
         const isValid = NgxDecafFormService.validateFields(formGroup);
         // must pass correct pk here
         const isUnique = NgxDecafFormService.isUniqueOnGroup(formGroup, action, action === OperationKeys.UPDATE ? this.updatingItem?.index : undefined);
@@ -5371,68 +5747,13 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                     value?.[this.pk] || undefined : value;
             }
         }
-        // windowEventEmitter(EventConstants.FIELDSET_ADD_GROUP, {
-        //   formGroup: this.updatingItem ? this.updatingItem : this.formGroup
-        // });
-        // const formParent = this.formGroup as FormArray;
-        // const index = formParent.length - 1;
-        // const formGroup = formParent.at(index) as FormGroup;
-        // console.log(formGroup.errors);
-        // const isValid  = NgxDecafFormService.validateFields(this.formGroup as FormGroup);
-        // const isUnique = NgxDecafFormService.isUniqueOnGroup(formGroup, index, OperationKeys.CREATE);
-        // const value = formGroup.value;
-        // console.log(isValid, isUnique);
-        // this.changeDetectorRef.detectChanges();
-        // if(!Object.keys(this.mapper).length)
-        //   this.mapper = this.getMapper(value as KeyValue);
-        // if(isValid && isUnique) {
-        //     this.isUniqueError = undefined;
-        //     this.buttonLabel = this.translateService.instant(this.locale + '.add');
-        //     this.setValue();
-        //     // const fb = NgxDecafFormService.addGroupToParent((this.formGroup as FormArray).root as FormGroup, this.childOf as string,  formParent.length).parent as FormArray;
-        // } else {
-        //   this.isUniqueError = typeof value === 'object' ? (value as KeyValue)?.[this.pk] || undefined : value;
-        // }
-        // console.log(this.formGroup);
-        // if(event && event instanceof CustomEvent) {
-        //   event.stopImmediatePropagation();
-        //   const {formGroup, value, isValid} = event.detail;
-        //   this.formGroup = formGroup as FormArray;
-        //   if(!this.mapper)
-        //     this.mapper = this.getMapper(value as KeyValue);
-        //   if(isValid ){
-        //       this.isUniqueError = undefined;
-        //       this.buttonLabel = this.translateService.instant(this.locale + '.add');
-        //       this.setValue();
-        //   } else {
-        //    this.isUniqueError = (value as KeyValue)?.[this.pk] || undefined;
-        //   }
-        // } else {
-        //   windowEventEmitter(EventConstants.FIELDSET_ADD_GROUP, {
-        //     component: this.component.nativeElement,
-        //     index: this.updatingItem ? this.updatingItem.index : this.value?.length,
-        //     parent: this.childOf,
-        //     operation: !this.updatingItem ? OperationKeys.CREATE : OperationKeys.UPDATE
-        //   });
-        // }
     }
-    handleUpdateItem(index, save = false) {
+    handleUpdateItem(index) {
         const formGroup = this.getFormArrayIndex(index);
         if (formGroup) {
             this.updatingItem = Object.assign({}, formGroup.value || {}, { index });
             this.activeFormGroupIndex = index;
         }
-        // this.changeDetectorRef.detectChanges();
-        // const item = this.formGroup.controls.find(control => `${control.get(this.pk)?.value}`.toLowerCase() === cleanSpaces(`${value}`, true)) as FormControl;
-        // if(item) {
-        //   this.buttonLabel = this.translateService.instant(this.locale + '.update');
-        //   this.updatingItem = Object.assign({}, item.value || {}, {index});
-        //   windowEventEmitter(EventConstants.FIELDSET_UPDATE_GROUP, {
-        //     parent: this.childOf,
-        //     component: this.component.nativeElement,
-        //     index: index
-        //   });
-        // }
     }
     /**
      * @description Cancels the update mode and resets the UI state.
@@ -5477,23 +5798,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         this.setValue();
         if (this.activeFormGroupIndex > 0)
             this.activeFormGroupIndex = this.activeFormGroupIndex - 1;
-        // if(event && event instanceof CustomEvent) {
-        //   event.stopImmediatePropagation();
-        //   return this.setValue();
-        // }
-        // const formArray = this.formGroup as FormArray;
-        // const arrayLength = formArray.length;
-        // for (let index = arrayLength - 1; index >= 0; index--) {
-        //   const group = formArray.at(index) as FormGroup;
-        //   if (cleanSpaces(group.get(this.pk)?.value) === cleanSpaces(value as string)) {
-        //     windowEventEmitter(EventConstants.FIELDSET_REMOVE_GROUP, {
-        //       parent: this.childOf,
-        //       component: this.component.nativeElement,
-        //       index,
-        //       formGroup: group
-        //     });
-        //   }
-        // }
     }
     /**
      * @description Handles reordering of items within the fieldset list.
@@ -5620,16 +5924,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                 index: index + 1
             };
         });
-        // const inputContainers = this.component.nativeElement.querySelectorAll('.dcf-input-item');
-        // inputContainers.forEach((container: HTMLElement) => {
-        //   const input = container.querySelector('input, ion-input, ion-textarea, textarea') as HTMLInputElement | null;
-        //   if(input)
-        //     input.value = '';
-        // })
         this.updatingItem = undefined;
-        // console.log(this.isUniqueError);
-        // console.log(this.mapper);
-        // console.log(this.items);
     }
     /**
      * @description Automatically configures the field mapping based on the value structure.
@@ -5661,7 +5956,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", page: "page", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  [class.remove-border]=\"!borders\"\n  [class.open]=\"isOpen\"\n  #component>\n  <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"operation === 'read' ? 'open' : ''\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if ((!isRequired && ['create', 'update'].includes(operation))) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if (items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n         <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if (this.children?.length) {\n           @for (child of children; track $index) {\n            <ngx-decaf-component-renderer\n              [class]=\"(child?.props?.className ? ' ' + child.props.className : '')\"\n              [tag]=\"child?.tag\"\n              [parentComponent]=\"formGroup || parentComponent\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n          }\n        }\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if (updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            @if (items.length < max || !max) {\n              <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n                <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                {{buttonLabel}}\n              </ion-button>\n            }\n          </div>\n        }\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{padding-top:1rem;padding-bottom:1rem;background:var(--dcf-card-background);border-radius:6px}.dcf-fieldset.remove-border{border:none!important;padding:0!important;margin:0!important}.dcf-fieldset.open ion-accordion{margin-bottom:1rem}.dcf-fieldset.open ion-accordion.accordion-collapsing,.dcf-fieldset.open ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background)}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1.5rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", page: "page", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  [class.remove-border]=\"!borders\"\n  [class.open]=\"isOpen\"\n  #component>\n  <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"operation === 'read' ? 'open' : ''\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if ((!isRequired && ['create', 'update'].includes(operation))) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if (items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if(children?.length) {\n          <ngx-decaf-layout\n            gap=\"small\"\n            [children]=\"children || []\"\n            [parentComponent]=\"formGroup || parentComponent\"\n            [match]=\"false\"\n\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n          />\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if (updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            @if (items.length < max || !max) {\n              <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n                <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                {{buttonLabel}}\n              </ion-button>\n            }\n          </div>\n        }\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{padding-top:1rem;padding-bottom:1rem;background:var(--dcf-card-background);border-radius:6px}.dcf-fieldset.remove-border{border:none!important;padding:0!important;margin:0!important}.dcf-fieldset.open ion-accordion{margin-bottom:1rem}.dcf-fieldset.open ion-accordion.accordion-collapsing,.dcf-fieldset.open ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background)}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1.5rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -5671,7 +5966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             type: Component,
             args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [], imports: [
                         TranslatePipe,
-                        ComponentRendererComponent,
                         ReactiveFormsModule,
                         IonAccordionGroup,
                         IonAccordion,
@@ -5683,7 +5977,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         IonReorderGroup,
                         IonButton,
                         IonIcon,
-                    ], host: { '[attr.id]': 'uid' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  [class.remove-border]=\"!borders\"\n  [class.open]=\"isOpen\"\n  #component>\n  <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"operation === 'read' ? 'open' : ''\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if ((!isRequired && ['create', 'update'].includes(operation))) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if (items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n         <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if (this.children?.length) {\n           @for (child of children; track $index) {\n            <ngx-decaf-component-renderer\n              [class]=\"(child?.props?.className ? ' ' + child.props.className : '')\"\n              [tag]=\"child?.tag\"\n              [parentComponent]=\"formGroup || parentComponent\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n          }\n        }\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if (updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            @if (items.length < max || !max) {\n              <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n                <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                {{buttonLabel}}\n              </ion-button>\n            }\n          </div>\n        }\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{padding-top:1rem;padding-bottom:1rem;background:var(--dcf-card-background);border-radius:6px}.dcf-fieldset.remove-border{border:none!important;padding:0!important;margin:0!important}.dcf-fieldset.open ion-accordion{margin-bottom:1rem}.dcf-fieldset.open ion-accordion.accordion-collapsing,.dcf-fieldset.open ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background)}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1.5rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
+                        LayoutComponent
+                    ], template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  [class.remove-border]=\"!borders\"\n  [class.open]=\"isOpen\"\n  #component>\n  <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"operation === 'read' ? 'open' : ''\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if ((!isRequired && ['create', 'update'].includes(operation))) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if (items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if(children?.length) {\n          <ngx-decaf-layout\n            gap=\"small\"\n            [children]=\"children || []\"\n            [parentComponent]=\"formGroup || parentComponent\"\n            [match]=\"false\"\n\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n          />\n        }\n\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if (updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            @if (items.length < max || !max) {\n              <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n                <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                {{buttonLabel}}\n              </ion-button>\n            }\n          </div>\n        }\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{padding-top:1rem;padding-bottom:1rem;background:var(--dcf-card-background);border-radius:6px}.dcf-fieldset.remove-border{border:none!important;padding:0!important;margin:0!important}.dcf-fieldset.open ion-accordion{margin-bottom:1rem}.dcf-fieldset.open ion-accordion.accordion-collapsing,.dcf-fieldset.open ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background)}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1.5rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -7452,39 +7747,22 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
          */
         this.disableSort = false;
         /**
-         * @description Icon to display when the list is empty.
-         * @summary Specifies the icon shown in the empty state when no data is available.
-         * This can be any icon name supported by the application's icon system.
-         *
-         * @type {string | undefined}
-         * @default 'ti-database-exclamation'
-         * @memberOf ListComponent
-         */
-        this.emptyIcon = 'ti-database-exclamation';
-        /**
-         * @description Configuration for the empty state display.
-         * @summary Customizes how the empty state is displayed when no data is available.
-         * This includes the title, subtitle, button text, icon, and navigation link.
-         *
-         * @type {Partial<IListEmptyResult>}
-         * @default {
-         *   title: 'empty.title',
-         *   subtitle: 'empty.subtitle',
-         *   showButton: false,
-         *   icon: 'alert-circle-outline',
-         *   buttonText: 'locale.empty.button',
-         *   link: ''
-         * }
-         * @memberOf ListComponent
-         */
-        this.empty = {
-            title: 'empty.title',
-            subtitle: 'empty.subtitle',
-            showButton: false,
-            icon: 'alert-circle-outline',
-            buttonText: 'locale.empty.button',
-            link: ''
-        };
+       * @description Configuration for the empty state display.
+       * @summary Customizes how the empty state is displayed when no data is available.
+       * This includes the title, subtitle, button text, icon, and navigation link.
+       *
+       * @type {Partial<IListEmptyOptions>}
+       * @default {
+       *   title: 'empty.title',
+       *   subtitle: 'empty.subtitle',
+       *   showButton: false,
+       *   icon: 'alert-circle-outline',
+       *   buttonText: 'locale.empty.button',
+       *   link: ''
+       * }
+       * @memberOf ListComponent
+       */
+        this.empty = {};
         /**
          * @description The current page number in paginated mode.
          * @summary Tracks which page is currently being displayed when the component
@@ -7516,6 +7794,7 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
          * @memberOf ListComponent
          */
         this.skeletonData = new Array(2);
+        this.searching = false;
         /**
          * @description The last page number that was displayed.
          * @summary Keeps track of the previously displayed page number, which is useful
@@ -7608,9 +7887,10 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
         this.disableSort = stringToBoolean(this.disableSort);
         if (typeof this.item?.['tag'] === 'boolean' && this.item?.['tag'] === true)
             this.item['tag'] = ComponentsTagNames.LIST_ITEM;
+        this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
         await this.refresh();
-        if (this.operations.includes(OperationKeys.CREATE) && this.route)
-            this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
+        // if(this.operations.includes(OperationKeys.CREATE) && this.route)
+        //   this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
         if (!this.initialized)
             return this.parseProps(this);
         this.initialized = true;
@@ -7781,6 +8061,7 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
      * @memberOf ListComponent
      */
     async handleSearch(value) {
+        this.searching = value !== undefined;
         if (this.type === ListComponentsTypes.INFINITE) {
             this.loadMoreData = false;
             if (value === undefined) {
@@ -8072,8 +8353,10 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
                     if (!this.indexes)
                         this.indexes = (Object.values(this.mapper) || [this.pk]);
                     const condition = this.parseConditions(this.searchValue);
+                    this.changeDetectorRef.detectChanges();
                     request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
                     data = [];
+                    this.changeDetectorRef.detectChanges();
                 }
                 data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
             }
@@ -8310,8 +8593,14 @@ let ListComponent = class ListComponent extends NgxDecafComponentDirective {
             return accum;
         }, []);
     }
+    parseSearchValue() {
+        if (typeof this.searchValue === Primitives.STRING)
+            return this.searchValue || "";
+        const searchValue = this.searchValue;
+        return (searchValue?.query).map(item => `${item.index} ${item.condition} ${item.value}`).join(", ");
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", emptyIcon: "emptyIcon", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" } }, usesInheritance: true, ngImport: i0, template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar && data?.length) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" } }, usesInheritance: true, ngImport: i0, template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar) {\n  @if(model && enableFilter) {\n    @if(data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -8338,7 +8627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent
-                    ], template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar && data?.length) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
+                    ], template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar) {\n  @if(model && enableFilter) {\n    @if(data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -8375,8 +8664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Input
             }], disableSort: [{
                 type: Input
-            }], emptyIcon: [{
-                type: Input
             }], empty: [{
                 type: Input
             }], refreshEvent: [{
@@ -8891,17 +9178,6 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
          * @memberOf SteppedFormComponent
          */
         this.pagesArray = [];
-        /**
-         * @description Angular Location service.
-         * @summary Injected service that provides access to the browser's URL and history.
-         * This service is used for interacting with the browser's history API, allowing
-         * for back navigation and URL manipulation outside of Angular's router.
-         *
-         * @private
-         * @type {Location}
-         * @memberOf CrudFormComponent
-         */
-        this.location = inject(Location);
         /**
          * @description Event emitter for form submission.
          * @summary Emits events when the form is submitted, typically on the last page
@@ -8937,12 +9213,16 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
      * @memberOf SteppedFormComponent
      */
     async ngOnInit() {
-        console.log(this);
         if (!this.locale)
             this.locale = getLocaleContext("SteppedFormComponent");
         this.activePage = this.startPage;
-        if (!this.pageTitles.length)
-            this.pageTitles = Array.from({ length: this.pages }, () => ({ title: '', description: '', rendered: this.paginated }));
+        if (typeof this.pages === 'object') {
+            this.pageTitles = this.pages;
+        }
+        else {
+            if (!this.pageTitles.length)
+                this.pageTitles = Array.from({ length: this.pages }, () => ({ title: '', description: '' }));
+        }
         this.pages = this.pageTitles.length;
         if (this.paginated) {
             this.children = [...this.children.map((c) => {
@@ -8968,6 +9248,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
             });
             this.activeFormGroup = this.formGroup;
         }
+        this.initialized = true;
     }
     /**
      * @description Cleanup method called when the component is destroyed.
@@ -9086,9 +9367,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
         this.timerSubscription = timer(10).subscribe(() => this.activeChildren = this.children.filter(c => c.props?.['page'] === page));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\n  @if(paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n            @if((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if(page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if(page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(formGroup) {\n         <!-- <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows ?? 1\"\n          [cols]=\"cols ?? 1\" /> -->\n      @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      }\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if(item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if(item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if(item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div class=\"dcf-grid dcf-grid-small  dcf-child-width-1-1\">\n                @for (child of item.items; track $index) {\n                  <ngx-decaf-component-renderer\n                    [class]=\"'dcf-step-container ' + (child?.props?.className ? child.props.className + ' ' : ' ') + child.tag\"\n                    [tag]=\"child?.tag\"\n                    [projectable]=\"false\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [children]=\"child?.children || []\"\n                    [globals]=\"{props: child.props}\"\n                  />\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: 
-                // LayoutComponent,
-                ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, usesInheritance: true, ngImport: i0, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\n  @if(paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n            @if((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if(page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if(page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(initialized && activeChildren?.length) {\n        <ngx-decaf-layout\n          [children]=\"activeChildren || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [rows]=\"rows\"\n          [cols]=\"cols\"\n          [match]=\"false\"\n\n        />\n      <!-- @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      } -->\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if(item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if(item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if(item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div>\n                @if(initialized && item.items?.length) {\n                  <div>\n                    <ngx-decaf-layout\n                      [children]=\"item.items || []\"\n                      [parentComponent]=\"formGroup || parentComponent\"\n                      gap=\"small\"\n                      [rows]=\"rows\"\n                      [cols]=\"cols\"\n                      [match]=\"false\"\n\n                    />\n                  </div>\n\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SteppedFormComponent = __decorate([
     Dynamic(),
@@ -9102,9 +9381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         IonSkeletonText,
                         IonText,
                         IonButton,
-                        // LayoutComponent,
-                        ComponentRendererComponent
-                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\n  @if(paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n            @if((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if(page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if(page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(formGroup) {\n         <!-- <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows ?? 1\"\n          [cols]=\"cols ?? 1\" /> -->\n      @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      }\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if(item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if(item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if(item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div class=\"dcf-grid dcf-grid-small  dcf-child-width-1-1\">\n                @for (child of item.items; track $index) {\n                  <ngx-decaf-component-renderer\n                    [class]=\"'dcf-step-container ' + (child?.props?.className ? child.props.className + ' ' : ' ') + child.tag\"\n                    [tag]=\"child?.tag\"\n                    [projectable]=\"false\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [children]=\"child?.children || []\"\n                    [globals]=\"{props: child.props}\"\n                  />\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
+                        LayoutComponent
+                    ], standalone: true, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\n  @if(paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n            @if((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if(page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if(page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(initialized && activeChildren?.length) {\n        <ngx-decaf-layout\n          [children]=\"activeChildren || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [rows]=\"rows\"\n          [cols]=\"cols\"\n          [match]=\"false\"\n\n        />\n      <!-- @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      } -->\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if(item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if(item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if(item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div>\n                @if(initialized && item.items?.length) {\n                  <div>\n                    <ngx-decaf-layout\n                      [children]=\"item.items || []\"\n                      [parentComponent]=\"formGroup || parentComponent\"\n                      gap=\"small\"\n                      [rows]=\"rows\"\n                      [cols]=\"cols\"\n                      [match]=\"false\"\n\n                    />\n                  </div>\n\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { children: [{
                 type: Input
             }], paginated: [{
@@ -9278,5 +9556,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxDecafComponentDirective, NgxDecafFormFieldDirective, NgxDecafFormService, NgxEventHandler, NgxPageDirective, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, DefaultListEmptyOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxDecafComponentDirective, NgxDecafFormFieldDirective, NgxDecafFormService, NgxEventHandler, NgxPageDirective, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map