@maro-tech/form 0.1.2 → 0.1.4

package/fesm2022/maro-tech-form.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, input, output, ViewChild, forwardRef, ChangeDetectorRef, HostListener, DestroyRef, ElementRef, booleanAttribute, ViewContainerRef, computed } from '@angular/core';
+import { signal, Injectable, inject, EventEmitter, Output, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, ViewChild, forwardRef, ChangeDetectorRef, HostListener, DestroyRef, ElementRef, booleanAttribute, ViewContainerRef, computed } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { throwError, forkJoin, map, Subject, debounceTime, distinctUntilChanged, of } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import { UiButtonComponent, UiToastService } from '@maro-tech/core';
 import * as i1 from 'lucide-angular';
 import { Camera, CameraOff, CalendarDays, ChevronLeft, ChevronRight, LucideAngularModule, Eye, EyeOff, X, ChevronDown, Check } from 'lucide-angular';
@@ -111,13 +111,16 @@ class FieldFrameComponent {
     forId;
     disabled = false;
     actions = [];
+    get hasError() {
+        return !!String(this.error || '').trim();
+    }
     actionTriggered = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FieldFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FieldFrameComponent, isStandalone: true, selector: "field-frame", inputs: { label: "label", hint: "hint", error: "error", required: "required", forId: "forId", disabled: "disabled", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, ngImport: i0, template: "<div class=\"relative w-full flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\">\n  @if (label) {\n    <label class=\"text-[0.7rem] font-semibold text-slate-600\" [attr.for]=\"forId\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\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)=\"actionTriggered.emit(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=\"absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FieldFrameComponent, isStandalone: true, selector: "field-frame", inputs: { label: "label", hint: "hint", error: "error", required: "required", forId: "forId", disabled: "disabled", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { properties: { "class.field-error": "this.hasError" } }, ngImport: i0, template: "<div class=\"relative w-full flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\">\n  @if (label) {\n    <label class=\"text-[0.7rem] font-semibold text-slate-600\" [attr.for]=\"forId\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\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)=\"actionTriggered.emit(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=\"absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-red-500\">{{ error }}</p>\n  }\n</div>\n", styles: [":host(.field-error) ::ng-deep [data-field-control]{border-color:#fca5a5;box-shadow:0 0 0 2px #fee2e2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: FieldFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'field-frame', standalone: true, imports: [CommonModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative w-full flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\">\n  @if (label) {\n    <label class=\"text-[0.7rem] font-semibold text-slate-600\" [attr.for]=\"forId\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\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)=\"actionTriggered.emit(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=\"absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</div>\n" }]
+            args: [{ selector: 'field-frame', standalone: true, imports: [CommonModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative w-full flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\">\n  @if (label) {\n    <label class=\"text-[0.7rem] font-semibold text-slate-600\" [attr.for]=\"forId\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\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)=\"actionTriggered.emit(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=\"absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-red-500\">{{ error }}</p>\n  }\n</div>\n", styles: [":host(.field-error) ::ng-deep [data-field-control]{border-color:#fca5a5;box-shadow:0 0 0 2px #fee2e2}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -132,10 +135,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], actions: [{
                 type: Input
+            }], hasError: [{
+                type: HostBinding,
+                args: ['class.field-error']
             }], actionTriggered: [{
                 type: Output
             }] } });
 
+class InputTextControlComponent {
+    placeholder;
+    name;
+    id;
+    type = 'text';
+    element = 'input';
+    rows = 4;
+    autocomplete;
+    pattern;
+    disabled = false;
+    value = '';
+    valueChange = new EventEmitter();
+    touched = new EventEmitter();
+    enterPressed = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextControlComponent, isStandalone: true, selector: "input-text-control", inputs: { placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched", enterPressed: "enterPressed" }, ngImport: i0, template: "@if (element === 'textarea') {\n  <textarea\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.id]=\"id\"\n    [disabled]=\"disabled\"\n    data-field-control\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)=\"valueChange.emit($any($event.target).value)\"\n    (keydown.enter)=\"enterPressed.emit()\"\n    (blur)=\"touched.emit()\"\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    data-field-control\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]=\"id\"\n    [value]=\"value\"\n    (input)=\"valueChange.emit($any($event.target).value)\"\n    (keydown.enter)=\"enterPressed.emit()\"\n    (blur)=\"touched.emit()\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-text-control', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element === 'textarea') {\n  <textarea\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.id]=\"id\"\n    [disabled]=\"disabled\"\n    data-field-control\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)=\"valueChange.emit($any($event.target).value)\"\n    (keydown.enter)=\"enterPressed.emit()\"\n    (blur)=\"touched.emit()\"\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    data-field-control\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]=\"id\"\n    [value]=\"value\"\n    (input)=\"valueChange.emit($any($event.target).value)\"\n    (keydown.enter)=\"enterPressed.emit()\"\n    (blur)=\"touched.emit()\"\n  />\n}\n" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }], enterPressed: [{
+                type: Output
+            }] } });
+
 class InputBarcodeControlComponent {
     cameraIcon = Camera;
     cameraOffIcon = CameraOff;
@@ -401,21 +455,15 @@ class InputBarcodeControlComponent {
 
       <div class="relative flex items-start gap-2">
         <div class="min-w-0 flex-1">
-          <input
-            #barcodeInput
+          <input-text-control
             id="barcode-scanner-input"
             type="text"
             autocomplete="off"
-            spellcheck="false"
             [disabled]="disabled()"
-            [ngModel]="value()"
-            (ngModelChange)="onValueChange($event)"
-            (keydown.enter)="requestSearch()"
-            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"
-            [class.border-rose-300]="!!error()"
-            [class.ring-2]="!!error()"
-            [class.ring-rose-200]="!!error()"
+            [value]="value()"
             [placeholder]="placeholder()"
+            (valueChange)="onValueChange($event)"
+            (enterPressed)="requestSearch()"
           />
         </div>
 
@@ -445,10 +493,6 @@ class InputBarcodeControlComponent {
       @if (hint()) {
         <p class="mt-2 text-[0.5rem] text-slate-500">{{ hint() }}</p>
       }
-      @if (error()) {
-        <p class="absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-rose-400">{{ error() }}</p>
-      }
-
       @if (isCameraStarting()) {
         <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
           Запускаємо камеру…
@@ -482,38 +526,32 @@ class InputBarcodeControlComponent {
       }
 
       @if (cameraError()) {
-        <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
           {{ cameraError() }}
         </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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input-barcode-control',
                     standalone: true,
-                    imports: [CommonModule, FormsModule, UiButtonComponent],
+                    imports: [CommonModule, UiButtonComponent, InputTextControlComponent],
                     template: `
 
       <div class="relative flex items-start gap-2">
         <div class="min-w-0 flex-1">
-          <input
-            #barcodeInput
+          <input-text-control
             id="barcode-scanner-input"
             type="text"
             autocomplete="off"
-            spellcheck="false"
             [disabled]="disabled()"
-            [ngModel]="value()"
-            (ngModelChange)="onValueChange($event)"
-            (keydown.enter)="requestSearch()"
-            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"
-            [class.border-rose-300]="!!error()"
-            [class.ring-2]="!!error()"
-            [class.ring-rose-200]="!!error()"
+            [value]="value()"
             [placeholder]="placeholder()"
+            (valueChange)="onValueChange($event)"
+            (enterPressed)="requestSearch()"
           />
         </div>
 
@@ -543,10 +581,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       @if (hint()) {
         <p class="mt-2 text-[0.5rem] text-slate-500">{{ hint() }}</p>
       }
-      @if (error()) {
-        <p class="absolute left-0 top-full z-10 mt-1 text-[0.5rem] text-rose-400">{{ error() }}</p>
-      }
-
       @if (isCameraStarting()) {
         <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
           Запускаємо камеру…
@@ -580,7 +614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       }
 
       @if (cameraError()) {
-        <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
           {{ cameraError() }}
         </div>
       }
@@ -606,7 +640,7 @@ class InputBarcodeComponent {
     cameraStateChange = new EventEmitter();
     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: "14.0.0", version: "21.2.19", type: InputBarcodeComponent, isStandalone: true, selector: "input-barcode", inputs: { value: "value", label: "label", placeholder: "placeholder", hint: "hint", error: "error", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, ngImport: i0, template: `
-    <field-frame [label]="label" [required]="required" [forId]="'barcode-scanner-input'" [disabled]="disabled">
+    <field-frame [label]="label" [error]="error" [required]="required" [forId]="'barcode-scanner-input'" [disabled]="disabled">
       <input-barcode-control [value]="value" [label]="label" [placeholder]="placeholder" [hint]="hint" [error]="error" [required]="required" [disabled]="disabled" (valueChange)="valueChange.emit($event)" (scanned)="scanned.emit($event)" (searchRequested)="searchRequested.emit()" (cameraStateChange)="cameraStateChange.emit($event)" />
     </field-frame>
   `, isInline: true, dependencies: [{ kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputBarcodeControlComponent, selector: "input-barcode-control", inputs: ["value", "label", "placeholder", "hint", "error", "required", "disabled"], outputs: ["valueChange", "scanned", "searchRequested", "cameraStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -618,7 +652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     standalone: true,
                     imports: [FieldFrameComponent, InputBarcodeControlComponent],
                     template: `
-    <field-frame [label]="label" [required]="required" [forId]="'barcode-scanner-input'" [disabled]="disabled">
+    <field-frame [label]="label" [error]="error" [required]="required" [forId]="'barcode-scanner-input'" [disabled]="disabled">
       <input-barcode-control [value]="value" [label]="label" [placeholder]="placeholder" [hint]="hint" [error]="error" [required]="required" [disabled]="disabled" (valueChange)="valueChange.emit($event)" (scanned)="scanned.emit($event)" (searchRequested)="searchRequested.emit()" (cameraStateChange)="cameraStateChange.emit($event)" />
     </field-frame>
   `,
@@ -657,14 +691,14 @@ class InputCheckboxControlComponent {
         this.valueChange.emit(event.target.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputCheckboxControlComponent, isStandalone: true, selector: "input-checkbox-control", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400" [checked]="value" [disabled]="disabled" (change)="onValueChange($event)" (blur)="touched.emit()" />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputCheckboxControlComponent, isStandalone: true, selector: "input-checkbox-control", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input data-field-control type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400" [checked]="value" [disabled]="disabled" (change)="onValueChange($event)" (blur)="touched.emit()" />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input-checkbox-control',
                     standalone: true,
-                    template: `<input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400" [checked]="value" [disabled]="disabled" (change)="onValueChange($event)" (blur)="touched.emit()" />`,
+                    template: `<input data-field-control type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400" [checked]="value" [disabled]="disabled" (change)="onValueChange($event)" (blur)="touched.emit()" />`,
                 }]
         }], propDecorators: { value: [{
                 type: Input
@@ -749,11 +783,11 @@ class InputColorControlComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputColorControlComponent, isStandalone: true, selector: "input-color-control", inputs: { id: "id", name: "name", disabled: "disabled", value: "value", pickerValue: "pickerValue" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `
     <div class="flex items-center gap-3">
-      <label 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" [class.cursor-not-allowed]="disabled" [class.opacity-60]="disabled" [attr.for]="id">
+      <label data-field-control 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" [class.cursor-not-allowed]="disabled" [class.opacity-60]="disabled" [attr.for]="id">
         <span class="block h-9 w-9 rounded-full border border-black/10" [style.backgroundColor]="pickerValue"></span>
         <input class="absolute inset-0 h-full w-full cursor-pointer opacity-0" type="color" [attr.id]="id" [attr.name]="name ? name + '-picker' : null" [disabled]="disabled" [value]="pickerValue" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
       </label>
-      <input 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" type="text" [attr.name]="name" [disabled]="disabled" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
+      <input data-field-control 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" type="text" [attr.name]="name" [disabled]="disabled" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
     </div>
   `, isInline: true });
 }
@@ -764,11 +798,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     standalone: true,
                     template: `
     <div class="flex items-center gap-3">
-      <label 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" [class.cursor-not-allowed]="disabled" [class.opacity-60]="disabled" [attr.for]="id">
+      <label data-field-control 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" [class.cursor-not-allowed]="disabled" [class.opacity-60]="disabled" [attr.for]="id">
         <span class="block h-9 w-9 rounded-full border border-black/10" [style.backgroundColor]="pickerValue"></span>
         <input class="absolute inset-0 h-full w-full cursor-pointer opacity-0" type="color" [attr.id]="id" [attr.name]="name ? name + '-picker' : null" [disabled]="disabled" [value]="pickerValue" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
       </label>
-      <input 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" type="text" [attr.name]="name" [disabled]="disabled" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
+      <input data-field-control 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" type="text" [attr.name]="name" [disabled]="disabled" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
     </div>
   `,
                 }]
@@ -1144,7 +1178,7 @@ class InputDateControlComponent {
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateControlComponent), multi: true },
-        ], ngImport: i0, template: "\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  </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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 });
+        ], ngImport: i0, template: "\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            data-field-control\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  </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: InputDateControlComponent, decorators: [{
             type: Component,
@@ -1155,7 +1189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateControlComponent), multi: true },
-                    ], template: "\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  </div>\n" }]
+                    ], template: "\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            data-field-control\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  </div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1352,14 +1386,14 @@ class InputDatetimeControlComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDatetimeControlComponent, isStandalone: true, selector: "input-datetime-control", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions", disabled: "disabled" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeControlComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeControlComponent), multi: true },
-        ], ngImport: i0, template: "  <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  </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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 });
+        ], ngImport: i0, template: "  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input data-field-control 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  </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: InputDatetimeControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-datetime-control', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeControlComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeControlComponent), multi: true },
-                    ], template: "  <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  </div>\n" }]
+                    ], template: "  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input data-field-control 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  </div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1455,51 +1489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
-class InputTextControlComponent {
-    placeholder;
-    name;
-    id;
-    type = 'text';
-    element = 'input';
-    rows = 4;
-    autocomplete;
-    pattern;
-    disabled = false;
-    value = '';
-    valueChange = new EventEmitter();
-    touched = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextControlComponent, isStandalone: true, selector: "input-text-control", inputs: { placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: "@if (element === 'textarea') {\n  <textarea\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.id]=\"id\"\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)=\"valueChange.emit($any($event.target).value)\"\n    (blur)=\"touched.emit()\"\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]=\"id\"\n    [value]=\"value\"\n    (input)=\"valueChange.emit($any($event.target).value)\"\n    (blur)=\"touched.emit()\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextControlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input-text-control', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element === 'textarea') {\n  <textarea\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.id]=\"id\"\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)=\"valueChange.emit($any($event.target).value)\"\n    (blur)=\"touched.emit()\"\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]=\"id\"\n    [value]=\"value\"\n    (input)=\"valueChange.emit($any($event.target).value)\"\n    (blur)=\"touched.emit()\"\n  />\n}\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], pattern: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], touched: [{
-                type: Output
-            }] } });
-
 class InputEmailControlComponent {
     placeholder;
     name;
@@ -1511,7 +1500,7 @@ class InputEmailControlComponent {
     valueChange = new EventEmitter();
     touched = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputEmailControlComponent, isStandalone: true, selector: "input-email-control", inputs: { placeholder: "placeholder", name: "name", id: "id", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" type="email" [autocomplete]="autocomplete" [pattern]="pattern" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputEmailControlComponent, isStandalone: true, selector: "input-email-control", inputs: { placeholder: "placeholder", name: "name", id: "id", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" type="email" [autocomplete]="autocomplete" [pattern]="pattern" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailControlComponent, decorators: [{
             type: Component,
@@ -1639,7 +1628,7 @@ class InputNumberControlComponent {
     valueChange = new EventEmitter();
     touched = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputNumberControlComponent, isStandalone: true, selector: "input-number-control", inputs: { placeholder: "placeholder", name: "name", id: "id", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" type="number" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputNumberControlComponent, isStandalone: true, selector: "input-number-control", inputs: { placeholder: "placeholder", name: "name", id: "id", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" type="number" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberControlComponent, decorators: [{
             type: Component,
@@ -1775,7 +1764,7 @@ class InputPasswordControlComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputPasswordControlComponent, isStandalone: true, selector: "input-password-control", inputs: { placeholder: "placeholder", name: "name", id: "id", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `
     <div class="relative">
-      <input [attr.type]="visible ? 'text' : 'password'" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.pattern]="pattern" [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]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
+      <input data-field-control [attr.type]="visible ? 'text' : 'password'" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.pattern]="pattern" [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]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
       <button type="button" 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" [attr.aria-label]="visible ? 'Сховати пароль' : 'Показати пароль'" [disabled]="disabled" (mousedown)="$event.preventDefault()" (click)="visible = !visible">
         <lucide-icon [img]="visible ? hideIcon : showIcon" class="h-4 w-4" aria-hidden="true"></lucide-icon>
       </button>
@@ -1790,7 +1779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     imports: [CommonModule, LucideAngularModule],
                     template: `
     <div class="relative">
-      <input [attr.type]="visible ? 'text' : 'password'" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.pattern]="pattern" [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]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
+      <input data-field-control [attr.type]="visible ? 'text' : 'password'" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.pattern]="pattern" [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]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />
       <button type="button" 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" [attr.aria-label]="visible ? 'Сховати пароль' : 'Показати пароль'" [disabled]="disabled" (mousedown)="$event.preventDefault()" (click)="visible = !visible">
         <lucide-icon [img]="visible ? hideIcon : showIcon" class="h-4 w-4" aria-hidden="true"></lucide-icon>
       </button>
@@ -1975,7 +1964,7 @@ class InputTextComponent {
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextComponent), multi: true },
-        ], ngImport: i0, template: "<field-frame\n  [label]=\"label\"\n  [hint]=\"hint\"\n  [error]=\"error\"\n  [required]=\"required\"\n  [forId]=\"controlId\"\n  [disabled]=\"disabled\"\n  [actions]=\"actions\"\n  (actionTriggered)=\"triggerAction($event)\"\n>\n  <input-text-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [id]=\"controlId\"\n    [type]=\"type\"\n    [element]=\"element\"\n    [rows]=\"rows\"\n    [autocomplete]=\"autocomplete\"\n    [pattern]=\"pattern\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (valueChange)=\"onValueChange($event)\"\n    (touched)=\"onTouched()\"\n  />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame\n  [label]=\"label\"\n  [hint]=\"hint\"\n  [error]=\"error\"\n  [required]=\"required\"\n  [forId]=\"controlId\"\n  [disabled]=\"disabled\"\n  [actions]=\"actions\"\n  (actionTriggered)=\"triggerAction($event)\"\n>\n  <input-text-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [id]=\"controlId\"\n    [type]=\"type\"\n    [element]=\"element\"\n    [rows]=\"rows\"\n    [autocomplete]=\"autocomplete\"\n    [pattern]=\"pattern\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (valueChange)=\"onValueChange($event)\"\n    (touched)=\"onTouched()\"\n  />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
@@ -2023,7 +2012,7 @@ class InputTextareaControlComponent {
     valueChange = new EventEmitter();
     touched = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputTextareaControlComponent, isStandalone: true, selector: "input-textarea-control", inputs: { placeholder: "placeholder", name: "name", id: "id", rows: "rows", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" element="textarea" [rows]="rows" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputTextareaControlComponent, isStandalone: true, selector: "input-textarea-control", inputs: { placeholder: "placeholder", name: "name", id: "id", rows: "rows", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" element="textarea" [rows]="rows" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaControlComponent, decorators: [{
             type: Component,
@@ -2154,11 +2143,11 @@ class InputFileControlComponent {
         input.value = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputFileControlComponent, isStandalone: true, selector: "input-file-control", inputs: { accept: "accept", multiple: "multiple", disabled: "disabled", selectedFiles: "selectedFiles" }, outputs: { filesSelected: "filesSelected", removeFile: "removeFile", touched: "touched" }, ngImport: i0, template: "<input type=\"file\" 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\" [attr.accept]=\"accept ?? null\" [attr.multiple]=\"multiple ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" (blur)=\"touched.emit()\" />\n@if (selectedFiles.length) {\n  <div class=\"mt-1 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)=\"removeFile.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputFileControlComponent, isStandalone: true, selector: "input-file-control", inputs: { accept: "accept", multiple: "multiple", disabled: "disabled", selectedFiles: "selectedFiles" }, outputs: { filesSelected: "filesSelected", removeFile: "removeFile", touched: "touched" }, ngImport: i0, template: "<input data-field-control type=\"file\" 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\" [attr.accept]=\"accept ?? null\" [attr.multiple]=\"multiple ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" (blur)=\"touched.emit()\" />\n@if (selectedFiles.length) {\n  <div class=\"mt-1 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)=\"removeFile.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-file-control', standalone: true, imports: [CommonModule], template: "<input type=\"file\" 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\" [attr.accept]=\"accept ?? null\" [attr.multiple]=\"multiple ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" (blur)=\"touched.emit()\" />\n@if (selectedFiles.length) {\n  <div class=\"mt-1 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)=\"removeFile.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'input-file-control', standalone: true, imports: [CommonModule], template: "<input data-field-control type=\"file\" 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\" [attr.accept]=\"accept ?? null\" [attr.multiple]=\"multiple ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" (blur)=\"touched.emit()\" />\n@if (selectedFiles.length) {\n  <div class=\"mt-1 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)=\"removeFile.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { accept: [{
                 type: Input
             }], multiple: [{
@@ -2259,11 +2248,11 @@ class InputPhotoControlComponent {
         this.touched.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoControlComponent, isStandalone: true, selector: "input-photo-control", inputs: { accept: "accept", multiple: "multiple", disabled: "disabled", canSelectMore: "canSelectMore", previews: "previews" }, outputs: { filesSelected: "filesSelected", removed: "removed", dropped: "dropped", touched: "touched" }, ngImport: i0, template: "<button type=\"button\" class=\"flex min-h-24 w-full 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)=\"selectFiles($event)\" />\n@if (previews.length) {\n  <div class=\"mt-2 grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"dropped.emit($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)=\"removed.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoControlComponent, isStandalone: true, selector: "input-photo-control", inputs: { accept: "accept", multiple: "multiple", disabled: "disabled", canSelectMore: "canSelectMore", previews: "previews" }, outputs: { filesSelected: "filesSelected", removed: "removed", dropped: "dropped", touched: "touched" }, ngImport: i0, template: "<button data-field-control type=\"button\" class=\"flex min-h-24 w-full 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)=\"selectFiles($event)\" />\n@if (previews.length) {\n  <div class=\"mt-2 grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"dropped.emit($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)=\"removed.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\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: InputPhotoControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-photo-control', standalone: true, imports: [CommonModule, DragDropModule], template: "<button type=\"button\" class=\"flex min-h-24 w-full 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)=\"selectFiles($event)\" />\n@if (previews.length) {\n  <div class=\"mt-2 grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"dropped.emit($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)=\"removed.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'input-photo-control', standalone: true, imports: [CommonModule, DragDropModule], template: "<button data-field-control type=\"button\" class=\"flex min-h-24 w-full 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)=\"selectFiles($event)\" />\n@if (previews.length) {\n  <div class=\"mt-2 grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"dropped.emit($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)=\"removed.emit(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n      </div>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { accept: [{
                 type: Input
             }], multiple: [{
@@ -2471,6 +2460,7 @@ class InputSelectControlComponent {
     placeholder;
     name;
     data;
+    dataParams = {};
     required = false;
     disabled = false;
     multiple = false;
@@ -2541,7 +2531,10 @@ class InputSelectControlComponent {
         });
     }
     ngOnChanges(changes) {
-        if ('data' in changes) {
+        const dataChanged = 'data' in changes;
+        const dataParamsChanged = 'dataParams' in changes
+            && !this.sameDataParams(changes['dataParams'].previousValue, changes['dataParams'].currentValue);
+        if (dataChanged || dataParamsChanged) {
             this.reloadDictionaryOptions();
         }
     }
@@ -2713,6 +2706,18 @@ class InputSelectControlComponent {
     getDictionaryName() {
         return String(this.data || '').trim();
     }
+    sameDataParams(previous, current) {
+        if (previous === current)
+            return true;
+        if (!previous || !current || typeof previous !== 'object' || typeof current !== 'object')
+            return false;
+        const previousEntries = Object.entries(previous);
+        const currentEntries = Object.entries(current);
+        if (previousEntries.length !== currentEntries.length)
+            return false;
+        return previousEntries.every(([key, value]) => Object.prototype.hasOwnProperty.call(current, key)
+            && current[key] === value);
+    }
     reloadDictionaryOptions() {
         const dictionaryName = this.getDictionaryName();
         this.dictionaryRequestVersions.clear();
@@ -2799,6 +2804,11 @@ class InputSelectControlComponent {
         const params = new URLSearchParams();
         if (query?.trim())
             params.set('q', query.trim());
+        for (const [key, value] of Object.entries(this.dataParams || {})) {
+            if (value !== null && value !== undefined && String(value).trim()) {
+                params.set(key, String(value));
+            }
+        }
         const suffix = params.toString() ? `?${params.toString()}` : '';
         return this.http.get(`/api/suggest/${encodeURIComponent(name)}${suffix}`);
     }
@@ -2806,14 +2816,14 @@ class InputSelectControlComponent {
         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: InputSelectControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSelectControlComponent, isStandalone: true, selector: "input-select-control", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSelectControlComponent, isStandalone: true, selector: "input-select-control", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", dataParams: "dataParams", required: "required", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", 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(() => InputSelectControlComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectControlComponent), multi: true },
-        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <div class=\"relative w-full\">\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=\"\u041F\u043E\u0448\u0443\u043A...\"\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", 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 });
+        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <div class=\"relative w-full\">\n\n    <button\n      data-field-control\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=\"\u041F\u043E\u0448\u0443\u043A...\"\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", 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: InputSelectControlComponent, decorators: [{
             type: Component,
@@ -2824,7 +2834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectControlComponent), multi: true },
-                    ], template: "  <div class=\"relative w-full\">\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=\"\u041F\u043E\u0448\u0443\u043A...\"\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" }]
+                    ], template: "  <div class=\"relative w-full\">\n\n    <button\n      data-field-control\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=\"\u041F\u043E\u0448\u0443\u043A...\"\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" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2833,6 +2843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], data: [{
                 type: Input
+            }], dataParams: [{
+                type: Input
             }], required: [{
                 type: Input
             }], disabled: [{
@@ -2881,6 +2893,7 @@ class InputSelectComponent {
     placeholder;
     name;
     data;
+    dataParams = {};
     required = false;
     disabled = false;
     multiple = false;
@@ -2913,17 +2926,17 @@ class InputSelectComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     validate(control) { return validateFormControl(control, this.required); }
     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: "16.1.0", version: "21.2.19", type: InputSelectComponent, isStandalone: true, selector: "input-select", inputs: { label: "label", hint: "hint", error: "error", placeholder: "placeholder", name: "name", data: "data", required: "required", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", options: "options", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.19", type: InputSelectComponent, isStandalone: true, selector: "input-select", inputs: { label: "label", hint: "hint", error: "error", placeholder: "placeholder", name: "name", data: "data", dataParams: "dataParams", required: "required", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", options: "options", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputSelectComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "control", first: true, predicate: InputSelectControlComponent, descendants: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [disabled]=\"disabled\">\n  <input-select-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [data]=\"data\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [includeBlankOption]=\"includeBlankOption\"\n    [blankOptionLabel]=\"blankOptionLabel\"\n    [emptyStateLabel]=\"emptyStateLabel\"\n    [searchable]=\"searchable\"\n    [options]=\"options\"\n    [triggerClass]=\"triggerClass\"\n    [panelClass]=\"panelClass\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (searchChange)=\"searchChange.emit($event)\"\n  />\n</field-frame>\n", dependencies: [{ kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputSelectControlComponent, selector: "input-select-control", inputs: ["label", "placeholder", "name", "data", "required", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "control", first: true, predicate: InputSelectControlComponent, descendants: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [disabled]=\"disabled\">\n  <input-select-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [data]=\"data\"\n    [dataParams]=\"dataParams\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [includeBlankOption]=\"includeBlankOption\"\n    [blankOptionLabel]=\"blankOptionLabel\"\n    [emptyStateLabel]=\"emptyStateLabel\"\n    [searchable]=\"searchable\"\n    [options]=\"options\"\n    [triggerClass]=\"triggerClass\"\n    [panelClass]=\"panelClass\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (searchChange)=\"searchChange.emit($event)\"\n  />\n</field-frame>\n", dependencies: [{ kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputSelectControlComponent, selector: "input-select-control", inputs: ["label", "placeholder", "name", "data", "dataParams", "required", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-select', standalone: true, imports: [FieldFrameComponent, InputSelectControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputSelectComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
-                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [disabled]=\"disabled\">\n  <input-select-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [data]=\"data\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [includeBlankOption]=\"includeBlankOption\"\n    [blankOptionLabel]=\"blankOptionLabel\"\n    [emptyStateLabel]=\"emptyStateLabel\"\n    [searchable]=\"searchable\"\n    [options]=\"options\"\n    [triggerClass]=\"triggerClass\"\n    [panelClass]=\"panelClass\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (searchChange)=\"searchChange.emit($event)\"\n  />\n</field-frame>\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [disabled]=\"disabled\">\n  <input-select-control\n    [placeholder]=\"placeholder\"\n    [name]=\"name\"\n    [data]=\"data\"\n    [dataParams]=\"dataParams\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [includeBlankOption]=\"includeBlankOption\"\n    [blankOptionLabel]=\"blankOptionLabel\"\n    [emptyStateLabel]=\"emptyStateLabel\"\n    [searchable]=\"searchable\"\n    [options]=\"options\"\n    [triggerClass]=\"triggerClass\"\n    [panelClass]=\"panelClass\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (searchChange)=\"searchChange.emit($event)\"\n  />\n</field-frame>\n" }]
         }], propDecorators: { control: [{
                 type: ViewChild,
                 args: [InputSelectControlComponent]
@@ -2939,6 +2952,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], data: [{
                 type: Input
+            }], dataParams: [{
+                type: Input
             }], required: [{
                 type: Input
             }], disabled: [{
@@ -2976,14 +2991,14 @@ class InputSlugControlComponent {
     valueChange = new EventEmitter();
     touched = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputSlugControlComponent, isStandalone: true, selector: "input-slug-control", inputs: { placeholder: "placeholder", name: "name", id: "id", autocomplete: "autocomplete", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input type="text" 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" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [disabled]="disabled" [attr.id]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputSlugControlComponent, isStandalone: true, selector: "input-slug-control", inputs: { placeholder: "placeholder", name: "name", id: "id", autocomplete: "autocomplete", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input data-field-control type="text" 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" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [disabled]="disabled" [attr.id]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input-slug-control',
                     standalone: true,
-                    template: `<input type="text" 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" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [disabled]="disabled" [attr.id]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />`,
+                    template: `<input data-field-control type="text" 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" [attr.placeholder]="placeholder" [attr.name]="name" [attr.autocomplete]="autocomplete" [disabled]="disabled" [attr.id]="id" [value]="value" (input)="valueChange.emit($any($event.target).value)" (blur)="touched.emit()" />`,
                 }]
         }], propDecorators: { placeholder: [{
                 type: Input
@@ -3117,6 +3132,7 @@ const UI_FORM_INPUT_REGISTRY = {
 class FieldInputComponent {
     field;
     value;
+    model = {};
     error = '';
     disabled = false;
     visibleActions = [];
@@ -3205,6 +3221,10 @@ class FieldInputComponent {
                 setInput('name', field.id);
                 setInput('placeholder', field.placeholder);
                 setInput('data', config['data']);
+                const dataParams = config['dataParams'];
+                setInput('dataParams', Object.fromEntries(Object.entries(dataParams || {})
+                    .map(([key, fieldId]) => [key, this.model[fieldId]])
+                    .filter(([, value]) => value !== undefined && value !== null)));
                 setInput('options', config['options'] || []);
                 setInput('multiple', !!config['multiple']);
                 if (typeof config['searchable'] === 'boolean') {
@@ -3237,7 +3257,7 @@ class FieldInputComponent {
         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: "14.0.0", version: "21.2.19", type: FieldInputComponent, isStandalone: true, selector: "field-input", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", visibleActions: "visibleActions" }, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: FieldInputComponent, isStandalone: true, selector: "field-input", inputs: { field: "field", value: "value", model: "model", error: "error", disabled: "disabled", visibleActions: "visibleActions" }, 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: `
     <ng-container #inputContainer></ng-container>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
@@ -3255,6 +3275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], model: [{
+                type: Input
             }], error: [{
                 type: Input
             }], disabled: [{
@@ -3746,11 +3768,11 @@ class DynamicFormComponent {
         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: 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            [visibleActions]=\"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", "visibleActions"], outputs: ["valueChange", "actionTriggered", "lookupRequested", "barcodeScanned", "filesChange", "uploadingChange"] }] });
+    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            [model]=\"modelSignal()\"\n            [disabled]=\"disabled || isFieldDisabled(field) || isLookupLoading(field.id)\"\n            [error]=\"errors[field.id] ?? getLookupError(field.id)\"\n            [visibleActions]=\"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", "model", "error", "disabled", "visibleActions"], outputs: ["valueChange", "actionTriggered", "lookupRequested", "barcodeScanned", "filesChange", "uploadingChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            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            [visibleActions]=\"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" }]
+            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            [model]=\"modelSignal()\"\n            [disabled]=\"disabled || isFieldDisabled(field) || isLookupLoading(field.id)\"\n            [error]=\"errors[field.id] ?? getLookupError(field.id)\"\n            [visibleActions]=\"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: [{
@@ -3992,7 +4014,7 @@ class InputBaseControlComponent {
     valueChange = new EventEmitter();
     touched = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBaseControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputBaseControlComponent, isStandalone: true, selector: "input-base-control", inputs: { placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" [type]="type" [element]="element" [rows]="rows" [autocomplete]="autocomplete" [pattern]="pattern" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputBaseControlComponent, isStandalone: true, selector: "input-base-control", inputs: { placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", autocomplete: "autocomplete", pattern: "pattern", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, ngImport: i0, template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" [type]="type" [element]="element" [rows]="rows" [autocomplete]="autocomplete" [pattern]="pattern" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />`, isInline: true, dependencies: [{ kind: "component", type: InputTextControlComponent, selector: "input-text-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched", "enterPressed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBaseControlComponent, decorators: [{
             type: Component,
@@ -4264,11 +4286,11 @@ class InputPhotoGalleryComponent {
         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: 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", hint: "hint", error: "error", required: "required", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\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 class=\"mt-1 text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</field-frame>\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"] }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoGalleryComponent, isStandalone: true, selector: "input-photo-gallery", inputs: { label: "label", hint: "hint", error: "error", required: "required", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div data-field-control 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 class=\"mt-1 text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</field-frame>\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"] }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-photo-gallery', standalone: true, imports: [CommonModule, DragDropModule, FieldFrameComponent], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\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 class=\"mt-1 text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</field-frame>\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, FieldFrameComponent], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div data-field-control 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 class=\"mt-1 text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</field-frame>\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
             }], hint: [{
@@ -4399,6 +4421,7 @@ class InputRangeSliderComponent {
 
       <input
         #startInput
+        data-field-control
         class="range-slider__input"
         type="range"
         [min]="safeMin"
@@ -4411,6 +4434,7 @@ class InputRangeSliderComponent {
 
       <input
         #endInput
+        data-field-control
         class="range-slider__input"
         type="range"
         [min]="safeMin"
@@ -4438,6 +4462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 
       <input
         #startInput
+        data-field-control
         class="range-slider__input"
         type="range"
         [min]="safeMin"
@@ -4450,6 +4475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 
       <input
         #endInput
+        data-field-control
         class="range-slider__input"
         type="range"
         [min]="safeMin"