@decaf-ts/for-angular 0.0.4 → 0.0.5

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

@@ -1,759 +0,0 @@
-import { UIKeys, RenderingEngine, HTML5CheckTypes, escapeHtml, HTML5InputTypes, parseToNumber } from '@decaf-ts/ui-decorators';
-import * as i0 from '@angular/core';
-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 { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonTextarea } from '@ionic/angular/standalone';
-import { TranslatePipe } from '@ngx-translate/core';
-import * as i1$1 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
-
-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 {
-    constructor(vcr, injector) {
-        this.vcr = vcr;
-        this.injector = injector;
-        this.JSON = JSON;
-    }
-    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);
-        }
-        // 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 }, { 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: [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 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) {
-        if (formId.includes(AngularEngineKeys.RENDERED)) {
-            formId = formId.split(AngularEngineKeys.RENDERED)[1];
-        }
-        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.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, '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);
-                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) {
-        this.formGroup = NgxFormService.fromProps(this, updateOn);
-    }
-    /**
-     * @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;
-        }, []);
-    }
-}
-
-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;
-    }
-    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: { 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,
-                        IonInput,
-                        IonItem,
-                        IonCheckbox,
-                        IonRadioGroup,
-                        IonRadio,
-                        IonSelect,
-                        TranslatePipe,
-                        IonSelectOption,
-                        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 }]
-            }], name: [{
-                type: Input,
-                args: [{ required: true }]
-            }], 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: [{
-                type: Input
-            }] } });
-
-const CssClasses = {
-    BUTTONS_CONTAINER: 'buttons-container',
-};
-const DefaultFormReactiveOptions = {
-    buttons: {
-        submit: {
-            text: 'Submit',
-        },
-        clear: {
-            text: 'Clear',
-        },
-    },
-};
-
-let DecafCrudFormComponent = 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.rendererId);
-    }
-    ngOnInit() {
-        this.options = Object.assign({}, DefaultFormReactiveOptions, this.options || {});
-    }
-    ngOnDestroy() {
-        NgxFormService.forOnDestroy(this, this.rendererId);
-    }
-    /**
-     * @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.rendererId);
-        const submitEvent = {
-            data: data,
-        };
-        if (this.action)
-            return this.component.nativeElement.dispatchEvent(new CustomEvent('submit', data));
-        this.submitEvent.emit(submitEvent);
-    }
-    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", 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]=\"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: [{
-                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
-            }], rendererId: [{
-                type: Input
-            }], submitEvent: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AngularEngineKeys, DecafCrudFieldComponent, DecafCrudFormComponent, DecafModelRendererComponent, Dynamic, DynamicModule, FormConstants, NgxRenderingEngine };
-//# sourceMappingURL=decaf-ts-for-angular.mjs.map