@ilhombek/base-form 0.0.1 → 0.0.3

package/fesm2022/ilhombek-base-form.mjs

@@ -1,33 +1,649 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component } from '@angular/core';
+import { forwardRef, input, output, ChangeDetectionStrategy, Component, computed, Injectable } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i1$1 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import { of, debounceTime } from 'rxjs';
+import * as i1$2 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i1$3 from 'primeng/password';
+import { PasswordModule } from 'primeng/password';
+import * as i1$4 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i1$5 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { ButtonModule } from 'primeng/button';
 
-class BaseFormService {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseFormService, providedIn: 'root' });
+const VALUE_ACCESSOR_PROVIDER$7 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TextInputComponent),
+    multi: true
+};
+class TextInputComponent {
+    label = input();
+    icon = input();
+    placeholder = input('');
+    onChangeEmit = output();
+    required = input();
+    value = '';
+    disabled = false;
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput(event) {
+        const value = event.target.value;
+        this.value = value;
+        this.onChange(value);
+        this.onChangeEmit.emit(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TextInputComponent, isStandalone: true, selector: "base-form-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$7], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\" [ngClass]=\"{'p-input-icon-left': icon()}\">\n     @if (icon()) {\n       <i class=\"pi pi-search\" [ngClass]=\"{'absolute top-[12px]': icon()}\"></i>\n     }\n    <input pInputText type=\"text\"\n           class=\"p-inputtext w-full\"\n           [ngClass]=\"{\n            '!pl-[40px]': icon(),\n            'ng-invalid ng-dirty': required() && !value,\n            }\"\n           [placeholder]=\"placeholder()\"\n           [disabled]=\"disabled\"\n           [value]=\"value\"\n           (input)=\"handleInput($event)\" />\n  </span>\n</div>\n", styles: [":host{display:block;flex:1 1 auto;min-width:0}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseFormService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-text-input', imports: [InputTextModule, CommonModule], providers: [VALUE_ACCESSOR_PROVIDER$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\" [ngClass]=\"{'p-input-icon-left': icon()}\">\n     @if (icon()) {\n       <i class=\"pi pi-search\" [ngClass]=\"{'absolute top-[12px]': icon()}\"></i>\n     }\n    <input pInputText type=\"text\"\n           class=\"p-inputtext w-full\"\n           [ngClass]=\"{\n            '!pl-[40px]': icon(),\n            'ng-invalid ng-dirty': required() && !value,\n            }\"\n           [placeholder]=\"placeholder()\"\n           [disabled]=\"disabled\"\n           [value]=\"value\"\n           (input)=\"handleInput($event)\" />\n  </span>\n</div>\n", styles: [":host{display:block;flex:1 1 auto;min-width:0}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"] }]
+        }] });
+
+var OptionTypeEnum;
+(function (OptionTypeEnum) {
+    OptionTypeEnum["EAGER"] = "eager";
+    OptionTypeEnum["ASYNC"] = "async";
+})(OptionTypeEnum || (OptionTypeEnum = {}));
+
+const VALUE_ACCESSOR_PROVIDER$6 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectInputComponent),
+    multi: true
+};
+class SelectInputComponent {
+    label = input();
+    options = input();
+    optionLabel = input('label');
+    optionValue = input('value');
+    normalizeValue = input();
+    placeholder = input('');
+    onChangeEmit = output();
+    required = input();
+    optionType = input(OptionTypeEnum.EAGER);
+    asyncOptionType = input();
+    loading = false;
+    //  private _asyncOptionService = inject(AsyncOptionsService)
+    //  private _messageService = inject(ToastService)
+    _options = [];
+    asyncOptionsPipe$ = computed(() => of([]));
+    value;
+    disabled = false;
+    // Callbacks
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        this.value = event.value;
+        const _normalizeValueFc = this.normalizeValue();
+        if (_normalizeValueFc instanceof Function) {
+            const normalizedValue = _normalizeValueFc(this.value);
+            this.onChange(normalizedValue);
+            this.onChangeEmit.emit(normalizedValue);
+        }
+        else {
+            this.onChange(this.value);
+            this.onChangeEmit.emit(this.value);
+        }
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SelectInputComponent, isStandalone: true, selector: "base-form-select-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, normalizeValue: { classPropertyName: "normalizeValue", publicName: "normalizeValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionType: { classPropertyName: "optionType", publicName: "optionType", isSignal: true, isRequired: false, transformFunction: null }, asyncOptionType: { classPropertyName: "asyncOptionType", publicName: "asyncOptionType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$6], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-select [options]=\"(asyncOptionsPipe$() | async) || []\"\n            [optionLabel]=\"optionLabel()\"\n            [optionValue]=\"optionValue()\"\n            [ngModel]=\"value\"\n            [loading]=\"loading\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"disabled\"\n            appendTo=\"body\"\n            (onChange)=\"handleChange($event)\"\n            [ngClass]=\"{'ng-invalid': required() && !value}\"\n  ></p-select>\n</div>\n", styles: [":host{display:block}.p-dropdown{border-radius:.5rem;border:1px solid #e5e7eb}.p-dropdown:not(.p-disabled):hover{border-color:#3b82f6}.p-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-select-input', imports: [SelectModule, FormsModule, CommonModule], providers: [VALUE_ACCESSOR_PROVIDER$6], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-select [options]=\"(asyncOptionsPipe$() | async) || []\"\n            [optionLabel]=\"optionLabel()\"\n            [optionValue]=\"optionValue()\"\n            [ngModel]=\"value\"\n            [loading]=\"loading\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"disabled\"\n            appendTo=\"body\"\n            (onChange)=\"handleChange($event)\"\n            [ngClass]=\"{'ng-invalid': required() && !value}\"\n  ></p-select>\n</div>\n", styles: [":host{display:block}.p-dropdown{border-radius:.5rem;border:1px solid #e5e7eb}.p-dropdown:not(.p-disabled):hover{border-color:#3b82f6}.p-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}\n"] }]
+        }] });
+
+const VALUE_ACCESSOR_PROVIDER$5 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatepickerComponent),
+    multi: true
+};
+class DatepickerComponent {
+    label = input();
+    onChangeEmit = output();
+    required = input();
+    view = input("date");
+    value;
+    disabled = false;
+    // Callbacks
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (this.view() === 'year') {
+            this.value = new Date(value, 0, 1);
+        }
+        else {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        const date = new Date(event);
+        const dates = [date.getDay(), date.getMonth(), date.getFullYear()];
+        const formatedValue = this.view() === 'year' ? dates[2] : this.view() === 'month' ? dates[1] : dates.join('-');
+        this.value = event;
+        this.onChange(formatedValue);
+        this.onChangeEmit.emit(this.value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DatepickerComponent, isStandalone: true, selector: "base-form-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$5], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-datepicker [iconDisplay]=\"'input'\"\n                [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n                [showIcon]=\"true\"\n                [view]=\"view()\"\n                [ngModel]=\"value\"\n                [dateFormat]=\"view() === 'year' ? 'yy' : view() === 'month' ? 'mm' : 'dd-mm-yy'\"\n                (onSelect)=\"handleChange($event)\"\n                appendTo=\"body\"\n                inputId=\"icondisplay\" />\n</div>\n\n", styles: [":host{display:block}::ng-deep .p-datepicker{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-datepicker', imports: [DatePickerModule, CommonModule, FormsModule], providers: [VALUE_ACCESSOR_PROVIDER$5], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-datepicker [iconDisplay]=\"'input'\"\n                [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n                [showIcon]=\"true\"\n                [view]=\"view()\"\n                [ngModel]=\"value\"\n                [dateFormat]=\"view() === 'year' ? 'yy' : view() === 'month' ? 'mm' : 'dd-mm-yy'\"\n                (onSelect)=\"handleChange($event)\"\n                appendTo=\"body\"\n                inputId=\"icondisplay\" />\n</div>\n\n", styles: [":host{display:block}::ng-deep .p-datepicker{width:100%}\n"] }]
+        }] });
+
+const VALUE_ACCESSOR_PROVIDER$4 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => PasswordInputComponent),
+    multi: true
+};
+class PasswordInputComponent {
+    label = input();
+    icon = input();
+    placeholder = input('');
+    onChangeEmit = output();
+    required = input();
+    value = '';
+    disabled = false;
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput(event) {
+        const value = event.target.value;
+        this.value = value;
+        this.onChange(value);
+        this.onChangeEmit.emit(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PasswordInputComponent, isStandalone: true, selector: "base-form-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$4], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\" [ngClass]=\"{'p-input-icon-left': icon()}\">\n    @if (icon()) {\n    <i class=\"pi pi-search\" [ngClass]=\"{'absolute top-[12px]': icon()}\"></i>\n    }\n    <p-password id=\"password\"\n                [feedback]=\"false\"\n                showClear=\"true\"\n                (input)=\"handleInput($event)\"\n                [ngClass]=\"{'!pl-[40px]': icon(), 'ng-invalid ng-dirty': required() && !value}\"\n                [placeholder]=\"placeholder()\"\n                [disabled]=\"disabled\"\n                class=\" w-full\" />\n   </span>\n</div>\n", styles: [":host{display:block;flex:1 1 auto;min-width:0}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i1$3.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-password-input', imports: [PasswordModule, CommonModule], providers: [VALUE_ACCESSOR_PROVIDER$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\" [ngClass]=\"{'p-input-icon-left': icon()}\">\n    @if (icon()) {\n    <i class=\"pi pi-search\" [ngClass]=\"{'absolute top-[12px]': icon()}\"></i>\n    }\n    <p-password id=\"password\"\n                [feedback]=\"false\"\n                showClear=\"true\"\n                (input)=\"handleInput($event)\"\n                [ngClass]=\"{'!pl-[40px]': icon(), 'ng-invalid ng-dirty': required() && !value}\"\n                [placeholder]=\"placeholder()\"\n                [disabled]=\"disabled\"\n                class=\" w-full\" />\n   </span>\n</div>\n", styles: [":host{display:block;flex:1 1 auto;min-width:0}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"] }]
+        }] });
+
+const VALUE_ACCESSOR_PROVIDER$3 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => NumberInputComponent),
+    multi: true
+};
+class NumberInputComponent {
+    label = input();
+    placeholder = input('');
+    min = input(0);
+    max = input();
+    required = input();
+    onChangeEmit = output();
+    value;
+    disabled = false;
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+        this.onChange(this.value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput({ value }) {
+        this.value = value;
+        this.onChange(value);
+        this.onChangeEmit.emit(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: NumberInputComponent, isStandalone: true, selector: "base-form-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$3], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n    <p-inputNumber [min]=\"min()\"\n                   [max]=\"max()\"\n                   [ngModel]=\"value\"\n                   [fluid]=\"true\"\n                   [placeholder]=\"placeholder()\"\n                   (onInput)=\"handleInput($event)\"\n                   [showButtons]=\"true\"\n                   class=\"p-inputnumber w-full\" [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\">\n    </p-inputNumber>\n</div>\n", styles: [":host{display:block}.p-inputnumber{border-radius:.5rem}::ng-deep .p-inputtext:enabled:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-number-input', imports: [InputNumberModule, CommonModule, FormsModule], providers: [VALUE_ACCESSOR_PROVIDER$3], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n    <p-inputNumber [min]=\"min()\"\n                   [max]=\"max()\"\n                   [ngModel]=\"value\"\n                   [fluid]=\"true\"\n                   [placeholder]=\"placeholder()\"\n                   (onInput)=\"handleInput($event)\"\n                   [showButtons]=\"true\"\n                   class=\"p-inputnumber w-full\" [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\">\n    </p-inputNumber>\n</div>\n", styles: [":host{display:block}.p-inputnumber{border-radius:.5rem}::ng-deep .p-inputtext:enabled:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}\n"] }]
+        }] });
+
+var QuestionTypeEnum;
+(function (QuestionTypeEnum) {
+    QuestionTypeEnum["TextInput"] = "textInput";
+    QuestionTypeEnum["SelectInput"] = "selectInput";
+    QuestionTypeEnum["DatePicker"] = "datePicker";
+    QuestionTypeEnum["TextArea"] = "textArea";
+    QuestionTypeEnum["TimePicker"] = "timePicker";
+    QuestionTypeEnum["MultiSelect"] = "multiSelect";
+})(QuestionTypeEnum || (QuestionTypeEnum = {}));
+var QuestionFieldTypeEnum;
+(function (QuestionFieldTypeEnum) {
+    QuestionFieldTypeEnum["Number"] = "number";
+    QuestionFieldTypeEnum["Email"] = "email";
+    QuestionFieldTypeEnum["Password"] = "password";
+})(QuestionFieldTypeEnum || (QuestionFieldTypeEnum = {}));
+
+const VALUE_ACCESSOR_PROVIDER$2 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TimePickerComponent),
+    multi: true
+};
+class TimePickerComponent {
+    label = input();
+    hourFormat = input('24');
+    onChangeEmit = output();
+    required = input();
+    value;
+    disabled = false;
+    // Callbacks
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (value) {
+            const [h, m] = value.split(":").map(Number);
+            this.value = new Date(1970, 0, 1, h, m);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        const date = new Date(event);
+        const dates = [date.getMinutes(), date.getHours()];
+        this.value = event;
+        this.onChange(`${dates[1]}:${dates[0]}`);
+        this.onChangeEmit.emit(this.value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TimePickerComponent, isStandalone: true, selector: "base-form-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$2], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-datepicker [iconDisplay]=\"'input'\"\n                [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n                [showIcon]=\"true\"\n                (onSelect)=\"handleChange($event)\"\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                [timeOnly]=\"true\"\n                [hourFormat]=\"hourFormat()\"\n                inputId=\"icondisplay\" />\n</div>\n\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-time-picker', imports: [DatePickerModule, CommonModule, FormsModule], providers: [VALUE_ACCESSOR_PROVIDER$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-datepicker [iconDisplay]=\"'input'\"\n                [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n                [showIcon]=\"true\"\n                (onSelect)=\"handleChange($event)\"\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                [timeOnly]=\"true\"\n                [hourFormat]=\"hourFormat()\"\n                inputId=\"icondisplay\" />\n</div>\n\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+const VALUE_ACCESSOR_PROVIDER$1 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TextareaInputComponent),
+    multi: true
+};
+class TextareaInputComponent {
+    label = input();
+    placeholder = input('');
+    required = input();
+    onChangeEmit = output();
+    value = '';
+    disabled = false;
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput(event) {
+        const value = event.target.value;
+        this.value = value;
+        this.onChange(value);
+        this.onChangeEmit.emit(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TextareaInputComponent, isStandalone: true, selector: "base-form-textarea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER$1], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\">\n    <textarea pInputTextarea rows=\"3\" class=\"p-inputtext w-full\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\"\n      [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n      [value]=\"value\" (input)=\"handleInput($event)\"></textarea>\n  </span>\n</div>\n", styles: [":host{display:block}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-textarea-input', imports: [CommonModule], providers: [VALUE_ACCESSOR_PROVIDER$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if(label()) {\n  <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <span class=\"w-full\">\n    <textarea pInputTextarea rows=\"3\" class=\"p-inputtext w-full\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\"\n      [ngClass]=\"{'ng-invalid ng-dirty': required() && !value}\"\n      [value]=\"value\" (input)=\"handleInput($event)\"></textarea>\n  </span>\n</div>\n", styles: [":host{display:block}.p-inputtext{border-radius:.5rem;border:1px solid #e5e7eb}.p-inputtext:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.p-input-icon-left>i:first-of-type{left:1rem}.p-input-icon-left{position:relative}\n"] }]
+        }] });
+
+const VALUE_ACCESSOR_PROVIDER = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MultiSelectComponent),
+    multi: true
+};
+class MultiSelectComponent {
+    label = input();
+    options = input.required();
+    optionLabel = input('label');
+    optionValue = input('value');
+    normalizeValue = input();
+    placeholder = input('');
+    onChangeEmit = output();
+    required = input();
+    optionType = input();
+    asyncOptionType = input();
+    value = [];
+    disabled = false;
+    loading = false;
+    // private _asyncOptionService = inject(AsyncOptionsService)
+    // private _messageService = inject(ToastService)
+    _options = [];
+    asyncOptionsPipe$ = computed(() => of([]));
+    // Callbacks
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value?.map((opt) => opt[this.optionValue()]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        this.value = event.value;
+        const _normalizeValueFc = this.normalizeValue();
+        if (_normalizeValueFc instanceof Function) {
+            const normalizedValue = _normalizeValueFc(this.value, this._options);
+            this.onChange(normalizedValue);
+            this.onChangeEmit.emit(normalizedValue);
+        }
+        else {
+            this.onChange(this.value);
+            this.onChangeEmit.emit(this.value);
+        }
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MultiSelectComponent, isStandalone: true, selector: "base-form-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, normalizeValue: { classPropertyName: "normalizeValue", publicName: "normalizeValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionType: { classPropertyName: "optionType", publicName: "optionType", isSignal: true, isRequired: false, transformFunction: null }, asyncOptionType: { classPropertyName: "asyncOptionType", publicName: "asyncOptionType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEmit: "onChangeEmit" }, providers: [VALUE_ACCESSOR_PROVIDER], ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-multiselect [options]=\"(asyncOptionsPipe$() | async) || []\"\n                 [optionLabel]=\"optionLabel()\"\n                 [optionValue]=\"optionValue()\"\n                 [placeholder]=\"placeholder()\"\n                 [ngModel]=\"value\"\n                 (onChange)=\"handleChange($event)\"\n                 [disabled]=\"disabled\"\n                 [loading]=\"loading\"\n                 appendTo=\"body\"\n                 [ngClass]=\"{'ng-invalid ng-dirty': required() && !value?.length}\"\n                 />\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i1$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-multi-select', imports: [MultiSelectModule, CommonModule, FormsModule], providers: [VALUE_ACCESSOR_PROVIDER], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1\">\n  @if (label()) {\n    <label class=\"text-sm font-medium text-gray-700\">{{ label() }}</label>\n  }\n  <p-multiselect [options]=\"(asyncOptionsPipe$() | async) || []\"\n                 [optionLabel]=\"optionLabel()\"\n                 [optionValue]=\"optionValue()\"\n                 [placeholder]=\"placeholder()\"\n                 [ngModel]=\"value\"\n                 (onChange)=\"handleChange($event)\"\n                 [disabled]=\"disabled\"\n                 [loading]=\"loading\"\n                 appendTo=\"body\"\n                 [ngClass]=\"{'ng-invalid ng-dirty': required() && !value?.length}\"\n                 />\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class DynamicFormFieldComponent {
+    question = input.required();
+    form = input.required();
+    QuestionTypeEnum = QuestionTypeEnum;
+    QuestionFieldTypeEnum = QuestionFieldTypeEnum;
+    OptionTypeEnum = OptionTypeEnum;
+    get isValid() {
+        return this.form().controls[this.question().key].valid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DynamicFormFieldComponent, isStandalone: true, selector: "base-form-dynamic-form-field", inputs: { question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <label class=\"text-sm font-medium text-gray-700\" [attr.for]=\"question().key\">\n    {{ question().label }} @if(question().required) {<span class=\"text-red-500\">*</span>}\n  </label>\n  <div>\n    @switch (question().controlType) {\n      @case (QuestionTypeEnum.TextInput) {\n         @if (question().type === QuestionFieldTypeEnum.Number) {\n          <base-form-number-input [formControlName]=\"question().key\"\n                                  [id]=\"question().key\"\n                                  [required]=\"question().required\"\n                                  [placeholder]=\"question().placeholder\"/>\n         } @else if(question().type === QuestionFieldTypeEnum.Password) {\n           <base-form-password-input [formControlName]=\"question().key\"\n                                  [id]=\"question().key\"\n                                  [required]=\"question().required\"\n                                  [placeholder]=\"question().placeholder\"\n           />\n         } @else {\n          <base-form-text-input [formControlName]=\"question().key\"\n                           [id]=\"question().key\"\n                           [required]=\"question().required\"\n                           [placeholder]=\"question().placeholder\"/>\n         }\n      }\n      @case (QuestionTypeEnum.SelectInput) {\n        <base-form-select-input [options]=\"$any(question()).options\"\n                             [formControlName]=\"question().key\"\n                             [required]=\"question().required\"\n                             [optionLabel]=\"$any(question()).optionLabel\"\n                             [optionValue]=\"$any(question()).optionValue\"\n                             [optionType]=\"$any(question()).optionType\"\n                             [asyncOptionType]=\"$any(question()).asyncOptionType\"\n                             [placeholder]=\"question().placeholder\"\n                             [normalizeValue]=\"$any(question()).normalizeValue\"\n                             />\n      }\n      @case (QuestionTypeEnum.MultiSelect) {\n        <base-form-multi-select [options]=\"$any(question()).options\"\n                             [formControlName]=\"question().key\"\n                             [optionLabel]=\"$any(question()).optionLabel\"\n                             [optionValue]=\"$any(question()).optionValue\"\n                             [normalizeValue]=\"$any(question()).normalizeValue\"\n                             [optionType]=\"$any(question()).optionType\"\n                             [asyncOptionType]=\"$any(question()).asyncOptionType\"\n                             [required]=\"question().required\"\n                             [placeholder]=\"question().placeholder\"/>\n      }\n      @case (QuestionTypeEnum.DatePicker) {\n        <base-form-datepicker [formControlName]=\"question().key\"\n                           [required]=\"question().required\"\n                           [view]=\"$any(question()).view\"\n                           />\n      }\n      @case (QuestionTypeEnum.TextArea) {\n        <base-form-textarea-input [formControlName]=\"question().key\"\n                               [required]=\"question().required\"/>\n      }\n      @case (QuestionTypeEnum.TimePicker) {\n        <base-form-time-picker [formControlName]=\"question().key\"\n                            [required]=\"question().required\"\n                            [hourFormat]=\"$any(question()).hourFormat\"\n                            />\n      }\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TextInputComponent, selector: "base-form-text-input", inputs: ["label", "icon", "placeholder", "required"], outputs: ["onChangeEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NumberInputComponent, selector: "base-form-number-input", inputs: ["label", "placeholder", "min", "max", "required"], outputs: ["onChangeEmit"] }, { kind: "component", type: DatepickerComponent, selector: "base-form-datepicker", inputs: ["label", "required", "view"], outputs: ["onChangeEmit"] }, { kind: "component", type: TimePickerComponent, selector: "base-form-time-picker", inputs: ["label", "hourFormat", "required"], outputs: ["onChangeEmit"] }, { kind: "component", type: SelectInputComponent, selector: "base-form-select-input", inputs: ["label", "options", "optionLabel", "optionValue", "normalizeValue", "placeholder", "required", "optionType", "asyncOptionType"], outputs: ["onChangeEmit"] }, { kind: "component", type: TextareaInputComponent, selector: "base-form-textarea-input", inputs: ["label", "placeholder", "required"], outputs: ["onChangeEmit"] }, { kind: "component", type: MultiSelectComponent, selector: "base-form-multi-select", inputs: ["label", "options", "optionLabel", "optionValue", "normalizeValue", "placeholder", "required", "optionType", "asyncOptionType"], outputs: ["onChangeEmit"] }, { kind: "component", type: PasswordInputComponent, selector: "base-form-password-input", inputs: ["label", "icon", "placeholder", "required"], outputs: ["onChangeEmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form-dynamic-form-field', imports: [
+                        TextInputComponent,
+                        ReactiveFormsModule,
+                        NumberInputComponent,
+                        DatepickerComponent,
+                        TimePickerComponent,
+                        SelectInputComponent,
+                        TextareaInputComponent,
+                        MultiSelectComponent,
+                        PasswordInputComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  <label class=\"text-sm font-medium text-gray-700\" [attr.for]=\"question().key\">\n    {{ question().label }} @if(question().required) {<span class=\"text-red-500\">*</span>}\n  </label>\n  <div>\n    @switch (question().controlType) {\n      @case (QuestionTypeEnum.TextInput) {\n         @if (question().type === QuestionFieldTypeEnum.Number) {\n          <base-form-number-input [formControlName]=\"question().key\"\n                                  [id]=\"question().key\"\n                                  [required]=\"question().required\"\n                                  [placeholder]=\"question().placeholder\"/>\n         } @else if(question().type === QuestionFieldTypeEnum.Password) {\n           <base-form-password-input [formControlName]=\"question().key\"\n                                  [id]=\"question().key\"\n                                  [required]=\"question().required\"\n                                  [placeholder]=\"question().placeholder\"\n           />\n         } @else {\n          <base-form-text-input [formControlName]=\"question().key\"\n                           [id]=\"question().key\"\n                           [required]=\"question().required\"\n                           [placeholder]=\"question().placeholder\"/>\n         }\n      }\n      @case (QuestionTypeEnum.SelectInput) {\n        <base-form-select-input [options]=\"$any(question()).options\"\n                             [formControlName]=\"question().key\"\n                             [required]=\"question().required\"\n                             [optionLabel]=\"$any(question()).optionLabel\"\n                             [optionValue]=\"$any(question()).optionValue\"\n                             [optionType]=\"$any(question()).optionType\"\n                             [asyncOptionType]=\"$any(question()).asyncOptionType\"\n                             [placeholder]=\"question().placeholder\"\n                             [normalizeValue]=\"$any(question()).normalizeValue\"\n                             />\n      }\n      @case (QuestionTypeEnum.MultiSelect) {\n        <base-form-multi-select [options]=\"$any(question()).options\"\n                             [formControlName]=\"question().key\"\n                             [optionLabel]=\"$any(question()).optionLabel\"\n                             [optionValue]=\"$any(question()).optionValue\"\n                             [normalizeValue]=\"$any(question()).normalizeValue\"\n                             [optionType]=\"$any(question()).optionType\"\n                             [asyncOptionType]=\"$any(question()).asyncOptionType\"\n                             [required]=\"question().required\"\n                             [placeholder]=\"question().placeholder\"/>\n      }\n      @case (QuestionTypeEnum.DatePicker) {\n        <base-form-datepicker [formControlName]=\"question().key\"\n                           [required]=\"question().required\"\n                           [view]=\"$any(question()).view\"\n                           />\n      }\n      @case (QuestionTypeEnum.TextArea) {\n        <base-form-textarea-input [formControlName]=\"question().key\"\n                               [required]=\"question().required\"/>\n      }\n      @case (QuestionTypeEnum.TimePicker) {\n        <base-form-time-picker [formControlName]=\"question().key\"\n                            [required]=\"question().required\"\n                            [hourFormat]=\"$any(question()).hourFormat\"\n                            />\n      }\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class DynamicFormComponent {
+    formContainer = input([]);
+    form = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DynamicFormComponent, isStandalone: true, selector: "school-dynamic-form", inputs: { formContainer: { classPropertyName: "formContainer", publicName: "formContainer", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <form [formGroup]="form()">
+      <div class="space-y-2 w-full">
+        @for (container of formContainer(); track container) {
+        <div class="grid gap-4 w-full" [ngStyle]="{'grid-template-columns': 'repeat(' + container.containers.length + ', minmax(0, 1fr))'}">
+          @for (question of container.containers; track question) {
+            <base-form-dynamic-form-field [question]="question" [form]="form()" />
+          }
+        </div>
+        }
+      </div>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "base-form-dynamic-form-field", inputs: ["question", "form"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: 'school-dynamic-form',
+                    imports: [
+                        ReactiveFormsModule,
+                        DynamicFormFieldComponent,
+                        ButtonModule,
+                        CommonModule,
+                    ],
+                    template: `
+    <form [formGroup]="form()">
+      <div class="space-y-2 w-full">
+        @for (container of formContainer(); track container) {
+        <div class="grid gap-4 w-full" [ngStyle]="{'grid-template-columns': 'repeat(' + container.containers.length + ', minmax(0, 1fr))'}">
+          @for (question of container.containers; track question) {
+            <base-form-dynamic-form-field [question]="question" [form]="form()" />
+          }
+        </div>
+        }
+      </div>
+    </form>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class BaseFormComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", ngImport: i0, template: `
-    <p>
-      base-form works!
-    </p>
-  `, isInline: true, styles: [""] });
+class QuestionBase {
+    value;
+    key;
+    label;
+    required;
+    order;
+    controlType;
+    type;
+    validators;
+    placeholder;
+    nonNullable;
+    onValueChange;
+    constructor(options) {
+        this.value = options.value;
+        this.key = options.key || '';
+        this.label = options.label || '';
+        this.required = !!options.required;
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = (options.controlType || '');
+        this.type = (options.type || '');
+        this.nonNullable = options.nonNullable || true;
+        this.validators = options.validators || [];
+        this.placeholder = options.placeholder || '';
+        this.onValueChange = options.onValueChange;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-base-form', imports: [], template: `
-    <p>
-      base-form works!
-    </p>
-  ` }]
+
+class QuestionDatePicker extends QuestionBase {
+    controlType = QuestionTypeEnum.DatePicker;
+    view;
+    constructor(options) {
+        super(options);
+        this.view = options.view || 'date';
+    }
+}
+
+class QuestionMultiSelect extends QuestionBase {
+    controlType = QuestionTypeEnum.MultiSelect;
+    loading;
+    optionLabel;
+    optionValue;
+    options;
+    optionType;
+    asyncOptionType;
+    normalizeValue;
+    constructor(options) {
+        super(options);
+        this.loading = options.loading || false;
+        this.optionLabel = options.optionLabel || 'label';
+        this.optionValue = options.optionValue || 'value';
+        this.options = options.options;
+        this.optionType = options.optionType || OptionTypeEnum.EAGER;
+        if (this.optionType === OptionTypeEnum.ASYNC) {
+            this.asyncOptionType = options.asyncOptionType;
+        }
+        this.normalizeValue = options.normalizeValue;
+    }
+}
+
+class QuestionPasswordInput extends QuestionBase {
+    controlType = QuestionTypeEnum.TextInput;
+}
+
+class QuestionSelectInput extends QuestionBase {
+    controlType = QuestionTypeEnum.SelectInput;
+    optionLabel;
+    optionValue;
+    options;
+    optionType;
+    asyncOptionType;
+    normalizeValue;
+    constructor(options) {
+        super(options);
+        this.optionLabel = options.optionLabel || 'label';
+        this.optionValue = options.optionValue || 'value';
+        this.options = options.options;
+        this.optionType = options.optionType || OptionTypeEnum.EAGER;
+        if (this.optionType === OptionTypeEnum.ASYNC) {
+            this.asyncOptionType = options.asyncOptionType;
+        }
+        this.normalizeValue = options.normalizeValue;
+    }
+}
+
+class QuestionTextInput extends QuestionBase {
+    controlType = QuestionTypeEnum.TextInput;
+}
+
+class QuestionTextArea extends QuestionBase {
+    controlType = QuestionTypeEnum.TextArea;
+}
+
+class QuestionTimePicker extends QuestionBase {
+    controlType = QuestionTypeEnum.TimePicker;
+    hourFormat;
+    constructor(options) {
+        super(options);
+        this.hourFormat = options.hourFormat || '24';
+    }
+}
+
+var AsyncOptionEnum;
+(function (AsyncOptionEnum) {
+    AsyncOptionEnum["SUBJECTS"] = "subjects";
+    AsyncOptionEnum["FACILITIES"] = "facilities";
+    AsyncOptionEnum["ROOM_TYPES"] = "room_types";
+    AsyncOptionEnum["ROOMS"] = "rooms";
+    AsyncOptionEnum["BUILDINGS"] = "buildings";
+    AsyncOptionEnum["TEACHERS"] = "teachers";
+    AsyncOptionEnum["CLASS_TYPES"] = "class_types";
+})(AsyncOptionEnum || (AsyncOptionEnum = {}));
+
+class QuestionControlService {
+    toFormGroup(containers) {
+        const questions = this._getQuestionsFromContainer(containers);
+        const group = {};
+        questions.forEach((question) => {
+            const control = new FormControl(question.value || null, { nonNullable: question.nonNullable });
+            if (question.required) {
+                control.addValidators(Validators.required);
+            }
+            if (question.validators.length) {
+                control.addValidators(question.validators);
+            }
+            group[question.key] = control;
+        });
+        questions.forEach(question => {
+            group[question.key].valueChanges
+                .pipe(debounceTime(250))
+                .subscribe((value) => {
+                if (question.onValueChange instanceof Function) {
+                    question.onValueChange(value, questions);
+                }
+            });
+        });
+        return new FormGroup(group);
+    }
+    _getQuestionsFromContainer(containers) {
+        return containers.reduce((prev, curr) => {
+            prev.push(...curr.containers);
+            return prev;
+        }, []);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuestionControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuestionControlService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuestionControlService, decorators: [{
+            type: Injectable
         }] });
 
 /*
@@ -38,5 +654,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFormComponent, BaseFormService };
+export { AsyncOptionEnum, DatepickerComponent, DynamicFormComponent, DynamicFormFieldComponent, MultiSelectComponent, NumberInputComponent, OptionTypeEnum, PasswordInputComponent, QuestionBase, QuestionControlService, QuestionDatePicker, QuestionFieldTypeEnum, QuestionMultiSelect, QuestionPasswordInput, QuestionSelectInput, QuestionTextArea, QuestionTextInput, QuestionTimePicker, QuestionTypeEnum, SelectInputComponent, TextInputComponent, TextareaInputComponent, TimePickerComponent };
 //# sourceMappingURL=ilhombek-base-form.mjs.map