@decaf-ts/for-angular 0.0.3 → 0.0.4

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

@@ -1,90 +1,166 @@
+import { UIKeys, RenderingEngine, HTML5CheckTypes, escapeHtml, HTML5InputTypes, parseToNumber } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { Component, Input, Directive, HostBinding, ElementRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, ViewChild, EventEmitter, Output } from '@angular/core';
-import { Model, Validation, ValidationKeys, sf } from '@decaf-ts/decorator-validation';
-import { IonSkeletonText, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
-import { NgComponentOutlet, NgClass } from '@angular/common';
+import { reflectComponentType, TemplateRef, Component, Input, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, EventEmitter, Output } from '@angular/core';
+import { Model, sf, Validation, ValidationKeys } from '@decaf-ts/decorator-validation';
+import { NgComponentOutlet } from '@angular/common';
+import { apply, metadata } from '@decaf-ts/reflection';
+import { InternalError, OperationKeys } from '@decaf-ts/db-decorators';
+import { __decorate } from 'tslib';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { UIKeys, RenderingEngine, HTML5CheckTypes, escapeHtml, HTML5InputTypes, parseToNumber } from '@decaf-ts/ui-decorators';
+import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonTextarea } from '@ionic/angular/standalone';
 import { TranslatePipe } from '@ngx-translate/core';
-import { OperationKeys, InternalError } from '@decaf-ts/db-decorators';
 import * as i1$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
-import { apply, metadata } from '@decaf-ts/reflection';
+
+const AngularEngineKeys = {
+    REFLECT: `${UIKeys.REFLECT}.angular.`,
+    DYNAMIC: 'dynamic-component',
+    ANNOTATIONS: '__annotations__',
+    ECMP: 'ecmp',
+    NG_REFLECT: 'ng-reflect-',
+    RENDERED: 'rendered-as-',
+    RENDERED_ID: 'rendered-as-{0}',
+};
+const FormConstants = {
+    VALID: 'VALID',
+    INVALID: 'INVALID',
+};
+
+class NgxRenderingEngine extends RenderingEngine {
+    constructor() {
+        super('angular');
+    }
+    fromFieldDefinition(fieldDef, vcr, injector, tpl) {
+        const component = NgxRenderingEngine.components(fieldDef.tag)
+            .constructor;
+        const componentMetadata = reflectComponentType(component);
+        if (!componentMetadata) {
+            throw new InternalError(`Metadata for component ${fieldDef.tag} not found.`);
+        }
+        const inputs = fieldDef.props;
+        const possibleInputs = componentMetadata.inputs;
+        const inputKeys = Object.keys(inputs);
+        for (let input of possibleInputs) {
+            const index = inputKeys.indexOf(input.propName);
+            if (index !== -1) {
+                inputKeys.splice(index, 1);
+            }
+            if (!inputKeys.length)
+                break;
+        }
+        if (inputKeys.length)
+            console.warn(`Unmapped input properties for component ${fieldDef.tag}: ${inputKeys.join(', ')}`);
+        const result = {
+            component: component,
+            inputs: inputs || {},
+            injector: injector,
+        };
+        if (fieldDef.rendererId) {
+            result.inputs['rendererId'] =
+                fieldDef.rendererId;
+        }
+        if (fieldDef.children && fieldDef.children.length) {
+            result.children = fieldDef.children.map((child) => {
+                return this.fromFieldDefinition(child, vcr, injector, tpl);
+            });
+            const template = vcr.createEmbeddedView(tpl, injector).rootNodes;
+            result.content = [template];
+        }
+        return result;
+    }
+    render(model, globalProps, vcr, injector, tpl) {
+        let result;
+        try {
+            const fieldDef = this.toFieldDefinition(model, globalProps);
+            result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl);
+        }
+        catch (e) {
+            throw new InternalError(`Failed to render Model ${model.constructor.name}: ${e}`);
+        }
+        return result;
+    }
+    async initialize(...args) {
+        if (this.initialized)
+            return;
+        // ValidatableByType[]
+        this.initialized = true;
+    }
+    static registerComponent(name, constructor) {
+        if (!this._components)
+            this._components = {};
+        if (name in this._components)
+            throw new InternalError(`Component already registered under ${name}`);
+        this._components[name] = {
+            constructor: constructor,
+        };
+    }
+    static components(selector) {
+        if (!selector)
+            return Object.values(this._components);
+        if (!(selector in this._components))
+            throw new InternalError(`No Component registered under ${selector}`);
+        return this._components[selector];
+    }
+    static key(key) {
+        return `${AngularEngineKeys.REFLECT}${key}`;
+    }
+}
+
+function Dynamic() {
+    return apply((original) => {
+        const metadata = reflectComponentType(original);
+        if (!metadata)
+            throw new InternalError(`Could not find Component metadata. @Dynamic decorator must come above @Component`);
+        NgxRenderingEngine.registerComponent(metadata.selector, original);
+    }, metadata(NgxRenderingEngine.key(AngularEngineKeys.DYNAMIC), true));
+}
+
+class DynamicModule {
+}
 
 class DecafModelRendererComponent {
-    //
-    // @ViewChild('componentElementContainer', {
-    //   static: true,
-    //   read: ViewContainerRef,
-    // })
-    // componentElementContainer!: ViewContainerRef;
-    constructor(vcr) {
+    constructor(vcr, injector) {
         this.vcr = vcr;
+        this.injector = injector;
+        this.JSON = JSON;
     }
-    ngOnInit() {
-        this.model =
-            typeof this.model === 'string'
-                ? Model.build({}, JSON.parse(this.model))
-                : this.model;
-        // this.output = RenderingEngine.render(this.model as unknown as Model);
-        // this.component = NgxRenderingEngine.components(this.output.tag);
-        // this.props = this.output.props;
-        // this.content = this.output.children?.map((child) => {
-        //   return this.vcr.createEmbeddedView();
-        // });
+    refresh(model) {
+        model =
+            typeof model === 'string'
+                ? Model.build({}, JSON.parse(model))
+                : model;
+        this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner);
+        this.rendererId = sf(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
     }
     ngOnChanges(changes) {
         if (changes['model']) {
             const { currentValue, previousValue, firstChange } = changes['model'];
+            this.refresh(currentValue);
         }
-        if (changes['details']) {
-            const { currentValue, previousValue, firstChange } = changes['details'];
-        }
+        // this.refresh();
+    }
+    ngOnDestroy() {
+        this.output = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafModelRendererComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafModelRendererComponent, isStandalone: true, selector: "decaf-model-renderer", inputs: { model: "model" }, usesOnChanges: true, ngImport: i0, template: "<!--<div #loadingElement>-->\n<!--  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%;\"></ion-skeleton-text>-->\n<!--</div>-->\n@if (output?.children?.length){\n  @for (item of output.children; track item.props.name){\n    <ng-template>{{item.props.name}}</ng-template>\n  }\n}\n<ng-container *ngComponentOutlet=\"component;\n                                  inputs: props;\n                                  content: content;\">\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafModelRendererComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafModelRendererComponent, isStandalone: true, selector: "decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: (TemplateRef), static: true }], usesOnChanges: true, ngImport: i0, template: "<div #renderer>\n  <ng-container #outer *ngComponentOutlet=\"output?.component;\n                                  inputs: output?.inputs;\n                                  content: output?.content;\">\n  </ng-container>\n  <ng-template #inner>\n    <div [id]=\"rendererId || null\">\n      @for (child of output?.children; track child.inputs.name) {\n        <ng-container *ngComponentOutlet=\"child.component;\n                                    injector: child.injector;\n                                    inputs: child.inputs\n                                    content: child.content\">\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafModelRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [IonSkeletonText, NgComponentOutlet], selector: 'decaf-model-renderer', template: "<!--<div #loadingElement>-->\n<!--  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%;\"></ion-skeleton-text>-->\n<!--</div>-->\n@if (output?.children?.length){\n  @for (item of output.children; track item.props.name){\n    <ng-template>{{item.props.name}}</ng-template>\n  }\n}\n<ng-container *ngComponentOutlet=\"component;\n                                  inputs: props;\n                                  content: content;\">\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { model: [{
+            args: [{ standalone: true, imports: [NgComponentOutlet], selector: 'decaf-model-renderer', template: "<div #renderer>\n  <ng-container #outer *ngComponentOutlet=\"output?.component;\n                                  inputs: output?.inputs;\n                                  content: output?.content;\">\n  </ng-container>\n  <ng-template #inner>\n    <div [id]=\"rendererId || null\">\n      @for (child of output?.children; track child.inputs.name) {\n        <ng-container *ngComponentOutlet=\"child.component;\n                                    injector: child.injector;\n                                    inputs: child.inputs\n                                    content: child.content\">\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n</div>\n\n\n" }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]
+            }], globals: [{
+                type: Input
+            }], inner: [{
+                type: ViewChild,
+                args: ['inner', { read: (TemplateRef), static: true }]
+            }], rendererId: [{
+                type: Input
             }] } });
 
-class DecafFieldDirective {
-    constructor() {
-        this.name = this.fieldName;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DecafFieldDirective, isStandalone: true, selector: "[appDecafField]", inputs: { fieldName: ["appDecafField", "fieldName"] }, host: { properties: { "#name": "this.name" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafFieldDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[appDecafField]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fieldName: [{
-                type: Input,
-                args: [{ alias: 'appDecafField' }]
-            }], name: [{
-                type: HostBinding,
-                args: ['#name']
-            }] } });
-
-const AngularEngineKeys = {
-    REFLECT: `${UIKeys.REFLECT}.angular.`,
-    DYNAMIC: 'dynamic-component',
-    ANNOTATIONS: '__annotations__',
-    NG_REFLECT: 'ng-reflect-',
-};
-const FormConstants = {
-    VALID: 'VALID',
-    INVALID: 'INVALID',
-};
-
 class ValidatorFactory {
     static spawn(key, arg) {
         if (!Validation.keys().includes(key))
@@ -338,6 +414,9 @@ class NgxFormService {
         throw new Error(`No parent with the tag ${tag} was found for provided element`);
     }
     static register(formId, control, props) {
+        if (formId.includes(AngularEngineKeys.RENDERED)) {
+            formId = formId.split(AngularEngineKeys.RENDERED)[1];
+        }
         this.controls[formId] = this.controls[formId] || {};
         this.controls[formId][props.name] = {
             control: control,
@@ -414,7 +493,7 @@ class NgxCrudFormField {
      * @param {boolean} isDisabled - Whether the field should be disabled
      */
     setDisabledState(isDisabled) {
-        this.props.disabled = isDisabled;
+        this.disabled = isDisabled;
     }
     /**
      * @summary After view initialization logic
@@ -428,12 +507,12 @@ class NgxCrudFormField {
             case OperationKeys.UPDATE:
             case OperationKeys.DELETE:
                 try {
-                    parent = NgxFormService.getParentEl(this.component.nativeElement, 'form');
+                    parent = NgxFormService.getParentEl(this.component.nativeElement, 'div');
                 }
                 catch (e) {
                     throw new Error(`Unable to retrieve parent form element for the ${this.operation}: ${e instanceof Error ? e.message : e}`);
                 }
-                NgxFormService.register(parent.id, this.formGroup, this.props);
+                NgxFormService.register(parent.id, this.formGroup, this);
                 return parent;
             default:
                 throw new Error(`Invalid operation: ${this.operation}`);
@@ -453,10 +532,7 @@ class NgxCrudFormField {
      * @param {FieldUpdateMode} updateOn - The update mode for the field
      */
     onInit(updateOn) {
-        if (!this.props || !this.operation)
-            throw new InternalError(`props and operation are required`);
-        this.formGroup = NgxFormService.fromProps(this.props, updateOn);
-        this.name = this.props.name;
+        this.formGroup = NgxFormService.fromProps(this, updateOn);
     }
     /**
      * @summary Get field errors
@@ -473,13 +549,18 @@ class NgxCrudFormField {
     }
 }
 
-// @Dynamic()
-class DecafCrudFieldComponent extends NgxCrudFormField {
+let DecafCrudFieldComponent = class DecafCrudFieldComponent extends NgxCrudFormField {
     constructor() {
         super(...arguments);
+        this.value = '';
+        this.spellcheck = false;
+        this.inputmode = 'none';
+        this.autocomplete = 'off';
+        this.fill = 'outline';
+        this.labelPlacement = 'stacked';
+        // Component
         this.updateOn = 'change';
         this.translatable = true;
-        this.HTML5InputTypes = Object.values(HTML5InputTypes);
     }
     ngAfterViewInit() {
         super.afterViewInit();
@@ -491,13 +572,15 @@ class DecafCrudFieldComponent extends NgxCrudFormField {
         super.onInit(this.updateOn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafCrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafCrudFieldComponent, isStandalone: true, selector: "decaf-crud-field", inputs: { updateOn: "updateOn", operation: "operation", props: "props", name: "name", options: "options", formGroup: "formGroup", translatable: "translatable" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container #component [formGroup]=\"formGroup\">\n  @if(props.type === 'textarea') {\n    <ion-item>\n      <ion-textarea\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [required]=\"props.required !== undefined ? props.required : null\"\n        [minlength]=\"props.minlength !== undefined ? props.minlength : null\"\n        [maxlength]=\"props.maxlength !== undefined ? props.maxlength : null\"\n        [readonly]=\"props.readonly !== undefined ? props.readonly : null\"\n        [inputmode]=\"props.inputmode\"\n        [spellcheck]=\"props.spellcheck\"\n        [rows]=\"props.rows\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [placeholder]=\"translatable ? (props.placeholder | translate) : props.placeholder\"\n        [formControlName]=\"props.name\"\n        [label]=\"translatable ? (props.label | translate) : props.label\">\n      </ion-textarea>\n    </ion-item>\n  }\n  @if(props.type === 'checkbox') {\n    <ion-item [formControlName]=\"props.name\">\n      <ion-checkbox\n        #checkboxElement\n        [name]=\"props.name\"\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [alignment]=\"props.alignment\"\n        [justify]=\"props.justify\"\n        [disabled]=\"props.disabled || props.readonly\"\n        [attr.checkedValue]=\"props.value\"\n        [value]=\"props.value\"\n        [checked]=\"props.checked\"\n        (ionChange)=\"props.checked = !props.checked\"\n        [formControlName]=\"props.name\">\n        <span [innerHTML]=\"props.label | translate\"></span>\n      </ion-checkbox>\n    </ion-item>\n  }\n  @else if(props.type === 'radio') {\n    <ion-radio-group [ngClass]=\"props.className\" [formControlName]=\"props.name\" [name]=\"props.name\" [value]=\"props.value\">\n      <label class=\"radio-group-label\">{{props.label | translate}}</label>\n      @for(option of options; track option.value) {\n        <ion-item>\n          <ion-radio\n            [mode]=\"props.mode\"\n            [hidden]=\"props.hidden\"\n            [disabled]=\"props.readonly || props.disabled\"\n            [labelPlacement]=\"props.labelPlacement\"\n            [alignment]=\"props.alignment\"\n            [justify]=\"props.justify\"\n            [value]=\"option.value\"\n          >{{ option.text | translate }}</ion-radio>\n        </ion-item>\n      }\n    </ion-radio-group>\n  }\n  @else if(props.type === 'select') {\n    <ion-item>\n      <ion-select\n        [name]=\"props.name\"\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [cancelText]=\"props.cancelText |  translate\"\n        [label]=\"translatable ? (props.label | translate) : props.label\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [disabled]=\"props.readonly || props.disabled\"\n        [placeholder]=\"props.placeholder | translate\"\n        [formControlName]=\"props.name\"\n        [interface]=\"props.interface\">\n        @for(option of options; track option.value) {\n          <ion-select-option [value]=\"option.value\">\n            {{ translatable ? (option.text | translate) : option.text }}\n          </ion-select-option>\n        }\n      </ion-select>\n    </ion-item>\n  }\n  @else if(HTML5InputTypes.includes(props.type)) {\n    <ion-item>\n      <ion-input\n        [ngClass]=\"props.className\"\n        [type]=\"props.type\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [inputmode]=\"props.inputmode\"\n        [autocomplete]=\"props.autocomplete\"\n        [spellcheck]=\"props.spellcheck\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [required]=\"props.required !== undefined ? props.required : false\"\n        [minlength]=\"props.minlength !== undefined ? props.minlength : null\"\n        [maxlength]=\"props.maxlength !== undefined ? props.maxlength : null\"\n        [readonly]=\"props.readonly !== undefined ? props.readonly : null\"\n        [max]=\"props.max !== undefined ? props.max : null\"\n        [min]=\"props.min !== undefined ? props.min : null\"\n        [pattern]=\"props.pattern !== undefined ? props.pattern : null\"\n        [step]=\"props.step !== undefined ? props.step : null\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [placeholder]=\"props.placeholder | translate\"\n        [formControlName]=\"props.name\"\n        [label]=\"props.label | translate\">\n      </ion-input>\n    </ion-item>\n  }\n  @else {\n    <h1>INVALID FIELD TYPE</h1>\n  }\n  @if((!formGroup.pristine || formGroup.touched) && !formGroup.valid) {\n    <div class=\"error uk-flex uk-flex-top\">\n      @for(item of getErrors(); track item.key) {\n        <p>\n          <span color=\"danger\" class=\"ti ti-alert-triangle\"></span>\n          <span>{{item.key}} - {{ sf((\"errors.\" + item.message) | translate, props[item.key]) }}</span>\n        </p>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".disabled{opacity:.7;pointer-events:none;touch-action:none}.disabled *{pointer-events:none;touch-action:none}.proccessing,.proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-item{--border-color: transparent;--padding-start: .75rem;--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}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.select-label-placement-floating::part(label){line-height:1.2rem!important}.radio-group-label{margin-left:.5rem}.radio-group-label+ion-item{margin-top:.5rem}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item+.helper,ion-radio-group+.helper{padding-left:.75rem;position:relative}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "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", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
-}
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafCrudFieldComponent, isStandalone: true, selector: "decaf-crud-field", inputs: { operation: "operation", name: "name", 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", 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", translatable: "translatable" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container #component [formGroup]=\"formGroup\">\n  @if(type === 'textarea') {\n    <ion-item>\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      </ion-textarea>\n    </ion-item>\n  }\n  @if(type === 'checkbox') {\n    <ion-item [formControlName]=\"name\">\n      <ion-checkbox\n        #checkboxElement\n        [name]=\"name\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [labelPlacement]=\"labelPlacement\"\n        [justify]=\"justify\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"value\"\n        [checked]=\"checked\"\n        (ionChange)=\"checked = !checked\"\n        [formControlName]=\"name\">\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]=\"name\" [value]=\"value\">\n      <label class=\"radio-group-label\">{{label | translate}}</label>\n      @for(option of options; track option.value) {\n        <ion-item>\n          <ion-radio\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [disabled]=\"readonly || disabled\"\n            [labelPlacement]=\"labelPlacement\"\n            [alignment]=\"alignment\"\n            [justify]=\"justify\"\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-item>\n      <ion-select\n        [name]=\"name\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [labelPlacement]=\"labelPlacement\"\n        [cancelText]=\"cancelText |  translate\"\n        [label]=\"translatable ? (label | translate) : label\"\n        [value]=\"value\"\n        [fill]=\"fill\"\n        [disabled]=\"readonly || disabled\"\n        [placeholder]=\"placeholder | translate\"\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) : option.text }}\n          </ion-select-option>\n        }\n      </ion-select>\n    </ion-item>\n  }\n  @else {\n    <ion-item>\n      <ion-input\n        [type]=\"type\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [inputmode]=\"inputmode\"\n        [autocomplete]=\"autocomplete\"\n        [spellcheck]=\"spellcheck\"\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        [value]=\"value\"\n        [fill]=\"fill\"\n        [placeholder]=\"placeholder | translate\"\n        [formControlName]=\"name\"\n        [label]=\"label | translate\">\n      </ion-input>\n    </ion-item>\n  }\n  @if((!formGroup.pristine || formGroup.touched) && !formGroup.valid) {\n    <div class=\"error uk-flex uk-flex-top\">\n      @for(item of getErrors(); track item.key) {\n        <p>\n          <span color=\"danger\" class=\"ti ti-alert-triangle\"></span>\n          <span>{{item.key}} - {{ sf((\"errors.\" + item.message) | translate, this[item.key]) }}</span>\n        </p>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".disabled{opacity:.7;pointer-events:none;touch-action:none}.disabled *{pointer-events:none;touch-action:none}.proccessing,.proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-item{--border-color: transparent;--padding-start: .75rem;--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}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.select-label-placement-floating::part(label){line-height:1.2rem!important}.radio-group-label{margin-left:.5rem}.radio-group-label+ion-item{margin-top:.5rem}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item+.helper,ion-radio-group+.helper{padding-left:.75rem;position:relative}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "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", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { 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"] }] }); }
+};
+DecafCrudFieldComponent = __decorate([
+    Dynamic()
+], DecafCrudFieldComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafCrudFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         ReactiveFormsModule,
-                        NgClass,
                         IonInput,
                         IonItem,
                         IonCheckbox,
@@ -506,23 +589,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonSelect,
                         TranslatePipe,
                         IonSelectOption,
-                        DecafFieldDirective,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], selector: 'decaf-crud-field', template: "<ng-container #component [formGroup]=\"formGroup\">\n  @if(props.type === 'textarea') {\n    <ion-item>\n      <ion-textarea\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [required]=\"props.required !== undefined ? props.required : null\"\n        [minlength]=\"props.minlength !== undefined ? props.minlength : null\"\n        [maxlength]=\"props.maxlength !== undefined ? props.maxlength : null\"\n        [readonly]=\"props.readonly !== undefined ? props.readonly : null\"\n        [inputmode]=\"props.inputmode\"\n        [spellcheck]=\"props.spellcheck\"\n        [rows]=\"props.rows\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [placeholder]=\"translatable ? (props.placeholder | translate) : props.placeholder\"\n        [formControlName]=\"props.name\"\n        [label]=\"translatable ? (props.label | translate) : props.label\">\n      </ion-textarea>\n    </ion-item>\n  }\n  @if(props.type === 'checkbox') {\n    <ion-item [formControlName]=\"props.name\">\n      <ion-checkbox\n        #checkboxElement\n        [name]=\"props.name\"\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [alignment]=\"props.alignment\"\n        [justify]=\"props.justify\"\n        [disabled]=\"props.disabled || props.readonly\"\n        [attr.checkedValue]=\"props.value\"\n        [value]=\"props.value\"\n        [checked]=\"props.checked\"\n        (ionChange)=\"props.checked = !props.checked\"\n        [formControlName]=\"props.name\">\n        <span [innerHTML]=\"props.label | translate\"></span>\n      </ion-checkbox>\n    </ion-item>\n  }\n  @else if(props.type === 'radio') {\n    <ion-radio-group [ngClass]=\"props.className\" [formControlName]=\"props.name\" [name]=\"props.name\" [value]=\"props.value\">\n      <label class=\"radio-group-label\">{{props.label | translate}}</label>\n      @for(option of options; track option.value) {\n        <ion-item>\n          <ion-radio\n            [mode]=\"props.mode\"\n            [hidden]=\"props.hidden\"\n            [disabled]=\"props.readonly || props.disabled\"\n            [labelPlacement]=\"props.labelPlacement\"\n            [alignment]=\"props.alignment\"\n            [justify]=\"props.justify\"\n            [value]=\"option.value\"\n          >{{ option.text | translate }}</ion-radio>\n        </ion-item>\n      }\n    </ion-radio-group>\n  }\n  @else if(props.type === 'select') {\n    <ion-item>\n      <ion-select\n        [name]=\"props.name\"\n        [ngClass]=\"props.className\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [cancelText]=\"props.cancelText |  translate\"\n        [label]=\"translatable ? (props.label | translate) : props.label\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [disabled]=\"props.readonly || props.disabled\"\n        [placeholder]=\"props.placeholder | translate\"\n        [formControlName]=\"props.name\"\n        [interface]=\"props.interface\">\n        @for(option of options; track option.value) {\n          <ion-select-option [value]=\"option.value\">\n            {{ translatable ? (option.text | translate) : option.text }}\n          </ion-select-option>\n        }\n      </ion-select>\n    </ion-item>\n  }\n  @else if(HTML5InputTypes.includes(props.type)) {\n    <ion-item>\n      <ion-input\n        [ngClass]=\"props.className\"\n        [type]=\"props.type\"\n        [mode]=\"props.mode\"\n        [hidden]=\"props.hidden\"\n        [inputmode]=\"props.inputmode\"\n        [autocomplete]=\"props.autocomplete\"\n        [spellcheck]=\"props.spellcheck\"\n        [labelPlacement]=\"props.labelPlacement\"\n        [required]=\"props.required !== undefined ? props.required : false\"\n        [minlength]=\"props.minlength !== undefined ? props.minlength : null\"\n        [maxlength]=\"props.maxlength !== undefined ? props.maxlength : null\"\n        [readonly]=\"props.readonly !== undefined ? props.readonly : null\"\n        [max]=\"props.max !== undefined ? props.max : null\"\n        [min]=\"props.min !== undefined ? props.min : null\"\n        [pattern]=\"props.pattern !== undefined ? props.pattern : null\"\n        [step]=\"props.step !== undefined ? props.step : null\"\n        [value]=\"props.value\"\n        [fill]=\"props.fill\"\n        [placeholder]=\"props.placeholder | translate\"\n        [formControlName]=\"props.name\"\n        [label]=\"props.label | translate\">\n      </ion-input>\n    </ion-item>\n  }\n  @else {\n    <h1>INVALID FIELD TYPE</h1>\n  }\n  @if((!formGroup.pristine || formGroup.touched) && !formGroup.valid) {\n    <div class=\"error uk-flex uk-flex-top\">\n      @for(item of getErrors(); track item.key) {\n        <p>\n          <span color=\"danger\" class=\"ti ti-alert-triangle\"></span>\n          <span>{{item.key}} - {{ sf((\"errors.\" + item.message) | translate, props[item.key]) }}</span>\n        </p>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".disabled{opacity:.7;pointer-events:none;touch-action:none}.disabled *{pointer-events:none;touch-action:none}.proccessing,.proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-item{--border-color: transparent;--padding-start: .75rem;--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}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.select-label-placement-floating::part(label){line-height:1.2rem!important}.radio-group-label{margin-left:.5rem}.radio-group-label+ion-item{margin-top:.5rem}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item+.helper,ion-radio-group+.helper{padding-left:.75rem;position:relative}\n"] }]
-        }], propDecorators: { updateOn: [{
-                type: Input
-            }], component: [{
-                type: ViewChild,
-                args: ['component', { read: ElementRef }]
-            }], operation: [{
+                        IonTextarea,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], selector: 'decaf-crud-field', template: "<ng-container #component [formGroup]=\"formGroup\">\n  @if(type === 'textarea') {\n    <ion-item>\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      </ion-textarea>\n    </ion-item>\n  }\n  @if(type === 'checkbox') {\n    <ion-item [formControlName]=\"name\">\n      <ion-checkbox\n        #checkboxElement\n        [name]=\"name\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [labelPlacement]=\"labelPlacement\"\n        [justify]=\"justify\"\n        [disabled]=\"disabled || readonly\"\n        [value]=\"value\"\n        [checked]=\"checked\"\n        (ionChange)=\"checked = !checked\"\n        [formControlName]=\"name\">\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]=\"name\" [value]=\"value\">\n      <label class=\"radio-group-label\">{{label | translate}}</label>\n      @for(option of options; track option.value) {\n        <ion-item>\n          <ion-radio\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [disabled]=\"readonly || disabled\"\n            [labelPlacement]=\"labelPlacement\"\n            [alignment]=\"alignment\"\n            [justify]=\"justify\"\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-item>\n      <ion-select\n        [name]=\"name\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [labelPlacement]=\"labelPlacement\"\n        [cancelText]=\"cancelText |  translate\"\n        [label]=\"translatable ? (label | translate) : label\"\n        [value]=\"value\"\n        [fill]=\"fill\"\n        [disabled]=\"readonly || disabled\"\n        [placeholder]=\"placeholder | translate\"\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) : option.text }}\n          </ion-select-option>\n        }\n      </ion-select>\n    </ion-item>\n  }\n  @else {\n    <ion-item>\n      <ion-input\n        [type]=\"type\"\n        [mode]=\"mode\"\n        [hidden]=\"hidden\"\n        [inputmode]=\"inputmode\"\n        [autocomplete]=\"autocomplete\"\n        [spellcheck]=\"spellcheck\"\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        [value]=\"value\"\n        [fill]=\"fill\"\n        [placeholder]=\"placeholder | translate\"\n        [formControlName]=\"name\"\n        [label]=\"label | translate\">\n      </ion-input>\n    </ion-item>\n  }\n  @if((!formGroup.pristine || formGroup.touched) && !formGroup.valid) {\n    <div class=\"error uk-flex uk-flex-top\">\n      @for(item of getErrors(); track item.key) {\n        <p>\n          <span color=\"danger\" class=\"ti ti-alert-triangle\"></span>\n          <span>{{item.key}} - {{ sf((\"errors.\" + item.message) | translate, this[item.key]) }}</span>\n        </p>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".disabled{opacity:.7;pointer-events:none;touch-action:none}.disabled *{pointer-events:none;touch-action:none}.proccessing,.proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-item{--border-color: transparent;--padding-start: .75rem;--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}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.select-label-placement-floating::part(label){line-height:1.2rem!important}.radio-group-label{margin-left:.5rem}.radio-group-label+ion-item{margin-top:.5rem}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item+.helper,ion-radio-group+.helper{padding-left:.75rem;position:relative}\n"] }]
+        }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
-            }], props: [{
+            }], name: [{
                 type: Input,
                 args: [{ required: true }]
-            }], name: [{
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], placeholder: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], interface: [{
                 type: Input
             }], options: [{
                 type: Input
+            }], mode: [{
+                type: Input
+            }], spellcheck: [{
+                type: Input
+            }], inputmode: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], updateOn: [{
+                type: Input
+            }], component: [{
+                type: ViewChild,
+                args: ['component', { read: ElementRef }]
             }], formGroup: [{
                 type: Input
             }], translatable: [{
@@ -543,7 +682,7 @@ const DefaultFormReactiveOptions = {
     },
 };
 
-class DecafCrudFormComponent {
+let DecafCrudFormComponent = class DecafCrudFormComponent {
     constructor() {
         this.updateOn = 'change';
         this.target = '_self';
@@ -552,15 +691,13 @@ class DecafCrudFormComponent {
         this.submitEvent = new EventEmitter();
     }
     ngAfterViewInit() {
-        NgxFormService.formAfterViewInit(this, this.formId);
+        NgxFormService.formAfterViewInit(this, this.rendererId);
     }
     ngOnInit() {
         this.options = Object.assign({}, DefaultFormReactiveOptions, this.options || {});
-        if (!this.formId)
-            this.formId = Date.now().toString();
     }
     ngOnDestroy() {
-        NgxFormService.forOnDestroy(this, this.formId);
+        NgxFormService.forOnDestroy(this, this.rendererId);
     }
     /**
      * @param  {Event} event
@@ -573,28 +710,23 @@ class DecafCrudFormComponent {
             return NgxFormService.validateFields(this.formGroup);
         console.log('onSubmit');
         // fix para valores de campos radio e check
-        const data = NgxFormService.getFormData(this.formId);
+        const data = NgxFormService.getFormData(this.rendererId);
         const submitEvent = {
             data: data,
         };
         if (this.action)
             return this.component.nativeElement.dispatchEvent(new CustomEvent('submit', data));
         this.submitEvent.emit(submitEvent);
-        // self.emitEvent({
-        //   role: button?.role || FORM_BUTTON_ROLES.SUBMIT,
-        //   data,
-        //   reset: button?.reset,
-        //   operation: self.operation,
-        //   eventName: self.eventName,
-        //   event,
-        // } as FormReactiveSubmitEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafCrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafCrudFormComponent, isStandalone: true, selector: "decaf-crud-form", inputs: { updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", formGroup: "formGroup", formId: "formId" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "<form #reactiveForm [id]=\"formId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" [target]=\"target\">\n  <ng-content #formContent></ng-content>\n  <div class=\"buttons-container\">\n    <ion-button\n      type=\"submit\">\n<!--      [shape]=\"buttons?.submit?.shape || 'round'\"-->\n<!--      [color]=\"buttons?.submit?.color || 'primary'\"-->\n<!--      [size]=\"buttons?.submit?.size || 'default'\"-->\n<!--      [fill]=\"buttons?.submit?.fill || 'solid'\"-->\n<!--      [disabled]=\"buttons?.submit?.disabled || false\"-->\n<!--      expand=\"block\"-->\n<!--      [disabled]=\"disableSubmitButtonWhenInvalid ? !form.valid : false\"-->\n      @if(options.buttons.submit.icon) {\n        <ion-icon [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n      }\n      {{options.buttons.submit.text}}\n    </ion-button>\n    @if(options.buttons.clear) {\n      <ion-button>\n<!--        type=\"clear\"-->\n<!--            (click)=\"clear($event)\"-->\n<!--            [shape]=\"buttons?.clear?.shape || 'round'\"-->\n<!--            [color]=\"buttons?.clear?.color || 'primary'\"-->\n<!--            [size]=\"buttons?.clear?.size || 'default'\"-->\n<!--            [fill]=\"buttons?.clear?.fill || 'clear'\"-->\n<!--            [disabled]=\"buttons?.clear?.disabled || false\"-->\n<!--            expand=\"block\"-->\n        @if(options.buttons.clear?.icon) {\n          <ion-icon [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n        }\n        {{options.buttons.clear?.text}}\n      </ion-button>\n    }\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.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: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
-}
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecafCrudFormComponent, isStandalone: true, selector: "decaf-crud-form", inputs: { updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", formGroup: "formGroup", rendererId: "rendererId" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "<form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" [target]=\"target\">\n  <ng-content #formContent></ng-content>\n  <div class=\"buttons-container\">\n    <ion-button\n      type=\"submit\">\n<!--      [shape]=\"buttons?.submit?.shape || 'round'\"-->\n<!--      [color]=\"buttons?.submit?.color || 'primary'\"-->\n<!--      [size]=\"buttons?.submit?.size || 'default'\"-->\n<!--      [fill]=\"buttons?.submit?.fill || 'solid'\"-->\n<!--      [disabled]=\"buttons?.submit?.disabled || false\"-->\n<!--      expand=\"block\"-->\n<!--      [disabled]=\"disableSubmitButtonWhenInvalid ? !form.valid : false\"-->\n      @if(options.buttons.submit.icon) {\n        <ion-icon [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n      }\n      {{options.buttons.submit.text}}\n    </ion-button>\n    @if(options.buttons.clear) {\n      <ion-button>\n<!--        type=\"clear\"-->\n<!--            (click)=\"clear($event)\"-->\n<!--            [shape]=\"buttons?.clear?.shape || 'round'\"-->\n<!--            [color]=\"buttons?.clear?.color || 'primary'\"-->\n<!--            [size]=\"buttons?.clear?.size || 'default'\"-->\n<!--            [fill]=\"buttons?.clear?.fill || 'clear'\"-->\n<!--            [disabled]=\"buttons?.clear?.disabled || false\"-->\n<!--            expand=\"block\"-->\n        @if(options.buttons.clear?.icon) {\n          <ion-icon [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n        }\n        {{options.buttons.clear?.text}}\n      </ion-button>\n    }\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.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: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
+};
+DecafCrudFormComponent = __decorate([
+    Dynamic()
+], DecafCrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecafCrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'decaf-crud-form', imports: [IonicModule, ReactiveFormsModule], template: "<form #reactiveForm [id]=\"formId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" [target]=\"target\">\n  <ng-content #formContent></ng-content>\n  <div class=\"buttons-container\">\n    <ion-button\n      type=\"submit\">\n<!--      [shape]=\"buttons?.submit?.shape || 'round'\"-->\n<!--      [color]=\"buttons?.submit?.color || 'primary'\"-->\n<!--      [size]=\"buttons?.submit?.size || 'default'\"-->\n<!--      [fill]=\"buttons?.submit?.fill || 'solid'\"-->\n<!--      [disabled]=\"buttons?.submit?.disabled || false\"-->\n<!--      expand=\"block\"-->\n<!--      [disabled]=\"disableSubmitButtonWhenInvalid ? !form.valid : false\"-->\n      @if(options.buttons.submit.icon) {\n        <ion-icon [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n      }\n      {{options.buttons.submit.text}}\n    </ion-button>\n    @if(options.buttons.clear) {\n      <ion-button>\n<!--        type=\"clear\"-->\n<!--            (click)=\"clear($event)\"-->\n<!--            [shape]=\"buttons?.clear?.shape || 'round'\"-->\n<!--            [color]=\"buttons?.clear?.color || 'primary'\"-->\n<!--            [size]=\"buttons?.clear?.size || 'default'\"-->\n<!--            [fill]=\"buttons?.clear?.fill || 'clear'\"-->\n<!--            [disabled]=\"buttons?.clear?.disabled || false\"-->\n<!--            expand=\"block\"-->\n        @if(options.buttons.clear?.icon) {\n          <ion-icon [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n        }\n        {{options.buttons.clear?.text}}\n      </ion-button>\n    }\n  </div>\n</form>\n" }]
+            args: [{ standalone: true, selector: 'decaf-crud-form', imports: [IonicModule, ReactiveFormsModule], template: "<form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" [target]=\"target\">\n  <ng-content #formContent></ng-content>\n  <div class=\"buttons-container\">\n    <ion-button\n      type=\"submit\">\n<!--      [shape]=\"buttons?.submit?.shape || 'round'\"-->\n<!--      [color]=\"buttons?.submit?.color || 'primary'\"-->\n<!--      [size]=\"buttons?.submit?.size || 'default'\"-->\n<!--      [fill]=\"buttons?.submit?.fill || 'solid'\"-->\n<!--      [disabled]=\"buttons?.submit?.disabled || false\"-->\n<!--      expand=\"block\"-->\n<!--      [disabled]=\"disableSubmitButtonWhenInvalid ? !form.valid : false\"-->\n      @if(options.buttons.submit.icon) {\n        <ion-icon [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n      }\n      {{options.buttons.submit.text}}\n    </ion-button>\n    @if(options.buttons.clear) {\n      <ion-button>\n<!--        type=\"clear\"-->\n<!--            (click)=\"clear($event)\"-->\n<!--            [shape]=\"buttons?.clear?.shape || 'round'\"-->\n<!--            [color]=\"buttons?.clear?.color || 'primary'\"-->\n<!--            [size]=\"buttons?.clear?.size || 'default'\"-->\n<!--            [fill]=\"buttons?.clear?.fill || 'clear'\"-->\n<!--            [disabled]=\"buttons?.clear?.disabled || false\"-->\n<!--            expand=\"block\"-->\n        @if(options.buttons.clear?.icon) {\n          <ion-icon [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n        }\n        {{options.buttons.clear?.text}}\n      </ion-button>\n    }\n  </div>\n</form>\n" }]
         }], propDecorators: { updateOn: [{
                 type: Input
             }], component: [{
@@ -613,60 +745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ required: true }]
             }], formGroup: [{
                 type: Input
-            }], formId: [{
+            }], rendererId: [{
                 type: Input
             }], submitEvent: [{
                 type: Output
             }] } });
 
-class NgxRenderingEngine extends RenderingEngine {
-    constructor() {
-        super('angular');
-    }
-    async initialize(...args) {
-        if (this.initialized)
-            return;
-        // ValidatableByType[]
-        this.initialized = true;
-    }
-    static registerComponent(name, constructor, metadata) {
-        if (!this._components)
-            this._components = {};
-        if (name in this._components)
-            throw new InternalError(`Component already registered under ${name}`);
-        this._components[name] = {
-            constructor: constructor,
-            metadata: metadata,
-        };
-    }
-    static components(selector) {
-        if (!selector)
-            return Object.values(this._components);
-        if (!(selector in this._components))
-            throw new InternalError(`No Component registered under ${selector}`);
-        return this._components[selector];
-    }
-    static key(key) {
-        return `${AngularEngineKeys.REFLECT}${key}`;
-    }
-}
-
-function Dynamic() {
-    return apply((original) => {
-        const annotation = Object.getOwnPropertyDescriptor(original, AngularEngineKeys.ANNOTATIONS);
-        if (!annotation || !annotation.value)
-            throw new InternalError(`Could not find Component metadata. @Dynamic decorator must come above @Component`);
-        // console.log(
-        //   `Could not find Component metadata. @Dynamic decorator must come above @Component`,
-        // );
-        const decorator = annotation.value[0];
-        NgxRenderingEngine.registerComponent(decorator.selector, original, decorator);
-    }, metadata(NgxRenderingEngine.key(AngularEngineKeys.DYNAMIC), true));
-}
-
-class DynamicModule {
-}
-
 /**
  * Generated bundle index. Do not edit.
  */