@maro-tech/form 0.0.16 → 0.1.0

package/fesm2022/maro-tech-form.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, InjectionToken, input, output, ViewChild, Component, ChangeDetectorRef, DestroyRef, EventEmitter, ElementRef, forwardRef, booleanAttribute, HostListener, Output, Input, ChangeDetectionStrategy, ViewContainerRef, computed } from '@angular/core';
+import { signal, Injectable, inject, input, output, ViewChild, Component, EventEmitter, forwardRef, Output, Input, ChangeDetectorRef, ChangeDetectionStrategy, HostListener, DestroyRef, ElementRef, booleanAttribute, ViewContainerRef, computed } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject, debounceTime, distinctUntilChanged, forkJoin, map, Observable, from, switchMap, of } from 'rxjs';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { UiButtonComponent, UiToastService } from '@maro-tech/core';
 import { BrowserMultiFormatOneDReader } from '@zxing/browser';
 import { DecodeHintType, BarcodeFormat } from '@zxing/library';
-import { UiButtonComponent } from '@maro-tech/core';
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1 from 'lucide-angular';
-import { X, ChevronDown, Check, LucideAngularModule, CalendarDays, ChevronLeft, ChevronRight, Eye, EyeOff } from 'lucide-angular';
+import { CalendarDays, ChevronLeft, ChevronRight, LucideAngularModule, Eye, EyeOff, X, ChevronDown, Check } from 'lucide-angular';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { forkJoin, map, Subject, debounceTime, distinctUntilChanged, of } from 'rxjs';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Router } from '@angular/router';
 
 class UiFormContext {
@@ -79,8 +79,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
-const UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS = new InjectionToken('UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS');
-
 const ACTION_PRINT = 'ACTION_PRINT';
 const ACTION_FORM = 'ACTION_FORM';
 const ACTION_API = 'ACTION_API';
@@ -101,7 +99,7 @@ const flattenDynamicFormFields = (fields) => {
     return result;
 };
 
-class UiBarcodeScannerInputComponent {
+class InputBarcodeComponent {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = input('Штрихкод', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Відскануйте або введіть штрихкод', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -365,8 +363,8 @@ class UiBarcodeScannerInputComponent {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiBarcodeScannerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiBarcodeScannerInputComponent, isStandalone: true, selector: "forms-barcode-scanner-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, openCameraLabel: { classPropertyName: "openCameraLabel", publicName: "openCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCameraLabel: { classPropertyName: "closeCameraLabel", publicName: "closeCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraTitle: { classPropertyName: "cameraTitle", publicName: "cameraTitle", isSignal: true, isRequired: false, transformFunction: null }, cameraStartingLabel: { classPropertyName: "cameraStartingLabel", publicName: "cameraStartingLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraHint: { classPropertyName: "cameraHint", publicName: "cameraHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputBarcodeComponent, isStandalone: true, selector: "input-barcode", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, openCameraLabel: { classPropertyName: "openCameraLabel", publicName: "openCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCameraLabel: { classPropertyName: "closeCameraLabel", publicName: "closeCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraTitle: { classPropertyName: "cameraTitle", publicName: "cameraTitle", isSignal: true, isRequired: false, transformFunction: null }, cameraStartingLabel: { classPropertyName: "cameraStartingLabel", publicName: "cameraStartingLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraHint: { classPropertyName: "cameraHint", publicName: "cameraHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="space-y-2">
       @if (label()) {
         <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
@@ -460,10 +458,10 @@ class UiBarcodeScannerInputComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiBarcodeScannerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'forms-barcode-scanner-input',
+                    selector: 'input-barcode',
                     standalone: true,
                     imports: [CommonModule, FormsModule, UiButtonComponent],
                     template: `
@@ -565,6 +563,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['cameraVideo']
             }] } });
 
+class InputCheckboxComponent {
+    label;
+    disabled = false;
+    value = false;
+    valueChange = new EventEmitter();
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) { this.value = !!value; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    onValueChange(event) {
+        const value = event.target.checked;
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputCheckboxComponent, isStandalone: true, selector: "input-checkbox", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-checkbox', standalone: true, imports: [CommonModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span>{{ label }}</span>\n</label>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const validateFormControl = (control, required, pattern, email = false) => {
+    const value = control.value;
+    const empty = value == null || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
+    if (required && empty)
+        return { required: true };
+    if (empty)
+        return null;
+    if (email && (typeof value !== 'string' || !EMAIL_PATTERN.test(value.trim())))
+        return { email: true };
+    if (pattern) {
+        try {
+            if (!new RegExp(pattern).test(String(value)))
+                return { pattern: true };
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+};
+
+class InputColorComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    name;
+    id;
+    required = false;
+    fullWidth = false;
+    error;
+    disabled = false;
+    value = '#000000';
+    static nextId = 0;
+    generatedId = `input-color-${InputColorComponent.nextId++}`;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    get pickerValue() {
+        return this.isColorValue(this.value) ? this.value : '#000000';
+    }
+    writeValue(value) {
+        this.value = value?.trim() || '#000000';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) { return validateFormControl(control, this.required); }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onPickerChange(value) {
+        this.value = value;
+        this.onChange(value);
+    }
+    onHexInput(value) {
+        this.value = this.normalizeHexInput(value);
+        this.onChange(this.value);
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    normalizeHexInput(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return '';
+        }
+        return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+    }
+    isColorValue(value) {
+        return /^#([0-9a-fA-F]{6})$/.test(value.trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputColorComponent, isStandalone: true, selector: "input-color", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", fullWidth: "fullWidth", error: "error" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputColorComponent),
+                multi: true,
+            },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputColorComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-color', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputColorComponent),
+                            multi: true,
+                        },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputColorComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
 class UiPopupService {
     activeClose = null;
     open(close) {
@@ -587,419 +733,285 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class UiSelectComponent {
-    closeIcon = X;
-    chevronDownIcon = ChevronDown;
-    checkIcon = Check;
+class InputDateComponent {
     cdr = inject(ChangeDetectorRef);
-    destroyRef = inject(DestroyRef);
-    http = inject(HttpClient);
     popupService = inject(UiPopupService);
-    closeActivePopup = () => this.closeDropdown();
+    closeActivePopup = () => this.closeCalendar();
     label;
+    hint;
     placeholder;
     name;
-    data;
+    id;
+    type = 'date';
+    element = 'input';
+    calendarIcon = CalendarDays;
+    previousMonthIcon = ChevronLeft;
+    nextMonthIcon = ChevronRight;
+    rows = 4;
     required = false;
     fullWidth = false;
-    disabled = false;
-    multiple = false;
-    includeBlankOption = false;
-    blankOptionLabel = 'Оберіть…';
-    emptyStateLabel = 'Немає варіантів для вибору';
-    searchable = true;
-    remoteSearch = false;
-    searchPlaceholder = 'Пошук...';
-    _options = [];
-    set options(value) {
-        this._options = value ?? [];
-        this.updateSelectionFromValue();
-        this.cdr.markForCheck();
-    }
-    get options() {
-        return this._options;
-    }
+    autocomplete = 'off';
+    pattern;
     error;
-    hint;
-    triggerClass = '';
-    panelClass = '';
-    valueChange = new EventEmitter();
-    searchChange = new EventEmitter();
-    popupMinWidth = 300;
-    popupViewportMargin = 16;
-    popupOffset = 8;
-    dropdownTrigger;
-    dropdownPositions = [
-        {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: this.popupOffset,
-        },
-        {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetY: -this.popupOffset,
-        },
-    ];
-    isOpen = false;
-    popupWidth = 0;
+    actions = [];
+    disabled = false;
     value = '';
-    multiValue = [];
-    selectedOptions = [];
-    searchTerm = '';
-    isDictionaryLoading = false;
-    searchChanges$ = new Subject();
-    dictionaryRequestVersions = new Map();
-    dictionaryOptions = [];
+    static nextId = 0;
+    generatedId = `input-date-${InputDateComponent.nextId++}`;
+    visibleMonth = this.startOfMonth(new Date());
+    calendarView = 'days';
+    isCalendarOpen = false;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
     onChange = () => undefined;
     onTouched = () => undefined;
-    constructor() {
-        this.searchChanges$.pipe(debounceTime(300), distinctUntilChanged()).subscribe((next) => {
-            this.searchTerm = next;
-            if (this.getDictionaryName()) {
-                this.loadDictionaryOptions(next);
-                return;
-            }
-            this.updateSelectionFromValue();
-            this.cdr.markForCheck();
-        });
-        this.destroyRef.onDestroy(() => {
-            this.searchChanges$.complete();
-            this.dictionaryRequestVersions.clear();
-        });
-    }
-    ngOnChanges(changes) {
-        if ('data' in changes) {
-            this.reloadDictionaryOptions();
-        }
-    }
     writeValue(value) {
-        if (this.multiple) {
-            this.multiValue = Array.isArray(value) ? value : [];
-        }
-        else {
-            this.value = value ?? '';
+        this.value = value ?? '';
+        const selectedDate = this.parseDate(this.value);
+        if (selectedDate) {
+            this.visibleMonth = this.startOfMonth(selectedDate);
         }
-        this.updateSelectionFromValue();
-        this.ensureSelectedDictionaryOptionsLoaded();
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    get monthLabel() {
+        return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long', year: 'numeric' });
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    get monthName() {
+        return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long' });
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
+    get yearLabel() {
+        return this.visibleMonth.getFullYear();
     }
-    toggleDropdown(event) {
-        event.stopPropagation();
-        if (this.disabled) {
-            return;
-        }
-        if (this.isOpen) {
-            this.closeDropdown();
-            return;
-        }
-        const fieldWidth = this.dropdownTrigger.nativeElement.getBoundingClientRect().width;
-        this.popupWidth = Math.max(fieldWidth, this.popupMinWidth);
-        this.isOpen = true;
-        this.popupService.open(this.closeActivePopup);
-        this.searchTerm = '';
-        this.searchChanges$.next('');
+    get monthOptions() {
+        return Array.from({ length: 12 }, (_, value) => ({
+            value,
+            label: new Date(2000, value, 1).toLocaleDateString('uk-UA', { month: 'long' }),
+        }));
+    }
+    get yearOptions() {
+        const year = this.visibleMonth.getFullYear();
+        return Array.from({ length: 12 }, (_, index) => year - 5 + index);
+    }
+    get calendarDays() {
+        const firstDay = this.startOfMonth(this.visibleMonth);
+        const mondayOffset = (firstDay.getDay() + 6) % 7;
+        const firstGridDay = new Date(firstDay);
+        firstGridDay.setDate(firstGridDay.getDate() - mondayOffset);
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = new Date(firstGridDay);
+            date.setDate(firstGridDay.getDate() + index);
+            return {
+                date: this.toDateValue(date),
+                day: date.getDate(),
+                currentMonth: date.getMonth() === this.visibleMonth.getMonth(),
+            };
+        });
+    }
+    get displayValue() {
+        const date = this.selectedDate;
+        return date ? date.toLocaleDateString('uk-UA') : String(this.value ?? '');
+    }
+    get selectedDate() {
+        return this.parseDate(this.value);
+    }
+    openCalendar(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.isCalendarOpen = true;
+        this.popupService.open(this.closeActivePopup);
+        this.calendarView = 'days';
         this.cdr.markForCheck();
     }
-    selectOption(option, event) {
+    closeCalendar() {
+        this.isCalendarOpen = false;
+        this.popupService.close(this.closeActivePopup);
+        this.cdr.markForCheck();
+    }
+    showMonthPicker(event) {
         event.stopPropagation();
-        const key = this.getOptionValue(option);
-        if (this.multiple) {
-            const normalized = this.multiValue.includes(key)
-                ? this.multiValue.filter((item) => item !== key)
-                : [...this.multiValue, key];
-            this.multiValue = normalized;
-            this.onChange(normalized);
-            this.valueChange.emit(normalized);
+        this.calendarView = 'months';
+        this.cdr.markForCheck();
+    }
+    showYearPicker(event) {
+        event.stopPropagation();
+        this.calendarView = 'years';
+        this.cdr.markForCheck();
+    }
+    selectMonth(month, event) {
+        event.stopPropagation();
+        this.visibleMonth = new Date(this.visibleMonth.getFullYear(), month, 1);
+        this.calendarView = 'days';
+        this.cdr.markForCheck();
+    }
+    selectYear(year, event) {
+        event.stopPropagation();
+        this.visibleMonth = new Date(year, this.visibleMonth.getMonth(), 1);
+        this.calendarView = 'months';
+        this.cdr.markForCheck();
+    }
+    changeMonth(offset, event) {
+        event.stopPropagation();
+        if (this.calendarView === 'years') {
+            this.visibleMonth = new Date(this.visibleMonth.getFullYear() + offset * 12, this.visibleMonth.getMonth(), 1);
+        }
+        else if (this.calendarView === 'months') {
+            this.visibleMonth = new Date(this.visibleMonth.getFullYear() + offset, this.visibleMonth.getMonth(), 1);
         }
         else {
-            const nextValue = this.value === key ? null : key;
-            this.value = nextValue;
-            this.onChange(nextValue);
-            this.valueChange.emit(nextValue);
-            this.closeDropdown();
+            this.visibleMonth = new Date(this.visibleMonth.getFullYear(), this.visibleMonth.getMonth() + offset, 1);
         }
-        this.updateSelectionFromValue();
-    }
-    markTouched() {
-        this.onTouched();
+        this.cdr.markForCheck();
     }
-    closeDropdown() {
-        if (!this.isOpen) {
-            return;
-        }
-        this.isOpen = false;
+    selectDate(dateValue, event) {
+        event.stopPropagation();
+        this.visibleMonth = this.startOfMonth(this.parseDate(dateValue));
+        this.value = dateValue;
+        this.onChange(dateValue);
+        this.closeCalendar();
         this.onTouched();
-        this.searchTerm = '';
-        this.searchChanges$.next('');
-        this.popupService.close(this.closeActivePopup);
         this.cdr.markForCheck();
     }
+    isSelected(dateValue) {
+        return this.value === dateValue;
+    }
+    isSelectedMonth(month) {
+        return this.selectedDate?.getMonth() === month && this.selectedDate?.getFullYear() === this.visibleMonth.getFullYear();
+    }
+    isSelectedYear(year) {
+        return this.selectedDate?.getFullYear() === year;
+    }
     onDocumentClick() {
-        if (this.isOpen) {
-            this.closeDropdown();
+        if (this.isCalendarOpen) {
+            this.closeCalendar();
         }
     }
     onEscape() {
-        if (this.isOpen) {
-            this.closeDropdown();
+        if (this.isCalendarOpen) {
+            this.closeCalendar();
         }
     }
-    get displayLabel() {
-        if (this.multiple) {
-            if (!this.selectedOptions.length) {
-                return this.placeholder ?? this.blankOptionLabel;
-            }
-            return `${this.selectedOptions.length}`;
-        }
-        return this.selectedOptions[0]?.label ?? this.placeholder ?? this.blankOptionLabel;
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    isSelected(option) {
-        const value = this.getOptionValue(option);
-        if (this.multiple) {
-            return this.multiValue.includes(value);
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const maskedValue = this.applyDateMask(value);
+        const date = this.parseInputDate(maskedValue);
+        this.value = date ? this.toDateValue(date) : maskedValue;
+        this.onChange(this.value);
+        if (date) {
+            this.visibleMonth = this.startOfMonth(date);
         }
-        return this.value === value;
+        this.cdr.markForCheck();
     }
-    getOptionValue(option) {
-        return option.value ?? '';
+    allowDateKey(event) {
+        if (event.ctrlKey || event.metaKey || ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        if (!/^\d$/.test(event.key))
+            event.preventDefault();
     }
-    trackOption(index, option) {
-        return `${this.getOptionValue(option)}::${String(option.label || '').trim()}::${index}`;
+    applyDateMask(value) {
+        const digits = value.replace(/\D/g, '').slice(0, 8);
+        const day = digits.slice(0, 2);
+        const month = digits.slice(2, 4);
+        const year = digits.slice(4, 8);
+        return [day, month, year].filter(Boolean).join('.');
     }
-    get visibleOptions() {
-        const options = this.getRenderOptions();
-        if (!this.searchable || this.remoteSearch || !this.searchTerm.trim()) {
-            return options;
-        }
-        const search = this.searchTerm.trim().toLowerCase();
-        return options.filter((option) => {
-            if (this.includeBlankOption && !this.multiple && this.isBlankOption(option)) {
-                return true;
-            }
-            return String(option.label ?? '').toLowerCase().includes(search);
-        });
+    triggerAction(action) {
+        this.actionTriggered.emit(action);
     }
-    onSearchChange(value) {
-        const next = String(value ?? '');
-        this.searchChanges$.next(next);
-        this.searchChange.emit(next);
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
     }
-    removeOption(option, event) {
-        event.stopPropagation();
-        const key = this.getOptionValue(option);
-        if (this.multiple) {
-            this.multiValue = this.multiValue.filter((v) => v !== key);
-            this.onChange(this.multiValue);
-            this.valueChange.emit(this.multiValue);
-            this.updateSelectionFromValue();
+    parseDate(value) {
+        if (!value) {
+            return null;
         }
-    }
-    updateSelectionFromValue() {
-        const options = this.getRenderOptions();
-        if (this.multiple) {
-            this.selectedOptions = options.filter((option) => this.multiValue.includes(this.getOptionValue(option)));
-            return;
+        const [year, month, day] = String(value).slice(0, 10).split('-').map(Number);
+        if (!year || !month || !day) {
+            return null;
         }
-        const current = options.find((option) => this.getOptionValue(option) === (this.value ?? ''));
-        this.selectedOptions = current ? [current] : [];
+        return new Date(year, month - 1, day);
     }
-    getRenderOptions() {
-        const merged = this.mergeOptions(this.options, this.dictionaryOptions);
-        if (!this.includeBlankOption || this.multiple) {
-            return merged;
+    parseInputDate(value) {
+        const normalized = value.trim();
+        const isoDate = this.parseDate(normalized);
+        if (isoDate) {
+            return isoDate;
         }
-        return [{ label: this.blankOptionLabel, value: '' }, ...merged];
-    }
-    mergeOptions(...optionSets) {
-        const merged = new Map();
-        for (const options of optionSets) {
-            for (const option of options || []) {
-                const value = this.getOptionValue(option);
-                const key = `${value}::${String(option.label || '').trim()}`;
-                if (!merged.has(key)) {
-                    merged.set(key, option);
-                }
-            }
+        const match = normalized.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+        if (!match) {
+            return null;
         }
-        return [...merged.values()];
-    }
-    isBlankOption(option) {
-        return String(option.value ?? '') === '';
+        const [, day, month, year] = match;
+        const date = new Date(Number(year), Number(month) - 1, Number(day));
+        return date.getFullYear() === Number(year) && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day)
+            ? date
+            : null;
     }
-    getDictionaryName() {
-        return String(this.data || '').trim();
+    toDateValue(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
     }
-    reloadDictionaryOptions() {
-        const dictionaryName = this.getDictionaryName();
-        this.dictionaryRequestVersions.clear();
-        this.dictionaryOptions = [];
-        this.isDictionaryLoading = false;
-        if (!dictionaryName) {
-            this.updateSelectionFromValue();
-            this.cdr.markForCheck();
-            return;
-        }
-        this.loadDictionaryOptions(this.searchTerm);
-    }
-    loadDictionaryOptions(query) {
-        const dictionaryName = this.getDictionaryName();
-        if (!dictionaryName) {
-            return;
-        }
-        const requestVersion = (this.dictionaryRequestVersions.get(dictionaryName) || 0) + 1;
-        this.dictionaryRequestVersions.set(dictionaryName, requestVersion);
-        this.isDictionaryLoading = true;
-        this.loadSuggestItems(dictionaryName, String(query || '').trim()).subscribe({
-            next: (items) => {
-                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
-                    return;
-                }
-                this.dictionaryOptions = this.normalizeSuggestItems(items);
-                this.isDictionaryLoading = false;
-                this.ensureSelectedDictionaryOptionsLoaded();
-                this.updateSelectionFromValue();
-                this.cdr.markForCheck();
-            },
-            error: () => {
-                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
-                    return;
-                }
-                this.dictionaryOptions = [];
-                this.isDictionaryLoading = false;
-                this.updateSelectionFromValue();
-                this.cdr.markForCheck();
-            },
-        });
-    }
-    ensureSelectedDictionaryOptionsLoaded() {
-        const dictionaryName = this.getDictionaryName();
-        if (!dictionaryName) {
-            return;
-        }
-        const existingValues = new Set(this.getRenderOptions().map((option) => this.getOptionValue(option)));
-        const selectedValues = this.multiple ? this.multiValue : [this.value];
-        const missingValues = selectedValues
-            .map((item) => String(item || '').trim())
-            .filter((item) => !!item && !existingValues.has(item));
-        if (!missingValues.length) {
-            return;
-        }
-        forkJoin(missingValues.map((value) => this.loadSuggestItem(dictionaryName, value))).subscribe({
-            next: (items) => {
-                const nextOptions = [...this.dictionaryOptions];
-                for (const item of items) {
-                    const normalized = this.normalizeSuggestItem(item);
-                    if (!nextOptions.some((option) => this.getOptionValue(option) === normalized.value)) {
-                        nextOptions.push(normalized);
-                    }
-                }
-                this.dictionaryOptions = nextOptions;
-                this.updateSelectionFromValue();
-                this.cdr.markForCheck();
-            },
-        });
-    }
-    normalizeSuggestItems(items) {
-        return (items || [])
-            .map((item) => this.normalizeSuggestItem(item))
-            .filter((item) => !!item.label || item.value !== null);
-    }
-    normalizeSuggestItem(item) {
-        return {
-            label: String(item?.label ?? ''),
-            value: item?.key != null ? String(item.key) : null,
-            imageUrl: item?.imageId ? `/api/files/${item.imageId}/preview?scale=25` : undefined,
-        };
-    }
-    loadSuggestItems(name, query) {
-        const params = new URLSearchParams();
-        if (query?.trim())
-            params.set('q', query.trim());
-        const suffix = params.toString() ? `?${params.toString()}` : '';
-        return this.http.get(`/api/suggest/${encodeURIComponent(name)}${suffix}`);
-    }
-    loadSuggestItem(name, key) {
-        return this.http.get(`/api/suggest/${encodeURIComponent(name)}/${encodeURIComponent(key)}`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiSelectComponent, isStandalone: true, selector: "forms-select", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", fullWidth: "fullWidth", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", remoteSearch: "remoteSearch", searchPlaceholder: "searchPlaceholder", options: "options", error: "error", hint: "hint", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDateComponent, isStandalone: true, selector: "input-date", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiSelectComponent),
+                useExisting: forwardRef(() => InputDateComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-select', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-date', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiSelectComponent),
+                            useExisting: forwardRef(() => InputDateComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
                 type: Input
             }], placeholder: [{
                 type: Input
             }], name: [{
                 type: Input
-            }], data: [{
+            }], id: [{
+                type: Input
+            }], rows: [{
                 type: Input
             }], required: [{
                 type: Input
             }], fullWidth: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], includeBlankOption: [{
-                type: Input
-            }], blankOptionLabel: [{
-                type: Input
-            }], emptyStateLabel: [{
-                type: Input
-            }], searchable: [{
-                type: Input
-            }], remoteSearch: [{
-                type: Input
-            }], searchPlaceholder: [{
+            }], autocomplete: [{
                 type: Input
-            }], options: [{
+            }], pattern: [{
                 type: Input
             }], error: [{
                 type: Input
-            }], hint: [{
-                type: Input
-            }], triggerClass: [{
-                type: Input
-            }], panelClass: [{
+            }], actions: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], searchChange: [{
+            }], actionTriggered: [{
                 type: Output
-            }], dropdownTrigger: [{
-                type: ViewChild,
-                args: ['dropdownTrigger', { static: true, read: ElementRef }]
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -1008,7 +1020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-class UiDateInputComponent {
+class InputDatetimeComponent {
     cdr = inject(ChangeDetectorRef);
     popupService = inject(UiPopupService);
     closeActivePopup = () => this.closeCalendar();
@@ -1017,364 +1029,77 @@ class UiDateInputComponent {
     placeholder;
     name;
     id;
-    type = 'date';
-    element = 'input';
-    calendarIcon = CalendarDays;
-    previousMonthIcon = ChevronLeft;
-    nextMonthIcon = ChevronRight;
     rows = 4;
     required = false;
     fullWidth = false;
     autocomplete = 'off';
-    readonly = false;
     pattern;
     error;
     actions = [];
+    type = 'datetime-local';
+    calendarIcon = CalendarDays;
+    previousMonthIcon = ChevronLeft;
+    nextMonthIcon = ChevronRight;
     disabled = false;
     value = '';
-    static nextId = 0;
-    generatedId = `ui-input-${UiDateInputComponent.nextId++}`;
-    visibleMonth = this.startOfMonth(new Date());
-    calendarView = 'days';
     isCalendarOpen = false;
+    calendarView = 'days';
+    visibleMonth = this.startOfMonth(new Date());
+    selectedHour = 12;
+    selectedMinute = 0;
+    static nextId = 0;
+    generatedId = `input-datetime-${InputDatetimeComponent.nextId++}`;
     actionTriggered = new EventEmitter();
-    get controlId() {
-        return this.id ?? this.generatedId;
-    }
     onChange = () => undefined;
     onTouched = () => undefined;
-    writeValue(value) {
-        this.value = value ?? '';
-        const selectedDate = this.parseDate(this.value);
-        if (selectedDate) {
-            this.visibleMonth = this.startOfMonth(selectedDate);
-        }
-        this.cdr.markForCheck();
-    }
-    get monthLabel() {
-        return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long', year: 'numeric' });
-    }
-    get monthName() {
-        return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long' });
-    }
-    get yearLabel() {
-        return this.visibleMonth.getFullYear();
-    }
-    get monthOptions() {
-        return Array.from({ length: 12 }, (_, value) => ({
-            value,
-            label: new Date(2000, value, 1).toLocaleDateString('uk-UA', { month: 'long' }),
-        }));
-    }
-    get yearOptions() {
-        const year = this.visibleMonth.getFullYear();
-        return Array.from({ length: 12 }, (_, index) => year - 5 + index);
-    }
+    get controlId() { return this.id ?? this.generatedId; }
+    get selectedDate() { const match = String(this.value ?? '').match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return match ? new Date(+match[1], +match[2] - 1, +match[3]) : null; }
+    get displayValue() { const match = String(this.value ?? '').match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return match ? `${match[3]}.${match[2]}.${match[1]} ${match[4]}:${match[5]}` : String(this.value ?? ''); }
+    get monthName() { return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long' }); }
+    get yearLabel() { return this.visibleMonth.getFullYear(); }
+    get monthOptions() { return Array.from({ length: 12 }, (_, value) => ({ value, label: new Date(2000, value, 1).toLocaleDateString('uk-UA', { month: 'long' }) })); }
+    get yearOptions() { const year = this.visibleMonth.getFullYear(); return Array.from({ length: 12 }, (_, index) => year - 5 + index); }
     get calendarDays() {
-        const firstDay = this.startOfMonth(this.visibleMonth);
-        const mondayOffset = (firstDay.getDay() + 6) % 7;
-        const firstGridDay = new Date(firstDay);
-        firstGridDay.setDate(firstGridDay.getDate() - mondayOffset);
-        return Array.from({ length: 42 }, (_, index) => {
-            const date = new Date(firstGridDay);
-            date.setDate(firstGridDay.getDate() + index);
-            return {
-                date: this.toDateValue(date),
-                day: date.getDate(),
-                currentMonth: date.getMonth() === this.visibleMonth.getMonth(),
-            };
-        });
-    }
-    get displayValue() {
-        const date = this.selectedDate;
-        return date ? date.toLocaleDateString('uk-UA') : String(this.value ?? '');
-    }
-    get selectedDate() {
-        return this.parseDate(this.value);
+        const first = this.startOfMonth(this.visibleMonth);
+        const offset = (first.getDay() + 6) % 7;
+        const start = new Date(first);
+        start.setDate(start.getDate() - offset);
+        return Array.from({ length: 42 }, (_, index) => { const date = new Date(start); date.setDate(start.getDate() + index); return { date: this.toDateValue(date), day: date.getDate(), currentMonth: date.getMonth() === this.visibleMonth.getMonth() }; });
     }
-    openCalendar(event) {
-        event.stopPropagation();
-        if (this.disabled) {
-            return;
+    writeValue(value) { this.value = value ?? ''; const date = this.selectedDate; if (date) {
+        this.visibleMonth = this.startOfMonth(date);
+        this.selectedHour = +(String(value).slice(11, 13));
+        this.selectedMinute = +(String(value).slice(14, 16));
+    } this.cdr.markForCheck(); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
+    setDisabledState(disabled) { this.disabled = disabled; this.cdr.markForCheck(); }
+    openCalendar(event) { event.stopPropagation(); if (this.disabled)
+        return; this.isCalendarOpen = true; this.calendarView = 'days'; this.popupService.open(this.closeActivePopup); this.cdr.markForCheck(); }
+    closeCalendar() { this.isCalendarOpen = false; this.popupService.close(this.closeActivePopup); this.cdr.markForCheck(); }
+    changeMonth(offset, event) { event.stopPropagation(); const year = this.visibleMonth.getFullYear(); const month = this.visibleMonth.getMonth(); this.visibleMonth = this.calendarView === 'years' ? new Date(year + offset * 12, month, 1) : new Date(year + (this.calendarView === 'months' ? offset : 0), month + (this.calendarView === 'days' ? offset : 0), 1); this.cdr.markForCheck(); }
+    showMonthPicker(event) { event.stopPropagation(); this.calendarView = 'months'; this.cdr.markForCheck(); }
+    showYearPicker(event) { event.stopPropagation(); this.calendarView = 'years'; this.cdr.markForCheck(); }
+    selectMonth(month, event) { event.stopPropagation(); this.visibleMonth = new Date(this.visibleMonth.getFullYear(), month, 1); this.calendarView = 'days'; this.cdr.markForCheck(); }
+    selectYear(year, event) { event.stopPropagation(); this.visibleMonth = new Date(year, this.visibleMonth.getMonth(), 1); this.calendarView = 'months'; this.cdr.markForCheck(); }
+    selectDate(dateValue, event) { event.stopPropagation(); const date = this.parseDate(dateValue); this.visibleMonth = this.startOfMonth(date); this.setDateTime(dateValue); }
+    setDateTime(dateValue, close = true) { const hour = String(this.selectedHour).padStart(2, '0'); const minute = String(this.selectedMinute).padStart(2, '0'); this.value = `${dateValue}T${hour}:${minute}`; this.onChange(this.value); if (close)
+        this.closeCalendar(); if (close)
+        this.onTouched(); this.cdr.markForCheck(); }
+    onTimeChange() { const date = this.selectedDate; if (date) {
+        this.setDateTime(this.toDateValue(date), false);
+    } }
+    onValueChange(input) { const masked = this.applyMask(input); const match = masked.match(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2})$/); if (match) {
+        const date = new Date(+match[3], +match[2] - 1, +match[1]);
+        if (date.getFullYear() === +match[3] && date.getMonth() === +match[2] - 1 && date.getDate() === +match[1] && +match[4] < 24 && +match[5] < 60) {
+            this.value = `${match[3]}-${match[2]}-${match[1]}T${match[4]}:${match[5]}`;
+            this.visibleMonth = this.startOfMonth(date);
+            this.selectedHour = +match[4];
+            this.selectedMinute = +match[5];
         }
-        this.isCalendarOpen = true;
-        this.popupService.open(this.closeActivePopup);
-        this.calendarView = 'days';
-        this.cdr.markForCheck();
-    }
-    closeCalendar() {
-        this.isCalendarOpen = false;
-        this.popupService.close(this.closeActivePopup);
-        this.cdr.markForCheck();
-    }
-    showMonthPicker(event) {
-        event.stopPropagation();
-        this.calendarView = 'months';
-        this.cdr.markForCheck();
-    }
-    showYearPicker(event) {
-        event.stopPropagation();
-        this.calendarView = 'years';
-        this.cdr.markForCheck();
-    }
-    selectMonth(month, event) {
-        event.stopPropagation();
-        this.visibleMonth = new Date(this.visibleMonth.getFullYear(), month, 1);
-        this.calendarView = 'days';
-        this.cdr.markForCheck();
-    }
-    selectYear(year, event) {
-        event.stopPropagation();
-        this.visibleMonth = new Date(year, this.visibleMonth.getMonth(), 1);
-        this.calendarView = 'months';
-        this.cdr.markForCheck();
-    }
-    changeMonth(offset, event) {
-        event.stopPropagation();
-        if (this.calendarView === 'years') {
-            this.visibleMonth = new Date(this.visibleMonth.getFullYear() + offset * 12, this.visibleMonth.getMonth(), 1);
-        }
-        else if (this.calendarView === 'months') {
-            this.visibleMonth = new Date(this.visibleMonth.getFullYear() + offset, this.visibleMonth.getMonth(), 1);
-        }
-        else {
-            this.visibleMonth = new Date(this.visibleMonth.getFullYear(), this.visibleMonth.getMonth() + offset, 1);
-        }
-        this.cdr.markForCheck();
-    }
-    selectDate(dateValue, event) {
-        event.stopPropagation();
-        this.visibleMonth = this.startOfMonth(this.parseDate(dateValue));
-        this.value = dateValue;
-        this.onChange(dateValue);
-        this.closeCalendar();
-        this.onTouched();
-        this.cdr.markForCheck();
-    }
-    isSelected(dateValue) {
-        return this.value === dateValue;
-    }
-    isSelectedMonth(month) {
-        return this.selectedDate?.getMonth() === month && this.selectedDate?.getFullYear() === this.visibleMonth.getFullYear();
-    }
-    isSelectedYear(year) {
-        return this.selectedDate?.getFullYear() === year;
-    }
-    onDocumentClick() {
-        if (this.isCalendarOpen) {
-            this.closeCalendar();
-        }
-    }
-    onEscape() {
-        if (this.isCalendarOpen) {
-            this.closeCalendar();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    onValueChange(value) {
-        const maskedValue = this.applyDateMask(value);
-        const date = this.parseInputDate(maskedValue);
-        this.value = date ? this.toDateValue(date) : maskedValue;
-        this.onChange(this.value);
-        if (date) {
-            this.visibleMonth = this.startOfMonth(date);
-        }
-        this.cdr.markForCheck();
-    }
-    allowDateKey(event) {
-        if (event.ctrlKey || event.metaKey || ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
-            return;
-        if (!/^\d$/.test(event.key))
-            event.preventDefault();
-    }
-    applyDateMask(value) {
-        const digits = value.replace(/\D/g, '').slice(0, 8);
-        const day = digits.slice(0, 2);
-        const month = digits.slice(2, 4);
-        const year = digits.slice(4, 8);
-        return [day, month, year].filter(Boolean).join('.');
-    }
-    triggerAction(action) {
-        this.actionTriggered.emit(action);
-    }
-    startOfMonth(date) {
-        return new Date(date.getFullYear(), date.getMonth(), 1);
-    }
-    parseDate(value) {
-        if (!value) {
-            return null;
-        }
-        const [year, month, day] = String(value).slice(0, 10).split('-').map(Number);
-        if (!year || !month || !day) {
-            return null;
-        }
-        return new Date(year, month - 1, day);
-    }
-    parseInputDate(value) {
-        const normalized = value.trim();
-        const isoDate = this.parseDate(normalized);
-        if (isoDate) {
-            return isoDate;
-        }
-        const match = normalized.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
-        if (!match) {
-            return null;
-        }
-        const [, day, month, year] = match;
-        const date = new Date(Number(year), Number(month) - 1, Number(day));
-        return date.getFullYear() === Number(year) && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day)
-            ? date
-            : null;
-    }
-    toDateValue(date) {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDateInputComponent, isStandalone: true, selector: "forms-date-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiDateInputComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDateInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'forms-date-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiDateInputComponent),
-                            multi: true,
-                        },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], pattern: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], actionTriggered: [{
-                type: Output
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click']
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-
-class UiDatetimeInputComponent {
-    cdr = inject(ChangeDetectorRef);
-    popupService = inject(UiPopupService);
-    closeActivePopup = () => this.closeCalendar();
-    label;
-    hint;
-    placeholder;
-    name;
-    id;
-    rows = 4;
-    required = false;
-    fullWidth = false;
-    autocomplete = 'off';
-    readonly = false;
-    pattern;
-    error;
-    actions = [];
-    type = 'datetime-local';
-    calendarIcon = CalendarDays;
-    previousMonthIcon = ChevronLeft;
-    nextMonthIcon = ChevronRight;
-    disabled = false;
-    value = '';
-    isCalendarOpen = false;
-    calendarView = 'days';
-    visibleMonth = this.startOfMonth(new Date());
-    selectedHour = 12;
-    selectedMinute = 0;
-    static nextId = 0;
-    generatedId = `ui-input-${UiDatetimeInputComponent.nextId++}`;
-    actionTriggered = new EventEmitter();
-    onChange = () => undefined;
-    onTouched = () => undefined;
-    get controlId() { return this.id ?? this.generatedId; }
-    get selectedDate() { const match = String(this.value ?? '').match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return match ? new Date(+match[1], +match[2] - 1, +match[3]) : null; }
-    get displayValue() { const match = String(this.value ?? '').match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return match ? `${match[3]}.${match[2]}.${match[1]} ${match[4]}:${match[5]}` : String(this.value ?? ''); }
-    get monthName() { return this.visibleMonth.toLocaleDateString('uk-UA', { month: 'long' }); }
-    get yearLabel() { return this.visibleMonth.getFullYear(); }
-    get monthOptions() { return Array.from({ length: 12 }, (_, value) => ({ value, label: new Date(2000, value, 1).toLocaleDateString('uk-UA', { month: 'long' }) })); }
-    get yearOptions() { const year = this.visibleMonth.getFullYear(); return Array.from({ length: 12 }, (_, index) => year - 5 + index); }
-    get calendarDays() {
-        const first = this.startOfMonth(this.visibleMonth);
-        const offset = (first.getDay() + 6) % 7;
-        const start = new Date(first);
-        start.setDate(start.getDate() - offset);
-        return Array.from({ length: 42 }, (_, index) => { const date = new Date(start); date.setDate(start.getDate() + index); return { date: this.toDateValue(date), day: date.getDate(), currentMonth: date.getMonth() === this.visibleMonth.getMonth() }; });
-    }
-    writeValue(value) { this.value = value ?? ''; const date = this.selectedDate; if (date) {
-        this.visibleMonth = this.startOfMonth(date);
-        this.selectedHour = +(String(value).slice(11, 13));
-        this.selectedMinute = +(String(value).slice(14, 16));
-    } this.cdr.markForCheck(); }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(disabled) { this.disabled = disabled; this.cdr.markForCheck(); }
-    openCalendar(event) { event.stopPropagation(); if (this.disabled)
-        return; this.isCalendarOpen = true; this.calendarView = 'days'; this.popupService.open(this.closeActivePopup); this.cdr.markForCheck(); }
-    closeCalendar() { this.isCalendarOpen = false; this.popupService.close(this.closeActivePopup); this.cdr.markForCheck(); }
-    changeMonth(offset, event) { event.stopPropagation(); const year = this.visibleMonth.getFullYear(); const month = this.visibleMonth.getMonth(); this.visibleMonth = this.calendarView === 'years' ? new Date(year + offset * 12, month, 1) : new Date(year + (this.calendarView === 'months' ? offset : 0), month + (this.calendarView === 'days' ? offset : 0), 1); this.cdr.markForCheck(); }
-    showMonthPicker(event) { event.stopPropagation(); this.calendarView = 'months'; this.cdr.markForCheck(); }
-    showYearPicker(event) { event.stopPropagation(); this.calendarView = 'years'; this.cdr.markForCheck(); }
-    selectMonth(month, event) { event.stopPropagation(); this.visibleMonth = new Date(this.visibleMonth.getFullYear(), month, 1); this.calendarView = 'days'; this.cdr.markForCheck(); }
-    selectYear(year, event) { event.stopPropagation(); this.visibleMonth = new Date(year, this.visibleMonth.getMonth(), 1); this.calendarView = 'months'; this.cdr.markForCheck(); }
-    selectDate(dateValue, event) { event.stopPropagation(); const date = this.parseDate(dateValue); this.visibleMonth = this.startOfMonth(date); this.setDateTime(dateValue); }
-    setDateTime(dateValue, close = true) { const hour = String(this.selectedHour).padStart(2, '0'); const minute = String(this.selectedMinute).padStart(2, '0'); this.value = `${dateValue}T${hour}:${minute}`; this.onChange(this.value); if (close)
-        this.closeCalendar(); if (close)
-        this.onTouched(); this.cdr.markForCheck(); }
-    onTimeChange() { const date = this.selectedDate; if (date) {
-        this.setDateTime(this.toDateValue(date), false);
-    } }
-    onValueChange(input) { const masked = this.applyMask(input); const match = masked.match(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2})$/); if (match) {
-        const date = new Date(+match[3], +match[2] - 1, +match[1]);
-        if (date.getFullYear() === +match[3] && date.getMonth() === +match[2] - 1 && date.getDate() === +match[1] && +match[4] < 24 && +match[5] < 60) {
-            this.value = `${match[3]}-${match[2]}-${match[1]}T${match[4]}:${match[5]}`;
-            this.visibleMonth = this.startOfMonth(date);
-            this.selectedHour = +match[4];
-            this.selectedMinute = +match[5];
-        }
-        else
-            this.value = masked;
+        else
+            this.value = masked;
     }
     else
         this.value = masked; this.onChange(this.value); this.cdr.markForCheck(); }
@@ -1393,12 +1118,18 @@ class UiDatetimeInputComponent {
     startOfMonth(date) { return new Date(date.getFullYear(), date.getMonth(), 1); }
     parseDate(value) { const [year, month, day] = value.split('-').map(Number); return year && month && day ? new Date(year, month - 1, day) : null; }
     toDateValue(date) { return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDatetimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDatetimeInputComponent, isStandalone: true, selector: "forms-datetime-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiDatetimeInputComponent), multi: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [readonly]=\"readonly\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDatetimeComponent, isStandalone: true, selector: "input-datetime", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDatetimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-datetime-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiDatetimeInputComponent), multi: true }], template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [readonly]=\"readonly\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n" }]
+            args: [{ selector: 'input-datetime', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
+                    ], template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1417,8 +1148,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -1435,7 +1164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-class UiEmailInputComponent {
+class InputEmailComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -1448,14 +1177,13 @@ class UiEmailInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     pattern;
     error;
     actions = [];
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiEmailInputComponent.nextId++}`;
+    generatedId = `input-email-${InputEmailComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -1472,6 +1200,7 @@ class UiEmailInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required, this.pattern, true); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
@@ -1484,24 +1213,26 @@ class UiEmailInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiEmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiEmailInputComponent, isStandalone: true, selector: "forms-email-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputEmailComponent, isStandalone: true, selector: "input-email", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiEmailInputComponent),
+                useExisting: forwardRef(() => InputEmailComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputEmailComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiEmailInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-email-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-email', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiEmailInputComponent),
+                            useExisting: forwardRef(() => InputEmailComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n" }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputEmailComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1520,8 +1251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -1532,7 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiNumberInputComponent {
+class InputNumberComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -1545,14 +1274,13 @@ class UiNumberInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     disabled = false;
     pattern;
     error;
     actions = [];
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiNumberInputComponent.nextId++}`;
+    generatedId = `input-number-${InputNumberComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -1569,6 +1297,7 @@ class UiNumberInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
@@ -1584,24 +1313,26 @@ class UiNumberInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiNumberInputComponent, isStandalone: true, selector: "forms-number-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputNumberComponent, isStandalone: true, selector: "input-number", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiNumberInputComponent),
+                useExisting: forwardRef(() => InputNumberComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputNumberComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-number-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-number', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiNumberInputComponent),
+                            useExisting: forwardRef(() => InputNumberComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"] }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputNumberComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1620,8 +1351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], pattern: [{
@@ -1634,7 +1363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiPasswordInputComponent {
+class InputPasswordComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -1649,7 +1378,6 @@ class UiPasswordInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     pattern;
     error;
     actions = [];
@@ -1657,7 +1385,7 @@ class UiPasswordInputComponent {
     isPasswordVisible = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiPasswordInputComponent.nextId++}`;
+    generatedId = `input-password-${InputPasswordComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -1674,6 +1402,7 @@ class UiPasswordInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
@@ -1691,24 +1420,26 @@ class UiPasswordInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPasswordInputComponent, isStandalone: true, selector: "forms-password-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPasswordComponent, isStandalone: true, selector: "input-password", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiPasswordInputComponent),
+                useExisting: forwardRef(() => InputPasswordComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputPasswordComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-password-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-password', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiPasswordInputComponent),
+                            useExisting: forwardRef(() => InputPasswordComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputPasswordComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1727,8 +1458,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -1739,7 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiTextInputComponent {
+class InputTextComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -1752,14 +1481,13 @@ class UiTextInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     pattern;
     error;
     actions = [];
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiTextInputComponent.nextId++}`;
+    generatedId = `input-text-${InputTextComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -1776,6 +1504,7 @@ class UiTextInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
@@ -1788,24 +1517,26 @@ class UiTextInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiTextInputComponent, isStandalone: true, selector: "forms-text-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextComponent, isStandalone: true, selector: "input-text", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiTextInputComponent),
+                useExisting: forwardRef(() => InputTextComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-text-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-text', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiTextInputComponent),
+                            useExisting: forwardRef(() => InputTextComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n" }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1824,8 +1555,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -1836,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiTextareaInputComponent {
+class InputTextareaComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -1849,14 +1578,13 @@ class UiTextareaInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     pattern;
     error;
     actions = [];
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiTextareaInputComponent.nextId++}`;
+    generatedId = `input-textarea-${InputTextareaComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -1873,6 +1601,7 @@ class UiTextareaInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
@@ -1885,24 +1614,26 @@ class UiTextareaInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiTextareaInputComponent, isStandalone: true, selector: "forms-textarea-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextareaComponent, isStandalone: true, selector: "input-textarea", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiTextareaInputComponent),
+                useExisting: forwardRef(() => InputTextareaComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextareaComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextareaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-textarea-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-textarea', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiTextareaInputComponent),
+                            useExisting: forwardRef(() => InputTextareaComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n" }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextareaComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1921,8 +1652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -1933,96 +1662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-const UI_FORM_INPUT_REGISTRY = {
-    text: UiTextInputComponent,
-    number: UiNumberInputComponent,
-    date: UiDateInputComponent,
-    datetime: UiDatetimeInputComponent,
-    email: UiEmailInputComponent,
-    password: UiPasswordInputComponent,
-    textarea: UiTextareaInputComponent,
-};
-
-class UiFormInputHostComponent {
-    field;
-    value;
-    error = '';
-    disabled = false;
-    actions = [];
-    options = [];
-    valueChange = new EventEmitter();
-    actionTriggered = new EventEmitter();
-    viewContainer = inject(ViewContainerRef);
-    componentRef;
-    ngOnChanges(changes) {
-        if (changes['field']) {
-            this.render();
-            return;
-        }
-        this.syncInputs();
-    }
-    render() {
-        this.viewContainer.clear();
-        const inputType = String(this.field?.type || 'text');
-        const componentType = UI_FORM_INPUT_REGISTRY[inputType] || UI_FORM_INPUT_REGISTRY.text;
-        this.componentRef = this.viewContainer.createComponent(componentType);
-        this.syncInputs();
-        const instance = this.componentRef.instance;
-        instance.registerOnChange?.((nextValue) => this.valueChange.emit(nextValue));
-        instance.registerOnTouched?.(() => undefined);
-        instance.actionTriggered?.subscribe((action) => this.actionTriggered.emit(action));
-    }
-    syncInputs() {
-        if (!this.componentRef || !this.field)
-            return;
-        const field = this.field;
-        const setInput = (name, value) => this.componentRef?.setInput(name, value);
-        setInput('name', field.id);
-        setInput('id', field.id);
-        setInput('label', field.label);
-        setInput('placeholder', field.placeholder);
-        setInput('hint', field.hint);
-        setInput('required', !!field.required);
-        setInput('readonly', !!field.readonly);
-        setInput('disabled', this.disabled || !!field.disabled);
-        setInput('pattern', field.pattern);
-        setInput('rows', field.rows ?? 4);
-        setInput('fullWidth', field.fullWidth !== false);
-        setInput('error', this.error);
-        setInput('actions', this.actions);
-        const instance = this.componentRef.instance;
-        instance.writeValue?.(this.value);
-        instance.setDisabledState?.(this.disabled || !!field.disabled);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiFormInputHostComponent, isStandalone: true, selector: "forms-form-input-host", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions", options: "options" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'forms-form-input-host',
-                    standalone: true,
-                    template: '',
-                }]
-        }], propDecorators: { field: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], actionTriggered: [{
-                type: Output
-            }] } });
-
-class UiFileInputComponent {
+class InputFileComponent {
     label;
     hint;
     accept;
@@ -2031,6 +1671,12 @@ class UiFileInputComponent {
     value = null;
     valueChange = new EventEmitter();
     filesChange = new EventEmitter();
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) { this.value = value; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
     get selectedFiles() {
         if (this.value instanceof File)
             return [this.value];
@@ -2040,6 +1686,8 @@ class UiFileInputComponent {
         const input = event.target;
         const files = Array.from(input.files ?? []);
         const value = this.multiple ? files : (files[0] ?? null);
+        this.value = value;
+        this.onChange(value);
         this.valueChange.emit(value);
         this.filesChange.emit(files);
         input.value = '';
@@ -2047,15 +1695,17 @@ class UiFileInputComponent {
     remove(index) {
         const files = this.selectedFiles.filter((_file, fileIndex) => fileIndex !== index);
         const value = this.multiple ? files : (files[0] ?? null);
+        this.value = value;
+        this.onChange(value);
         this.valueChange.emit(value);
         this.filesChange.emit(files);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiFileInputComponent, isStandalone: true, selector: "forms-file-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange" }, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputFileComponent, isStandalone: true, selector: "input-file", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n    (blur)=\"onTouched()\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-file-input', standalone: true, imports: [CommonModule], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
+            args: [{ selector: 'input-file', standalone: true, imports: [CommonModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n    (blur)=\"onTouched()\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -2074,7 +1724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiPhotoInputComponent {
+class InputPhotoComponent {
     http = inject(HttpClient);
     label;
     hint;
@@ -2090,6 +1740,15 @@ class UiPhotoInputComponent {
     previews = [];
     uploading = false;
     fileTypes = new Map();
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value;
+        this.rebuildPreviews();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
     ngOnChanges(changes) {
         if (changes['value'] || changes['multiple'])
             this.rebuildPreviews();
@@ -2140,6 +1799,8 @@ class UiPhotoInputComponent {
         return Number.isInteger(Number(this.limit)) && Number(this.limit) > 0 ? Number(this.limit) : Number.MAX_SAFE_INTEGER;
     }
     emitValue(value) {
+        this.value = value;
+        this.onChange(value);
         this.valueChange.emit(value);
         this.rebuildPreviews(value);
     }
@@ -2200,12 +1861,12 @@ class UiPhotoInputComponent {
         const normalized = value.toLowerCase();
         return normalized.startsWith('image/') || normalized === 'application/pdf';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPhotoInputComponent, isStandalone: true, selector: "forms-photo-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", uploadingChange: "uploadingChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoComponent, isStandalone: true, selector: "input-photo", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", uploadingChange: "uploadingChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-photo-input', standalone: true, imports: [CommonModule, DragDropModule], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
+            args: [{ selector: 'input-photo', standalone: true, imports: [CommonModule, DragDropModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -2228,53 +1889,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiCheckboxInputComponent {
-    label;
-    disabled = false;
-    value = false;
-    valueChange = new EventEmitter();
-    onValueChange(event) {
-        this.valueChange.emit(event.target.checked);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiCheckboxInputComponent, isStandalone: true, selector: "forms-checkbox-input", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'forms-checkbox-input', standalone: true, imports: [CommonModule], template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class UiColorInputComponent {
+class InputSelectComponent {
+    closeIcon = X;
+    chevronDownIcon = ChevronDown;
+    checkIcon = Check;
     cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    http = inject(HttpClient);
+    popupService = inject(UiPopupService);
+    closeActivePopup = () => this.closeDropdown();
     label;
-    hint;
+    placeholder;
     name;
-    id;
+    data;
     required = false;
     fullWidth = false;
-    error;
     disabled = false;
-    value = '#000000';
-    static nextId = 0;
-    generatedId = `ui-color-input-${UiColorInputComponent.nextId++}`;
+    multiple = false;
+    includeBlankOption = false;
+    blankOptionLabel = 'Оберіть…';
+    emptyStateLabel = 'Немає варіантів для вибору';
+    searchable = true;
+    remoteSearch = false;
+    searchPlaceholder = 'Пошук...';
+    _options = [];
+    set options(value) {
+        this._options = value ?? [];
+        this.updateSelectionFromValue();
+        this.cdr.markForCheck();
+    }
+    get options() {
+        return this._options;
+    }
+    error;
+    hint;
+    triggerClass = '';
+    panelClass = '';
+    valueChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    popupMinWidth = 300;
+    popupViewportMargin = 16;
+    popupOffset = 8;
+    dropdownTrigger;
+    dropdownPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: this.popupOffset,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -this.popupOffset,
+        },
+    ];
+    isOpen = false;
+    popupWidth = 0;
+    value = '';
+    multiValue = [];
+    selectedOptions = [];
+    searchTerm = '';
+    isDictionaryLoading = false;
+    searchChanges$ = new Subject();
+    dictionaryRequestVersions = new Map();
+    dictionaryOptions = [];
     onChange = () => undefined;
     onTouched = () => undefined;
-    get controlId() {
-        return this.id ?? this.generatedId;
+    constructor() {
+        this.searchChanges$.pipe(debounceTime(300), distinctUntilChanged()).subscribe((next) => {
+            this.searchTerm = next;
+            if (this.getDictionaryName()) {
+                this.loadDictionaryOptions(next);
+                return;
+            }
+            this.updateSelectionFromValue();
+            this.cdr.markForCheck();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.searchChanges$.complete();
+            this.dictionaryRequestVersions.clear();
+        });
     }
-    get pickerValue() {
-        return this.isColorValue(this.value) ? this.value : '#000000';
+    ngOnChanges(changes) {
+        if ('data' in changes) {
+            this.reloadDictionaryOptions();
+        }
     }
     writeValue(value) {
-        this.value = value?.trim() || '#000000';
+        if (this.multiple) {
+            this.multiValue = Array.isArray(value) ? value : [];
+        }
+        else {
+            this.value = value ?? '';
+        }
+        this.updateSelectionFromValue();
+        this.ensureSelectedDictionaryOptionsLoaded();
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -2283,66 +1996,324 @@ class UiColorInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
-    onPickerChange(value) {
-        this.value = value;
-        this.onChange(value);
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
+        }
+        const fieldWidth = this.dropdownTrigger.nativeElement.getBoundingClientRect().width;
+        this.popupWidth = Math.max(fieldWidth, this.popupMinWidth);
+        this.isOpen = true;
+        this.popupService.open(this.closeActivePopup);
+        this.searchTerm = '';
+        this.searchChanges$.next('');
+        this.cdr.markForCheck();
     }
-    onHexInput(value) {
-        this.value = this.normalizeHexInput(value);
-        this.onChange(this.value);
+    selectOption(option, event) {
+        event.stopPropagation();
+        const key = this.getOptionValue(option);
+        if (this.multiple) {
+            const normalized = this.multiValue.includes(key)
+                ? this.multiValue.filter((item) => item !== key)
+                : [...this.multiValue, key];
+            this.multiValue = normalized;
+            this.onChange(normalized);
+            this.valueChange.emit(normalized);
+        }
+        else {
+            const nextValue = this.value === key ? null : key;
+            this.value = nextValue;
+            this.onChange(nextValue);
+            this.valueChange.emit(nextValue);
+            this.closeDropdown();
+        }
+        this.updateSelectionFromValue();
     }
     markTouched() {
         this.onTouched();
     }
-    normalizeHexInput(value) {
-        const trimmed = value.trim();
-        if (!trimmed) {
-            return '';
-        }
-        return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+    closeDropdown() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.onTouched();
+        this.searchTerm = '';
+        this.searchChanges$.next('');
+        this.popupService.close(this.closeActivePopup);
+        this.cdr.markForCheck();
+    }
+    onDocumentClick() {
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+    }
+    onEscape() {
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+    }
+    get displayLabel() {
+        if (this.multiple) {
+            if (!this.selectedOptions.length) {
+                return this.placeholder ?? this.blankOptionLabel;
+            }
+            return `${this.selectedOptions.length}`;
+        }
+        return this.selectedOptions[0]?.label ?? this.placeholder ?? this.blankOptionLabel;
+    }
+    isSelected(option) {
+        const value = this.getOptionValue(option);
+        if (this.multiple) {
+            return this.multiValue.includes(value);
+        }
+        return this.value === value;
+    }
+    getOptionValue(option) {
+        return option.value ?? '';
+    }
+    trackOption(index, option) {
+        return `${this.getOptionValue(option)}::${String(option.label || '').trim()}::${index}`;
+    }
+    get visibleOptions() {
+        const options = this.getRenderOptions();
+        if (!this.searchable || this.remoteSearch || !this.searchTerm.trim()) {
+            return options;
+        }
+        const search = this.searchTerm.trim().toLowerCase();
+        return options.filter((option) => {
+            if (this.includeBlankOption && !this.multiple && this.isBlankOption(option)) {
+                return true;
+            }
+            return String(option.label ?? '').toLowerCase().includes(search);
+        });
+    }
+    onSearchChange(value) {
+        const next = String(value ?? '');
+        this.searchChanges$.next(next);
+        this.searchChange.emit(next);
+    }
+    removeOption(option, event) {
+        event.stopPropagation();
+        const key = this.getOptionValue(option);
+        if (this.multiple) {
+            this.multiValue = this.multiValue.filter((v) => v !== key);
+            this.onChange(this.multiValue);
+            this.valueChange.emit(this.multiValue);
+            this.updateSelectionFromValue();
+        }
+    }
+    updateSelectionFromValue() {
+        const options = this.getRenderOptions();
+        if (this.multiple) {
+            this.selectedOptions = options.filter((option) => this.multiValue.includes(this.getOptionValue(option)));
+            return;
+        }
+        const current = options.find((option) => this.getOptionValue(option) === (this.value ?? ''));
+        this.selectedOptions = current ? [current] : [];
+    }
+    getRenderOptions() {
+        const merged = this.mergeOptions(this.options, this.dictionaryOptions);
+        if (!this.includeBlankOption || this.multiple) {
+            return merged;
+        }
+        return [{ label: this.blankOptionLabel, value: '' }, ...merged];
+    }
+    mergeOptions(...optionSets) {
+        const merged = new Map();
+        for (const options of optionSets) {
+            for (const option of options || []) {
+                const value = this.getOptionValue(option);
+                const key = `${value}::${String(option.label || '').trim()}`;
+                if (!merged.has(key)) {
+                    merged.set(key, option);
+                }
+            }
+        }
+        return [...merged.values()];
+    }
+    isBlankOption(option) {
+        return String(option.value ?? '') === '';
+    }
+    getDictionaryName() {
+        return String(this.data || '').trim();
+    }
+    reloadDictionaryOptions() {
+        const dictionaryName = this.getDictionaryName();
+        this.dictionaryRequestVersions.clear();
+        this.dictionaryOptions = [];
+        this.isDictionaryLoading = false;
+        if (!dictionaryName) {
+            this.updateSelectionFromValue();
+            this.cdr.markForCheck();
+            return;
+        }
+        this.loadDictionaryOptions(this.searchTerm);
+    }
+    loadDictionaryOptions(query) {
+        const dictionaryName = this.getDictionaryName();
+        if (!dictionaryName) {
+            return;
+        }
+        const requestVersion = (this.dictionaryRequestVersions.get(dictionaryName) || 0) + 1;
+        this.dictionaryRequestVersions.set(dictionaryName, requestVersion);
+        this.isDictionaryLoading = true;
+        this.loadSuggestItems(dictionaryName, String(query || '').trim()).subscribe({
+            next: (items) => {
+                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
+                    return;
+                }
+                this.dictionaryOptions = this.normalizeSuggestItems(items);
+                this.isDictionaryLoading = false;
+                this.ensureSelectedDictionaryOptionsLoaded();
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
+                    return;
+                }
+                this.dictionaryOptions = [];
+                this.isDictionaryLoading = false;
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    ensureSelectedDictionaryOptionsLoaded() {
+        const dictionaryName = this.getDictionaryName();
+        if (!dictionaryName) {
+            return;
+        }
+        const existingValues = new Set(this.getRenderOptions().map((option) => this.getOptionValue(option)));
+        const selectedValues = this.multiple ? this.multiValue : [this.value];
+        const missingValues = selectedValues
+            .map((item) => String(item || '').trim())
+            .filter((item) => !!item && !existingValues.has(item));
+        if (!missingValues.length) {
+            return;
+        }
+        forkJoin(missingValues.map((value) => this.loadSuggestItem(dictionaryName, value))).subscribe({
+            next: (items) => {
+                const nextOptions = [...this.dictionaryOptions];
+                for (const item of items) {
+                    const normalized = this.normalizeSuggestItem(item);
+                    if (!nextOptions.some((option) => this.getOptionValue(option) === normalized.value)) {
+                        nextOptions.push(normalized);
+                    }
+                }
+                this.dictionaryOptions = nextOptions;
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    normalizeSuggestItems(items) {
+        return (items || [])
+            .map((item) => this.normalizeSuggestItem(item))
+            .filter((item) => !!item.label || item.value !== null);
+    }
+    normalizeSuggestItem(item) {
+        return {
+            label: String(item?.label ?? ''),
+            value: item?.key != null ? String(item.key) : null,
+            imageUrl: item?.imageId ? `/api/files/${item.imageId}/preview?scale=25` : undefined,
+        };
+    }
+    loadSuggestItems(name, query) {
+        const params = new URLSearchParams();
+        if (query?.trim())
+            params.set('q', query.trim());
+        const suffix = params.toString() ? `?${params.toString()}` : '';
+        return this.http.get(`/api/suggest/${encodeURIComponent(name)}${suffix}`);
     }
-    isColorValue(value) {
-        return /^#([0-9a-fA-F]{6})$/.test(value.trim());
+    loadSuggestItem(name, key) {
+        return this.http.get(`/api/suggest/${encodeURIComponent(name)}/${encodeURIComponent(key)}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiColorInputComponent, isStandalone: true, selector: "forms-color-input", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", fullWidth: "fullWidth", error: "error" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSelectComponent, isStandalone: true, selector: "input-select", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", fullWidth: "fullWidth", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", remoteSearch: "remoteSearch", searchPlaceholder: "searchPlaceholder", options: "options", error: "error", hint: "hint", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiColorInputComponent),
+                useExisting: forwardRef(() => InputSelectComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
+        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-color-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-select', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiColorInputComponent),
+                            useExisting: forwardRef(() => InputSelectComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n" }]
-        }], propDecorators: { label: [{
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
+                    ], template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
-            }], hint: [{
+            }], placeholder: [{
                 type: Input
             }], name: [{
                 type: Input
-            }], id: [{
+            }], data: [{
                 type: Input
             }], required: [{
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], includeBlankOption: [{
+                type: Input
+            }], blankOptionLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], remoteSearch: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], options: [{
+                type: Input
             }], error: [{
                 type: Input
+            }], hint: [{
+                type: Input
+            }], triggerClass: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], dropdownTrigger: [{
+                type: ViewChild,
+                args: ['dropdownTrigger', { static: true, read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
-class UiSlugInputComponent {
+class InputSlugComponent {
     label;
     hint;
     placeholder;
@@ -2351,13 +2322,12 @@ class UiSlugInputComponent {
     required = false;
     fullWidth = false;
     autocomplete = 'off';
-    readonly = false;
     error;
     invalidInput = new EventEmitter();
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-slug-input-${UiSlugInputComponent.nextId++}`;
+    generatedId = `input-slug-${InputSlugComponent.nextId++}`;
     onChange = () => undefined;
     onTouched = () => undefined;
     get controlId() {
@@ -2372,6 +2342,7 @@ class UiSlugInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(control) { return validateFormControl(control, this.required); }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
@@ -2390,24 +2361,26 @@ class UiSlugInputComponent {
             .replace(/\s+/g, '_')
             .replace(/[^a-z0-9_]/g, '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSlugInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiSlugInputComponent, isStandalone: true, selector: "forms-slug-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSlugComponent, isStandalone: true, selector: "input-slug", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiSlugInputComponent),
+                useExisting: forwardRef(() => InputSlugComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSlugComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSlugInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-slug-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-slug', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiSlugInputComponent),
+                            useExisting: forwardRef(() => InputSlugComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n" }]
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSlugComponent), multi: true },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -2424,19 +2397,439 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], error: [{
                 type: Input
             }], invalidInput: [{
                 type: Output
             }] } });
 
-class UiDynamicFormComponent {
-    formsApi = inject(MaroFormsApiService);
+const UI_FORM_INPUT_REGISTRY = {
+    text: InputTextComponent,
+    number: InputNumberComponent,
+    date: InputDateComponent,
+    datetime: InputDatetimeComponent,
+    email: InputEmailComponent,
+    password: InputPasswordComponent,
+    textarea: InputTextareaComponent,
+    select: InputSelectComponent,
+    checkbox: InputCheckboxComponent,
+    color: InputColorComponent,
+    slug: InputSlugComponent,
+    file: InputFileComponent,
+    photo: InputPhotoComponent,
+    barcode: InputBarcodeComponent,
+};
+
+class FieldInputComponent {
+    field;
+    value;
+    error = '';
+    disabled = false;
+    actions = [];
+    valueChange = new EventEmitter();
+    actionTriggered = new EventEmitter();
+    lookupRequested = new EventEmitter();
+    barcodeScanned = new EventEmitter();
+    filesChange = new EventEmitter();
+    uploadingChange = new EventEmitter();
+    inputContainer;
+    componentRef;
+    fallbackViewContainer = inject(ViewContainerRef);
+    viewReady = false;
+    ngAfterViewInit() {
+        this.viewReady = true;
+        if (this.field && !this.componentRef)
+            this.render();
+    }
+    ngOnChanges(changes) {
+        if (changes['field']) {
+            if (this.viewReady)
+                this.render();
+            return;
+        }
+        if (this.viewReady)
+            this.syncInputs();
+    }
+    render() {
+        const viewContainer = this.inputContainer || this.fallbackViewContainer;
+        viewContainer.clear();
+        const inputType = String(this.field?.type || 'text');
+        const componentType = UI_FORM_INPUT_REGISTRY[inputType] || UI_FORM_INPUT_REGISTRY.text;
+        this.componentRef = viewContainer.createComponent(componentType);
+        const hostElement = this.componentRef.location.nativeElement;
+        hostElement.style.display = 'block';
+        hostElement.style.width = '100%';
+        this.syncInputs();
+        const instance = this.componentRef.instance;
+        const hasCva = !!instance.registerOnChange;
+        instance.registerOnChange?.((nextValue) => this.valueChange.emit(nextValue));
+        instance.registerOnTouched?.(() => undefined);
+        instance.actionTriggered?.subscribe((action) => this.actionTriggered.emit(action));
+        if (!hasCva)
+            instance.valueChange?.subscribe((value) => this.valueChange.emit(value));
+        instance.scanned?.subscribe((value) => this.barcodeScanned.emit(value));
+        instance.searchRequested?.subscribe(() => this.lookupRequested.emit());
+        instance.filesChange?.subscribe((files) => this.filesChange.emit(files));
+        instance.uploadingChange?.subscribe((uploading) => this.uploadingChange.emit(uploading));
+    }
+    syncInputs() {
+        if (!this.componentRef || !this.field)
+            return;
+        const field = this.field;
+        const setInput = (name, value) => this.componentRef?.setInput(name, value);
+        const inputType = String(field.type || 'text');
+        const fullWidth = field.fullWidth !== false;
+        // Common presentation belongs to this wrapper, not to the concrete control.
+        // Only pass inputs that are actually declared by the selected component.
+        switch (inputType) {
+            case 'text':
+            case 'number':
+            case 'date':
+            case 'datetime':
+            case 'email':
+            case 'password':
+            case 'textarea':
+                setInput('name', field.id);
+                setInput('id', field.id);
+                setInput('placeholder', field.placeholder);
+                setInput('pattern', field.pattern);
+                setInput('rows', field.rows ?? 4);
+                setInput('fullWidth', fullWidth);
+                break;
+            case 'slug':
+                setInput('name', field.id);
+                setInput('id', field.id);
+                setInput('placeholder', field.placeholder);
+                setInput('fullWidth', fullWidth);
+                break;
+            case 'select':
+                setInput('name', field.id);
+                setInput('placeholder', field.placeholder);
+                setInput('data', field.data);
+                setInput('options', field.options || []);
+                setInput('multiple', !!field.multiple);
+                setInput('searchable', field.searchable ?? !!field.data);
+                setInput('remoteSearch', !!field.data);
+                setInput('searchPlaceholder', field.placeholder || 'Пошук...');
+                setInput('fullWidth', fullWidth);
+                break;
+            case 'color':
+                setInput('name', field.id);
+                setInput('id', field.id);
+                setInput('required', false);
+                setInput('fullWidth', fullWidth);
+                break;
+            case 'file':
+                setInput('accept', field.accept);
+                setInput('multiple', !!field.multiple);
+                break;
+            case 'photo':
+                setInput('accept', field.accept || 'image/*');
+                setInput('multiple', !!field.multiple);
+                setInput('limit', field.limit ?? 0);
+                break;
+            case 'barcode':
+                setInput('label', '');
+                setInput('hint', '');
+                setInput('placeholder', field.placeholder);
+                setInput('disabled', this.disabled);
+                setInput('autoOpen', field.autoOpen !== false);
+                setInput('searchButtonLabel', field.searchButtonLabel || 'Знайти');
+                setInput('openCameraLabel', field.openCameraLabel || 'Відкрити камеру');
+                setInput('closeCameraLabel', field.closeCameraLabel || 'Закрити камеру');
+                setInput('cameraTitle', field.cameraTitle || 'Камера');
+                setInput('cameraStartingLabel', field.cameraStartingLabel || 'Запускаємо камеру…');
+                setInput('cameraHint', field.cameraHint || 'Наведіть камеру на штрихкод. Після зчитування код підставиться автоматично.');
+                setInput('value', this.value ?? '');
+                break;
+            case 'checkbox':
+                break;
+        }
+        const instance = this.componentRef.instance;
+        instance.writeValue?.(this.value);
+        instance.setDisabledState?.(this.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FieldInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FieldInputComponent, isStandalone: true, selector: "field-input", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered", lookupRequested: "lookupRequested", barcodeScanned: "barcodeScanned", filesChange: "filesChange", uploadingChange: "uploadingChange" }, viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="flex flex-col gap-1" [class.w-full]="field.fullWidth !== false">
+      @if (field.label) {
+        <label class="text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600" [attr.for]="field.id">
+          {{ field.label }}
+          @if (field.required) { <span aria-hidden="true" class="text-rose-500"> *</span> }
+        </label>
+      }
+
+      <div class="flex items-start gap-2" [class.rounded-xl]="!!error" [class.ring-2]="!!error" [class.ring-rose-200]="!!error">
+        <div class="min-w-0 w-full flex-1">
+          <ng-container #inputContainer></ng-container>
+        </div>
+
+        @if (actions.length) {
+          <div class="flex flex-none items-center gap-2 pt-0.5">
+            @for (action of actions; track action.id) {
+              <ui-button
+                type="button"
+                [variant]="action.variant ?? 'secondary'"
+                [icon]="action.icon || ''"
+                [size]="action.size || 'sm'"
+                [disabled]="disabled"
+                (click)="actionTriggered.emit(action)"
+              >
+                {{ action.label }}
+              </ui-button>
+            }
+          </div>
+        }
+      </div>
+
+      @if (field.hint) { <p class="text-[0.5rem] text-slate-500">{{ field.hint }}</p> }
+      @if (error) { <p class="text-[0.65rem] text-rose-500">{{ error }}</p> }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FieldInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'field-input',
+                    standalone: true,
+                    imports: [CommonModule, UiButtonComponent],
+                    template: `
+    <div class="flex flex-col gap-1" [class.w-full]="field.fullWidth !== false">
+      @if (field.label) {
+        <label class="text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600" [attr.for]="field.id">
+          {{ field.label }}
+          @if (field.required) { <span aria-hidden="true" class="text-rose-500"> *</span> }
+        </label>
+      }
+
+      <div class="flex items-start gap-2" [class.rounded-xl]="!!error" [class.ring-2]="!!error" [class.ring-rose-200]="!!error">
+        <div class="min-w-0 w-full flex-1">
+          <ng-container #inputContainer></ng-container>
+        </div>
+
+        @if (actions.length) {
+          <div class="flex flex-none items-center gap-2 pt-0.5">
+            @for (action of actions; track action.id) {
+              <ui-button
+                type="button"
+                [variant]="action.variant ?? 'secondary'"
+                [icon]="action.icon || ''"
+                [size]="action.size || 'sm'"
+                [disabled]="disabled"
+                (click)="actionTriggered.emit(action)"
+              >
+                {{ action.label }}
+              </ui-button>
+            }
+          </div>
+        }
+      </div>
+
+      @if (field.hint) { <p class="text-[0.5rem] text-slate-500">{{ field.hint }}</p> }
+      @if (error) { <p class="text-[0.65rem] text-rose-500">{{ error }}</p> }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], actionTriggered: [{
+                type: Output
+            }], lookupRequested: [{
+                type: Output
+            }], barcodeScanned: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }], uploadingChange: [{
+                type: Output
+            }], inputContainer: [{
+                type: ViewChild,
+                args: ['inputContainer', { read: ViewContainerRef }]
+            }] } });
+
+const isIdentifierStart = (value) => /[A-Za-z_$]/.test(value);
+const isIdentifierPart = (value) => /[A-Za-z0-9_.$-]/.test(value);
+const tokenize = (source) => {
+    const tokens = [];
+    let index = 0;
+    while (index < source.length) {
+        const char = source[index];
+        if (/\s/.test(char)) {
+            index += 1;
+            continue;
+        }
+        const three = source.slice(index, index + 3);
+        const two = source.slice(index, index + 2);
+        if (three === '===' || three === '!==') {
+            tokens.push({ type: 'operator', value: three });
+            index += 3;
+            continue;
+        }
+        if (two === '==' || two === '!=' || two === '&&' || two === '||') {
+            tokens.push({ type: 'operator', value: two });
+            index += 2;
+            continue;
+        }
+        if (char === '!' || char === '(' || char === ')') {
+            tokens.push({ type: 'operator', value: char });
+            index += 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            const quote = char;
+            let value = '';
+            let escaped = false;
+            index += 1;
+            while (index < source.length) {
+                const current = source[index++];
+                if (escaped) {
+                    value += current;
+                    escaped = false;
+                }
+                else if (current === '\\') {
+                    escaped = true;
+                }
+                else if (current === quote) {
+                    tokens.push({ type: 'value', value });
+                    break;
+                }
+                else {
+                    value += current;
+                }
+            }
+            if (source[index - 1] !== quote)
+                throw new Error('Unterminated string');
+            continue;
+        }
+        if (/[0-9.-]/.test(char)) {
+            const match = source.slice(index).match(/^-?\d+(?:\.\d+)?/);
+            if (match) {
+                tokens.push({ type: 'value', value: Number(match[0]) });
+                index += match[0].length;
+                continue;
+            }
+        }
+        if (isIdentifierStart(char)) {
+            let value = char;
+            index += 1;
+            while (index < source.length && isIdentifierPart(source[index]))
+                value += source[index++];
+            if (value === 'true')
+                tokens.push({ type: 'value', value: true });
+            else if (value === 'false')
+                tokens.push({ type: 'value', value: false });
+            else if (value === 'null')
+                tokens.push({ type: 'value', value: null });
+            else
+                tokens.push({ type: 'identifier', value });
+            continue;
+        }
+        throw new Error(`Unexpected token: ${char}`);
+    }
+    return tokens;
+};
+const getPathValue = (model, path) => {
+    return path.split('.').reduce((current, part) => {
+        if (current == null || typeof current !== 'object')
+            return undefined;
+        return current[part];
+    }, model);
+};
+const evaluateFormCondition = (source, model) => {
+    const tokens = tokenize(String(source || '').trim());
+    let index = 0;
+    const peek = () => tokens[index];
+    const consume = () => {
+        const token = tokens[index++];
+        if (!token)
+            throw new Error('Unexpected end of condition');
+        return token;
+    };
+    const matchOperator = (...values) => {
+        const token = peek();
+        if (token?.type !== 'operator' || !values.includes(token.value))
+            return false;
+        index += 1;
+        return true;
+    };
+    const toBoolean = (value) => typeof value === 'string' ? value.trim().length > 0 : Boolean(value);
+    const parseExpression = () => parseOr();
+    const parseOr = () => {
+        let value = parseAnd();
+        while (matchOperator('||'))
+            value = toBoolean(value) || toBoolean(parseAnd());
+        return value;
+    };
+    const parseAnd = () => {
+        let value = parseEquality();
+        while (matchOperator('&&'))
+            value = toBoolean(value) && toBoolean(parseEquality());
+        return value;
+    };
+    const parseEquality = () => {
+        let value = parseUnary();
+        while (true) {
+            if (matchOperator('==')) {
+                value = value == parseUnary();
+                continue;
+            }
+            if (matchOperator('!=')) {
+                value = value != parseUnary();
+                continue;
+            }
+            if (matchOperator('===')) {
+                value = value === parseUnary();
+                continue;
+            }
+            if (matchOperator('!==')) {
+                value = value !== parseUnary();
+                continue;
+            }
+            return value;
+        }
+    };
+    const parseUnary = () => matchOperator('!') ? !toBoolean(parseUnary()) : parsePrimary();
+    const parsePrimary = () => {
+        if (matchOperator('(')) {
+            const value = parseExpression();
+            if (!matchOperator(')'))
+                throw new Error('Missing closing parenthesis');
+            return value;
+        }
+        const token = consume();
+        if (token.type === 'value')
+            return token.value;
+        if (token.type !== 'identifier')
+            throw new Error('Expected value');
+        if (token.value === 'Number' && matchOperator('(')) {
+            const value = Number(parseExpression());
+            if (!matchOperator(')'))
+                throw new Error('Missing closing parenthesis');
+            return Number.isNaN(value) ? undefined : value;
+        }
+        return getPathValue(model, token.value);
+    };
+    if (!tokens.length)
+        return true;
+    const result = parseExpression();
+    if (index !== tokens.length)
+        throw new Error('Unexpected tokens after condition');
+    return toBoolean(result);
+};
+
+class DynamicFormComponent {
     lookupService = inject(UiFormLookupService);
     formContext = inject(UiFormContext);
-    optionsSourceResolvers = inject(UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS, { optional: true }) ?? [];
     fields = [];
     value = {};
     errors = {};
@@ -2450,15 +2843,8 @@ class UiDynamicFormComponent {
     uploadingChange = new EventEmitter();
     fieldActionTriggered = new EventEmitter();
     modelSignal = signal({}, ...(ngDevMode ? [{ debugName: "modelSignal" }] : /* istanbul ignore next */ []));
-    dictionaryOptionsSignal = signal({}, ...(ngDevMode ? [{ debugName: "dictionaryOptionsSignal" }] : /* istanbul ignore next */ []));
     lookupLoadingSignal = signal({}, ...(ngDevMode ? [{ debugName: "lookupLoadingSignal" }] : /* istanbul ignore next */ []));
     lookupErrorsSignal = signal({}, ...(ngDevMode ? [{ debugName: "lookupErrorsSignal" }] : /* istanbul ignore next */ []));
-    selectSearchChanges = new Map();
-    selectSearchSubscriptions = new Map();
-    optionsSourceRequestVersions = new Map();
-    ngOnInit() {
-        this.ensureOptionsSourceOptionsLoaded(this.modelSignal());
-    }
     ngOnChanges(changes) {
         if ('fields' in changes || 'value' in changes) {
             const next = { ...this.value };
@@ -2476,19 +2862,12 @@ class UiDynamicFormComponent {
             this.formContext.setErrors(this.errors);
             this.formContext.disabled.set(this.disabled);
         }
-        if ('fields' in changes || 'value' in changes) {
-            this.ensureOptionsSourceOptionsLoaded(this.modelSignal());
-        }
-    }
-    ngOnDestroy() {
-        this.cleanupSelectSearchStreams();
     }
     updateField(fieldId, nextValue) {
         this.modelSignal.update((current) => {
             const updated = { ...current, [fieldId]: nextValue };
             this.formContext.setValue(updated);
             this.valueChange.emit(updated);
-            this.ensureOptionsSourceOptionsLoaded(updated);
             return updated;
         });
     }
@@ -2503,18 +2882,17 @@ class UiDynamicFormComponent {
         this.updateField(field.id, value);
         this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
     }
-    onBarcodeScanned(field, value) {
+    onFieldValueChange(field, value) {
         this.updateField(field.id, value);
-        this.runFieldLookup(field, value);
+        this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
+        if (field.type === 'select' && field.lookupApi) {
+            const lookupValue = Array.isArray(value) ? '' : String(value || '').trim();
+            this.runFieldLookup(field, lookupValue);
+        }
     }
-    onSelectValueChange(field, value) {
+    onBarcodeScanned(field, value) {
         this.updateField(field.id, value);
-        const nextValue = Array.isArray(value) ? '' : String(value || '').trim();
-        if (field.lookupApi) {
-            this.runFieldLookup(field, nextValue);
-            return;
-        }
-        this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
+        this.runFieldLookup(field, value);
     }
     runBarcodeLookup(field) {
         this.runFieldLookup(field);
@@ -2561,8 +2939,7 @@ class UiDynamicFormComponent {
                 return true;
             }
             try {
-                const evaluator = new Function('model', `with (model) { return !!(${condition}); }`);
-                return evaluator(model);
+                return evaluateFormCondition(condition, model);
             }
             catch {
                 return true;
@@ -2582,7 +2959,7 @@ class UiDynamicFormComponent {
             return false;
         const condition = raw.startsWith('${') && raw.endsWith('}') ? raw.slice(2, -1).trim() : raw;
         try {
-            return Boolean(Function('model', `with (model) { return Boolean(${condition}); }`)(this.modelSignal()));
+            return evaluateFormCondition(condition, this.modelSignal());
         }
         catch {
             return false;
@@ -2594,13 +2971,6 @@ class UiDynamicFormComponent {
     isTextArea(field) {
         return (field.type ?? 'text') === 'textarea';
     }
-    isInputField(field) {
-        const type = field.type ?? 'text';
-        return type === 'text' || type === 'number' || type === 'date' || type === 'datetime' || type === 'email' || type === 'password' || type === 'textarea';
-    }
-    isBarcodeField(field) {
-        return field.type === 'barcode';
-    }
     getStringValue(fieldId) {
         return String(this.modelSignal()[fieldId] || '');
     }
@@ -2632,8 +3002,7 @@ class UiDynamicFormComponent {
             : hidden;
         try {
             const model = this.modelSignal();
-            const evaluator = new Function('model', `with (model) { return !!(${expression}); }`);
-            return !evaluator(model);
+            return !evaluateFormCondition(expression, model);
         }
         catch {
             return false;
@@ -2648,16 +3017,6 @@ class UiDynamicFormComponent {
             return 'datetime-local';
         return 'text';
     }
-    resolveSelectOptions(field) {
-        if (field.options?.length) {
-            return field.options;
-        }
-        const sourceKey = String(field.optionsSource || '').trim();
-        if (!sourceKey) {
-            return [];
-        }
-        return this.dictionaryOptionsSignal()[sourceKey] ?? [];
-    }
     renderTemplate(field) {
         const template = this.isTemplateField(field) ? field.template : '';
         if (!template) {
@@ -2730,103 +3089,6 @@ class UiDynamicFormComponent {
         };
         return classes[span] || classes[12];
     }
-    onSelectSearchChange(field, query) {
-        const key = String(field.optionsSource || '').trim();
-        if (!key)
-            return;
-        this.getSelectSearchStream(field, key).next(String(query ?? ''));
-    }
-    ensureOptionsSourceOptionsLoaded(model) {
-        const sourceKeys = [...new Set(this.getLeafFields()
-                .filter((field) => (field.type ?? 'text') === 'select' && !!field.optionsSource)
-                .map((field) => String(field.optionsSource || '').trim())
-                .filter(Boolean))];
-        if (!sourceKeys.length) {
-            return;
-        }
-        for (const sourceKey of sourceKeys) {
-            const resolver = this.optionsSourceResolvers.find((item) => item.source === sourceKey);
-            if (!resolver) {
-                continue;
-            }
-            const sourceFields = this.getLeafFields().filter((field) => String(field.optionsSource || '').trim() === sourceKey);
-            if (!sourceFields.length) {
-                continue;
-            }
-            const version = (this.optionsSourceRequestVersions.get(sourceKey) || 0) + 1;
-            this.optionsSourceRequestVersions.set(sourceKey, version);
-            forkJoin(sourceFields.map((field) => {
-                const resolved = resolver
-                    ? resolver.resolve({ source: sourceKey, field, model })
-                    : this.formsApi.getSuggestByName(sourceKey);
-                return resolved instanceof Observable ? resolved : from(Promise.resolve(resolved));
-            })).subscribe({
-                next: (results) => {
-                    if ((this.optionsSourceRequestVersions.get(sourceKey) || 0) !== version) {
-                        return;
-                    }
-                    const options = results
-                        .flat()
-                        .map((item) => ({
-                        label: String(item?.label ?? ''),
-                        value: item?.value == null ? null : String(item.value),
-                        disabled: typeof item?.disabled === 'boolean' ? item.disabled : undefined,
-                        imageUrl: item?.imageUrl ? String(item.imageUrl) : undefined,
-                    }))
-                        .filter((item) => !!item.label || item.value !== null);
-                    this.dictionaryOptionsSignal.update((current) => ({
-                        ...current,
-                        [sourceKey]: options,
-                    }));
-                },
-            });
-        }
-    }
-    getSelectSearchStream(field, key) {
-        const normalizedKey = String(key || '').trim();
-        const existing = this.selectSearchChanges.get(normalizedKey);
-        if (existing) {
-            return existing;
-        }
-        const search$ = new Subject();
-        this.selectSearchChanges.set(normalizedKey, search$);
-        const subscription = search$
-            .pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
-            const resolver = this.optionsSourceResolvers.find((item) => item.source === normalizedKey);
-            if (resolver) {
-                return resolver.resolve({ source: normalizedKey, field, model: this.modelSignal(), query });
-            }
-            return this.formsApi.getSuggestByName(normalizedKey, query);
-        }))
-            .subscribe({
-            next: (items) => {
-                const resolver = this.optionsSourceResolvers.find((item) => item.source === normalizedKey);
-                this.dictionaryOptionsSignal.update((current) => ({
-                    ...current,
-                    [normalizedKey]: resolver
-                        ? (items ?? []).map((item) => ({
-                            label: String(item?.label ?? ''),
-                            value: item?.value == null ? null : String(item.value),
-                            disabled: item?.disabled,
-                            imageUrl: item?.imageUrl ? String(item.imageUrl) : undefined,
-                        }))
-                        : (items ?? []).map((item) => ({
-                            label: String(item?.label ?? ''),
-                            value: item?.['key'] != null ? String(item['key']) : null,
-                        })),
-                }));
-            },
-        });
-        this.selectSearchSubscriptions.set(normalizedKey, subscription);
-        return search$;
-    }
-    cleanupSelectSearchStreams() {
-        for (const subscription of this.selectSearchSubscriptions.values()) {
-            subscription.unsubscribe();
-        }
-        this.selectSearchSubscriptions.clear();
-        this.selectSearchChanges.clear();
-    }
     applyLookupResponse(field, response) {
         const lookupMap = field.lookupMap || {};
         const mapped = Object.entries(lookupMap).reduce((acc, [targetField, sourcePath]) => {
@@ -2837,7 +3099,6 @@ class UiDynamicFormComponent {
             const updated = { ...current, ...mapped };
             this.formContext.setValue(updated);
             this.valueChange.emit(updated);
-            this.ensureOptionsSourceOptionsLoaded(updated);
             return updated;
         });
     }
@@ -2859,12 +3120,12 @@ class UiDynamicFormComponent {
     getLeafFields() {
         return this.getFlatFields().filter((field) => field.type !== 'container' && field.type !== 'template');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDynamicFormComponent, isStandalone: true, selector: "forms-dynamic-form", inputs: { fields: "fields", value: "value", errors: "errors", submitLabel: "submitLabel", showSubmit: "showSubmit", disabled: "disabled" }, outputs: { valueChange: "valueChange", lookupCompleted: "lookupCompleted", submitted: "submitted", filesChange: "filesChange", uploadingChange: "uploadingChange", fieldActionTriggered: "fieldActionTriggered" }, providers: [UiFormContext, UiFormLookupService], usesOnChanges: true, ngImport: i0, template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          @if (isBarcodeField(field)) {\n            <forms-barcode-scanner-input\n              [label]=\"field.label || '\u0428\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [placeholder]=\"field.placeholder || '\u0412\u0456\u0434\u0441\u043A\u0430\u043D\u0443\u0439\u0442\u0435 \u0430\u0431\u043E \u0432\u0432\u0435\u0434\u0456\u0442\u044C \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [hint]=\"field.hint || '\u0421\u043A\u0430\u043D\u0435\u0440 \u043C\u043E\u0436\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0432\u0432\u0435\u0441\u0442\u0438 \u043A\u043E\u0434 \u0456 \u043D\u0430\u0442\u0438\u0441\u043D\u0443\u0442\u0438 Enter.'\"\n              [disabled]=\"isFieldDisabled(field) || isLookupLoading(field.id)\"\n              [autoOpen]=\"field.autoOpen !== false\"\n              [value]=\"getStringValue(field.id)\"\n              [searchButtonLabel]=\"field.searchButtonLabel || '\u0417\u043D\u0430\u0439\u0442\u0438'\"\n              [openCameraLabel]=\"field.openCameraLabel || '\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [closeCameraLabel]=\"field.closeCameraLabel || '\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [cameraTitle]=\"field.cameraTitle || '\u041A\u0430\u043C\u0435\u0440\u0430'\"\n              [cameraStartingLabel]=\"field.cameraStartingLabel || '\u0417\u0430\u043F\u0443\u0441\u043A\u0430\u0454\u043C\u043E \u043A\u0430\u043C\u0435\u0440\u0443\u2026'\"\n              [cameraHint]=\"field.cameraHint || '\u041D\u0430\u0432\u0435\u0434\u0456\u0442\u044C \u043A\u0430\u043C\u0435\u0440\u0443 \u043D\u0430 \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434. \u041F\u0456\u0441\u043B\u044F \u0437\u0447\u0438\u0442\u0443\u0432\u0430\u043D\u043D\u044F \u043A\u043E\u0434 \u043F\u0456\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044C\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u043D\u043E.'\"\n              (valueChange)=\"onBarcodeValueChange(field, $event)\"\n              (searchRequested)=\"runBarcodeLookup(field)\"\n              (scanned)=\"onBarcodeScanned(field, $event)\"\n            ></forms-barcode-scanner-input>\n            @if (getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (isInputField(field)) {\n            <forms-form-input-host\n              [field]=\"field\"\n              [value]=\"modelSignal()[field.id]\"\n              [disabled]=\"disabled\"\n              [error]=\"errors[field.id] ?? ''\"\n              [actions]=\"resolveFieldActions(field)\"\n              (valueChange)=\"updateField(field.id, $any($event))\"\n              (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            ></forms-form-input-host>\n          }\n\n          @if (field.type === 'select') {\n            <forms-select\n              [name]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [data]=\"field.data\"\n              [required]=\"!!field.required\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [options]=\"resolveSelectOptions(field)\"\n              [searchable]=\"(field.searchable ?? !!field.data) || !!field.optionsSource\"\n              [remoteSearch]=\"!!field.optionsSource\"\n              (searchChange)=\"field.optionsSource ? onSelectSearchChange(field, $event) : null\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"onSelectValueChange(field, $event)\">\n            </forms-select>\n            @if (field.lookupApi && getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (field.type === 'checkbox') {\n            <forms-checkbox-input\n              [label]=\"field.label\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"!!modelSignal()[field.id]\"\n              (valueChange)=\"updateField(field.id, $event)\"\n            ></forms-checkbox-input>\n          }\n\n          @if (field.type === 'color') {\n            <forms-color-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-color-input>\n          }\n\n          @if (field.type === 'slug') {\n            <forms-slug-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [readonly]=\"!!field.readonly\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-slug-input>\n          }\n\n          @if (field.type === 'photo') {\n            <forms-photo-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept ?? 'image/*'\"\n              [multiple]=\"!!field.multiple\"\n              [limit]=\"field.limit ?? 0\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n              (uploadingChange)=\"uploadingChange.emit($event)\"\n            ></forms-photo-input>\n          }\n          @if (field.type === 'file') {\n            <forms-file-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            ></forms-file-input>\n          }\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiFormInputHostComponent, selector: "forms-form-input-host", inputs: ["field", "value", "error", "disabled", "actions", "options"], outputs: ["valueChange", "actionTriggered"] }, { kind: "component", type: UiFileInputComponent, selector: "forms-file-input", inputs: ["label", "hint", "accept", "multiple", "disabled", "value"], outputs: ["valueChange", "filesChange"] }, { kind: "component", type: UiPhotoInputComponent, selector: "forms-photo-input", inputs: ["label", "hint", "accept", "multiple", "limit", "disabled", "value"], outputs: ["valueChange", "filesChange", "uploadingChange"] }, { kind: "component", type: UiCheckboxInputComponent, selector: "forms-checkbox-input", inputs: ["label", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: UiColorInputComponent, selector: "forms-color-input", inputs: ["label", "hint", "name", "id", "required", "fullWidth", "error"] }, { kind: "component", type: UiSlugInputComponent, selector: "forms-slug-input", inputs: ["label", "hint", "placeholder", "name", "id", "required", "fullWidth", "autocomplete", "readonly", "error"], outputs: ["invalidInput"] }, { kind: "component", type: UiBarcodeScannerInputComponent, selector: "forms-barcode-scanner-input", inputs: ["value", "label", "placeholder", "hint", "disabled", "autoOpen", "searchButtonLabel", "openCameraLabel", "closeCameraLabel", "cameraTitle", "cameraStartingLabel", "cameraHint"], outputs: ["valueChange", "scanned", "searchRequested", "cameraStateChange"] }, { kind: "component", type: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { fields: "fields", value: "value", errors: "errors", submitLabel: "submitLabel", showSubmit: "showSubmit", disabled: "disabled" }, outputs: { valueChange: "valueChange", lookupCompleted: "lookupCompleted", submitted: "submitted", filesChange: "filesChange", uploadingChange: "uploadingChange", fieldActionTriggered: "fieldActionTriggered" }, providers: [UiFormContext, UiFormLookupService], usesOnChanges: true, ngImport: i0, template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          <field-input\n            [field]=\"field\"\n            [value]=\"modelSignal()[field.id]\"\n            [disabled]=\"disabled || isFieldDisabled(field) || isLookupLoading(field.id)\"\n            [error]=\"errors[field.id] ?? getLookupError(field.id)\"\n            [actions]=\"resolveFieldActions(field)\"\n            (valueChange)=\"onFieldValueChange(field, $event)\"\n            (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            (lookupRequested)=\"runBarcodeLookup(field)\"\n            (barcodeScanned)=\"onBarcodeScanned(field, $event)\"\n            (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            (uploadingChange)=\"uploadingChange.emit($event)\"\n          ></field-input>\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: FieldInputComponent, selector: "field-input", inputs: ["field", "value", "error", "disabled", "actions"], outputs: ["valueChange", "actionTriggered", "lookupRequested", "barcodeScanned", "filesChange", "uploadingChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-dynamic-form', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, UiFormInputHostComponent, UiFileInputComponent, UiPhotoInputComponent, UiCheckboxInputComponent, UiColorInputComponent, UiSlugInputComponent, UiBarcodeScannerInputComponent, UiSelectComponent], providers: [UiFormContext, UiFormLookupService], template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          @if (isBarcodeField(field)) {\n            <forms-barcode-scanner-input\n              [label]=\"field.label || '\u0428\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [placeholder]=\"field.placeholder || '\u0412\u0456\u0434\u0441\u043A\u0430\u043D\u0443\u0439\u0442\u0435 \u0430\u0431\u043E \u0432\u0432\u0435\u0434\u0456\u0442\u044C \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [hint]=\"field.hint || '\u0421\u043A\u0430\u043D\u0435\u0440 \u043C\u043E\u0436\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0432\u0432\u0435\u0441\u0442\u0438 \u043A\u043E\u0434 \u0456 \u043D\u0430\u0442\u0438\u0441\u043D\u0443\u0442\u0438 Enter.'\"\n              [disabled]=\"isFieldDisabled(field) || isLookupLoading(field.id)\"\n              [autoOpen]=\"field.autoOpen !== false\"\n              [value]=\"getStringValue(field.id)\"\n              [searchButtonLabel]=\"field.searchButtonLabel || '\u0417\u043D\u0430\u0439\u0442\u0438'\"\n              [openCameraLabel]=\"field.openCameraLabel || '\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [closeCameraLabel]=\"field.closeCameraLabel || '\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [cameraTitle]=\"field.cameraTitle || '\u041A\u0430\u043C\u0435\u0440\u0430'\"\n              [cameraStartingLabel]=\"field.cameraStartingLabel || '\u0417\u0430\u043F\u0443\u0441\u043A\u0430\u0454\u043C\u043E \u043A\u0430\u043C\u0435\u0440\u0443\u2026'\"\n              [cameraHint]=\"field.cameraHint || '\u041D\u0430\u0432\u0435\u0434\u0456\u0442\u044C \u043A\u0430\u043C\u0435\u0440\u0443 \u043D\u0430 \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434. \u041F\u0456\u0441\u043B\u044F \u0437\u0447\u0438\u0442\u0443\u0432\u0430\u043D\u043D\u044F \u043A\u043E\u0434 \u043F\u0456\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044C\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u043D\u043E.'\"\n              (valueChange)=\"onBarcodeValueChange(field, $event)\"\n              (searchRequested)=\"runBarcodeLookup(field)\"\n              (scanned)=\"onBarcodeScanned(field, $event)\"\n            ></forms-barcode-scanner-input>\n            @if (getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (isInputField(field)) {\n            <forms-form-input-host\n              [field]=\"field\"\n              [value]=\"modelSignal()[field.id]\"\n              [disabled]=\"disabled\"\n              [error]=\"errors[field.id] ?? ''\"\n              [actions]=\"resolveFieldActions(field)\"\n              (valueChange)=\"updateField(field.id, $any($event))\"\n              (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            ></forms-form-input-host>\n          }\n\n          @if (field.type === 'select') {\n            <forms-select\n              [name]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [data]=\"field.data\"\n              [required]=\"!!field.required\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [options]=\"resolveSelectOptions(field)\"\n              [searchable]=\"(field.searchable ?? !!field.data) || !!field.optionsSource\"\n              [remoteSearch]=\"!!field.optionsSource\"\n              (searchChange)=\"field.optionsSource ? onSelectSearchChange(field, $event) : null\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"onSelectValueChange(field, $event)\">\n            </forms-select>\n            @if (field.lookupApi && getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (field.type === 'checkbox') {\n            <forms-checkbox-input\n              [label]=\"field.label\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"!!modelSignal()[field.id]\"\n              (valueChange)=\"updateField(field.id, $event)\"\n            ></forms-checkbox-input>\n          }\n\n          @if (field.type === 'color') {\n            <forms-color-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-color-input>\n          }\n\n          @if (field.type === 'slug') {\n            <forms-slug-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [readonly]=\"!!field.readonly\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-slug-input>\n          }\n\n          @if (field.type === 'photo') {\n            <forms-photo-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept ?? 'image/*'\"\n              [multiple]=\"!!field.multiple\"\n              [limit]=\"field.limit ?? 0\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n              (uploadingChange)=\"uploadingChange.emit($event)\"\n            ></forms-photo-input>\n          }\n          @if (field.type === 'file') {\n            <forms-file-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            ></forms-file-input>\n          }\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n" }]
+            args: [{ selector: 'dynamic-form', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, FieldInputComponent], providers: [UiFormContext, UiFormLookupService], template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        [disabled]=\"disabled\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          <field-input\n            [field]=\"field\"\n            [value]=\"modelSignal()[field.id]\"\n            [disabled]=\"disabled || isFieldDisabled(field) || isLookupLoading(field.id)\"\n            [error]=\"errors[field.id] ?? getLookupError(field.id)\"\n            [actions]=\"resolveFieldActions(field)\"\n            (valueChange)=\"onFieldValueChange(field, $event)\"\n            (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            (lookupRequested)=\"runBarcodeLookup(field)\"\n            (barcodeScanned)=\"onBarcodeScanned(field, $event)\"\n            (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            (uploadingChange)=\"uploadingChange.emit($event)\"\n          ></field-input>\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n" }]
         }], propDecorators: { fields: [{
                 type: Input
             }], value: [{
@@ -2891,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiActionFormModalComponent {
+class FormModalComponent {
     formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : /* istanbul ignore next */ []));
     recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -2902,6 +3163,7 @@ class UiActionFormModalComponent {
     completed = output();
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
+    isActionRunning = signal(false, ...(ngDevMode ? [{ debugName: "isActionRunning" }] : /* istanbul ignore next */ []));
     isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
     formConfig = signal(null, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     formValue = signal({}, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
@@ -2915,17 +3177,14 @@ class UiActionFormModalComponent {
     }), ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     http = inject(HttpClient);
     router = inject(Router);
+    toast = inject(UiToastService);
     ngOnChanges(changes) {
         if (this.isOpen() && ('isOpen' in changes || 'formId' in changes || 'recordId' in changes)) {
             this.loadForm();
         }
     }
-    close() {
-        this.closed.emit();
-    }
-    onValueChange(value) {
-        this.formValue.set(value);
-    }
+    close() { this.closed.emit(); }
+    onValueChange(value) { this.formValue.set(value); }
     onLookupCompleted(event) {
         const redirectTo = String(this.formConfig()?.redirectTo || '').trim();
         if (!redirectTo)
@@ -2937,24 +3196,30 @@ class UiActionFormModalComponent {
             void this.router.navigateByUrl(target.startsWith('/') ? target : `/${target}`);
         }
     }
-    onUploadingChange(uploading) {
-        this.isUploading.set(uploading);
-    }
+    onUploadingChange(uploading) { this.isUploading.set(uploading); }
     onFieldActionTriggered(event) {
+        if (this.isActionRunning() || this.isSubmitting())
+            return;
         const payload = this.normalizePayload({ ...this.formValue(), ...(event.action.payload || {}) });
         const endpoint = this.resolveTemplate(this.resolveEndpoint(event.action.api), payload);
         if (!endpoint)
             return;
+        this.isActionRunning.set(true);
         this.http.request(this.resolveMethod(event.action.method), endpoint, { body: payload }).subscribe({
             next: (response) => {
                 const data = this.extractData(response);
                 if (data)
                     this.formValue.update((current) => ({ ...current, ...data }));
+                this.isActionRunning.set(false);
+            },
+            error: (error) => {
+                this.isActionRunning.set(false);
+                this.toast.show(error?.error?.message || 'Не вдалося виконати дію', 'error', 4000);
             },
         });
     }
     confirm() {
-        if (this.isSubmitting())
+        if (this.isSubmitting() || this.isActionRunning() || this.isUploading())
             return;
         const action = this.submitAction();
         const endpointTemplate = this.formConfig()?.api || action?.api;
@@ -2962,6 +3227,13 @@ class UiActionFormModalComponent {
         if (!endpoint)
             return;
         const payload = this.normalizePayload({ ...(this.initialValue() || {}), ...(action?.payload || {}), ...this.formValue() });
+        const missingFields = flattenDynamicFormFields(this.fields())
+            .filter((field) => field.type !== 'container' && field.type !== 'template' && field.required && this.isEmptyValue(payload[field.id]))
+            .map((field) => String(field.label || field.title || field.id));
+        if (missingFields.length) {
+            this.toast.show(`Заповніть обов’язкові поля: ${missingFields.join(', ')}`, 'warning', 4000);
+            return;
+        }
         const recordId = String(this.recordId() || '').trim();
         if (recordId && !Object.prototype.hasOwnProperty.call(payload, 'id'))
             payload['id'] = recordId;
@@ -2976,7 +3248,10 @@ class UiActionFormModalComponent {
                 this.navigateAfterSubmit(response);
                 this.close();
             },
-            error: () => this.isSubmitting.set(false),
+            error: (error) => {
+                this.isSubmitting.set(false);
+                this.toast.show(error?.error?.message || 'Не вдалося відправити форму', 'error', 4000);
+            },
         });
     }
     loadForm() {
@@ -2992,10 +3267,7 @@ class UiActionFormModalComponent {
                 const config = {
                     ...raw,
                     title: raw.title || raw.meta?.title,
-                    actions: (raw.actions || []).map((action) => ({
-                        ...action,
-                        type: this.normalizeActionType(action.type),
-                    })),
+                    actions: (raw.actions || []).map((action) => ({ ...action, type: this.normalizeActionType(action.type) })),
                 };
                 this.formConfig.set(config);
                 this.formValue.set({ ...(config.defaults || {}), ...(config.item || {}), ...(this.initialValue() || {}), ...(recordId ? { id: recordId } : {}) });
@@ -3020,12 +3292,22 @@ class UiActionFormModalComponent {
             if (field.type !== 'photo' || !field.multiple)
                 continue;
             const value = payload[field.id];
-            if (typeof value === 'string') {
+            if (typeof value === 'string')
                 payload[field.id] = value.split(',').map((item) => item.trim()).filter(Boolean);
-            }
         }
         return payload;
     }
+    isEmptyValue(value) {
+        if (value == null)
+            return true;
+        if (Array.isArray(value))
+            return value.length === 0;
+        if (typeof value === 'string')
+            return value.trim() === '';
+        if (typeof value === 'number')
+            return !Number.isFinite(value);
+        return false;
+    }
     normalizeActionType(type) {
         const normalized = String(type || '').trim().toLowerCase();
         if (normalized === 'api' || normalized === 'action_api')
@@ -3063,15 +3345,15 @@ class UiActionFormModalComponent {
             return value == null || value === '' ? '' : encodeURIComponent(String(value));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormModalComponent, isStandalone: true, selector: "form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [disabled]=\"isLoading() || isSubmitting() || isActionRunning()\" [showSubmit]=\"false\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: DynamicFormComponent, selector: "dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, DynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [disabled]=\"isLoading() || isSubmitting() || isActionRunning()\" [showSubmit]=\"false\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
-class UiInputComponent {
+class InputComponent {
     cdr = inject(ChangeDetectorRef);
     label;
     hint;
@@ -3084,14 +3366,13 @@ class UiInputComponent {
     required = false;
     fullWidth = false;
     autocomplete;
-    readonly = false;
     pattern;
     error;
     actions = [];
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `ui-input-${UiInputComponent.nextId++}`;
+    generatedId = `input-${InputComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     get controlId() {
         return this.id ?? this.generatedId;
@@ -3120,24 +3401,24 @@ class UiInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiInputComponent, isStandalone: true, selector: "forms-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputComponent, isStandalone: true, selector: "input-base", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UiInputComponent),
+                useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-base', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UiInputComponent),
+                            useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -3160,8 +3441,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], pattern: [{
                 type: Input
             }], error: [{
@@ -3172,7 +3451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiPhotoGalleryFieldComponent {
+class InputPhotoGalleryComponent {
     http = inject(HttpClient);
     label = 'Фото';
     orderLabel = 'Порядок фото (перетягуй)';
@@ -3314,12 +3593,12 @@ class UiPhotoGalleryFieldComponent {
         formData.append('file', file);
         return this.http.post('/api/files/', formData).pipe(map((response) => ({ imageId: response.id })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoGalleryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPhotoGalleryFieldComponent, isStandalone: true, selector: "forms-photo-gallery-field", inputs: { label: "label", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoGalleryComponent, isStandalone: true, selector: "input-photo-gallery", inputs: { label: "label", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoGalleryFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-photo-gallery-field', standalone: true, imports: [CommonModule, DragDropModule], template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"] }]
+            args: [{ selector: 'input-photo-gallery', standalone: true, imports: [CommonModule, DragDropModule], template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], orderLabel: [{
@@ -3338,7 +3617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class UiRangeSliderComponent {
+class InputRangeSliderComponent {
     min = 0;
     max = 100;
     step = 1;
@@ -3427,8 +3706,8 @@ class UiRangeSliderComponent {
         input.step = String(this.safeStep);
         input.value = String(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiRangeSliderComponent, isStandalone: true, selector: "forms-range-slider", inputs: { min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputRangeSliderComponent, isStandalone: true, selector: "input-range-slider", inputs: { min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="range-slider">
       <div class="range-slider__track"></div>
       <div
@@ -3463,9 +3742,9 @@ class UiRangeSliderComponent {
     </div>
   `, isInline: true, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-range-slider', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'input-range-slider', standalone: true, imports: [CommonModule], template: `
     <div class="range-slider">
       <div class="range-slider__track"></div>
       <div
@@ -3531,5 +3810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_API, ACTION_FORM, ACTION_PRINT, ACTION_SUBMIT, MaroFormsApiService, UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS, UI_FORM_INPUT_REGISTRY, UiActionFormModalComponent, UiBarcodeScannerInputComponent, UiCheckboxInputComponent, UiColorInputComponent, UiDateInputComponent, UiDatetimeInputComponent, UiDynamicFormComponent, UiEmailInputComponent, UiFileInputComponent, UiFormContext, UiFormInputHostComponent, UiFormLookupService, UiInputComponent, UiNumberInputComponent, UiPasswordInputComponent, UiPhotoGalleryFieldComponent, UiPhotoInputComponent, UiRangeSliderComponent, UiSelectComponent, UiSlugInputComponent, UiTextInputComponent, UiTextareaInputComponent, flattenDynamicFormFields, isDynamicFormContainerField, isDynamicFormTemplateField };
+export { ACTION_API, ACTION_FORM, ACTION_PRINT, ACTION_SUBMIT, DynamicFormComponent, FieldInputComponent, FormModalComponent, InputBarcodeComponent, InputCheckboxComponent, InputColorComponent, InputComponent, InputDateComponent, InputDatetimeComponent, InputEmailComponent, InputFileComponent, InputNumberComponent, InputPasswordComponent, InputPhotoComponent, InputPhotoGalleryComponent, InputRangeSliderComponent, InputSelectComponent, InputSlugComponent, InputTextComponent, InputTextareaComponent, MaroFormsApiService, UI_FORM_INPUT_REGISTRY, UiFormContext, UiFormLookupService, flattenDynamicFormFields, isDynamicFormContainerField, isDynamicFormTemplateField };
 //# sourceMappingURL=maro-tech-form.mjs.map