@updevs/components 1.0.0-alpha.98 → 1.0.0-beta.1

package/fesm2022/updevs-components-form-controls-time-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-form-controls-time-picker.mjs","sources":["../../../../libs/components/form-controls/time-picker/src/time-selector/time-selector.component.ts","../../../../libs/components/form-controls/time-picker/src/time-selector/time-selector.component.html","../../../../libs/components/form-controls/time-picker/src/time-picker.component.ts","../../../../libs/components/form-controls/time-picker/src/time-picker.component.html","../../../../libs/components/form-controls/time-picker/src/upd-time-picker.module.ts","../../../../libs/components/form-controls/time-picker/src/updevs-components-form-controls-time-picker.ts"],"sourcesContent":["import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';\n\n@Component({\n    selector: 'upd-time-selector',\n    templateUrl: './time-selector.component.html',\n    styleUrls: ['./time-selector.component.scss']\n})\nexport class TimeSelectorComponent implements OnInit, OnChanges {\n    /**\n     * Whether seconds should be selectable.\n     */\n    @Input() shouldSelectSeconds = false;\n    /**\n     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)\n     */\n    @Input() shouldUse24hFormat = true;\n    /**\n     * Hour from which where the list will begin.\n     */\n    @Input() startingHour = 0;\n    /**\n     * Hour from which where the list will end.\n     */\n    @Input() endingHour = 23;\n    /**\n     * Interval between hours displayed.\n     */\n    @Input() hourInterval = 1;\n    /**\n     * Minute from which where the list will begin.\n     */\n    @Input() startingMinute = 0;\n    /**\n     * Minute from which where the list will end.\n     */\n    @Input() endingMinute = 59;\n    /**\n     * Interval between minutes displayed.\n     */\n    @Input() minuteInterval = 5;\n    /**\n     * Second from which where the list will begin.\n     */\n    @Input() startingSecond = 0;\n    /**\n     * Second from which where the list will end.\n     */\n    @Input() endingSecond = 59;\n    /**\n     * Interval between seconds displayed.\n     */\n    @Input() secondInterval = 10;\n    /**\n     * Custom list of hours to be displayed for selection.\n     */\n    @Input() customHours?: number[];\n    /**\n     * Custom list of minutes to be displayed for selection.\n     */\n    @Input() customMinutes?: number[];\n    /**\n     * Custom list of seconds to be displayed for selection.\n     */\n    @Input() customSeconds?: number[];\n\n    hoursList: number[] = [];\n    minutesList: number[] = [];\n    secondsList: number[] = [];\n\n    ngOnInit(): void {\n        this.setupTimeLists();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setupTimeLists();\n    }\n\n    private setupTimeLists(): void {\n        this.hoursList = [];\n        this.minutesList = [];\n        this.secondsList = [];\n\n        if (!!this.customHours) {\n            this.hoursList = this.customHours;\n        } else {\n            this.setupTimeList(this.hoursList, this.startingHour, this.endingHour, this.hourInterval);\n        }\n\n        if (!!this.customMinutes) {\n            this.minutesList = this.customMinutes;\n        } else {\n            this.setupTimeList(this.minutesList, this.startingMinute, this.endingMinute, this.minuteInterval);\n        }\n\n        if (!!this.customSeconds) {\n            this.secondsList = this.customSeconds;\n        } else {\n            this.setupTimeList(this.secondsList, this.startingSecond, this.endingSecond, this.secondInterval);\n        }\n    }\n\n    private setupTimeList(list: number[], start: number, end: number, interval: number): void {\n        for (let i = start; i <= end; i += interval) {\n            list.push(i);\n        }\n    }\n}\n","<div class=\"d-flex\">\n    <div class=\"time-items-list\">\n        <ul class=\"list\">\n            @for (h of hoursList; track h) {\n                <li>\n                    <div class=\"cell\">{{ h.toString().padStart(2, '0') }}</div>\n                </li>\n            }\n        </ul>\n    </div>\n    <div class=\"time-dots-separator\">\n        <span>:</span>\n    </div>\n    <div class=\"time-items-list\">\n        <ul class=\"list\">\n            @for (m of minutesList; track m) {\n                <li>\n                    <div class=\"cell\">{{ m.toString().padStart(2, '0') }}</div>\n                </li>\n            }\n        </ul>\n    </div>\n    @if (shouldSelectSeconds) {\n        <div class=\"time-dots-separator\">\n            <span>:</span>\n        </div>\n        <div class=\"time-items-list\">\n            <ul class=\"list\">\n                @for (s of secondsList; track s) {\n                    <li>\n                        <div class=\"cell\">{{ s.toString().padStart(2, '0') }}</div>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (!shouldUse24hFormat) {\n        <div class=\"time-items-list\">\n            <ul class=\"list\">\n                <li>\n                    <div class=\"cell\">{{ 'AM' | transloco }}</div>\n                    <div class=\"cell\">{{ 'PM' | transloco }}</div>\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n<div>\n    <upd-button>{{ 'Select' | transloco }}</upd-button>\n</div>\n","import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';\n\n@Component({\n    selector: 'upd-time-picker',\n    templateUrl: './time-picker.component.html',\n    styleUrls: ['./time-picker.component.scss']\n})\nexport class TimePickerComponent implements OnInit, OnChanges {\n    @ViewChild('input', { read: ElementRef }) inputRef?: ElementRef;\n\n    /**\n     * Maximum height of the dropdown.\n     */\n    @Input() dropdownMaxHeight = 300;\n    /**\n     * Whether the mask should be shown.\n     */\n    @Input() showMask = true;\n    /**\n     * Whether seconds should be selectable.\n     */\n    @Input() shouldSelectSeconds = false;\n    /**\n     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)\n     */\n    @Input() shouldUse24hFormat = true;\n    /**\n     * Hour from which where the list will begin.\n     */\n    @Input() startingHour = 0;\n    /**\n     * Hour from which where the list will end.\n     */\n    @Input() endingHour = 23;\n    /**\n     * Interval between hours displayed.\n     */\n    @Input() hourInterval = 1;\n    /**\n     * Minute from which where the list will begin.\n     */\n    @Input() startingMinute = 0;\n    /**\n     * Minute from which where the list will end.\n     */\n    @Input() endingMinute = 59;\n    /**\n     * Interval between minutes displayed.\n     */\n    @Input() minuteInterval = 5;\n    /**\n     * Second from which where the list will begin.\n     */\n    @Input() startingSecond = 0;\n    /**\n     * Second from which where the list will end.\n     */\n    @Input() endingSecond = 59;\n    /**\n     * Interval between seconds displayed.\n     */\n    @Input() secondInterval = 10;\n    /**\n     * Custom list of hours to be displayed for selection.\n     */\n    @Input() customHours?: number[];\n    /**\n     * Custom list of minutes to be displayed for selection.\n     */\n    @Input() customMinutes?: number[];\n    /**\n     * Custom list of seconds to be displayed for selection.\n     */\n    @Input() customSeconds?: number[];\n\n    maxWidth = 0;\n    isDropdownOpen = false;\n\n    get inputMask(): string {\n        return this.shouldSelectSeconds ? 'Hh:m0:s0' : 'Hh:m0';\n    }\n\n    ngOnInit(): void {\n        this.setupStyle();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setupStyle();\n    }\n\n    openDropdown(): void {\n        this.isDropdownOpen = true;\n    }\n\n    private setupStyle(): void {\n        let finalWidth = 195;\n\n        if (this.shouldSelectSeconds) {\n            finalWidth += 60 + 10;\n        }\n\n        if (!this.shouldUse24hFormat) {\n            finalWidth += 60;\n        }\n\n        this.maxWidth = finalWidth;\n\n        console.log('max w', this.maxWidth);\n    }\n}\n","<upd-input #input [mask]=\"inputMask\" [maskConfig]=\"{showMaskTyped:showMask}\" [isInputGroupFlat]=\"true\">\n    <ng-template updInputAppend>\n        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n            <upd-icon tablerIcon=\"calendar-time\"></upd-icon>\n        </upd-button>\n    </ng-template>\n</upd-input>\n<upd-dropdown [isOpen]=\"isDropdownOpen\" [dropdownReference]=\"inputRef\" [maxHeight]=\"dropdownMaxHeight\" [maxWidth]=\"maxWidth\"\n    wrapperClasses=\"overflow-x-hidden\">\n    <div class=\"time-options-wrapper\" [style.max-width.px]=\"maxWidth\">\n        <upd-time-selector [shouldSelectSeconds]=\"shouldSelectSeconds\" [shouldUse24hFormat]=\"shouldUse24hFormat\"\n            [startingHour]=\"startingHour\" [endingHour]=\"endingHour\" [hourInterval]=\"hourInterval\"\n            [startingMinute]=\"startingMinute\" [endingMinute]=\"endingMinute\" [minuteInterval]=\"minuteInterval\"\n            [startingSecond]=\"startingSecond\" [endingSecond]=\"endingSecond\" [secondInterval]=\"secondInterval\"\n            [customHours]=\"customHours\" [customMinutes]=\"customMinutes\" [customSeconds]=\"customSeconds\"></upd-time-selector>\n    </div>\n</upd-dropdown>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@jsverse/transloco';\nimport { UpdInputModule } from '@updevs/components/form-controls/input';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdListModule } from '@updevs/components/list';\nimport { UpdDropdownModule } from '@updevs/components/dropdown';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { TimePickerComponent } from './time-picker.component';\nimport { TimeSelectorComponent } from './time-selector/time-selector.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TranslocoModule,\n        UpdInputModule,\n        UpdIconsModule,\n        UpdButtonModule,\n        UpdListModule,\n        UpdDropdownModule\n    ],\n    declarations: [\n        TimePickerComponent,\n        TimeSelectorComponent\n    ],\n    exports: [\n        TimePickerComponent,\n        TimeSelectorComponent\n    ]\n})\nexport class UpdTimePickerModule {\n    constructor(translocoService: TranslocoService) {\n        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n        translocoService.setTranslation(en, 'en');\n        translocoService.setTranslation(pt, 'pt');\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i1","i3","i5.TimeSelectorComponent","en","pt"],"mappings":"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"}
+{"version":3,"file":"updevs-components-form-controls-time-picker.mjs","sources":["../../../../libs/components/form-controls/time-picker/src/time-selector/time-selector.component.ts","../../../../libs/components/form-controls/time-picker/src/time-selector/time-selector.component.html","../../../../libs/components/form-controls/time-picker/src/time-picker.component.ts","../../../../libs/components/form-controls/time-picker/src/time-picker.component.html","../../../../libs/components/form-controls/time-picker/src/upd-time-picker.module.ts","../../../../libs/components/form-controls/time-picker/src/updevs-components-form-controls-time-picker.ts"],"sourcesContent":["import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';\n\n@Component({\n    standalone: false,\n    selector: 'upd-time-selector',\n    templateUrl: './time-selector.component.html',\n    styleUrls: ['./time-selector.component.scss']\n})\nexport class TimeSelectorComponent implements OnInit, OnChanges {\n    /**\n     * Whether seconds should be selectable.\n     */\n    @Input() shouldSelectSeconds = false;\n    /**\n     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)\n     */\n    @Input() shouldUse24hFormat = true;\n    /**\n     * Hour from which where the list will begin.\n     */\n    @Input() startingHour = 0;\n    /**\n     * Hour from which where the list will end.\n     */\n    @Input() endingHour = 23;\n    /**\n     * Interval between hours displayed.\n     */\n    @Input() hourInterval = 1;\n    /**\n     * Minute from which where the list will begin.\n     */\n    @Input() startingMinute = 0;\n    /**\n     * Minute from which where the list will end.\n     */\n    @Input() endingMinute = 59;\n    /**\n     * Interval between minutes displayed.\n     */\n    @Input() minuteInterval = 5;\n    /**\n     * Second from which where the list will begin.\n     */\n    @Input() startingSecond = 0;\n    /**\n     * Second from which where the list will end.\n     */\n    @Input() endingSecond = 59;\n    /**\n     * Interval between seconds displayed.\n     */\n    @Input() secondInterval = 10;\n    /**\n     * Custom list of hours to be displayed for selection.\n     */\n    @Input() customHours?: number[];\n    /**\n     * Custom list of minutes to be displayed for selection.\n     */\n    @Input() customMinutes?: number[];\n    /**\n     * Custom list of seconds to be displayed for selection.\n     */\n    @Input() customSeconds?: number[];\n\n    hoursList: number[] = [];\n    minutesList: number[] = [];\n    secondsList: number[] = [];\n\n    ngOnInit(): void {\n        this.setupTimeLists();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setupTimeLists();\n    }\n\n    private setupTimeLists(): void {\n        this.hoursList = [];\n        this.minutesList = [];\n        this.secondsList = [];\n\n        if (!!this.customHours) {\n            this.hoursList = this.customHours;\n        } else {\n            this.setupTimeList(this.hoursList, this.startingHour, this.endingHour, this.hourInterval);\n        }\n\n        if (!!this.customMinutes) {\n            this.minutesList = this.customMinutes;\n        } else {\n            this.setupTimeList(this.minutesList, this.startingMinute, this.endingMinute, this.minuteInterval);\n        }\n\n        if (!!this.customSeconds) {\n            this.secondsList = this.customSeconds;\n        } else {\n            this.setupTimeList(this.secondsList, this.startingSecond, this.endingSecond, this.secondInterval);\n        }\n    }\n\n    private setupTimeList(list: number[], start: number, end: number, interval: number): void {\n        for (let i = start; i <= end; i += interval) {\n            list.push(i);\n        }\n    }\n}\n","<div class=\"d-flex\">\n    <div class=\"time-items-list\">\n        <ul class=\"list\">\n            @for (h of hoursList; track h) {\n                <li>\n                    <div class=\"cell\">{{ h.toString().padStart(2, '0') }}</div>\n                </li>\n            }\n        </ul>\n    </div>\n    <div class=\"time-dots-separator\">\n        <span>:</span>\n    </div>\n    <div class=\"time-items-list\">\n        <ul class=\"list\">\n            @for (m of minutesList; track m) {\n                <li>\n                    <div class=\"cell\">{{ m.toString().padStart(2, '0') }}</div>\n                </li>\n            }\n        </ul>\n    </div>\n    @if (shouldSelectSeconds) {\n        <div class=\"time-dots-separator\">\n            <span>:</span>\n        </div>\n        <div class=\"time-items-list\">\n            <ul class=\"list\">\n                @for (s of secondsList; track s) {\n                    <li>\n                        <div class=\"cell\">{{ s.toString().padStart(2, '0') }}</div>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (!shouldUse24hFormat) {\n        <div class=\"time-items-list\">\n            <ul class=\"list\">\n                <li>\n                    <div class=\"cell\">{{ 'AM' | transloco }}</div>\n                    <div class=\"cell\">{{ 'PM' | transloco }}</div>\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n<div>\n    <upd-button>{{ 'Select' | transloco }}</upd-button>\n</div>\n","import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';\n\n@Component({\n    standalone: false,\n    selector: 'upd-time-picker',\n    templateUrl: './time-picker.component.html',\n    styleUrls: ['./time-picker.component.scss']\n})\nexport class TimePickerComponent implements OnInit, OnChanges {\n    @ViewChild('input', { read: ElementRef }) inputRef?: ElementRef;\n\n    /**\n     * Maximum height of the dropdown.\n     */\n    @Input() dropdownMaxHeight = 300;\n    /**\n     * Whether the mask should be shown.\n     */\n    @Input() showMask = true;\n    /**\n     * Whether seconds should be selectable.\n     */\n    @Input() shouldSelectSeconds = false;\n    /**\n     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)\n     */\n    @Input() shouldUse24hFormat = true;\n    /**\n     * Hour from which where the list will begin.\n     */\n    @Input() startingHour = 0;\n    /**\n     * Hour from which where the list will end.\n     */\n    @Input() endingHour = 23;\n    /**\n     * Interval between hours displayed.\n     */\n    @Input() hourInterval = 1;\n    /**\n     * Minute from which where the list will begin.\n     */\n    @Input() startingMinute = 0;\n    /**\n     * Minute from which where the list will end.\n     */\n    @Input() endingMinute = 59;\n    /**\n     * Interval between minutes displayed.\n     */\n    @Input() minuteInterval = 5;\n    /**\n     * Second from which where the list will begin.\n     */\n    @Input() startingSecond = 0;\n    /**\n     * Second from which where the list will end.\n     */\n    @Input() endingSecond = 59;\n    /**\n     * Interval between seconds displayed.\n     */\n    @Input() secondInterval = 10;\n    /**\n     * Custom list of hours to be displayed for selection.\n     */\n    @Input() customHours?: number[];\n    /**\n     * Custom list of minutes to be displayed for selection.\n     */\n    @Input() customMinutes?: number[];\n    /**\n     * Custom list of seconds to be displayed for selection.\n     */\n    @Input() customSeconds?: number[];\n\n    maxWidth = 0;\n    isDropdownOpen = false;\n\n    get inputMask(): string {\n        return this.shouldSelectSeconds ? 'Hh:m0:s0' : 'Hh:m0';\n    }\n\n    ngOnInit(): void {\n        this.setupStyle();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setupStyle();\n    }\n\n    openDropdown(): void {\n        this.isDropdownOpen = true;\n    }\n\n    private setupStyle(): void {\n        let finalWidth = 195;\n\n        if (this.shouldSelectSeconds) {\n            finalWidth += 60 + 10;\n        }\n\n        if (!this.shouldUse24hFormat) {\n            finalWidth += 60;\n        }\n\n        this.maxWidth = finalWidth;\n\n        console.log('max w', this.maxWidth);\n    }\n}\n","<upd-input #input [mask]=\"inputMask\" [maskConfig]=\"{showMaskTyped:showMask}\" [isInputGroupFlat]=\"true\">\n    <ng-template updInputAppend>\n        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n            <upd-icon tablerIcon=\"calendar-time\"></upd-icon>\n        </upd-button>\n    </ng-template>\n</upd-input>\n<upd-dropdown [isOpen]=\"isDropdownOpen\" [dropdownReference]=\"inputRef\" [maxHeight]=\"dropdownMaxHeight\" [maxWidth]=\"maxWidth\"\n    wrapperClasses=\"overflow-x-hidden\">\n    <div class=\"time-options-wrapper\" [style.max-width.px]=\"maxWidth\">\n        <upd-time-selector [shouldSelectSeconds]=\"shouldSelectSeconds\" [shouldUse24hFormat]=\"shouldUse24hFormat\"\n            [startingHour]=\"startingHour\" [endingHour]=\"endingHour\" [hourInterval]=\"hourInterval\"\n            [startingMinute]=\"startingMinute\" [endingMinute]=\"endingMinute\" [minuteInterval]=\"minuteInterval\"\n            [startingSecond]=\"startingSecond\" [endingSecond]=\"endingSecond\" [secondInterval]=\"secondInterval\"\n            [customHours]=\"customHours\" [customMinutes]=\"customMinutes\" [customSeconds]=\"customSeconds\"></upd-time-selector>\n    </div>\n</upd-dropdown>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@jsverse/transloco';\nimport { UpdInputModule } from '@updevs/components/form-controls/input';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdListModule } from '@updevs/components/list';\nimport { UpdDropdownModule } from '@updevs/components/dropdown';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { TimePickerComponent } from './time-picker.component';\nimport { TimeSelectorComponent } from './time-selector/time-selector.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TranslocoModule,\n        UpdInputModule,\n        UpdIconsModule,\n        UpdButtonModule,\n        UpdListModule,\n        UpdDropdownModule\n    ],\n    declarations: [\n        TimePickerComponent,\n        TimeSelectorComponent\n    ],\n    exports: [\n        TimePickerComponent,\n        TimeSelectorComponent\n    ]\n})\nexport class UpdTimePickerModule {\n    constructor(translocoService: TranslocoService) {\n        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n        translocoService.setTranslation(en, 'en');\n        translocoService.setTranslation(pt, 'pt');\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i1","i3","i5.TimeSelectorComponent","en","pt"],"mappings":"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"}

package/fesm2022/updevs-components-form.mjs

@@ -101,10 +101,10 @@ class ErrorsHelper {
         }
         return errorMessages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ErrorsHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ErrorsHelper }); }
+    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: "18.1.0", ngImport: i0, type: ErrorsHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ErrorsHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -167,16 +167,16 @@ class DynamicFieldComponent extends BaseComponent {
         this.submitForm = new EventEmitter();
         this.DynamicFieldType = DynamicFieldType;
         this.SelectDefaults = Defaults;
-        this.formGroup = input.required();
-        this.field = input.required();
-        this.layout = input.required();
+        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;
@@ -259,18 +259,18 @@ class DynamicFieldComponent extends BaseComponent {
             this.validationStatus = this.field().showValidStatus && this.formControl?.touched ? 'valid' : undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DynamicFieldComponent, 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"] }] }); }
+    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: "18.1.0", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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" }]
+            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() {
@@ -284,42 +284,42 @@ class FormComponent extends BaseComponent {
         /**
          * Rows to generate the form.
          */
-        this.rows = input.required();
+        this.rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
         /**
          * Form's layout.
          */
-        this.layout = input('vertical');
+        this.layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
         /**
          * Title of the form.
          * Optional.
          */
-        this.title = input(undefined);
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
         /**
          * Whether the actions section will be displayed.
          */
-        this.hasActionsSection = input(true);
+        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);
+        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, { transform: (val) => typeof val === 'string' ? val === '' : val });
+        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}), transform: (val) => typeof val === 'string' ? val === '' : val });
         /**
          * Whether the form is loading.
          */
-        this.isLoading = input(false); // TODO: implementar
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : [])); // TODO: implementar
         /**
          * Whether the form is saving.
          */
-        this.isSaving = input(false); // TODO: implementar
+        this.isSaving = input(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : [])); // TODO: implementar
         /**
          * Current form data.
          */
-        this.formData = model({});
-        this.formGroup = model(new FormGroup({}));
+        this.formData = model({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
+        this.formGroup = model(new FormGroup({}), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
         this.textService = inject(TextService);
         effect(() => {
             this.rows();
@@ -426,19 +426,19 @@ class FormComponent extends BaseComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FormComponent, 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],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"] }] }); }
+    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: "18.1.0", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ 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>" }]
+            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: {
@@ -496,8 +496,8 @@ class UpdFormModule {
         translocoService.setTranslation(en$1, 'en');
         translocoService.setTranslation(pt$1, 'pt');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFormModule, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdFormModule, declarations: [FormComponent,
+    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,
@@ -510,7 +510,7 @@ class UpdFormModule {
             UpdTextareaModule,
             UpdFileUploadModule,
             UpdSdkModule], exports: [FormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFormModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, providers: [
             ErrorsHelper
         ], imports: [CommonModule,
             ReactiveFormsModule,
@@ -524,7 +524,7 @@ class UpdFormModule {
             UpdFileUploadModule,
             UpdSdkModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [