@maro-tech/form 0.1.1 → 0.1.2

package/fesm2022/maro-tech-form.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, input, output, ViewChild, Component, EventEmitter, forwardRef, Output, Input, ChangeDetectorRef, ChangeDetectionStrategy, HostListener, DestroyRef, ElementRef, booleanAttribute, ViewContainerRef, computed } from '@angular/core';
+import { signal, Injectable, inject, EventEmitter, Output, 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 { 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';
 import { BrowserMultiFormatOneDReader } from '@zxing/browser';
 import { DecodeHintType, BarcodeFormat } from '@zxing/library';
-import * as i1 from 'lucide-angular';
-import { CalendarDays, ChevronLeft, ChevronRight, LucideAngularModule, Eye, EyeOff, X, ChevronDown, Check } from 'lucide-angular';
 import * as i1$1 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { forkJoin, map, Subject, debounceTime, distinctUntilChanged, of } from 'rxjs';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Router } from '@angular/router';
 
@@ -56,9 +56,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const ACTION_PRINT = 'ACTION_PRINT';
+const ACTION_FORM = 'ACTION_FORM';
+const ACTION_API = 'ACTION_API';
+const ACTION_SUBMIT = 'ACTION_SUBMIT';
+const isDynamicFormContainerField = (field) => field.type === 'container';
+const isDynamicFormTemplateField = (field) => field.type === 'template';
+const isDynamicFormLookupField = (field) => field.type === 'select' || field.type === 'barcode';
+const flattenDynamicFormFields = (fields) => {
+    const result = [];
+    for (const field of fields || []) {
+        if (!field) {
+            continue;
+        }
+        result.push(field);
+        if (isDynamicFormContainerField(field) && Array.isArray(field.fields) && field.fields.length) {
+            result.push(...flattenDynamicFormFields(field.fields));
+        }
+    }
+    return result;
+};
+
 class UiFormLookupService {
     http = inject(HttpClient);
     lookup(field, value) {
+        if (!isDynamicFormLookupField(field)) {
+            return throwError(() => new Error('Lookup is not supported for this field type'));
+        }
         const api = String(field.lookupApi || '').trim();
         const endpoint = api
             .replace(/:value/g, encodeURIComponent(value))
@@ -79,39 +103,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
-const ACTION_PRINT = 'ACTION_PRINT';
-const ACTION_FORM = 'ACTION_FORM';
-const ACTION_API = 'ACTION_API';
-const ACTION_SUBMIT = 'ACTION_SUBMIT';
-const isDynamicFormContainerField = (field) => field.type === 'container';
-const isDynamicFormTemplateField = (field) => field.type === 'template';
-const flattenDynamicFormFields = (fields) => {
-    const result = [];
-    for (const field of fields || []) {
-        if (!field) {
-            continue;
-        }
-        result.push(field);
-        if (isDynamicFormContainerField(field) && Array.isArray(field.fields) && field.fields.length) {
-            result.push(...flattenDynamicFormFields(field.fields));
-        }
-    }
-    return result;
-};
+class FieldFrameComponent {
+    label;
+    hint;
+    error;
+    required = false;
+    forId;
+    disabled = false;
+    actions = [];
+    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 });
+}
+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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], forId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
 
-class InputBarcodeComponent {
+class InputBarcodeControlComponent {
+    cameraIcon = Camera;
+    cameraOffIcon = CameraOff;
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = input('Штрихкод', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Відскануйте або введіть штрихкод', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('Сканер може просто ввести код і натиснути Enter.', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    autoOpen = input(true, ...(ngDevMode ? [{ debugName: "autoOpen" }] : /* istanbul ignore next */ []));
-    searchButtonLabel = input('Знайти', ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
-    openCameraLabel = input('Відкрити камеру', ...(ngDevMode ? [{ debugName: "openCameraLabel" }] : /* istanbul ignore next */ []));
-    closeCameraLabel = input('Закрити камеру', ...(ngDevMode ? [{ debugName: "closeCameraLabel" }] : /* istanbul ignore next */ []));
-    cameraTitle = input('Камера', ...(ngDevMode ? [{ debugName: "cameraTitle" }] : /* istanbul ignore next */ []));
-    cameraStartingLabel = input('Запускаємо камеру…', ...(ngDevMode ? [{ debugName: "cameraStartingLabel" }] : /* istanbul ignore next */ []));
-    cameraHint = input('Наведіть камеру на штрихкод. Після зчитування код підставиться автоматично.', ...(ngDevMode ? [{ debugName: "cameraHint" }] : /* istanbul ignore next */ []));
     valueChange = output();
     scanned = output();
     searchRequested = output();
@@ -138,9 +172,8 @@ class InputBarcodeComponent {
             this.autoOpenQueued = false;
             return;
         }
-        if (changes['autoOpen'] && this.autoOpen() && !this.disabled()) {
+        if (!this.disabled())
             this.scheduleAutoOpen();
-        }
     }
     ngAfterViewInit() {
         this.scheduleAutoOpen();
@@ -210,13 +243,13 @@ class InputBarcodeComponent {
         this.stopCamera();
     }
     scheduleAutoOpen() {
-        if (typeof window === 'undefined' || !this.autoOpen() || this.disabled() || this.isCameraOpen() || this.isCameraStarting() || this.autoOpenQueued) {
+        if (typeof window === 'undefined' || this.disabled() || this.isCameraOpen() || this.isCameraStarting() || this.autoOpenQueued) {
             return;
         }
         this.autoOpenQueued = true;
         window.requestAnimationFrame(() => {
             this.autoOpenQueued = false;
-            if (!this.autoOpen() || this.disabled() || this.isCameraOpen() || this.isCameraStarting()) {
+            if (this.disabled() || this.isCameraOpen() || this.isCameraStarting()) {
                 return;
             }
             void this.openCamera();
@@ -363,18 +396,10 @@ class InputBarcodeComponent {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputBarcodeComponent, isStandalone: true, selector: "input-barcode", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, openCameraLabel: { classPropertyName: "openCameraLabel", publicName: "openCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCameraLabel: { classPropertyName: "closeCameraLabel", publicName: "closeCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraTitle: { classPropertyName: "cameraTitle", publicName: "cameraTitle", isSignal: true, isRequired: false, transformFunction: null }, cameraStartingLabel: { classPropertyName: "cameraStartingLabel", publicName: "cameraStartingLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraHint: { classPropertyName: "cameraHint", publicName: "cameraHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="space-y-2">
-      @if (label()) {
-        <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
-          <span class="text-[0.7rem] font-semibold text-slate-600">
-            {{ label() }}
-          </span>
-        </label>
-      }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputBarcodeControlComponent, isStandalone: true, selector: "input-barcode-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 
-      <div class="flex items-start gap-2">
+      <div class="relative flex items-start gap-2">
         <div class="min-w-0 flex-1">
           <input
             #barcodeInput
@@ -387,16 +412,14 @@ class InputBarcodeComponent {
             (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()"
             [placeholder]="placeholder()"
           />
-          @if (hint()) {
-            <p class="mt-2 text-[0.5rem] text-slate-500">
-              {{ hint() }}
-            </p>
-          }
         </div>
 
-        <div class="mt-0.5 flex flex-col gap-2">
+        <div class="mt-0.5 flex flex-row flex-wrap items-center gap-2">
           <ui-button
             type="button"
             variant="secondary"
@@ -404,31 +427,39 @@ class InputBarcodeComponent {
             [disabled]="disabled()"
             (click)="requestSearch()"
           >
-            {{ searchButtonLabel() }}
-          </ui-button>
-          <ui-button
-            type="button"
-            variant="ghost"
-            size="sm"
-            [disabled]="disabled() || isCameraStarting()"
-            (click)="isCameraOpen() ? closeCamera() : openCamera()"
-          >
-            {{ isCameraOpen() ? closeCameraLabel() : openCameraLabel() }}
+            Знайти
           </ui-button>
+        <ui-button
+          type="button"
+          variant="ghost"
+          size="sm"
+          [iconOnly]="true"
+          [icon]="isCameraOpen() ? cameraOffIcon : cameraIcon"
+          [ariaLabel]="isCameraOpen() ? 'Закрити камеру' : 'Відкрити камеру'"
+          [disabled]="disabled() || isCameraStarting()"
+          (click)="isCameraOpen() ? closeCamera() : openCamera()"
+        ></ui-button>
         </div>
       </div>
 
+      @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">
-          {{ cameraStartingLabel() }}
+          Запускаємо камеру…
         </div>
       }
 
       @if (isCameraOpen()) {
-        <section class="space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
+        <section class="mt-3 space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
           <div class="flex items-center justify-between gap-3">
             <div>
-              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">{{ cameraTitle() }}</p>
+              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">Камера</p>
               <p class="text-sm text-slate-200">{{ cameraStatus() }}</p>
             </div>
             <button
@@ -436,7 +467,7 @@ class InputBarcodeComponent {
               class="rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
               (click)="closeCamera()"
             >
-              {{ closeCameraLabel() }}
+              Закрити камеру
             </button>
           </div>
 
@@ -445,7 +476,7 @@ class InputBarcodeComponent {
           </div>
 
           <p class="text-xs text-slate-300">
-            {{ cameraHint() }}
+            Наведіть камеру на штрихкод.
           </p>
         </section>
       }
@@ -455,26 +486,18 @@ class InputBarcodeComponent {
           {{ cameraError() }}
         </div>
       }
-    </div>
+
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeControlComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'input-barcode',
+                    selector: 'input-barcode-control',
                     standalone: true,
                     imports: [CommonModule, FormsModule, UiButtonComponent],
                     template: `
-    <div class="space-y-2">
-      @if (label()) {
-        <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
-          <span class="text-[0.7rem] font-semibold text-slate-600">
-            {{ label() }}
-          </span>
-        </label>
-      }
 
-      <div class="flex items-start gap-2">
+      <div class="relative flex items-start gap-2">
         <div class="min-w-0 flex-1">
           <input
             #barcodeInput
@@ -487,16 +510,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             (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()"
             [placeholder]="placeholder()"
           />
-          @if (hint()) {
-            <p class="mt-2 text-[0.5rem] text-slate-500">
-              {{ hint() }}
-            </p>
-          }
         </div>
 
-        <div class="mt-0.5 flex flex-col gap-2">
+        <div class="mt-0.5 flex flex-row flex-wrap items-center gap-2">
           <ui-button
             type="button"
             variant="secondary"
@@ -504,31 +525,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             [disabled]="disabled()"
             (click)="requestSearch()"
           >
-            {{ searchButtonLabel() }}
-          </ui-button>
-          <ui-button
-            type="button"
-            variant="ghost"
-            size="sm"
-            [disabled]="disabled() || isCameraStarting()"
-            (click)="isCameraOpen() ? closeCamera() : openCamera()"
-          >
-            {{ isCameraOpen() ? closeCameraLabel() : openCameraLabel() }}
+            Знайти
           </ui-button>
+        <ui-button
+          type="button"
+          variant="ghost"
+          size="sm"
+          [iconOnly]="true"
+          [icon]="isCameraOpen() ? cameraOffIcon : cameraIcon"
+          [ariaLabel]="isCameraOpen() ? 'Закрити камеру' : 'Відкрити камеру'"
+          [disabled]="disabled() || isCameraStarting()"
+          (click)="isCameraOpen() ? closeCamera() : openCamera()"
+        ></ui-button>
         </div>
       </div>
 
+      @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">
-          {{ cameraStartingLabel() }}
+          Запускаємо камеру…
         </div>
       }
 
       @if (isCameraOpen()) {
-        <section class="space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
+        <section class="mt-3 space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
           <div class="flex items-center justify-between gap-3">
             <div>
-              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">{{ cameraTitle() }}</p>
+              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">Камера</p>
               <p class="text-sm text-slate-200">{{ cameraStatus() }}</p>
             </div>
             <button
@@ -536,7 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               class="rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
               (click)="closeCamera()"
             >
-              {{ closeCameraLabel() }}
+              Закрити камеру
             </button>
           </div>
 
@@ -545,7 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
           </div>
 
           <p class="text-xs text-slate-300">
-            {{ cameraHint() }}
+            Наведіть камеру на штрихкод.
           </p>
         </section>
       }
@@ -555,19 +584,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
           {{ cameraError() }}
         </div>
       }
-    </div>
+
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpen", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], openCameraLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCameraLabel", required: false }] }], closeCameraLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCameraLabel", required: false }] }], cameraTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraTitle", required: false }] }], cameraStartingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraStartingLabel", required: false }] }], cameraHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraHint", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scanned: [{ type: i0.Output, args: ["scanned"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], cameraStateChange: [{ type: i0.Output, args: ["cameraStateChange"] }], cameraVideo: [{
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scanned: [{ type: i0.Output, args: ["scanned"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], cameraStateChange: [{ type: i0.Output, args: ["cameraStateChange"] }], cameraVideo: [{
                 type: ViewChild,
                 args: ['cameraVideo']
             }] } });
 
+class InputBarcodeComponent {
+    value = '';
+    label = 'Штрихкод';
+    placeholder = 'Відскануйте або введіть штрихкод';
+    hint = 'Сканер може просто ввести код і натиснути Enter.';
+    error = '';
+    required = false;
+    disabled = false;
+    valueChange = new EventEmitter();
+    scanned = new EventEmitter();
+    searchRequested = new EventEmitter();
+    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">
+      <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBarcodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input-barcode',
+                    standalone: true,
+                    imports: [FieldFrameComponent, InputBarcodeControlComponent],
+                    template: `
+    <field-frame [label]="label" [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>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], scanned: [{
+                type: Output
+            }], searchRequested: [{
+                type: Output
+            }], cameraStateChange: [{
+                type: Output
+            }] } });
+
+class InputCheckboxControlComponent {
+    value = false;
+    disabled = false;
+    valueChange = new EventEmitter();
+    touched = new EventEmitter();
+    onValueChange(event) {
+        this.valueChange.emit(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: 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 });
+}
+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()" />`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputCheckboxComponent {
     label;
+    hint;
+    error;
+    required = false;
     disabled = false;
     value = false;
-    valueChange = new EventEmitter();
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) { this.value = !!value; }
@@ -578,22 +693,27 @@ class InputCheckboxComponent {
         const value = event.target.checked;
         this.value = value;
         this.onChange(value);
-        this.valueChange.emit(value);
+    }
+    handleValueChange(value) {
+        this.value = value;
+        this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputCheckboxComponent, isStandalone: true, selector: "input-checkbox", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputCheckboxComponent, isStandalone: true, selector: "input-checkbox", inputs: { label: "label", hint: "hint", error: "error", required: "required", disabled: "disabled" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-checkbox-control [value]=\"value\" [disabled]=\"disabled\" (valueChange)=\"handleValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputCheckboxControlComponent, selector: "input-checkbox-control", inputs: ["value", "disabled"], outputs: ["valueChange", "touched"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-checkbox', standalone: true, imports: [CommonModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span>{{ label }}</span>\n</label>\n" }]
+            args: [{ selector: 'input-checkbox', standalone: true, imports: [CommonModule, FieldFrameComponent, InputCheckboxControlComponent], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputCheckboxComponent), multi: true }], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-checkbox-control [value]=\"value\" [disabled]=\"disabled\" (valueChange)=\"handleValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
-            }], disabled: [{
+            }], hint: [{
                 type: Input
-            }], value: [{
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -618,6 +738,56 @@ const validateFormControl = (control, required, pattern, email = false) => {
     return null;
 };
 
+class InputColorControlComponent {
+    id;
+    name;
+    disabled = false;
+    value = '#000000';
+    pickerValue = '#000000';
+    valueChange = new EventEmitter();
+    touched = new EventEmitter();
+    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">
+        <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()" />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input-color-control',
+                    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">
+        <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()" />
+    </div>
+  `,
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], pickerValue: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputColorComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -625,7 +795,6 @@ class InputColorComponent {
     name;
     id;
     required = false;
-    fullWidth = false;
     error;
     disabled = false;
     value = '#000000';
@@ -662,6 +831,10 @@ class InputColorComponent {
         this.value = this.normalizeHexInput(value);
         this.onChange(this.value);
     }
+    handleValueChange(value) {
+        this.value = value;
+        this.onChange(value);
+    }
     markTouched() {
         this.onTouched();
     }
@@ -676,25 +849,25 @@ class InputColorComponent {
         return /^#([0-9a-fA-F]{6})$/.test(value.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputColorComponent, isStandalone: true, selector: "input-color", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", fullWidth: "fullWidth", error: "error" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputColorComponent, isStandalone: true, selector: "input-color", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", error: "error" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputColorComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputColorComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\">\n  <input-color-control [id]=\"controlId\" [name]=\"name\" [disabled]=\"disabled\" [value]=\"value\" [pickerValue]=\"pickerValue\" (valueChange)=\"handleValueChange($event)\" (touched)=\"markTouched()\" />\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: InputColorControlComponent, selector: "input-color-control", inputs: ["id", "name", "disabled", "value", "pickerValue"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-color', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-color', standalone: true, imports: [CommonModule, FormsModule, FieldFrameComponent, InputColorControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputColorComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputColorComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\">\n  <input-color-control [id]=\"controlId\" [name]=\"name\" [disabled]=\"disabled\" [value]=\"value\" [pickerValue]=\"pickerValue\" (valueChange)=\"handleValueChange($event)\" (touched)=\"markTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -705,8 +878,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], error: [{
                 type: Input
             }] } });
@@ -733,7 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class InputDateComponent {
+class InputDateControlComponent {
     cdr = inject(ChangeDetectorRef);
     popupService = inject(UiPopupService);
     closeActivePopup = () => this.closeCalendar();
@@ -749,7 +920,6 @@ class InputDateComponent {
     nextMonthIcon = ChevronRight;
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete = 'off';
     pattern;
     error;
@@ -757,7 +927,7 @@ class InputDateComponent {
     disabled = false;
     value = '';
     static nextId = 0;
-    generatedId = `input-date-${InputDateComponent.nextId++}`;
+    generatedId = `input-date-${InputDateControlComponent.nextId++}`;
     visibleMonth = this.startOfMonth(new Date());
     calendarView = 'days';
     isCalendarOpen = false;
@@ -966,26 +1136,26 @@ class InputDateComponent {
         const day = String(date.getDate()).padStart(2, '0');
         return `${year}-${month}-${day}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDateComponent, isStandalone: true, selector: "input-date", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDateControlComponent, isStandalone: true, selector: "input-date-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(() => InputDateComponent),
+                useExisting: forwardRef(() => InputDateControlComponent),
                 multi: true,
             },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-date', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-date-control', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputDateComponent),
+                            useExisting: forwardRef(() => InputDateControlComponent),
                             multi: true,
                         },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            type=\"text\"\n            [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420'\"\n            maxlength=\"10\"\n            inputmode=\"numeric\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"displayValue\"\n            (click)=\"openCalendar($event)\"\n            (keydown)=\"allowDateKey($event)\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <lucide-icon\n            [img]=\"calendarIcon\"\n            class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\n            aria-hidden=\"true\"\n          ></lucide-icon>\n\n          @if (isCalendarOpen) {\n            <div\n              class=\"absolute left-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(-1, $event)\"\n                  >\n                    <lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showMonthPicker($event)\"\n                  >\n                    {{ monthName }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 transition hover:bg-slate-100\"\n                    (click)=\"showYearPicker($event)\"\n                  >\n                    {{ yearLabel }}\n                  </button>\n                </div>\n                @if (calendarView !== 'months') {\n                  <button\n                    type=\"button\"\n                    class=\"rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900\"\n                    aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C\"\n                    (click)=\"changeMonth(1, $event)\"\n                  >\n                    <lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon>\n                  </button>\n                }\n              </div>\n\n              @if (calendarView === 'days') {\n                <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">\n                  @for (weekday of ['\u041F\u043D', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041F\u0442', '\u0421\u0431', '\u041D\u0434']; track weekday) {\n                    <span class=\"py-1\">{{ weekday }}</span>\n                  }\n                </div>\n\n                <div class=\"grid grid-cols-7 gap-1\">\n                  @for (day of calendarDays; track day.date) {\n                    <button\n                      type=\"button\"\n                      class=\"aspect-square rounded-lg text-sm transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.text-slate-300]=\"!day.currentMonth\"\n                      [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\"\n                      [class.bg-slate-900]=\"isSelected(day.date)\"\n                      [class.text-white]=\"isSelected(day.date)\"\n                      (click)=\"selectDate(day.date, $event)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  }\n                </div>\n              } @else if (calendarView === 'months') {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (month of monthOptions; track month.value) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedMonth(month.value)\"\n                      [class.text-white]=\"isSelectedMonth(month.value)\"\n                      (click)=\"selectMonth(month.value, $event)\"\n                    >\n                      {{ month.label }}\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-3 gap-2\">\n                  @for (year of yearOptions; track year) {\n                    <button\n                      type=\"button\"\n                      class=\"rounded-lg px-2 py-3 text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-900\"\n                      [class.bg-slate-900]=\"isSelectedYear(year)\"\n                      [class.text-white]=\"isSelectedYear(year)\"\n                      (click)=\"selectYear(year, $event)\"\n                    >\n                      {{ year }}\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n" }]
+                        { 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" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1000,8 +1170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1010,6 +1178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], actions: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], actionTriggered: [{
                 type: Output
             }], onDocumentClick: [{
@@ -1020,7 +1190,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-class InputDatetimeComponent {
+class InputDateComponent {
+    control;
+    label;
+    hint;
+    error;
+    placeholder;
+    name;
+    id;
+    required = false;
+    disabled = false;
+    autocomplete = 'off';
+    pattern;
+    rows = 4;
+    actions = [];
+    actionTriggered = new EventEmitter();
+    pendingValue = '';
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    ngAfterViewInit() { this.control?.registerOnChange((value) => this.onChange(value)); this.control?.registerOnTouched(() => this.onTouched()); this.control?.writeValue(this.pendingValue); }
+    writeValue(value) { this.pendingValue = value; this.control?.writeValue(value); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(value) { this.disabled = value; }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputDateComponent, isStandalone: true, selector: "input-date", inputs: { label: "label", hint: "hint", error: "error", placeholder: "placeholder", name: "name", id: "id", required: "required", disabled: "disabled", autocomplete: "autocomplete", pattern: "pattern", rows: "rows", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true }], viewQueries: [{ propertyName: "control", first: true, predicate: InputDateControlComponent, descendants: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"id\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"actionTriggered.emit($event)\">\n  <input-date-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"id\" [required]=\"required\" [disabled]=\"disabled\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [rows]=\"rows\" />\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: InputDateControlComponent, selector: "input-date-control", inputs: ["label", "hint", "placeholder", "name", "id", "rows", "required", "autocomplete", "pattern", "error", "actions", "disabled"], outputs: ["actionTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-date', standalone: true, imports: [FieldFrameComponent, InputDateControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDateComponent), multi: true }], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"id\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"actionTriggered.emit($event)\">\n  <input-date-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"id\" [required]=\"required\" [disabled]=\"disabled\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [rows]=\"rows\" />\n</field-frame>\n" }]
+        }], propDecorators: { control: [{
+                type: ViewChild,
+                args: [InputDateControlComponent]
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class InputDatetimeControlComponent {
     cdr = inject(ChangeDetectorRef);
     popupService = inject(UiPopupService);
     closeActivePopup = () => this.closeCalendar();
@@ -1031,7 +1262,6 @@ class InputDatetimeComponent {
     id;
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete = 'off';
     pattern;
     error;
@@ -1048,7 +1278,7 @@ class InputDatetimeComponent {
     selectedHour = 12;
     selectedMinute = 0;
     static nextId = 0;
-    generatedId = `input-datetime-${InputDatetimeComponent.nextId++}`;
+    generatedId = `input-datetime-${InputDatetimeControlComponent.nextId++}`;
     actionTriggered = new EventEmitter();
     onChange = () => undefined;
     onTouched = () => undefined;
@@ -1118,18 +1348,18 @@ class InputDatetimeComponent {
     startOfMonth(date) { return new Date(date.getFullYear(), date.getMonth(), 1); }
     parseDate(value) { const [year, month, day] = value.split('-').map(Number); return year && month && day ? new Date(year, month - 1, day) : null; }
     toDateValue(date) { return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputDatetimeComponent, isStandalone: true, selector: "input-datetime", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-datetime', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true },
-                    ], template: "<div class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\" [class.w-full]=\"fullWidth\">\n  @if (label) { <span class=\"text-[0.7rem] font-semibold text-slate-600\">{{ label }} @if (required) { <span class=\"text-rose-500\"> *</span> }</span> }\n  <div class=\"flex items-end gap-2\"><div class=\"min-w-0 flex-1\"><div class=\"relative\">\n    <input type=\"text\" [attr.placeholder]=\"placeholder ?? '\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425'\" maxlength=\"16\" inputmode=\"numeric\" [attr.name]=\"name\" [attr.autocomplete]=\"autocomplete\" [disabled]=\"disabled\" class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" [attr.id]=\"controlId\" [value]=\"displayValue\" (click)=\"openCalendar($event)\" (keydown)=\"allowDateKey($event)\" (input)=\"onValueChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n    <lucide-icon [img]=\"calendarIcon\" class=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"></lucide-icon>\n    @if (isCalendarOpen) { <div class=\"absolute left-0 top-full z-50 mt-2 w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-4 shadow-xl\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-4 flex items-center justify-between\" [class.justify-center]=\"calendarView === 'months'\">\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(-1, $event)\"><lucide-icon [img]=\"previousMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n        <div class=\"flex items-center gap-1\"><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold capitalize text-slate-900 hover:bg-slate-100\" (click)=\"showMonthPicker($event)\">{{ monthName }}</button><button type=\"button\" class=\"rounded-lg px-2 py-1 text-sm font-semibold text-slate-900 hover:bg-slate-100\" (click)=\"showYearPicker($event)\">{{ yearLabel }}</button></div>\n        @if (calendarView !== 'months') { <button type=\"button\" class=\"rounded-lg p-2 text-slate-500 hover:bg-slate-100\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043F\u0435\u0440\u0456\u043E\u0434\" (click)=\"changeMonth(1, $event)\"><lucide-icon [img]=\"nextMonthIcon\" class=\"h-4 w-4\"></lucide-icon></button> }\n      </div>\n      @if (calendarView === 'days') {\n        <div class=\"mb-2 grid grid-cols-7 text-center text-xs font-medium text-slate-400\">@for (weekday of ['\u041F\u043D','\u0412\u0442','\u0421\u0440','\u0427\u0442','\u041F\u0442','\u0421\u0431','\u041D\u0434']; track weekday) { <span class=\"py-1\">{{ weekday }}</span> }</div>\n        <div class=\"grid grid-cols-7 gap-1\">@for (day of calendarDays; track day.date) { <button type=\"button\" class=\"aspect-square rounded-lg text-sm hover:bg-slate-100 hover:text-slate-900\" [class.text-slate-300]=\"!day.currentMonth\" [class.text-slate-700]=\"day.currentMonth && !isSelected(day.date)\" [class.bg-slate-900]=\"isSelected(day.date)\" [class.text-white]=\"isSelected(day.date)\" (click)=\"selectDate(day.date, $event)\">{{ day.day }}</button> }</div>\n        <div class=\"mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3\"><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0413\u043E\u0434\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"23\" [value]=\"selectedHour\" (input)=\"selectedHour = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label><label class=\"text-[0.65rem] font-medium text-slate-500\">\u0425\u0432\u0438\u043B\u0438\u043D\u0438<input type=\"number\" min=\"0\" max=\"59\" [value]=\"selectedMinute\" (input)=\"selectedMinute = +$any($event.target).value; onTimeChange()\" class=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\" /></label></div>\n      } @else if (calendarView === 'months') { <div class=\"grid grid-cols-3 gap-2\">@for (month of monthOptions; track month.value) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm capitalize text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedMonth(month.value)\" [class.text-white]=\"isSelectedMonth(month.value)\" (click)=\"selectMonth(month.value, $event)\">{{ month.label }}</button> }</div>\n      } @else { <div class=\"grid grid-cols-3 gap-2\">@for (year of yearOptions; track year) { <button type=\"button\" class=\"rounded-lg px-2 py-3 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900\" [class.bg-slate-900]=\"isSelectedYear(year)\" [class.text-white]=\"isSelectedYear(year)\" (click)=\"selectYear(year, $event)\">{{ year }}</button> }</div> }\n    </div> }\n  </div></div>\n  @if (actions.length) { <div class=\"flex flex-none items-center gap-2 pb-0.5\">@for (action of actions; track action.id) { <ui-button type=\"button\" [variant]=\"action.variant ?? 'secondary'\" [icon]=\"action.icon || ''\" size=\"sm\" [disabled]=\"disabled\" (click)=\"triggerAction(action)\">{{ action.label }}</ui-button> }</div> }\n  </div>\n  @if (hint) { <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p> } @if (error) { <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p> }\n</div>\n" }]
+            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" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1144,8 +1374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1154,6 +1382,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], actions: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], actionTriggered: [{
                 type: Output
             }], onDocumentClick: [{
@@ -1164,6 +1394,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+class InputDatetimeComponent {
+    control;
+    label;
+    hint;
+    error;
+    placeholder;
+    name;
+    id;
+    required = false;
+    disabled = false;
+    autocomplete = 'off';
+    pattern;
+    rows = 4;
+    actions = [];
+    actionTriggered = new EventEmitter();
+    pendingValue = '';
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    ngAfterViewInit() { this.control?.registerOnChange((value) => this.onChange(value)); this.control?.registerOnTouched(() => this.onTouched()); this.control?.writeValue(this.pendingValue); }
+    writeValue(value) { this.pendingValue = value; this.control?.writeValue(value); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(value) { this.disabled = value; }
+    validate(control) { return validateFormControl(control, this.required, this.pattern); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputDatetimeComponent, isStandalone: true, selector: "input-datetime", inputs: { label: "label", hint: "hint", error: "error", placeholder: "placeholder", name: "name", id: "id", required: "required", disabled: "disabled", autocomplete: "autocomplete", pattern: "pattern", rows: "rows", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true }], viewQueries: [{ propertyName: "control", first: true, predicate: InputDatetimeControlComponent, descendants: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"id\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"actionTriggered.emit($event)\">\n  <input-datetime-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"id\" [required]=\"required\" [disabled]=\"disabled\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [rows]=\"rows\" />\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: InputDatetimeControlComponent, selector: "input-datetime-control", inputs: ["label", "hint", "placeholder", "name", "id", "rows", "required", "autocomplete", "pattern", "error", "actions", "disabled"], outputs: ["actionTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputDatetimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-datetime', standalone: true, imports: [FieldFrameComponent, InputDatetimeControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatetimeComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputDatetimeComponent), multi: true }], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"id\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"actionTriggered.emit($event)\">\n  <input-datetime-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"id\" [required]=\"required\" [disabled]=\"disabled\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [rows]=\"rows\" />\n</field-frame>\n" }]
+        }], propDecorators: { control: [{
+                type: ViewChild,
+                args: [InputDatetimeControlComponent]
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], 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();
+    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;
+    id;
+    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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-email-control', standalone: true, imports: [InputTextControlComponent], 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()" />` }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputEmailComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -1175,7 +1547,6 @@ class InputEmailComponent {
     element = 'input';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     pattern;
     error;
@@ -1214,25 +1585,25 @@ class InputEmailComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputEmailComponent, isStandalone: true, selector: "input-email", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputEmailComponent, isStandalone: true, selector: "input-email", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputEmailComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputEmailComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-email-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\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: InputEmailControlComponent, selector: "input-email-control", inputs: ["placeholder", "name", "id", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-email', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-email', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, FieldFrameComponent, InputEmailControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputEmailComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputEmailComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-email-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1247,8 +1618,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1261,6 +1630,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
+class InputNumberControlComponent {
+    placeholder;
+    name;
+    id;
+    disabled = false;
+    value = '';
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-number-control', standalone: true, imports: [InputTextControlComponent], template: `<input-text-control [placeholder]="placeholder" [name]="name" [id]="id" type="number" [disabled]="disabled" [value]="value" (valueChange)="valueChange.emit($event)" (touched)="touched.emit()" />` }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputNumberComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -1272,7 +1671,6 @@ class InputNumberComponent {
     element = 'input';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     disabled = false;
     pattern;
@@ -1314,25 +1712,25 @@ class InputNumberComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputNumberComponent, isStandalone: true, selector: "input-number", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputNumberComponent, isStandalone: true, selector: "input-number", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputNumberComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputNumberComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-number-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputNumberControlComponent, selector: "input-number-control", inputs: ["placeholder", "name", "id", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-number', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-number', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, FieldFrameComponent, InputNumberControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputNumberComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputNumberComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full appearance-none rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (wheel)=\"preventWheelChange($event)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"] }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-number-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n", "input[type=number]{-moz-appearance:textfield}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1347,8 +1745,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], disabled: [{
@@ -1363,6 +1759,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
+class InputPasswordControlComponent {
+    showIcon = Eye;
+    hideIcon = EyeOff;
+    placeholder;
+    name;
+    id;
+    autocomplete;
+    pattern;
+    disabled = false;
+    value = '';
+    valueChange = new EventEmitter();
+    touched = new EventEmitter();
+    visible = false;
+    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()" />
+      <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>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input-password-control',
+                    standalone: true,
+                    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()" />
+      <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>
+    </div>
+  `,
+                }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputPasswordComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -1376,7 +1830,6 @@ class InputPasswordComponent {
     element = 'input';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     pattern;
     error;
@@ -1421,25 +1874,25 @@ class InputPasswordComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPasswordComponent, isStandalone: true, selector: "input-password", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputPasswordComponent, isStandalone: true, selector: "input-password", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputPasswordComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputPasswordComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-password-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputPasswordControlComponent, selector: "input-password-control", inputs: ["placeholder", "name", "id", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-password', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-password', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, LucideAngularModule, FieldFrameComponent, InputPasswordControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputPasswordComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputPasswordComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <div class=\"relative\">\n          <input\n            [attr.type]=\"isPasswordVisible ? 'text' : type\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.pattern]=\"pattern\"\n            [disabled]=\"disabled\"\n            class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 pr-10 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.id]=\"controlId\"\n            [value]=\"value\"\n            (input)=\"onValueChange($any($event.target).value)\"\n            (blur)=\"onTouched()\"\n          />\n          <button\n            type=\"button\"\n            class=\"absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n            [attr.aria-label]=\"isPasswordVisible ? '\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u0440\u043E\u043B\u044C'\"\n            [disabled]=\"disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword($event)\"\n          >\n            <lucide-icon\n              [img]=\"isPasswordVisible ? hidePasswordIcon : showPasswordIcon\"\n              class=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            ></lucide-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-password-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1454,8 +1907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1479,7 +1930,6 @@ class InputTextComponent {
     element = 'input';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     pattern;
     error;
@@ -1518,25 +1968,25 @@ class InputTextComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextComponent, isStandalone: true, selector: "input-text", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputTextComponent, isStandalone: true, selector: "input-text", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTextComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-text', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-text', standalone: true, imports: [CommonModule, FormsModule, FieldFrameComponent, InputTextControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputTextComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
+                    ], 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" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1551,8 +2001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1565,6 +2013,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
+class InputTextareaControlComponent {
+    placeholder;
+    name;
+    id;
+    rows = 4;
+    disabled = false;
+    value = '';
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-textarea-control', standalone: true, imports: [InputTextControlComponent], 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()" />` }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputTextareaComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -1576,7 +2057,6 @@ class InputTextareaComponent {
     element = 'textarea';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     pattern;
     error;
@@ -1615,25 +2095,25 @@ class InputTextareaComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputTextareaComponent, isStandalone: true, selector: "input-textarea", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputTextareaComponent, isStandalone: true, selector: "input-textarea", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTextareaComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextareaComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-textarea-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [rows]=\"rows\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\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: InputTextareaControlComponent, selector: "input-textarea-control", inputs: ["placeholder", "name", "id", "rows", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-textarea', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-textarea', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, FieldFrameComponent, InputTextareaControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputTextareaComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputTextareaComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-textarea-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [rows]=\"rows\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -1648,8 +2128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -1662,15 +2140,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }] } });
 
+class InputFileControlComponent {
+    accept;
+    multiple = false;
+    disabled = false;
+    selectedFiles = [];
+    filesSelected = new EventEmitter();
+    removeFile = new EventEmitter();
+    touched = new EventEmitter();
+    onFilesSelected(event) {
+        const input = event.target;
+        this.filesSelected.emit(Array.from(input.files ?? []));
+        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 }] });
+}
+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" }]
+        }], propDecorators: { accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectedFiles: [{
+                type: Input
+            }], filesSelected: [{
+                type: Output
+            }], removeFile: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputFileComponent {
     label;
     hint;
+    error;
+    required = false;
     accept;
     multiple = false;
     disabled = false;
-    value = null;
-    valueChange = new EventEmitter();
     filesChange = new EventEmitter();
+    value = null;
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) { this.value = value; }
@@ -1688,39 +2202,85 @@ class InputFileComponent {
         const value = this.multiple ? files : (files[0] ?? null);
         this.value = value;
         this.onChange(value);
-        this.valueChange.emit(value);
         this.filesChange.emit(files);
         input.value = '';
     }
+    handleFilesSelected(files) {
+        const value = this.multiple ? files : (files[0] ?? null);
+        this.value = value;
+        this.onChange(value);
+        this.filesChange.emit(files);
+    }
     remove(index) {
         const files = this.selectedFiles.filter((_file, fileIndex) => fileIndex !== index);
         const value = this.multiple ? files : (files[0] ?? null);
         this.value = value;
         this.onChange(value);
-        this.valueChange.emit(value);
         this.filesChange.emit(files);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputFileComponent, isStandalone: true, selector: "input-file", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n    (blur)=\"onTouched()\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputFileComponent, isStandalone: true, selector: "input-file", inputs: { label: "label", hint: "hint", error: "error", required: "required", accept: "accept", multiple: "multiple", disabled: "disabled" }, outputs: { filesChange: "filesChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-file-control [accept]=\"accept\" [multiple]=\"multiple\" [disabled]=\"disabled\" [selectedFiles]=\"selectedFiles\" (filesSelected)=\"handleFilesSelected($event)\" (removeFile)=\"remove($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputFileControlComponent, selector: "input-file-control", inputs: ["accept", "multiple", "disabled", "selectedFiles"], outputs: ["filesSelected", "removeFile", "touched"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-file', standalone: true, imports: [CommonModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n    (blur)=\"onTouched()\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
+            args: [{ selector: 'input-file', standalone: true, imports: [CommonModule, FieldFrameComponent, InputFileControlComponent], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFileComponent), multi: true }], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-file-control [accept]=\"accept\" [multiple]=\"multiple\" [disabled]=\"disabled\" [selectedFiles]=\"selectedFiles\" (filesSelected)=\"handleFilesSelected($event)\" (removeFile)=\"remove($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
             }], accept: [{
                 type: Input
             }], multiple: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], value: [{
+            }], filesChange: [{
+                type: Output
+            }] } });
+
+class InputPhotoControlComponent {
+    accept = 'image/*';
+    multiple = false;
+    disabled = false;
+    canSelectMore = true;
+    previews = [];
+    filesSelected = new EventEmitter();
+    removed = new EventEmitter();
+    dropped = new EventEmitter();
+    touched = new EventEmitter();
+    selectFiles(event) {
+        const input = event.target;
+        this.filesSelected.emit(Array.from(input.files ?? []));
+        input.value = '';
+        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"] }] });
+}
+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" }]
+        }], propDecorators: { accept: [{
                 type: Input
-            }], valueChange: [{
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], canSelectMore: [{
+                type: Input
+            }], previews: [{
+                type: Input
+            }], filesSelected: [{
                 type: Output
-            }], filesChange: [{
+            }], removed: [{
+                type: Output
+            }], dropped: [{
+                type: Output
+            }], touched: [{
                 type: Output
             }] } });
 
@@ -1728,14 +2288,15 @@ class InputPhotoComponent {
     http = inject(HttpClient);
     label;
     hint;
+    error;
+    required = false;
     accept = 'image/*';
     multiple = false;
     limit = Number.MAX_SAFE_INTEGER;
     disabled = false;
-    value = null;
-    valueChange = new EventEmitter();
     filesChange = new EventEmitter();
     uploadingChange = new EventEmitter();
+    value = null;
     pendingFiles = [];
     previews = [];
     uploading = false;
@@ -1750,7 +2311,7 @@ class InputPhotoComponent {
     registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     ngOnChanges(changes) {
-        if (changes['value'] || changes['multiple'])
+        if (changes['multiple'])
             this.rebuildPreviews();
     }
     ngOnDestroy() {
@@ -1771,6 +2332,15 @@ class InputPhotoComponent {
         this.rebuildPreviews();
         this.uploadFiles(accepted);
     }
+    handleFilesSelected(files) {
+        if (!files.length || this.disabled)
+            return;
+        const accepted = this.multiple ? files.slice(0, Math.max(0, this.normalizedLimit - this.ids.length - this.pendingFiles.length)) : [files[0]];
+        this.pendingFiles = this.multiple ? [...this.pendingFiles, ...accepted] : [accepted[0]];
+        this.filesChange.emit(this.pendingFiles);
+        this.rebuildPreviews();
+        this.uploadFiles(accepted);
+    }
     remove(index) {
         const ids = [...this.ids];
         if (index < ids.length) {
@@ -1801,7 +2371,6 @@ class InputPhotoComponent {
     emitValue(value) {
         this.value = value;
         this.onChange(value);
-        this.valueChange.emit(value);
         this.rebuildPreviews(value);
     }
     uploadFiles(files) {
@@ -1862,15 +2431,19 @@ class InputPhotoComponent {
         return normalized.startsWith('image/') || normalized === 'application/pdf';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputPhotoComponent, isStandalone: true, selector: "input-photo", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", uploadingChange: "uploadingChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputPhotoComponent, isStandalone: true, selector: "input-photo", inputs: { label: "label", hint: "hint", error: "error", required: "required", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled" }, outputs: { filesChange: "filesChange", uploadingChange: "uploadingChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-photo-control [accept]=\"accept\" [multiple]=\"multiple\" [disabled]=\"disabled\" [canSelectMore]=\"canSelectMore\" [previews]=\"previews\" (filesSelected)=\"handleFilesSelected($event)\" (removed)=\"remove($event)\" (dropped)=\"drop($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: FieldFrameComponent, selector: "field-frame", inputs: ["label", "hint", "error", "required", "forId", "disabled", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputPhotoControlComponent, selector: "input-photo-control", inputs: ["accept", "multiple", "disabled", "canSelectMore", "previews"], outputs: ["filesSelected", "removed", "dropped", "touched"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputPhotoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-photo', standalone: true, imports: [CommonModule, DragDropModule], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
+            args: [{ selector: 'input-photo', standalone: true, imports: [CommonModule, DragDropModule, FieldFrameComponent, InputPhotoControlComponent], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputPhotoComponent), multi: true }], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\">\n  <input-photo-control [accept]=\"accept\" [multiple]=\"multiple\" [disabled]=\"disabled\" [canSelectMore]=\"canSelectMore\" [previews]=\"previews\" (filesSelected)=\"handleFilesSelected($event)\" (removed)=\"remove($event)\" (dropped)=\"drop($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
             }], accept: [{
                 type: Input
             }], multiple: [{
@@ -1879,17 +2452,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
             }], filesChange: [{
                 type: Output
             }], uploadingChange: [{
                 type: Output
             }] } });
 
-class InputSelectComponent {
+class InputSelectControlComponent {
     closeIcon = X;
     chevronDownIcon = ChevronDown;
     checkIcon = Check;
@@ -1903,15 +2472,12 @@ class InputSelectComponent {
     name;
     data;
     required = false;
-    fullWidth = false;
     disabled = false;
     multiple = false;
     includeBlankOption = false;
     blankOptionLabel = 'Оберіть…';
     emptyStateLabel = 'Немає варіантів для вибору';
     searchable = true;
-    remoteSearch = false;
-    searchPlaceholder = 'Пошук...';
     _options = [];
     set options(value) {
         this._options = value ?? [];
@@ -2086,7 +2652,7 @@ class InputSelectComponent {
     }
     get visibleOptions() {
         const options = this.getRenderOptions();
-        if (!this.searchable || this.remoteSearch || !this.searchTerm.trim()) {
+        if (!this.searchable || this.getDictionaryName() || !this.searchTerm.trim()) {
             return options;
         }
         const search = this.searchTerm.trim().toLowerCase();
@@ -2239,26 +2805,26 @@ class InputSelectComponent {
     loadSuggestItem(name, key) {
         return this.http.get(`/api/suggest/${encodeURIComponent(name)}/${encodeURIComponent(key)}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSelectComponent, isStandalone: true, selector: "input-select", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", fullWidth: "fullWidth", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", remoteSearch: "remoteSearch", searchPlaceholder: "searchPlaceholder", options: "options", error: "error", hint: "hint", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputSelectComponent),
+                useExisting: forwardRef(() => InputSelectControlComponent),
                 multi: true,
             },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            { 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSelectControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-select', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-select-control', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputSelectComponent),
+                            useExisting: forwardRef(() => InputSelectControlComponent),
                             multi: true,
                         },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSelectComponent), multi: true },
-                    ], template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex min-h-10 w-full flex-nowrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\" [class.-ml-2]=\"multiple\">\n        <!-- MULTIPLE MODE -->\n        @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-slate-100 px-2 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n                (keydown.enter)=\"removeOption(option, $event)\"\n                (keydown.space)=\"$event.preventDefault(); removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"h-4 w-4 shrink-0\"></lucide-icon>\n              </span>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n        } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"min-w-0 truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n        }\n      </span>\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"shrink-0 text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"popupViewportMargin\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 w-full max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.width.px]=\"popupWidth\"\n        [style.max-width]=\"'calc(100vw - 2rem)'\"\n        [class]=\"panelClass\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        <div class=\"max-h-60 overflow-auto\">\n          @if (!visibleOptions.length) {\n            <div class=\"px-4 py-3 text-sm text-slate-500\">\n              @if (isDictionaryLoading && data) {\n                \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n              } @else {\n                {{ emptyStateLabel }}\n              }\n            </div>\n          } @else {\n            @for (option of visibleOptions; track trackOption($index, option)) {\n              <button\n                type=\"button\"\n                class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n                [class.bg-slate-100]=\"isSelected(option)\"\n                (click)=\"selectOption(option, $event)\"\n              >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                  @if (option.imageUrl) {\n                    <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                  }\n                  <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n                </span>\n\n                @if (isSelected(option)) {\n                  <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n                }\n              </button>\n            }\n          }\n        </div>\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
+                        { 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" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2269,8 +2835,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], multiple: [{
@@ -2284,10 +2848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], searchable: [{
                 type: Input
-            }], remoteSearch: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
             }], options: [{
                 type: Input
             }], error: [{
@@ -2313,6 +2873,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+class InputSelectComponent {
+    control;
+    label;
+    hint;
+    error;
+    placeholder;
+    name;
+    data;
+    required = false;
+    disabled = false;
+    multiple = false;
+    includeBlankOption = false;
+    blankOptionLabel = 'Оберіть…';
+    emptyStateLabel = 'Немає варіантів для вибору';
+    searchable = true;
+    options = [];
+    triggerClass = '';
+    panelClass = '';
+    valueChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    pendingValue = null;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    ngAfterViewInit() {
+        this.control?.registerOnChange((value) => {
+            this.onChange(value);
+            this.valueChange.emit(value);
+        });
+        this.control?.registerOnTouched(() => this.onTouched());
+        this.control?.writeValue(this.pendingValue);
+    }
+    writeValue(value) {
+        this.pendingValue = value;
+        this.control?.writeValue(value);
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    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: [
+            { 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 });
+}
+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" }]
+        }], propDecorators: { control: [{
+                type: ViewChild,
+                args: [InputSelectControlComponent]
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], includeBlankOption: [{
+                type: Input
+            }], blankOptionLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], triggerClass: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }] } });
+
+class InputSlugControlComponent {
+    placeholder;
+    name;
+    id;
+    autocomplete = 'off';
+    disabled = false;
+    value = '';
+    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 });
+}
+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()" />`,
+                }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class InputSlugComponent {
     label;
     hint;
@@ -2320,7 +3010,6 @@ class InputSlugComponent {
     name;
     id;
     required = false;
-    fullWidth = false;
     autocomplete = 'off';
     error;
     invalidInput = new EventEmitter();
@@ -2355,6 +3044,13 @@ class InputSlugComponent {
         this.value = normalized;
         this.onChange(normalized);
     }
+    handleValueChange(value) {
+        const normalized = this.normalizeSlug(value);
+        if (value !== normalized)
+            this.invalidInput.emit();
+        this.value = normalized;
+        this.onChange(normalized);
+    }
     normalizeSlug(value) {
         return (value ?? '')
             .toLowerCase()
@@ -2362,25 +3058,25 @@ class InputSlugComponent {
             .replace(/[^a-z0-9_]/g, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputSlugComponent, isStandalone: true, selector: "input-slug", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputSlugComponent, isStandalone: true, selector: "input-slug", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", autocomplete: "autocomplete", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputSlugComponent),
                 multi: true,
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSlugComponent), multi: true },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\">\n  <input-slug-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"handleValueChange($event)\" (touched)=\"onTouched()\" />\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: InputSlugControlComponent, selector: "input-slug-control", inputs: ["placeholder", "name", "id", "autocomplete", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputSlugComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-slug', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-slug', standalone: true, imports: [CommonModule, FormsModule, FieldFrameComponent, InputSlugControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputSlugComponent),
                             multi: true,
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => InputSlugComponent), multi: true },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    class=\"rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\">\n  <input-slug-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [autocomplete]=\"autocomplete\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"handleValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -2393,8 +3089,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], error: [{
@@ -2425,7 +3119,7 @@ class FieldInputComponent {
     value;
     error = '';
     disabled = false;
-    actions = [];
+    visibleActions = [];
     valueChange = new EventEmitter();
     actionTriggered = new EventEmitter();
     lookupRequested = new EventEmitter();
@@ -2476,11 +3170,17 @@ class FieldInputComponent {
         if (!this.componentRef || !this.field)
             return;
         const field = this.field;
+        const config = field;
         const setInput = (name, value) => this.componentRef?.setInput(name, value);
         const inputType = String(field.type || 'text');
-        const fullWidth = field.fullWidth !== false;
-        // Common presentation belongs to this wrapper, not to the concrete control.
-        // Only pass inputs that are actually declared by the selected component.
+        if (field.label !== undefined)
+            setInput('label', field.label);
+        if (field.hint !== undefined)
+            setInput('hint', field.hint);
+        setInput('error', this.error);
+        if (typeof field.required === 'boolean')
+            setInput('required', field.required);
+        // FieldInput only adapts the dynamic field to the selected control.
         switch (inputType) {
             case 'text':
             case 'number':
@@ -2489,57 +3189,44 @@ class FieldInputComponent {
             case 'email':
             case 'password':
             case 'textarea':
+                setInput('actions', this.visibleActions);
                 setInput('name', field.id);
                 setInput('id', field.id);
                 setInput('placeholder', field.placeholder);
-                setInput('pattern', field.pattern);
-                setInput('rows', field.rows ?? 4);
-                setInput('fullWidth', fullWidth);
+                setInput('pattern', config['pattern']);
+                setInput('rows', config['rows'] ?? 4);
                 break;
             case 'slug':
                 setInput('name', field.id);
                 setInput('id', field.id);
                 setInput('placeholder', field.placeholder);
-                setInput('fullWidth', fullWidth);
                 break;
             case 'select':
                 setInput('name', field.id);
                 setInput('placeholder', field.placeholder);
-                setInput('data', field.data);
-                setInput('options', field.options || []);
-                setInput('multiple', !!field.multiple);
-                setInput('searchable', field.searchable ?? !!field.data);
-                setInput('remoteSearch', !!field.data);
-                setInput('searchPlaceholder', field.placeholder || 'Пошук...');
-                setInput('fullWidth', fullWidth);
+                setInput('data', config['data']);
+                setInput('options', config['options'] || []);
+                setInput('multiple', !!config['multiple']);
+                if (typeof config['searchable'] === 'boolean') {
+                    setInput('searchable', config['searchable']);
+                }
                 break;
             case 'color':
                 setInput('name', field.id);
                 setInput('id', field.id);
-                setInput('required', false);
-                setInput('fullWidth', fullWidth);
                 break;
             case 'file':
-                setInput('accept', field.accept);
-                setInput('multiple', !!field.multiple);
+                setInput('accept', config['accept']);
+                setInput('multiple', !!config['multiple']);
                 break;
             case 'photo':
-                setInput('accept', field.accept || 'image/*');
-                setInput('multiple', !!field.multiple);
-                setInput('limit', field.limit ?? 0);
+                setInput('accept', config['accept'] || 'image/*');
+                setInput('multiple', !!config['multiple']);
+                setInput('limit', config['limit'] ?? 0);
                 break;
             case 'barcode':
-                setInput('label', '');
-                setInput('hint', '');
                 setInput('placeholder', field.placeholder);
                 setInput('disabled', this.disabled);
-                setInput('autoOpen', field.autoOpen !== false);
-                setInput('searchButtonLabel', field.searchButtonLabel || 'Знайти');
-                setInput('openCameraLabel', field.openCameraLabel || 'Відкрити камеру');
-                setInput('closeCameraLabel', field.closeCameraLabel || 'Закрити камеру');
-                setInput('cameraTitle', field.cameraTitle || 'Камера');
-                setInput('cameraStartingLabel', field.cameraStartingLabel || 'Запускаємо камеру…');
-                setInput('cameraHint', field.cameraHint || 'Наведіть камеру на штрихкод. Після зчитування код підставиться автоматично.');
                 setInput('value', this.value ?? '');
                 break;
             case 'checkbox':
@@ -2550,84 +3237,18 @@ 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: "17.0.0", version: "21.2.19", type: FieldInputComponent, isStandalone: true, selector: "field-input", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered", lookupRequested: "lookupRequested", barcodeScanned: "barcodeScanned", filesChange: "filesChange", uploadingChange: "uploadingChange" }, viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="flex flex-col gap-1" [class.w-full]="field.fullWidth !== false">
-      @if (field.label) {
-        <label class="text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600" [attr.for]="field.id">
-          {{ field.label }}
-          @if (field.required) { <span aria-hidden="true" class="text-rose-500"> *</span> }
-        </label>
-      }
-
-      <div class="flex items-start gap-2" [class.rounded-xl]="!!error" [class.ring-2]="!!error" [class.ring-rose-200]="!!error">
-        <div class="min-w-0 w-full flex-1">
-          <ng-container #inputContainer></ng-container>
-        </div>
-
-        @if (actions.length) {
-          <div class="flex flex-none items-center gap-2 pt-0.5">
-            @for (action of actions; track action.id) {
-              <ui-button
-                type="button"
-                [variant]="action.variant ?? 'secondary'"
-                [icon]="action.icon || ''"
-                [size]="action.size || 'sm'"
-                [disabled]="disabled"
-                (click)="actionTriggered.emit(action)"
-              >
-                {{ action.label }}
-              </ui-button>
-            }
-          </div>
-        }
-      </div>
-
-      @if (field.hint) { <p class="text-[0.5rem] text-slate-500">{{ field.hint }}</p> }
-      @if (error) { <p class="text-[0.65rem] text-rose-500">{{ error }}</p> }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
+    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: `
+    <ng-container #inputContainer></ng-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FieldInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'field-input',
                     standalone: true,
-                    imports: [CommonModule, UiButtonComponent],
+                    imports: [CommonModule],
                     template: `
-    <div class="flex flex-col gap-1" [class.w-full]="field.fullWidth !== false">
-      @if (field.label) {
-        <label class="text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600" [attr.for]="field.id">
-          {{ field.label }}
-          @if (field.required) { <span aria-hidden="true" class="text-rose-500"> *</span> }
-        </label>
-      }
-
-      <div class="flex items-start gap-2" [class.rounded-xl]="!!error" [class.ring-2]="!!error" [class.ring-rose-200]="!!error">
-        <div class="min-w-0 w-full flex-1">
-          <ng-container #inputContainer></ng-container>
-        </div>
-
-        @if (actions.length) {
-          <div class="flex flex-none items-center gap-2 pt-0.5">
-            @for (action of actions; track action.id) {
-              <ui-button
-                type="button"
-                [variant]="action.variant ?? 'secondary'"
-                [icon]="action.icon || ''"
-                [size]="action.size || 'sm'"
-                [disabled]="disabled"
-                (click)="actionTriggered.emit(action)"
-              >
-                {{ action.label }}
-              </ui-button>
-            }
-          </div>
-        }
-      </div>
-
-      @if (field.hint) { <p class="text-[0.5rem] text-slate-500">{{ field.hint }}</p> }
-      @if (error) { <p class="text-[0.65rem] text-rose-500">{{ error }}</p> }
-    </div>
+    <ng-container #inputContainer></ng-container>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -2638,7 +3259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
-            }], actions: [{
+            }], visibleActions: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2898,6 +3519,8 @@ class DynamicFormComponent {
         this.runFieldLookup(field);
     }
     runFieldLookup(field, overrideValue) {
+        if (!isDynamicFormLookupField(field))
+            return;
         const api = String(field.lookupApi || '').trim();
         if (!api)
             return;
@@ -3047,7 +3670,7 @@ class DynamicFormComponent {
         ].filter(Boolean).join(' ');
     }
     getContainerContentClass(field) {
-        const className = String(field.contentClassName || '').trim();
+        const className = String(this.isContainerField(field) ? field.contentClassName || '' : '').trim();
         const layout = this.isContainerField(field) ? field.layout : undefined;
         return [
             layout === 'stack' ? 'space-y-4' : 'grid grid-cols-1 gap-4 md:grid-cols-12',
@@ -3090,6 +3713,8 @@ class DynamicFormComponent {
         return classes[span] || classes[12];
     }
     applyLookupResponse(field, response) {
+        if (!isDynamicFormLookupField(field))
+            return;
         const lookupMap = field.lookupMap || {};
         const mapped = Object.entries(lookupMap).reduce((acc, [targetField, sourcePath]) => {
             acc[targetField] = this.resolveTemplateValue(response, sourcePath);
@@ -3121,11 +3746,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            [actions]=\"resolveFieldActions(field)\"\n            (valueChange)=\"onFieldValueChange(field, $event)\"\n            (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            (lookupRequested)=\"runBarcodeLookup(field)\"\n            (barcodeScanned)=\"onBarcodeScanned(field, $event)\"\n            (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            (uploadingChange)=\"uploadingChange.emit($event)\"\n          ></field-input>\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: FieldInputComponent, selector: "field-input", inputs: ["field", "value", "error", "disabled", "actions"], outputs: ["valueChange", "actionTriggered", "lookupRequested", "barcodeScanned", "filesChange", "uploadingChange"] }] });
+    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"] }] });
 }
 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            [actions]=\"resolveFieldActions(field)\"\n            (valueChange)=\"onFieldValueChange(field, $event)\"\n            (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            (lookupRequested)=\"runBarcodeLookup(field)\"\n            (barcodeScanned)=\"onBarcodeScanned(field, $event)\"\n            (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            (uploadingChange)=\"uploadingChange.emit($event)\"\n          ></field-input>\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n" }]
+            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" }]
         }], propDecorators: { fields: [{
                 type: Input
             }], value: [{
@@ -3353,6 +3978,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, DynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [disabled]=\"isLoading() || isSubmitting() || isActionRunning()\" [showSubmit]=\"false\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
+class InputBaseControlComponent {
+    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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputBaseControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-base-control', standalone: true, imports: [InputTextControlComponent], 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()" />` }]
+        }], 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 InputComponent {
     cdr = inject(ChangeDetectorRef);
     label;
@@ -3364,7 +4034,6 @@ class InputComponent {
     element = 'input';
     rows = 4;
     required = false;
-    fullWidth = false;
     autocomplete;
     pattern;
     error;
@@ -3402,23 +4071,23 @@ class InputComponent {
         this.actionTriggered.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InputComponent, isStandalone: true, selector: "input-base", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputComponent, isStandalone: true, selector: "input-base", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", autocomplete: "autocomplete", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-base-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [type]=\"type\" [element]=\"element\" [rows]=\"rows\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\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: InputBaseControlComponent, selector: "input-base-control", inputs: ["placeholder", "name", "id", "type", "element", "rows", "autocomplete", "pattern", "disabled", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-base', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'input-base', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, FieldFrameComponent, InputBaseControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n" }]
+                    ], template: "<field-frame [label]=\"label\" [hint]=\"hint\" [error]=\"error\" [required]=\"required\" [forId]=\"controlId\" [disabled]=\"disabled\" [actions]=\"actions\" (actionTriggered)=\"triggerAction($event)\">\n  <input-base-control [placeholder]=\"placeholder\" [name]=\"name\" [id]=\"controlId\" [type]=\"type\" [element]=\"element\" [rows]=\"rows\" [autocomplete]=\"autocomplete\" [pattern]=\"pattern\" [disabled]=\"disabled\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" (touched)=\"onTouched()\" />\n</field-frame>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -3437,8 +4106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], required: [{
                 type: Input
-            }], fullWidth: [{
-                type: Input
             }], autocomplete: [{
                 type: Input
             }], pattern: [{
@@ -3454,6 +4121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class InputPhotoGalleryComponent {
     http = inject(HttpClient);
     label = 'Фото';
+    hint;
+    error;
+    required = false;
     orderLabel = 'Порядок фото (перетягуй)';
     imageIds = [];
     disabled = false;
@@ -3594,13 +4264,19 @@ 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", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵ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"] }] });
 }
 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], template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"] }]
+            args: [{ selector: 'input-photo-gallery', standalone: true, imports: [CommonModule, DragDropModule, 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"] }]
         }], propDecorators: { label: [{
                 type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
             }], orderLabel: [{
                 type: Input
             }], imageIds: [{
@@ -3618,6 +4294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }] } });
 
 class InputRangeSliderComponent {
+    label;
+    hint;
+    error;
+    required = false;
     min = 0;
     max = 100;
     step = 1;
@@ -3707,7 +4387,8 @@ class InputRangeSliderComponent {
         input.value = String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InputRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputRangeSliderComponent, isStandalone: true, selector: "input-range-slider", inputs: { min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InputRangeSliderComponent, isStandalone: true, selector: "input-range-slider", inputs: { label: "label", hint: "hint", error: "error", required: "required", min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <field-frame [label]="label" [hint]="hint" [error]="error" [required]="required">
     <div class="range-slider">
       <div class="range-slider__track"></div>
       <div
@@ -3740,11 +4421,13 @@ class InputRangeSliderComponent {
         (input)="onEndInput($event)"
         (change)="interactionEnd.emit()">
     </div>
-  `, isInline: true, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    </field-frame>
+  `, isInline: true, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: InputRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-range-slider', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'input-range-slider', standalone: true, imports: [CommonModule, FieldFrameComponent], template: `
+    <field-frame [label]="label" [hint]="hint" [error]="error" [required]="required">
     <div class="range-slider">
       <div class="range-slider__track"></div>
       <div
@@ -3777,8 +4460,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         (input)="onEndInput($event)"
         (change)="interactionEnd.emit()">
     </div>
+    </field-frame>
   `, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"] }]
-        }], propDecorators: { min: [{
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -3810,5 +4502,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_API, ACTION_FORM, ACTION_PRINT, ACTION_SUBMIT, DynamicFormComponent, FieldInputComponent, FormModalComponent, InputBarcodeComponent, InputCheckboxComponent, InputColorComponent, InputComponent, InputDateComponent, InputDatetimeComponent, InputEmailComponent, InputFileComponent, InputNumberComponent, InputPasswordComponent, InputPhotoComponent, InputPhotoGalleryComponent, InputRangeSliderComponent, InputSelectComponent, InputSlugComponent, InputTextComponent, InputTextareaComponent, MaroFormsApiService, UI_FORM_INPUT_REGISTRY, UiFormContext, UiFormLookupService, flattenDynamicFormFields, isDynamicFormContainerField, isDynamicFormTemplateField };
+export { ACTION_API, ACTION_FORM, ACTION_PRINT, ACTION_SUBMIT, DynamicFormComponent, FieldFrameComponent, FieldInputComponent, FormModalComponent, InputBarcodeComponent, InputBarcodeControlComponent, InputBaseControlComponent, InputCheckboxComponent, InputCheckboxControlComponent, InputColorComponent, InputColorControlComponent, InputComponent, InputDateComponent, InputDateControlComponent, InputDatetimeComponent, InputDatetimeControlComponent, InputEmailComponent, InputEmailControlComponent, InputFileComponent, InputFileControlComponent, InputNumberComponent, InputNumberControlComponent, InputPasswordComponent, InputPasswordControlComponent, InputPhotoComponent, InputPhotoControlComponent, InputPhotoGalleryComponent, InputRangeSliderComponent, InputSelectComponent, InputSelectControlComponent, InputSlugComponent, InputSlugControlComponent, InputTextComponent, InputTextControlComponent, InputTextareaComponent, InputTextareaControlComponent, MaroFormsApiService, UI_FORM_INPUT_REGISTRY, UiFormContext, UiFormLookupService, flattenDynamicFormFields, isDynamicFormContainerField, isDynamicFormLookupField, isDynamicFormTemplateField };
 //# sourceMappingURL=maro-tech-form.mjs.map