@decaf-ts/for-angular 0.0.3 → 0.0.5

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

@@ -1,675 +0,0 @@
-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 * 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 { 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';
-
-class DecafModelRendererComponent {
-    //
-    // @ViewChild('componentElementContainer', {
-    //   static: true,
-    //   read: ViewContainerRef,
-    // })
-    // componentElementContainer!: ViewContainerRef;
-    constructor(vcr) {
-        this.vcr = vcr;
-    }
-    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();
-        // });
-    }
-    ngOnChanges(changes) {
-        if (changes['model']) {
-            const { currentValue, previousValue, firstChange } = changes['model'];
-        }
-        if (changes['details']) {
-            const { currentValue, previousValue, firstChange } = changes['details'];
-        }
-    }
-    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"] }] }); }
-}
-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: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-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))
-            throw new Error('Unsupported custom validation');
-        /**
-         * TODO: This is only needed until the validator refacture
-         * @param arg
-         */
-        const parseArgs = (arg) => {
-            switch (key) {
-                case ValidationKeys.REQUIRED:
-                case ValidationKeys.EMAIL:
-                case ValidationKeys.URL:
-                case ValidationKeys.PASSWORD:
-                    return [];
-                case ValidationKeys.TYPE:
-                    arg = RenderingEngine.get().translate(arg, false);
-            }
-            return [arg];
-        };
-        const validatorFn = (control) => {
-            const validator = Validation.get(key);
-            const value = control.value;
-            const actualArg = parseArgs(arg);
-            if (key === ValidationKeys.TYPE) {
-            }
-            let errs;
-            try {
-                errs = validator.hasErrors(value, ...actualArg);
-            }
-            catch (e) {
-                console.warn(`${key} validator failed to validate: ${e}`);
-            }
-            if (!errs)
-                return null;
-            const result = {};
-            result[key] = true;
-            return result;
-        };
-        Object.defineProperty(validatorFn, 'name', {
-            value: `${key}Validator`,
-        });
-        return validatorFn;
-    }
-}
-
-/**
- * @summary Service for managing Angular forms and form controls.
- * @description
- * The NgxFormService provides utility methods for handling form initialization,
- * validation, data retrieval, and form control management in Angular applications.
- * It offers a centralized way to manage form controls, perform validations, and
- * handle form-related operations.
- */
-class NgxFormService {
-    /**
-     * @summary Storage for form controls.
-     * @description
-     * A static object that stores form controls indexed by form ID and field name.
-     * @type {Record<string, Record<string, { control: FormGroup; props: AngularFieldDefinition }>>}
-     */
-    static { this.controls = {}; }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    constructor() { }
-    /**
-     * Initializes the form after the view has been initialized.
-     * This method sets up the form controls and creates a FormGroup.
-     *
-     * @param el - The form element to initialize.
-     * @param formId - The unique identifier for the form.
-     * @param formUpdateMode - The update mode for the form. Defaults to 'blur'.
-     */
-    /**
-     * @summary Initializes the form after view initialization.
-     * @description
-     * Sets up form controls and creates a FormGroup for the given form element.
-     *
-     * @param {FormElement} el - The form element to initialize.
-     * @param {string} formId - The unique identifier for the form.
-     * @param {FieldUpdateMode} [formUpdateMode='blur'] - The update mode for the form.
-     */
-    static formAfterViewInit(el, formId, formUpdateMode = 'blur') {
-        const selector = `*[${AngularEngineKeys.NG_REFLECT}name]`;
-        const elements = Array.from(el.component.nativeElement.querySelectorAll(selector));
-        const controls = elements.map((f) => {
-            const fieldName = f
-                .attributes[`${AngularEngineKeys.NG_REFLECT}name`].value;
-            const control = NgxFormService.getFieldByName(formId, fieldName);
-            return control.control;
-        });
-        el.formGroup = new FormGroup(controls, {
-            updateOn: formUpdateMode,
-        });
-    }
-    /**
-     * @summary Handles form component destruction.
-     * @description
-     * Unregisters the form from the service when the component is destroyed.
-     *
-     * @param {FormElement} el - The form element being destroyed.
-     * @param {string} formId - The unique identifier of the form to unregister.
-     */
-    static forOnDestroy(el, formId) {
-        NgxFormService.unregister(formId, el.component.nativeElement);
-    }
-    /**
-     * @summary Retrieves form data for a given form ID.
-     * @description
-     * Processes form controls and returns their values as an object.
-     *
-     * @param {string} formId - The unique identifier of the form to retrieve data from.
-     * @returns {Record<string, unknown>} An object containing the form data.
-     * @throws {Error} If the form with the given ID is not found.
-     */
-    static getFormData(formId) {
-        if (!(formId in this.controls))
-            throw new Error(`form ${formId} not found`);
-        const form = this.controls[formId];
-        let control;
-        let val;
-        const data = {};
-        for (const key in form) {
-            control = form[key].control;
-            if (!HTML5CheckTypes.includes(form[key].props.type)) {
-                switch (form[key].props.type) {
-                    case HTML5InputTypes.NUMBER:
-                        val = parseToNumber(control.value);
-                        break;
-                    case HTML5InputTypes.DATE:
-                    case HTML5InputTypes.DATETIME_LOCAL:
-                        val = new Date(control.value[key]);
-                        break;
-                    default:
-                        val = escapeHtml(control.value[key]);
-                }
-            }
-            else {
-                val = control.value;
-            }
-            data[key] = val;
-        }
-        return data;
-    }
-    /**
-     * @summary Validates form fields.
-     * @description
-     * Validates either a specific field or all fields in the form group.
-     *
-     * @param {FormGroup} formGroup - The FormGroup to validate.
-     * @param {string} [fieldName] - Optional name of a specific field to validate.
-     * @returns {boolean} Indicates whether the validation passed (true) or failed (false).
-     */
-    static validateFields(formGroup, fieldName) {
-        function isValid(formGroup, fieldName) {
-            const control = formGroup.get(fieldName);
-            if (control instanceof FormControl) {
-                control.markAsTouched();
-                control.markAsDirty();
-                return !control.invalid;
-            }
-            else {
-                throw new Error('This should be impossible');
-            }
-        }
-        if (fieldName)
-            return isValid(formGroup, fieldName);
-        let isValidForm = true;
-        for (const fg of formGroup.controls) {
-            for (const key in fg.controls) {
-                const validate = isValid(fg, key);
-                if (!validate)
-                    isValidForm = false;
-            }
-        }
-        return isValidForm;
-    }
-    /**
-     * @summary Creates a FormGroup from field properties.
-     * @description
-     * Generates a new FormGroup instance based on the provided field definition and update mode.
-     *
-     * @param {AngularFieldDefinition} props - The Angular field definition properties.
-     * @param {FieldUpdateMode} updateMode - The update mode for the form group.
-     * @returns {FormGroup} A new FormGroup instance.
-     */
-    static fromProps(props, updateMode) {
-        const controls = {};
-        const validators = this.validatorsFromProps(props);
-        const composed = validators.length ? Validators.compose(validators) : null;
-        controls[props.name] = new FormControl({
-            value: props.value && props.type !== HTML5InputTypes.CHECKBOX
-                ? props.value
-                : undefined,
-            disabled: props.disabled,
-        }, composed);
-        return new FormGroup(controls, { updateOn: updateMode });
-    }
-    /**
-     * Retrieves a form by its ID from the stored controls.
-     *
-     * @param id - The unique identifier of the form to retrieve.
-     * @returns The form controls associated with the given ID.
-     * @throws Error if the form with the given ID is not found.
-     */
-    static getFormById(id) {
-        if (!(id in NgxFormService.controls))
-            throw new Error(`Could not find formId ${id}`);
-        return NgxFormService.controls[id];
-    }
-    /**
-     * Retrieves a specific field from a form by its name.
-     *
-     * @param formId - The unique identifier of the form.
-     * @param name - The name of the field to retrieve.
-     * @returns The field control and properties.
-     * @throws Error if the field is not found in the form.
-     */
-    static getFieldByName(formId, name) {
-        const form = NgxFormService.getFormById(formId);
-        if (!(name in form))
-            throw new Error(`Could not find field ${name} in form`);
-        return form[name];
-    }
-    /**
-     * Generates an array of validator functions from the provided field properties.
-     *
-     * @param props - The field properties containing validation rules.
-     * @returns An array of ValidatorFn instances.
-     */
-    static validatorsFromProps(props) {
-        const supportedValidationKeys = Validation.keys();
-        return Object.keys(props)
-            .filter((k) => supportedValidationKeys.includes(k))
-            .map((k) => ValidatorFactory.spawn(k, props[k]));
-    }
-    /**
-     *
-     * @param el
-     * @param tag
-     *
-     * @throws {Error} when no parent exists with the provided tag
-     */
-    static getParentEl(el, tag) {
-        let parent;
-        while ((parent = el.parentElement) !== null) {
-            if (parent.tagName.toLowerCase() === tag.toLowerCase()) {
-                return parent;
-            }
-            el = parent;
-        }
-        throw new Error(`No parent with the tag ${tag} was found for provided element`);
-    }
-    static register(formId, control, props) {
-        this.controls[formId] = this.controls[formId] || {};
-        this.controls[formId][props.name] = {
-            control: control,
-            props: props,
-        };
-    }
-    /**
-     * Unregisters a form or a specific field from the service.
-     *
-     * @param formId - The unique identifier of the form.
-     * @param field - Optional. The specific field to unregister. If not provided, the entire form is unregistered.
-     */
-    static unregister(formId, field) {
-        if (!field)
-            delete this.controls[formId];
-        else
-            delete this.controls[formId][field.name];
-    }
-}
-
-/**
- * @class NgxCrudFormField
- * @implements {CrudFormField<AngularFieldDefinition>}
- * @implements {ControlValueAccessor}
- * @summary Abstract class representing a CRUD form field for Angular applications
- * @description This class provides the base implementation for CRUD form fields in Angular,
- * implementing both CrudFormField and ControlValueAccessor interfaces.
- */
-class NgxCrudFormField {
-    constructor() {
-        /**
-         * @summary String formatting function
-         * @description Provides access to the sf function for error message formatting
-         */
-        this.sf = sf;
-        /**
-         * @summary Change callback function
-         * @description Function called when the field value changes
-         */
-        this.onChange = () => { };
-        /**
-         * @summary Touch callback function
-         * @description Function called when the field is touched
-         */
-        this.onTouch = () => { };
-    }
-    /**
-     * @summary Write value to the field
-     * @description Sets the value of the field
-     * @param {string} obj - The value to be set
-     */
-    writeValue(obj) {
-        this.value = obj;
-    }
-    /**
-     * @summary Register change callback
-     * @description Registers a function to be called when the field value changes
-     * @param {() => unknown} fn - The function to be called on change
-     */
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    /**
-     * @summary Register touch callback
-     * @description Registers a function to be called when the field is touched
-     * @param {() => unknown} fn - The function to be called on touch
-     */
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    /**
-     * @summary Set disabled state
-     * @description Sets the disabled state of the field
-     * @param {boolean} isDisabled - Whether the field should be disabled
-     */
-    setDisabledState(isDisabled) {
-        this.props.disabled = isDisabled;
-    }
-    /**
-     * @summary After view initialization logic
-     * @description Performs necessary setup after the view has been initialized
-     * @returns {HTMLElement} The parent element of the field
-     */
-    afterViewInit() {
-        let parent;
-        switch (this.operation) {
-            case OperationKeys.CREATE:
-            case OperationKeys.UPDATE:
-            case OperationKeys.DELETE:
-                try {
-                    parent = NgxFormService.getParentEl(this.component.nativeElement, 'form');
-                }
-                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);
-                return parent;
-            default:
-                throw new Error(`Invalid operation: ${this.operation}`);
-        }
-    }
-    /**
-     * @summary Cleanup on component destruction
-     * @description Unregisters the field when the component is destroyed
-     */
-    onDestroy() {
-        if (this.parent)
-            NgxFormService.unregister(this.parent.id, this.component.nativeElement);
-    }
-    /**
-     * @summary Initialize the field
-     * @description Sets up the form group and field name
-     * @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;
-    }
-    /**
-     * @summary Get field errors
-     * @description Retrieves all errors associated with the field
-     * @returns {{key: string, message: string}[]} An array of error objects
-     */
-    getErrors() {
-        return Object.entries(this.formGroup.controls).reduce((accum, [prop, control]) => {
-            Object.entries(control.errors).forEach(([k, c]) => {
-                accum.push({ key: k, message: k });
-            });
-            return accum;
-        }, []);
-    }
-}
-
-// @Dynamic()
-class DecafCrudFieldComponent extends NgxCrudFormField {
-    constructor() {
-        super(...arguments);
-        this.updateOn = 'change';
-        this.translatable = true;
-        this.HTML5InputTypes = Object.values(HTML5InputTypes);
-    }
-    ngAfterViewInit() {
-        super.afterViewInit();
-    }
-    ngOnDestroy() {
-        this.onDestroy();
-    }
-    ngOnInit() {
-        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"] }] }); }
-}
-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,
-                        IonRadioGroup,
-                        IonRadio,
-                        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: [{
-                type: Input,
-                args: [{ required: true }]
-            }], props: [{
-                type: Input,
-                args: [{ required: true }]
-            }], name: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], formGroup: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }] } });
-
-const CssClasses = {
-    BUTTONS_CONTAINER: 'buttons-container',
-};
-const DefaultFormReactiveOptions = {
-    buttons: {
-        submit: {
-            text: 'Submit',
-        },
-        clear: {
-            text: 'Clear',
-        },
-    },
-};
-
-class DecafCrudFormComponent {
-    constructor() {
-        this.updateOn = 'change';
-        this.target = '_self';
-        this.method = 'event';
-        this.formGroup = new FormGroup({});
-        this.submitEvent = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        NgxFormService.formAfterViewInit(this, this.formId);
-    }
-    ngOnInit() {
-        this.options = Object.assign({}, DefaultFormReactiveOptions, this.options || {});
-        if (!this.formId)
-            this.formId = Date.now().toString();
-    }
-    ngOnDestroy() {
-        NgxFormService.forOnDestroy(this, this.formId);
-    }
-    /**
-     * @param  {Event} event
-     */
-    submit(event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        if (!this.formGroup.valid)
-            return NgxFormService.validateFields(this.formGroup);
-        console.log('onSubmit');
-        // fix para valores de campos radio e check
-        const data = NgxFormService.getFormData(this.formId);
-        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"] }] }); }
-}
-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" }]
-        }], propDecorators: { updateOn: [{
-                type: Input
-            }], component: [{
-                type: ViewChild,
-                args: ['reactiveForm', { static: false, read: ElementRef }]
-            }], target: [{
-                type: Input
-            }], method: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], operation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], formGroup: [{
-                type: Input
-            }], formId: [{
-                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.
- */
-
-export { AngularEngineKeys, DecafCrudFieldComponent, DecafCrudFormComponent, DecafModelRendererComponent, Dynamic, DynamicModule, FormConstants, NgxRenderingEngine };
-//# sourceMappingURL=decaf-ts-for-angular.mjs.map