@decaf-ts/for-angular 0.0.5 → 0.0.7

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

@@ -1,6 +1,6 @@
 import { UIKeys, parseValueByType, HTML5InputTypes, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, Injector, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, ComparisonValidationKeys, PathProxyEngine, isValidDate, parseDate, Model, sf } from '@decaf-ts/decorator-validation';
 import * as i1 from '@angular/common';
 import { NgComponentOutlet, Location } from '@angular/common';
@@ -10,10 +10,11 @@ import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { getLogger, ForAngularModule } from 'src/lib/for-angular.module';
 import { NgxRenderingEngine2 as NgxRenderingEngine2$1 } from 'src/lib/engine/NgxRenderingEngine2';
-import { __decorate, __metadata } from 'tslib';
+import { __decorate } from 'tslib';
+import * as i3 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 import * as i1$1 from '@ionic/angular/standalone';
 import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonText, IonIcon } from '@ionic/angular/standalone';
-import * as i3 from '@ngx-translate/core';
 
 /**
  * @description Angular engine key constants
@@ -241,7 +242,7 @@ class ValidatorFactory {
      * Enables Validators handling method to access parent and child properties using consistent dot-notation in Angular forms.
      *
      * @param {AbstractControl} control - The control to wrap in a proxy.
-     * @returns {PathProxy<any>} A proxy object exposing form values and enabling recursive parent access.
+     * @returns {PathProxy<unknown>} A proxy object exposing form values and enabling recursive parent access.
      */
     static createProxy(control) {
         return PathProxyEngine.create(control, {
@@ -260,10 +261,10 @@ class ValidatorFactory {
                 //   const control = value.controls[prop];
                 //   return control instanceof FormControl ? control.value : control;
                 // }
-                return target[prop];
+                return target?.[prop];
             },
             getParent: function (target) {
-                return target._parent;
+                return target?.['_parent'];
             },
             ignoreUndefined: true,
             ignoreNull: true,
@@ -661,8 +662,8 @@ class NgxRenderingEngine2 extends RenderingEngine {
      *   Method-->>Caller: return AngularDynamicOutput
      */
     fromFieldDefinition(fieldDef, vcr, injector, tpl, registryFormId = Date.now().toString(36).toUpperCase()) {
-        const cmp = fieldDef?.component || NgxRenderingEngine2.components(fieldDef.tag);
-        const component = (cmp.constructor);
+        const cmp = fieldDef?.['component'] || NgxRenderingEngine2.components(fieldDef.tag);
+        const component = cmp.constructor;
         const componentMetadata = reflectComponentType(component);
         if (!componentMetadata) {
             throw new InternalError(`Metadata for component ${fieldDef.tag} not found.`);
@@ -710,7 +711,7 @@ class NgxRenderingEngine2 extends RenderingEngine {
      * @param {ComponentMirror<unknown>} metadata - The component metadata for input validation
      * @param {ViewContainerRef} vcr - The view container reference for component creation
      * @param {Injector} injector - The Angular injector for dependency injection
-     * @param {any} [template=[]] - The template nodes to project into the component
+     * @param {Node[]} [template=[]] - The template nodes to project into the component
      * @return {ComponentRef<unknown>} The created component reference
      */
     static createComponent(component, inputs = {}, metadata, vcr, injector, template = []) {
@@ -797,10 +798,9 @@ class NgxRenderingEngine2 extends RenderingEngine {
      * 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.
      *
-     * @param {...any[]} args - Initialization arguments
      * @return {Promise<void>} A promise that resolves when initialization is complete
      */
-    async initialize(...args) {
+    async initialize() {
         if (this.initialized)
             return;
         // ValidatableByType[]
@@ -1099,13 +1099,11 @@ class NgxRenderingEngine extends RenderingEngine {
      * @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.
-     * @param {...any[]} args - Initialization arguments
      * @return {Promise<void>} A promise that resolves when initialization is complete
      */
-    async initialize(...args) {
+    async initialize() {
         if (this.initialized)
             return;
-        // ValidatableByType[]
         this.initialized = true;
     }
     /**
@@ -1184,7 +1182,7 @@ class NgxRenderingEngine extends RenderingEngine {
  *     +Record~string, unknown~ globals
  *     +EnvironmentInjector injector
  *     +ComponentRef~unknown~ component
- *     +EventEmitter~ModelRenderCustomEvent~ listenEvent
+ *     +EventEmitter~RendererCustomEvent~ listenEvent
  *     +ngOnInit()
  *     +ngOnDestroy()
  *     +ngOnChanges(changes)
@@ -1240,7 +1238,7 @@ class ComponentRendererComponent {
          * dynamic component, creating a communication channel between the parent and the dynamically
          * rendered child.
          *
-         * @type {EventEmitter<ModelRenderCustomEvent>}
+         * @type {EventEmitter<RendererCustomEvent>}
          * @memberOf ComponentRendererComponent
          */
         this.listenEvent = new EventEmitter();
@@ -1271,9 +1269,12 @@ class ComponentRendererComponent {
      * @memberOf ComponentRendererComponent
      */
     ngOnInit() {
-        if (!this.parent)
+        if (!this.parent) {
             this.createComponent(this.tag, this.globals);
-        this.createParentComponent();
+        }
+        else {
+            this.createParentComponent();
+        }
     }
     /**
      * @description Cleans up resources when the component is destroyed.
@@ -1336,8 +1337,9 @@ class ComponentRendererComponent {
             ?.constructor;
         const metadata = reflectComponentType(component);
         const componentInputs = metadata.inputs;
-        const props = globals?.['item'];
-        delete props['tag'];
+        const props = globals?.['item'] || globals?.['props'] || {};
+        if (props?.['tag'])
+            delete props['tag'];
         const inputKeys = Object.keys(props);
         const unmappedKeys = [];
         for (const input of inputKeys) {
@@ -1349,8 +1351,6 @@ class ComponentRendererComponent {
                 unmappedKeys.push(input);
             }
         }
-        if (unmappedKeys.length)
-            this.logger.info(`Unmapped input properties for component ${tag}: ${unmappedKeys.join(', ')}`);
         this.vcr.clear();
         this.component = NgxRenderingEngine2$1.createComponent(component, props, metadata, this.vcr, this.injector, []);
         this.subscribeEvents();
@@ -1443,7 +1443,7 @@ class ComponentRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n     }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "parent"], outputs: ["listenEvent"] }, { kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n     }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }, { kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
@@ -1458,6 +1458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], listenEvent: [{
                 type: Output
+            }], model: [{
+                type: Input
             }], parent: [{
                 type: Input
             }], inner: [{
@@ -1494,8 +1496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  *   ModelRenderer-->>App: Emit events
  */
 class ModelRendererComponent {
-    constructor(injector) {
-        this.injector = injector;
+    constructor() {
         /**
          * @description Global variables to be passed to the rendered component
          */
@@ -1504,8 +1505,10 @@ class ModelRendererComponent {
          * @description Event emitter for custom events from the rendered component
          */
         this.listenEvent = new EventEmitter();
+        this.injector = inject(Injector);
         this.JSON = JSON;
     }
+    // constructor() {}
     /**
      * @description Refreshes the rendered model
      * @param {string | M} model - The model to be rendered
@@ -1513,7 +1516,7 @@ class ModelRendererComponent {
     refresh(model) {
         model =
             typeof model === 'string'
-                ? Model.build({}, JSON.parse(model))
+                ? Model.build({}, model)
                 : model;
         this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner);
         if (this.output?.inputs)
@@ -1527,7 +1530,7 @@ class ModelRendererComponent {
      */
     ngOnChanges(changes) {
         if (changes[BaseComponentProps.MODEL]) {
-            const { currentValue, previousValue, firstChange } = changes[BaseComponentProps.MODEL];
+            const { currentValue } = changes[BaseComponentProps.MODEL];
             this.refresh(currentValue);
         }
     }
@@ -1571,13 +1574,13 @@ class ModelRendererComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }, { propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }, { propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [ForAngularModule, NgComponentOutlet, ComponentRendererComponent], selector: 'ngx-decaf-model-renderer', template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { model: [{
+        }], propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]
             }], globals: [{
@@ -1603,8 +1606,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * implementing both CrudFormField and ControlValueAccessor interfaces.
  */
 class NgxCrudFormField {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
+        this.translateService = inject(TranslateService);
+        // protected constructor() {}
         /**
          * @summary String formatting function
          * @description Provides access to the sf function for error message formatting
@@ -1616,15 +1620,13 @@ class NgxCrudFormField {
          * @description Function called when the field value changes
          * @property {function(): unknown} onChange - onChange event handler
          */
-        this.onChange = () => {
-        };
+        this.onChange = () => { };
         /**
          * @summary Touch callback function
          * @description Function called when the field is touched
          * @property {function(): unknown} onTouch - onTouch event handler
          */
-        this.onTouch = () => {
-        };
+        this.onTouch = () => { };
     }
     /**
      * @summary Write value to the field
@@ -1694,16 +1696,21 @@ class NgxCrudFormField {
     /**
      * @summary Get field errors
      * @description Retrieves all errors associated with the field
-     * @returns {Array<{key: string, message: string}>} An array of error objects
+     * @returns {string|void} An array of error objects
      */
     getErrors(parent) {
-        const collapsableContainer = parent.closest('ion-accordion-group');
-        if (collapsableContainer)
-            collapsableContainer.setAttribute('value', 'open');
-        return Object.keys(this.formControl.errors ?? {}).map(key => ({
-            key: key,
-            message: key,
-        }));
+        const formControl = this.formControl;
+        if ((!formControl.pristine || formControl.touched) && !formControl.valid) {
+            const collapsableContainer = parent.closest('ion-accordion-group');
+            if (collapsableContainer)
+                collapsableContainer.setAttribute('value', 'open');
+            const errors = Object.keys(formControl.errors ?? {}).map(key => ({
+                key: key,
+                message: key,
+            }));
+            for (const error of errors)
+                return `* ${this.sf(this.translateService.instant(`errors.${error?.['message']}`), this[error?.['key']] ?? "")}`;
+        }
     }
 }
 
@@ -1751,9 +1758,8 @@ class NgxCrudFormField {
  * @memberOf module:for-angular
  */
 let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
-    constructor(elementRef) {
-        super(elementRef);
-        this.elementRef = elementRef;
+    constructor() {
+        super(...arguments);
         /**
          * @description The parent field path, if this field is nested.
          * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
@@ -1772,6 +1778,15 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
          * @memberOf CrudFieldComponent
          */
         this.value = '';
+        /**
+         * @description Interface style for select inputs.
+         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
+         * This determines how the select options are presented to the user.
+         *
+         * @type {SelectInterface}
+         * @memberOf CrudFieldComponent
+         */
+        this.interface = 'popover';
         /**
          * @description Spellcheck attribute for text inputs.
          * @summary Enables or disables spellchecking for text inputs.
@@ -1843,6 +1858,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
          */
         this.translatable = true;
     }
+    // constructor() {
+    // }
     ngOnInit() {
         // super.onInit(this.updateOn);
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
@@ -1861,12 +1878,11 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
             this.onDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", 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", cols: "cols", rows: "rows", 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", translatable: "translatable", uid: "uid" }, 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 class=\"dcf-display-block\" [innerHTML]=\"value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n          <ion-item>\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate : label) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n        @if((!formControl.pristine || formControl.touched) && !formControl.valid) {\n          <div class=\"error dcf-error dcf-flex dcf-flex-top\">\n            @for(error of getErrors(container); track error.key) {\n              * {{ sf((\"errors.\" + error.message) | translate, this[error.key]) }}\n            }\n          </div>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.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 ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);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-error{position:absolute;color:var(--ion-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(--ion-color-gray-8)!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)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", 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", cols: "cols", rows: "rows", 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", translatable: "translatable", uid: "uid" }, 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            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\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                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.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 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 ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);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-error{position:absolute;color:var(--ion-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(--ion-color-gray-8)!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)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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"] }] }); }
 };
 CrudFieldComponent = __decorate([
-    Dynamic(),
-    __metadata("design:paramtypes", [ElementRef])
+    Dynamic()
 ], CrudFieldComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, decorators: [{
             type: Component,
@@ -1882,8 +1898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonLabel,
                         IonText,
                         IonTextarea,
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], 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 class=\"dcf-display-block\" [innerHTML]=\"value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n          <ion-item>\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate : label) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n        @if((!formControl.pristine || formControl.touched) && !formControl.valid) {\n          <div class=\"error dcf-error dcf-flex dcf-flex-top\">\n            @for(error of getErrors(container); track error.key) {\n              * {{ sf((\"errors.\" + error.message) | translate, this[error.key]) }}\n            }\n          </div>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.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 ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);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-error{position:absolute;color:var(--ion-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(--ion-color-gray-8)!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)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { operation: [{
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], 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            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\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                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.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 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 ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);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-error{position:absolute;color:var(--ion-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(--ion-color-gray-8)!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)}}\n"] }]
+        }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
             }], name: [{
@@ -2059,10 +2075,9 @@ let CrudFormComponent = class CrudFormComponent {
         if (!NgxFormService.validateFields(this.formGroup))
             return false;
         const data = NgxFormService.getFormData(this.formGroup);
-        console.log('Submit=', data);
         this.submitEvent.emit({
             data,
-            component: 'FormReactiveComponent',
+            component: 'CrudFormComponent',
             name: this.action || EventConstants.SUBMIT_EVENT,
             handlers: this.handlers,
         });
@@ -2077,7 +2092,7 @@ let CrudFormComponent = class CrudFormComponent {
     handleDelete() {
         this.submitEvent.emit({
             data: this.uid,
-            component: 'FormReactiveComponent',
+            component: 'CrudFormComponent',
             name: EventConstants.SUBMIT_EVENT,
         });
     }