@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/fesm2022/updevs-components-form.mjs

@@ -0,0 +1,562 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, EventEmitter, input, computed, effect, Output, HostBinding, Component, model, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TextService, UpdSdkModule } from '@updevs/sdk';
+import { BaseComponent } from '@updevs/sdk/layout';
+import { startWith } from 'rxjs';
+import * as i1 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+import * as i1$2 from '@jsverse/transloco';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { ColumnSizeHelper } from '@updevs/components';
+import * as i5 from '@updevs/components/form-controls/select';
+import { Defaults, UpdSelectModule } from '@updevs/components/form-controls/select';
+import * as i2 from '@updevs/components/form-controls/input';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import * as i3 from '@updevs/components/form-controls/checkbox';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import * as i4 from '@updevs/components/form-controls/radio';
+import { UpdRadioModule } from '@updevs/components/form-controls/radio';
+import * as i6 from '@updevs/components/form-controls/textarea';
+import { UpdTextareaModule } from '@updevs/components/form-controls/textarea';
+import * as i7 from '@updevs/components/form-controls/file-upload';
+import { UpdFileUploadModule } from '@updevs/components/form-controls/file-upload';
+import { CommonModule } from '@angular/common';
+import { UpdDatePickerModule } from '@updevs/components/form-controls/date-picker';
+
+/**
+ * How a parent field influences its child.
+ **/
+var AttachmentTypeEnum;
+(function (AttachmentTypeEnum) {
+    /**
+     * Enable / disable behaviour (default).
+     **/
+    AttachmentTypeEnum["Disabled"] = "disabled";
+    /**
+     * Child waits for the parent to have a value and (re)loads afterwards.
+     **/
+    AttachmentTypeEnum["ParentLoad"] = "parentLoad";
+})(AttachmentTypeEnum || (AttachmentTypeEnum = {}));
+
+var DynamicFieldType;
+(function (DynamicFieldType) {
+    DynamicFieldType[DynamicFieldType["Input"] = 1] = "Input";
+    DynamicFieldType[DynamicFieldType["Select"] = 2] = "Select";
+    DynamicFieldType[DynamicFieldType["SelectMultiple"] = 3] = "SelectMultiple";
+    DynamicFieldType[DynamicFieldType["Label"] = 4] = "Label";
+    DynamicFieldType[DynamicFieldType["Checkbox"] = 5] = "Checkbox";
+    DynamicFieldType[DynamicFieldType["CheckboxGroup"] = 6] = "CheckboxGroup";
+    DynamicFieldType[DynamicFieldType["Radio"] = 7] = "Radio";
+    DynamicFieldType[DynamicFieldType["RadioGroup"] = 8] = "RadioGroup";
+    DynamicFieldType[DynamicFieldType["TextArea"] = 9] = "TextArea";
+    DynamicFieldType[DynamicFieldType["FileUpload"] = 10] = "FileUpload";
+    DynamicFieldType[DynamicFieldType["MaskedInput"] = 11] = "MaskedInput";
+    DynamicFieldType[DynamicFieldType["Button"] = 12] = "Button";
+    DynamicFieldType[DynamicFieldType["ButtonGroup"] = 13] = "ButtonGroup";
+})(DynamicFieldType || (DynamicFieldType = {}));
+
+class ErrorsHelper {
+    constructor() {
+        this.errors = {
+            'required': { text: 'UpDevs.Form.ErrorMessages.Required' },
+            'requiredTrue': { text: 'UpDevs.Form.ErrorMessages.RequiredTrue' },
+            'generic': { text: 'UpDevs.Form.ErrorMessages.Generic' },
+            'email': { text: 'UpDevs.Form.ErrorMessages.Email' },
+            'max': { text: 'UpDevs.Form.ErrorMessages.Max', defaultErrorParamToShow: 'max' },
+            'min': { text: 'UpDevs.Form.ErrorMessages.Min', defaultErrorParamToShow: 'min' },
+            'maxlength': { text: 'UpDevs.Form.ErrorMessages.MaxLength', defaultErrorParamToShow: 'requiredLength' },
+            'minlength': { text: 'UpDevs.Form.ErrorMessages.MinLength', defaultErrorParamToShow: 'requiredLength' }
+        };
+        this.textService = inject(TextService);
+    }
+    getMessages(control, customConfig) {
+        if (!control.errors) {
+            return [];
+        }
+        const errorMessages = [];
+        const genericText = this.textService.getText({ text: this.errors['generic'].text, isTranslated: false });
+        const combinedErrorMessagesList = Object.assign({}, this.errors, customConfig || {});
+        const controlErrorKeys = Object.keys(control.errors);
+        controlErrorKeys.forEach(key => {
+            const customError = !!control.errors ? control.errors[key] : undefined;
+            if (!!customError?.errorText) {
+                errorMessages.push(this.textService.getText(customError.errorText));
+            }
+            else if (key in combinedErrorMessagesList) {
+                const config = combinedErrorMessagesList[key];
+                let params;
+                if (config.showLength) {
+                    params = { value: control.value?.length || 0 };
+                }
+                if (!!config.defaultErrorParamToShow) {
+                    params = { value: control.errors[key][config.defaultErrorParamToShow] };
+                }
+                errorMessages.push(this.textService.getText({ text: config.text, isTranslated: false }, params));
+            }
+        });
+        if (controlErrorKeys.length > 0 && errorMessages.length < 1) {
+            errorMessages.push(genericText);
+        }
+        return errorMessages;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ErrorsHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ErrorsHelper }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ErrorsHelper, decorators: [{
+            type: Injectable
+        }] });
+
+class DynamicFieldComponent extends BaseComponent {
+    get hostClasses() {
+        return this.wrapperClasses();
+    }
+    get formControl() {
+        return this.formGroup().controls[this.field().name];
+    }
+    get inputField() {
+        return this.field();
+    }
+    get checkboxField() {
+        return this.field();
+    }
+    get checkboxGroupField() {
+        return this.field();
+    }
+    get radioField() {
+        return this.field();
+    }
+    get radioGroupField() {
+        return this.field();
+    }
+    get selectField() {
+        return this.field();
+    }
+    get singleSelectField() {
+        return this.field();
+    }
+    get textareaField() {
+        return this.field();
+    }
+    get fileUploadField() {
+        return this.field();
+    }
+    get maskedField() {
+        return this.field();
+    }
+    get buttonField() {
+        return this.field();
+    }
+    get buttonGroupField() {
+        return this.field();
+    }
+    get checkboxGroupOptionsKeys() {
+        return Object.keys(this.checkboxGroupField.options);
+    }
+    get radioGroupOptionsKeys() {
+        return Object.keys(this.radioGroupField.options);
+    }
+    get fileNameControl() {
+        return !!this.fileUploadField.fileNameFormProperty
+            ? this.formGroup().controls[this.fileUploadField.fileNameFormProperty]
+            : undefined;
+    }
+    constructor() {
+        super();
+        this.submitForm = new EventEmitter();
+        this.DynamicFieldType = DynamicFieldType;
+        this.SelectDefaults = Defaults;
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.validationStatusDescriptions = [];
+        this.textService = inject(TextService);
+        this.wrapperClasses = computed(() => {
+            const isVisible = this.field().isVisible?.() ?? true;
+            const columnClasses = ColumnSizeHelper.getSizeClasses(this.field().colSize);
+            return `${columnClasses} ${isVisible ? '' : 'd-none'}`;
+        }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+        this.errorsHelper = inject(ErrorsHelper);
+        effect(() => {
+            const control = this.formControl;
+            const isVisible = this.field().isVisible?.() ?? true;
+            // If a field is not visible, we should remove its validators and restore if it becomes visible again.
+            if (!!control) {
+                if (isVisible) {
+                    const fieldConfig = this.field();
+                    const originalValidators = fieldConfig.validators || [];
+                    const finalValidators = [...originalValidators];
+                    if (fieldConfig.isRequired && !originalValidators.includes(Validators.required)) {
+                        finalValidators.push(Validators.required);
+                    }
+                    control.setValidators(finalValidators);
+                }
+                else {
+                    control.clearValidators();
+                }
+                control.updateValueAndValidity({ emitEvent: false });
+            }
+        });
+    }
+    ngOnInit() {
+        if (!!this.formControl) {
+            const statusSub = this.formControl.statusChanges.subscribe(status => {
+                this.updateValidationDisplay();
+                this.field().onValidationStatusChanged?.(status);
+            });
+            const valueSub = this.formControl.valueChanges.subscribe(value => this.field().onValueChanged?.(value));
+            this.addSubscriptions(statusSub, valueSub);
+        }
+    }
+    onBlur() {
+        if (!!this.formControl) {
+            this.formControl.markAsTouched();
+            this.updateValidationDisplay();
+            this.field().onBlur?.();
+            this.field().onTouched?.();
+        }
+    }
+    onFocus() {
+        this.field().onFocus?.();
+    }
+    onInput(event) {
+        const value = event.target?.value;
+        this.field().onInput?.(value);
+    }
+    setControlValue(value) {
+        this.formControl.setValue(value);
+        this.formControl.markAsDirty();
+    }
+    getText(textModel) {
+        return this.textService.getText(textModel);
+    }
+    getOptionDescription(key, type) {
+        return type === 'checkbox' ?
+            this.checkboxGroupField.options[key] : this.radioGroupField.options[key];
+    }
+    handleFileSelected(event) {
+        this.formControl.setValue(!!this.fileUploadField.saveAsDataUrl ? event?.dataUrl : event?.file);
+        this.formControl.markAsDirty();
+        if (!!this.fileUploadField.fileNameFormProperty) {
+            this.fileNameControl.setValue(event?.file.name);
+        }
+    }
+    onInputEnter() {
+        if (!!this.inputField.shouldSubmitOnEnter) {
+            this.submitForm.next();
+        }
+        this.field().onEnter?.();
+    }
+    updateValidationDisplay() {
+        if (this.formControl && this.formControl.invalid && this.formControl.touched) {
+            this.validationStatusDescriptions = this.errorsHelper.getMessages(this.formControl)
+                .map(t => ({ text: t, isTranslated: true }));
+            this.validationStatus = 'invalid';
+        }
+        else {
+            this.validationStatusDescriptions = [];
+            this.validationStatus = this.field().showValidStatus && this.formControl?.touched ? 'valid' : undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DynamicFieldComponent, isStandalone: false, selector: "upd-dynamic-field", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { submitForm: "submitForm" }, host: { properties: { "class": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: "@switch (field().type) {\n    @case (DynamicFieldType.Input) {\n        <upd-input [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [layout]=\"layout()\" [isDisabled]=\"field().isDisabled || false\"\n            [type]=\"inputField.inputType || 'text'\" [labelColSize]=\"field().labelColSize\" [value]=\"formControl.value\"\n            (valueChange)=\"setControlValue($event)\" (blurred)=\"onBlur()\" (keyUpEnter)=\"onInputEnter()\" (focus)=\"onFocus()\"\n            (input)=\"onInput($event)\">\n            @if (!!inputField.prefix) {\n                <ng-template updInputPrepend>\n                    {{ textService.getText(inputField.prefix) }}\n                </ng-template>\n            }\n\n            @if (!!inputField.suffix) {\n                <ng-template updInputAppend>\n                    {{ textService.getText(inputField.suffix) }}\n                </ng-template>\n            }\n        </upd-input>\n    }\n    @case (DynamicFieldType.Checkbox) {\n        <upd-checkbox [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"true\"\n            [isDisabled]=\"field().isDisabled || false\" [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\"\n            [isSwitch]=\"checkboxField.isSwitch || false\" (changed)=\"setControlValue($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-checkbox>\n    }\n    @case (DynamicFieldType.CheckboxGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        @for (option of checkboxGroupOptionsKeys; track option) {\n            <upd-checkbox [name]=\"field().name\" [label]=\"getOptionDescription(option, 'checkbox')\" [hint]=\"field().hint\"\n                [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n                [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"option\" [isDisabled]=\"field().isDisabled || false\"\n                [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\" [isSwitch]=\"checkboxField.isSwitch || false\"\n                (changed)=\"setControlValue(option)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-checkbox>\n        }\n    }\n    @case (DynamicFieldType.Radio) {\n        <upd-radio [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"true\"\n            [isChecked]=\"formControl.value\" [isDisabled]=\"field().isDisabled || false\" [isInline]=\"radioField.isInline || false\"\n            (selected)=\"setControlValue($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n        </upd-radio>\n    }\n    @case (DynamicFieldType.RadioGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        @for (option of radioGroupOptionsKeys; track option) {\n            <upd-radio [name]=\"field().name\" [label]=\"getOptionDescription(option, 'radio')\" [hint]=\"field().hint\"\n                [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n                [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"option\" [isDisabled]=\"field().isDisabled || false\"\n                [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\"\n                (selected)=\"setControlValue(option)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-radio>\n        }\n    }\n    @case (DynamicFieldType.Select) {\n        <upd-select [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\"\n            [useSystemStyle]=\"singleSelectField.useSystemStyle || false\" [isDisabled]=\"field().isDisabled || false\"\n            [items]=\"selectField.items\" [layout]=\"layout()\" [labelColSize]=\"field().labelColSize\" [store]=\"selectField.store!\"\n            [observable]=\"selectField.observable\" [itemKey]=\"selectField.itemKey\" [itemValue]=\"selectField.itemValue\"\n            [dropdownMaxHeight]=\"selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight\"\n            [typeaheadDebounce]=\"selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce\"\n            [shouldAutoSearch]=\"selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch\"\n            [shouldCloseOnOutsideClick]=\"selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick\"\n            [shouldTruncateSelectedText]=\"selectField.shouldTruncateSelectedText\" [parentValue]=\"selectField.parentValue\"\n            [value]=\"formControl.value\" (selectedItem)=\"setControlValue($event?.value)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-select>\n    }\n    @case (DynamicFieldType.SelectMultiple) {\n        <upd-select-multiple [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [isDisabled]=\"field().isDisabled || false\"\n            [items]=\"selectField.items\" [layout]=\"layout()\" [labelColSize]=\"field().labelColSize\" [store]=\"selectField.store!\"\n            [observable]=\"selectField.observable\" [itemKey]=\"selectField.itemKey\" [itemValue]=\"selectField.itemValue\"\n            [dropdownMaxHeight]=\"selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight\"\n            [typeaheadDebounce]=\"selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce\"\n            [shouldAutoSearch]=\"selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch\" [parentValue]=\"selectField.parentValue\"\n            [shouldCloseOnOutsideClick]=\"selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick\"\n            [selectedValues]=\"formControl.value\" (selectedIds)=\"setControlValue($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-select-multiple>\n    }\n    @case (DynamicFieldType.Label) {\n        <label class=\"form-label\">{{ getText(field().label) }}</label>\n    }\n    @case (DynamicFieldType.TextArea) {\n        <upd-textarea [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [isDisabled]=\"field().isDisabled || false\"\n            [value]=\"formControl.value\" [customClasses]=\"textareaField.customClasses\" [wrapperClasses]=\"textareaField.wrapperClasses\"\n            [maxLength]=\"textareaField.maxLength\" [rows]=\"textareaField.rows\"\n            [displayCharactersCount]=\"textareaField.displayCharactersCount || false\" (valueChange)=\"setControlValue($event)\"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" (keydown.enter)=\"onInputEnter()\">\n        </upd-textarea>\n    }\n    @case (DynamicFieldType.FileUpload) {\n        <upd-file-upload [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [isDisabled]=\"field().isDisabled || false\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\" [fileName]=\"fileNameControl?.value\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [allowFilesDrop]=\"fileUploadField.allowFilesDrop || false\"\n            [title]=\"fileUploadField.title\" [labelColSize]=\"field().labelColSize\" [minFileSize]=\"fileUploadField.minFileSize\"\n            [isMultiple]=\"fileUploadField.isMultiple || false\" [allowedExtensions]=\"fileUploadField.allowedExtensions || '*'\"\n            [maxFileSize]=\"fileUploadField.maxFileSize\" [layout]=\"layout()\" (fileChanged)=\"handleFileSelected($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-file-upload>\n    }\n    @case (DynamicFieldType.MaskedInput) {\n        <upd-input [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\" [mask]=\"maskedField.mask\"\n            [maskConfig]=\"maskedField.maskConfig\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [layout]=\"layout()\"\n            [isDisabled]=\"field().isDisabled || false\" [type]=\"inputField.inputType || 'text'\" [labelColSize]=\"field().labelColSize\"\n            [value]=\"formControl.value\" (valueChange)=\"setControlValue($event)\" (blurred)=\"onBlur()\" (keyUpEnter)=\"onInputEnter()\"\n            (focus)=\"onFocus()\" (input)=\"onInput($event)\">\n            @if (!!inputField.prefix) {\n                <ng-template updInputPrepend>\n                    {{ textService.getText(inputField.prefix) }}\n                </ng-template>\n            }\n\n            @if (!!inputField.suffix) {\n                <ng-template updInputAppend>\n                    {{ textService.getText(inputField.suffix) }}\n                </ng-template>\n            }\n        </upd-input>\n    }\n    @case (DynamicFieldType.Button) {\n        <upd-button [text]=\"field().label\" [isDisabled]=\"field().isDisabled || false\" [model]=\"buttonField.model\" />\n    }\n    @case (DynamicFieldType.ButtonGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        <div class=\"btn-group\" role=\"group\">\n            @for (btn of buttonGroupField.buttons; track btn) {\n                <upd-button [model]=\"btn\" [isDisabled]=\"field().isDisabled || false\" />\n            }\n        </div>\n    }\n}\n", styles: [""], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i2.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i2.InputAppendDirective, selector: "ng-template[updInputAppend]" }, { kind: "directive", type: i2.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i3.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i4.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline"], outputs: ["selected"] }, { kind: "component", type: i5.SelectComponent, selector: "upd-select", inputs: ["useSystemStyle", "shouldShowClearButton", "shouldTruncateSelectedText", "isCompact", "value"], outputs: ["valueChange", "selectedItem"] }, { kind: "component", type: i5.SelectMultipleComponent, selector: "upd-select-multiple", inputs: ["selectedValues"], outputs: ["selectedItems", "selectedIds"] }, { kind: "component", type: i6.TextareaComponent, selector: "upd-textarea", inputs: ["value", "customClasses", "wrapperClasses", "maxLength", "rows", "displayCharactersCount"], outputs: ["valueChange"] }, { kind: "component", type: i7.FileUploadComponent, selector: "upd-file-upload", inputs: ["fileName", "title", "allowFilesDrop", "isMultiple", "allowedExtensions", "minFileSize", "maxFileSize", "layout"], outputs: ["fileChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'upd-dynamic-field', template: "@switch (field().type) {\n    @case (DynamicFieldType.Input) {\n        <upd-input [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [layout]=\"layout()\" [isDisabled]=\"field().isDisabled || false\"\n            [type]=\"inputField.inputType || 'text'\" [labelColSize]=\"field().labelColSize\" [value]=\"formControl.value\"\n            (valueChange)=\"setControlValue($event)\" (blurred)=\"onBlur()\" (keyUpEnter)=\"onInputEnter()\" (focus)=\"onFocus()\"\n            (input)=\"onInput($event)\">\n            @if (!!inputField.prefix) {\n                <ng-template updInputPrepend>\n                    {{ textService.getText(inputField.prefix) }}\n                </ng-template>\n            }\n\n            @if (!!inputField.suffix) {\n                <ng-template updInputAppend>\n                    {{ textService.getText(inputField.suffix) }}\n                </ng-template>\n            }\n        </upd-input>\n    }\n    @case (DynamicFieldType.Checkbox) {\n        <upd-checkbox [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"true\"\n            [isDisabled]=\"field().isDisabled || false\" [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\"\n            [isSwitch]=\"checkboxField.isSwitch || false\" (changed)=\"setControlValue($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-checkbox>\n    }\n    @case (DynamicFieldType.CheckboxGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        @for (option of checkboxGroupOptionsKeys; track option) {\n            <upd-checkbox [name]=\"field().name\" [label]=\"getOptionDescription(option, 'checkbox')\" [hint]=\"field().hint\"\n                [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n                [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"option\" [isDisabled]=\"field().isDisabled || false\"\n                [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\" [isSwitch]=\"checkboxField.isSwitch || false\"\n                (changed)=\"setControlValue(option)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-checkbox>\n        }\n    }\n    @case (DynamicFieldType.Radio) {\n        <upd-radio [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"true\"\n            [isChecked]=\"formControl.value\" [isDisabled]=\"field().isDisabled || false\" [isInline]=\"radioField.isInline || false\"\n            (selected)=\"setControlValue($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n        </upd-radio>\n    }\n    @case (DynamicFieldType.RadioGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        @for (option of radioGroupOptionsKeys; track option) {\n            <upd-radio [name]=\"field().name\" [label]=\"getOptionDescription(option, 'radio')\" [hint]=\"field().hint\"\n                [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n                [validationStatusDescriptions]=\"validationStatusDescriptions\" [value]=\"option\" [isDisabled]=\"field().isDisabled || false\"\n                [isChecked]=\"formControl.value\" [isInline]=\"checkboxField.isInline || false\"\n                (selected)=\"setControlValue(option)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-radio>\n        }\n    }\n    @case (DynamicFieldType.Select) {\n        <upd-select [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [hintAsTooltip]=\"field().hintAsTooltip || false\"\n            [validationStatus]=\"validationStatus\" [validationStatusDescriptions]=\"validationStatusDescriptions\"\n            [useSystemStyle]=\"singleSelectField.useSystemStyle || false\" [isDisabled]=\"field().isDisabled || false\"\n            [items]=\"selectField.items\" [layout]=\"layout()\" [labelColSize]=\"field().labelColSize\" [store]=\"selectField.store!\"\n            [observable]=\"selectField.observable\" [itemKey]=\"selectField.itemKey\" [itemValue]=\"selectField.itemValue\"\n            [dropdownMaxHeight]=\"selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight\"\n            [typeaheadDebounce]=\"selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce\"\n            [shouldAutoSearch]=\"selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch\"\n            [shouldCloseOnOutsideClick]=\"selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick\"\n            [shouldTruncateSelectedText]=\"selectField.shouldTruncateSelectedText\" [parentValue]=\"selectField.parentValue\"\n            [value]=\"formControl.value\" (selectedItem)=\"setControlValue($event?.value)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"></upd-select>\n    }\n    @case (DynamicFieldType.SelectMultiple) {\n        <upd-select-multiple [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [isDisabled]=\"field().isDisabled || false\"\n            [items]=\"selectField.items\" [layout]=\"layout()\" [labelColSize]=\"field().labelColSize\" [store]=\"selectField.store!\"\n            [observable]=\"selectField.observable\" [itemKey]=\"selectField.itemKey\" [itemValue]=\"selectField.itemValue\"\n            [dropdownMaxHeight]=\"selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight\"\n            [typeaheadDebounce]=\"selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce\"\n            [shouldAutoSearch]=\"selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch\" [parentValue]=\"selectField.parentValue\"\n            [shouldCloseOnOutsideClick]=\"selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick\"\n            [selectedValues]=\"formControl.value\" (selectedIds)=\"setControlValue($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-select-multiple>\n    }\n    @case (DynamicFieldType.Label) {\n        <label class=\"form-label\">{{ getText(field().label) }}</label>\n    }\n    @case (DynamicFieldType.TextArea) {\n        <upd-textarea [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [isDisabled]=\"field().isDisabled || false\"\n            [value]=\"formControl.value\" [customClasses]=\"textareaField.customClasses\" [wrapperClasses]=\"textareaField.wrapperClasses\"\n            [maxLength]=\"textareaField.maxLength\" [rows]=\"textareaField.rows\"\n            [displayCharactersCount]=\"textareaField.displayCharactersCount || false\" (valueChange)=\"setControlValue($event)\"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" (keydown.enter)=\"onInputEnter()\">\n        </upd-textarea>\n    }\n    @case (DynamicFieldType.FileUpload) {\n        <upd-file-upload [name]=\"field().name\" [label]=\"field().label\" [hint]=\"field().hint\" [isDisabled]=\"field().isDisabled || false\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\" [fileName]=\"fileNameControl?.value\"\n            [validationStatusDescriptions]=\"validationStatusDescriptions\" [allowFilesDrop]=\"fileUploadField.allowFilesDrop || false\"\n            [title]=\"fileUploadField.title\" [labelColSize]=\"field().labelColSize\" [minFileSize]=\"fileUploadField.minFileSize\"\n            [isMultiple]=\"fileUploadField.isMultiple || false\" [allowedExtensions]=\"fileUploadField.allowedExtensions || '*'\"\n            [maxFileSize]=\"fileUploadField.maxFileSize\" [layout]=\"layout()\" (fileChanged)=\"handleFileSelected($event)\" (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"></upd-file-upload>\n    }\n    @case (DynamicFieldType.MaskedInput) {\n        <upd-input [name]=\"field().name\" [label]=\"field().label\" [placeholder]=\"field().placeholder\" [hint]=\"field().hint\"\n            [hintAsTooltip]=\"field().hintAsTooltip || false\" [validationStatus]=\"validationStatus\" [mask]=\"maskedField.mask\"\n            [maskConfig]=\"maskedField.maskConfig\" [validationStatusDescriptions]=\"validationStatusDescriptions\" [layout]=\"layout()\"\n            [isDisabled]=\"field().isDisabled || false\" [type]=\"inputField.inputType || 'text'\" [labelColSize]=\"field().labelColSize\"\n            [value]=\"formControl.value\" (valueChange)=\"setControlValue($event)\" (blurred)=\"onBlur()\" (keyUpEnter)=\"onInputEnter()\"\n            (focus)=\"onFocus()\" (input)=\"onInput($event)\">\n            @if (!!inputField.prefix) {\n                <ng-template updInputPrepend>\n                    {{ textService.getText(inputField.prefix) }}\n                </ng-template>\n            }\n\n            @if (!!inputField.suffix) {\n                <ng-template updInputAppend>\n                    {{ textService.getText(inputField.suffix) }}\n                </ng-template>\n            }\n        </upd-input>\n    }\n    @case (DynamicFieldType.Button) {\n        <upd-button [text]=\"field().label\" [isDisabled]=\"field().isDisabled || false\" [model]=\"buttonField.model\" />\n    }\n    @case (DynamicFieldType.ButtonGroup) {\n        @if (!!field().label) {\n            <label class=\"form-label\">{{ getText(field().label) }}</label>\n        }\n\n        <div class=\"btn-group\" role=\"group\">\n            @for (btn of buttonGroupField.buttons; track btn) {\n                <upd-button [model]=\"btn\" [isDisabled]=\"field().isDisabled || false\" />\n            }\n        </div>\n    }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], submitForm: [{
+                type: Output
+            }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }] } });
+
+class FormComponent extends BaseComponent {
+    get titleText() {
+        return this.textService.getText(this.title());
+    }
+    constructor() {
+        super();
+        this.initialized = new EventEmitter();
+        this.dataLoaded = new EventEmitter(); // TODO: implementar
+        this.submitted = new EventEmitter();
+        /**
+         * Rows to generate the form.
+         */
+        this.rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+        /**
+         * Form's layout.
+         */
+        this.layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Title of the form.
+         * Optional.
+         */
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        /**
+         * Whether the actions section will be displayed.
+         */
+        this.hasActionsSection = input(true, ...(ngDevMode ? [{ debugName: "hasActionsSection" }] : []));
+        /**
+         * Whether the form is contained in a card.
+         * If true, it'll display a card as a form wrapper.
+         */
+        this.isCard = input(false, ...(ngDevMode ? [{ debugName: "isCard" }] : []));
+        /**
+         * Whether the form is in read only mode, which means no fields can be edited.
+         */
+        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}), transform: (val) => typeof val === 'string' ? val === '' : val });
+        /**
+         * Whether the form is loading.
+         */
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : [])); // TODO: implementar
+        /**
+         * Whether the form is saving.
+         */
+        this.isSaving = input(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : [])); // TODO: implementar
+        /**
+         * Current form data.
+         */
+        this.formData = model({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
+        this.formGroup = model(new FormGroup({}), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.textService = inject(TextService);
+        effect(() => {
+            this.rows();
+            this.setupFormGroup();
+        });
+    }
+    ngOnInit() {
+        this.setupFormGroup();
+        this.initialized.emit();
+        const valueChangesSub = this.formGroup().valueChanges.subscribe(() => this.formData.set(this.formGroup().getRawValue()));
+        this.addSubscriptions(valueChangesSub);
+    }
+    submit() {
+        this.formGroup().markAllAsTouched();
+        this.formGroup().updateValueAndValidity();
+        Object.values(this.formGroup().controls).forEach(control => control.updateValueAndValidity());
+        if (this.formGroup().valid) {
+            this.submitted.emit(this.formGroup().value);
+        }
+    }
+    setupFormGroup() {
+        const allFields = this.rows().map(r => r.fields).reduce((acc, fields) => acc.concat(fields), []);
+        allFields.forEach(field => {
+            const validators = field.validators || [];
+            if (field.isRequired && !validators.includes(Validators.required)) {
+                validators.push(Validators.required);
+            }
+            // TODO: handle extra cases, when ready. DateRange, DateTimeRange, TimeRange, etc.
+            switch (field.type) {
+                case DynamicFieldType.FileUpload:
+                    this.formGroup().addControl(field.name, new FormControl({
+                        value: field.initValue,
+                        disabled: field.isDisabled || this.isDisabled()
+                    }, { validators: validators }));
+                    const fileNameFormProp = field.fileNameFormProperty;
+                    if (!!fileNameFormProp) {
+                        this.formGroup().addControl(fileNameFormProp, new FormControl({
+                            value: field.initValue,
+                            disabled: field.isDisabled || this.isDisabled()
+                        }, { validators: validators }));
+                    }
+                    break;
+                // Buttons don't generate values, so they don't need to have a control.
+                case DynamicFieldType.Button:
+                case DynamicFieldType.ButtonGroup:
+                    break;
+                default:
+                    this.formGroup().addControl(field.name, new FormControl({
+                        value: field.initValue,
+                        disabled: field.isDisabled || this.isDisabled()
+                    }, { validators: validators, updateOn: field.updateOn || 'blur' }));
+            }
+        });
+        this.bindAttachments(allFields);
+    }
+    /**
+     * Glue the declarative AttachmentRule array to actual FormControls.
+     **/
+    bindAttachments(fields) {
+        fields.forEach(childField => {
+            if (!childField.attachments?.length) {
+                return;
+            }
+            const childCtrl = this.formGroup().get(childField.name);
+            childField.attachments.forEach((rule) => {
+                const parentCtrl = this.formGroup().get(rule.name);
+                if (!parentCtrl) {
+                    console.warn(`[FormComponent] attachment parent '${rule.name}' not found`);
+                    return;
+                }
+                const sub = parentCtrl.valueChanges
+                    .pipe(startWith(parentCtrl.value))
+                    .subscribe(parentVal => {
+                    const childVal = childCtrl.value;
+                    let shouldDisable = false;
+                    if (rule.type === AttachmentTypeEnum.ParentLoad || rule.disableIfEmpty) {
+                        shouldDisable = parentVal === null || parentVal === undefined || parentVal === '';
+                    }
+                    if (!!rule.disableIf) {
+                        shouldDisable = rule.disableIf(childVal, parentVal);
+                    }
+                    if (shouldDisable) {
+                        if (rule.clearValueIfDisabled && childCtrl.enabled) {
+                            childCtrl.setValue(null, { emitEvent: false });
+                        }
+                        childField.parentValue = undefined;
+                        childCtrl.disable({ emitEvent: false });
+                    }
+                    else {
+                        childField.parentValue = parentVal;
+                        if (childCtrl.disabled) {
+                            childCtrl.enable({ emitEvent: false });
+                        }
+                        if (rule.clearValueIfEmpty && !parentVal) {
+                            childCtrl.setValue(null, { emitEvent: false });
+                        }
+                    }
+                    if (rule.visibleIf) {
+                        const visible = rule.visibleIf(childVal, parentVal);
+                        childField.isHidden = !visible;
+                    }
+                });
+                this.addSubscriptions(sub);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FormComponent, isStandalone: false, selector: "upd-form", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSection: { classPropertyName: "hasActionsSection", publicName: "hasActionsSection", isSignal: true, isRequired: false, transformFunction: null }, isCard: { classPropertyName: "isCard", publicName: "isCard", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isSaving: { classPropertyName: "isSaving", publicName: "isSaving", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialized: "initialized", dataLoaded: "dataLoaded", submitted: "submitted", formData: "formDataChange", formGroup: "formGroupChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Form'\">\n    <div [class.card]=\"isCard()\">\n        @if (!!titleText) {\n            <div [class.card-header]=\"isCard()\">\n                <h3 [class.card-title]=\"isCard()\">{{ titleText }}</h3>\n            </div>\n        }\n        <div [class.card-body]=\"isCard()\">\n            @for (row of rows(); track row; let isFirst = $first) {\n                <div class=\"row\" [class.mt-4]=\"!isFirst\">\n                    @if (!!row.title) {\n                        <div class=\"card-title col-12\">{{ textService.getText(row.title) }}</div>\n                    }\n\n                    @for (field of row.fields; track field.name) {\n                        @if (!field.isHidden) {\n                            <upd-dynamic-field [layout]=\"layout()\" [field]=\"field\" [formGroup]=\"formGroup()\" (submitForm)=\"submit()\">\n                            </upd-dynamic-field>\n                        }\n                    }\n                </div>\n            }\n        </div>\n\n        @if (hasActionsSection()) {\n            <div [class.card-footer]=\"isCard()\" [class.mt-4]=\"!isCard()\">\n                <upd-button colorStyle=\"primary\" (clicked)=\"submit()\">\n                    {{ t('Submit') }}\n                </upd-button>\n            </div>\n        }\n    </div>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i1$2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicFieldComponent, selector: "upd-dynamic-field", inputs: ["formGroup", "field", "layout"], outputs: ["submitForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'upd-form', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Form'\">\n    <div [class.card]=\"isCard()\">\n        @if (!!titleText) {\n            <div [class.card-header]=\"isCard()\">\n                <h3 [class.card-title]=\"isCard()\">{{ titleText }}</h3>\n            </div>\n        }\n        <div [class.card-body]=\"isCard()\">\n            @for (row of rows(); track row; let isFirst = $first) {\n                <div class=\"row\" [class.mt-4]=\"!isFirst\">\n                    @if (!!row.title) {\n                        <div class=\"card-title col-12\">{{ textService.getText(row.title) }}</div>\n                    }\n\n                    @for (field of row.fields; track field.name) {\n                        @if (!field.isHidden) {\n                            <upd-dynamic-field [layout]=\"layout()\" [field]=\"field\" [formGroup]=\"formGroup()\" (submitForm)=\"submit()\">\n                            </upd-dynamic-field>\n                        }\n                    }\n                </div>\n            }\n        </div>\n\n        @if (hasActionsSection()) {\n            <div [class.card-footer]=\"isCard()\" [class.mt-4]=\"!isCard()\">\n                <upd-button colorStyle=\"primary\" (clicked)=\"submit()\">\n                    {{ t('Submit') }}\n                </upd-button>\n            </div>\n        }\n    </div>\n</ng-container>" }]
+        }], ctorParameters: () => [], propDecorators: { initialized: [{
+                type: Output
+            }], dataLoaded: [{
+                type: Output
+            }], submitted: [{
+                type: Output
+            }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hasActionsSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSection", required: false }] }], isCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCard", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaving", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }, { type: i0.Output, args: ["formDataChange"] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }, { type: i0.Output, args: ["formGroupChange"] }] } });
+
+var UpDevs$1 = {
+	Form: {
+		Submit: "Submit",
+		ErrorMessages: {
+			Generic: "Error",
+			Email: "Invalid email",
+			Max: "Value should not be greater than {{value}}",
+			Min: "Value should not be lower than {{value}}",
+			MaxLength: "Maximum length: {{value}}",
+			MinLength: "Minimum length: {{value}}",
+			Required: "Required field",
+			RequiredTrue: "This field must be selected"
+		}
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	Form: {
+		Submit: "Enviar",
+		ErrorMessages: {
+			Generic: "Erro",
+			Email: "E-mail inválido",
+			Max: "O valor não pode ser maior do que {{value}}",
+			Min: "O valor não pode ser menor do que {{value}}",
+			MaxLength: "Tamanho máximo permitido: {{value}}",
+			MinLength: "Tamanho mínimo permitido: {{value}}",
+			Required: "Campo obrigatório",
+			RequiredTrue: "Este campo deve ser selecionado"
+		}
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+class UpdFormModule {
+    constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
+        translocoService.setTranslation(en$1, 'en');
+        translocoService.setTranslation(pt$1, 'pt');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, declarations: [FormComponent,
+            DynamicFieldComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            UpdButtonModule,
+            TranslocoDirective,
+            UpdInputModule,
+            UpdCheckboxModule,
+            UpdRadioModule,
+            UpdDatePickerModule,
+            UpdSelectModule,
+            UpdTextareaModule,
+            UpdFileUploadModule,
+            UpdSdkModule], exports: [FormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, providers: [
+            ErrorsHelper
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            UpdButtonModule,
+            UpdInputModule,
+            UpdCheckboxModule,
+            UpdRadioModule,
+            UpdDatePickerModule,
+            UpdSelectModule,
+            UpdTextareaModule,
+            UpdFileUploadModule,
+            UpdSdkModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        UpdButtonModule,
+                        TranslocoDirective,
+                        UpdInputModule,
+                        UpdCheckboxModule,
+                        UpdRadioModule,
+                        UpdDatePickerModule,
+                        UpdSelectModule,
+                        UpdTextareaModule,
+                        UpdFileUploadModule,
+                        UpdSdkModule
+                    ],
+                    declarations: [
+                        FormComponent,
+                        DynamicFieldComponent
+                    ],
+                    exports: [
+                        FormComponent
+                    ],
+                    providers: [
+                        ErrorsHelper
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AttachmentTypeEnum, DynamicFieldType, FormComponent, UpdFormModule };
+//# sourceMappingURL=updevs-components-form.mjs.map