@maro-tech/form 0.0.7 → 0.0.9

package/fesm2022/maro-tech-form.mjs

@@ -8,7 +8,7 @@ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, debounceTime, distinctUntilChanged, forkJoin, Observable, from, switchMap, of } from 'rxjs';
 import { BrowserMultiFormatOneDReader } from '@zxing/browser';
 import { DecodeHintType, BarcodeFormat } from '@zxing/library';
-import { UiButtonComponent } from '@maro-tech/ui';
+import { UiButtonComponent } from '@maro-tech/core';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1 from 'lucide-angular';
 import { X, ChevronDown, Check, LucideAngularModule } from 'lucide-angular';
@@ -35,10 +35,10 @@ class UiFormContext {
         this.errors.set({});
         this.loading.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormContext, decorators: [{
             type: Injectable
         }] });
 
@@ -48,10 +48,10 @@ class MaroFormsApiService {
         const suffix = query ? `?q=${encodeURIComponent(query)}` : '';
         return this.http.get(`/api/suggest/${encodeURIComponent(name)}${suffix}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MaroFormsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MaroFormsApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MaroFormsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MaroFormsApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MaroFormsApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MaroFormsApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -72,10 +72,10 @@ class UiFormLookupService {
             : `/api${path}`;
         return this.http.get(requestUrl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormLookupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormLookupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormLookupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormLookupService, decorators: [{
             type: Injectable
         }] });
 
@@ -365,8 +365,8 @@ class UiBarcodeScannerInputComponent {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiBarcodeScannerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiBarcodeScannerInputComponent, isStandalone: true, selector: "forms-barcode-scanner-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, openCameraLabel: { classPropertyName: "openCameraLabel", publicName: "openCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCameraLabel: { classPropertyName: "closeCameraLabel", publicName: "closeCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraTitle: { classPropertyName: "cameraTitle", publicName: "cameraTitle", isSignal: true, isRequired: false, transformFunction: null }, cameraStartingLabel: { classPropertyName: "cameraStartingLabel", publicName: "cameraStartingLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraHint: { classPropertyName: "cameraHint", publicName: "cameraHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiBarcodeScannerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiBarcodeScannerInputComponent, isStandalone: true, selector: "forms-barcode-scanner-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, openCameraLabel: { classPropertyName: "openCameraLabel", publicName: "openCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCameraLabel: { classPropertyName: "closeCameraLabel", publicName: "closeCameraLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraTitle: { classPropertyName: "cameraTitle", publicName: "cameraTitle", isSignal: true, isRequired: false, transformFunction: null }, cameraStartingLabel: { classPropertyName: "cameraStartingLabel", publicName: "cameraStartingLabel", isSignal: true, isRequired: false, transformFunction: null }, cameraHint: { classPropertyName: "cameraHint", publicName: "cameraHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", scanned: "scanned", searchRequested: "searchRequested", cameraStateChange: "cameraStateChange" }, viewQueries: [{ propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="space-y-2">
       @if (label()) {
         <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
@@ -460,7 +460,7 @@ class UiBarcodeScannerInputComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiBarcodeScannerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiBarcodeScannerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'forms-barcode-scanner-input',
@@ -907,16 +907,16 @@ class UiSelectComponent {
     loadSuggestItem(name, key) {
         return this.http.get(`/api/suggest/${encodeURIComponent(name)}/${encodeURIComponent(key)}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiSelectComponent, isStandalone: true, selector: "forms-select", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", fullWidth: "fullWidth", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", remoteSearch: "remoteSearch", searchPlaceholder: "searchPlaceholder", options: "options", error: "error", hint: "hint", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiSelectComponent, isStandalone: true, selector: "forms-select", inputs: { label: "label", placeholder: "placeholder", name: "name", data: "data", required: "required", fullWidth: "fullWidth", disabled: "disabled", multiple: ["multiple", "multiple", booleanAttribute], includeBlankOption: "includeBlankOption", blankOptionLabel: "blankOptionLabel", emptyStateLabel: "emptyStateLabel", searchable: "searchable", remoteSearch: "remoteSearch", searchPlaceholder: "searchPlaceholder", options: "options", error: "error", hint: "hint", triggerClass: "triggerClass", panelClass: "panelClass" }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiSelectComponent),
                 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 w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 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      <!-- 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 items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\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=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 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        @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\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 });
+        ], 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 w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 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      <!-- 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 items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\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=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 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        @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\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-select', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -924,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             useExisting: forwardRef(() => UiSelectComponent),
                             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 w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 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      <!-- 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 items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\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=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 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        @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\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" }]
+                    ], 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 w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 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      <!-- 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 items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\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=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 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        @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\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1022,8 +1022,8 @@ class UiDateInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDateInputComponent, isStandalone: true, selector: "forms-date-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiDateInputComponent, isStandalone: true, selector: "forms-date-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiDateInputComponent),
@@ -1031,7 +1031,7 @@ class UiDateInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-date-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1119,8 +1119,8 @@ class UiDatetimeInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDatetimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDatetimeInputComponent, isStandalone: true, selector: "forms-datetime-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDatetimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiDatetimeInputComponent, isStandalone: true, selector: "forms-datetime-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiDatetimeInputComponent),
@@ -1128,7 +1128,7 @@ class UiDatetimeInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDatetimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDatetimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-datetime-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1216,8 +1216,8 @@ class UiEmailInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiEmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiEmailInputComponent, isStandalone: true, selector: "forms-email-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiEmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiEmailInputComponent, isStandalone: true, selector: "forms-email-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiEmailInputComponent),
@@ -1225,7 +1225,7 @@ class UiEmailInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiEmailInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiEmailInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-email-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1313,8 +1313,8 @@ class UiNumberInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiNumberInputComponent, isStandalone: true, selector: "forms-number-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiNumberInputComponent, isStandalone: true, selector: "forms-number-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiNumberInputComponent),
@@ -1322,7 +1322,7 @@ class UiNumberInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-number-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1412,8 +1412,8 @@ class UiPasswordInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPasswordInputComponent, isStandalone: true, selector: "forms-password-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiPasswordInputComponent, isStandalone: true, selector: "forms-password-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiPasswordInputComponent),
@@ -1421,7 +1421,7 @@ class UiPasswordInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-password-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1509,8 +1509,8 @@ class UiTextInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiTextInputComponent, isStandalone: true, selector: "forms-text-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTextInputComponent, isStandalone: true, selector: "forms-text-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiTextInputComponent),
@@ -1518,7 +1518,7 @@ class UiTextInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-text-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1606,8 +1606,8 @@ class UiTextareaInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiTextareaInputComponent, isStandalone: true, selector: "forms-textarea-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTextareaInputComponent, isStandalone: true, selector: "forms-textarea-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiTextareaInputComponent),
@@ -1615,7 +1615,7 @@ class UiTextareaInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiTextareaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTextareaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-textarea-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1715,10 +1715,10 @@ class UiFormInputHostComponent {
         instance.writeValue?.(this.value);
         instance.setDisabledState?.(this.disabled || !!field.disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiFormInputHostComponent, isStandalone: true, selector: "forms-form-input-host", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions", options: "options" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormInputHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: UiFormInputHostComponent, isStandalone: true, selector: "forms-form-input-host", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions", options: "options" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFormInputHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'forms-form-input-host',
@@ -1771,10 +1771,10 @@ class UiFileInputComponent {
         this.valueChange.emit(value);
         this.filesChange.emit(files);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiFileInputComponent, isStandalone: true, selector: "forms-file-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange" }, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiFileInputComponent, isStandalone: true, selector: "forms-file-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange", filesChange: "filesChange" }, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiFileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-file-input', standalone: true, imports: [CommonModule], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <input\n    type=\"file\"\n    class=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm normal-case tracking-normal text-slate-800 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white\"\n    [attr.accept]=\"accept ?? null\"\n    [attr.multiple]=\"multiple ? '' : null\"\n    [disabled]=\"disabled\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (selectedFiles.length) {\n    <div class=\"flex flex-col gap-1 text-[0.7rem] font-normal normal-case tracking-normal text-slate-700\">\n      @for (file of selectedFiles; track file.name + file.size; let i = $index) {\n        <div class=\"flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2 py-1\">\n          <span class=\"truncate pr-2\">{{ file.name }}</span>\n          <button type=\"button\" class=\"text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
         }], propDecorators: { label: [{
@@ -1917,10 +1917,10 @@ class UiPhotoInputComponent {
         const normalized = value.toLowerCase();
         return normalized.startsWith('image/') || normalized === 'application/pdf';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPhotoInputComponent, isStandalone: true, selector: "forms-photo-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled", value: "value", uploadPhoto: "uploadPhoto" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", uploadingChange: "uploadingChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPhotoInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiPhotoInputComponent, isStandalone: true, selector: "forms-photo-input", inputs: { label: "label", hint: "hint", accept: "accept", multiple: "multiple", limit: "limit", disabled: "disabled", value: "value", uploadPhoto: "uploadPhoto" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", uploadingChange: "uploadingChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPhotoInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-photo-input', standalone: true, imports: [CommonModule, DragDropModule], template: "<label class=\"flex flex-col gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-600\">\n  @if (label) { <span>{{ label }}</span> }\n  <button type=\"button\" class=\"flex min-h-24 items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.15em] text-slate-600 transition hover:bg-slate-100 disabled:opacity-60\" [disabled]=\"disabled || !canSelectMore\" (click)=\"photoInput.click()\">\n    {{ previews.length ? '\u0414\u043E\u0434\u0430\u0442\u0438 \u0449\u0435 \u0444\u0430\u0439\u043B' : '\u041E\u0431\u0440\u0430\u0442\u0438 \u0444\u0430\u0439\u043B' }}\n  </button>\n  <input #photoInput type=\"file\" class=\"hidden\" [attr.accept]=\"accept\" [attr.multiple]=\"multiple && canSelectMore ? '' : null\" [disabled]=\"disabled\" (change)=\"onFilesSelected($event)\" />\n  @if (hint) { <span class=\"text-[0.7rem] font-normal normal-case tracking-normal text-slate-500\">{{ hint }}</span> }\n  @if (previews.length) {\n    <div class=\"grid grid-cols-2 gap-2 md:grid-cols-4\" cdkDropList cdkDropListOrientation=\"mixed\" [cdkDropListData]=\"previews\" (cdkDropListDropped)=\"drop($event)\">\n      @for (preview of previews; track preview.url; let i = $index) {\n        <div class=\"relative overflow-hidden rounded-lg border border-slate-200 bg-slate-50\" cdkDrag [cdkDragDisabled]=\"disabled || preview.source === 'file'\">\n          @if (preview.isImage) { <img [src]=\"preview.url\" [alt]=\"preview.name\" class=\"h-28 w-full object-cover\" /> }\n          @else { <div class=\"flex h-28 items-center justify-center px-2 text-center text-[0.65rem] text-slate-600\">{{ preview.name }}</div> }\n          <div class=\"absolute left-1 top-1 rounded bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</div>\n          <button type=\"button\" class=\"absolute right-1 top-1 rounded bg-white/95 px-2 py-1 text-[10px] text-rose-600\" [disabled]=\"disabled\" (click)=\"remove(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        </div>\n      }\n    </div>\n  }\n</label>\n" }]
         }], propDecorators: { label: [{
@@ -1955,10 +1955,10 @@ class UiCheckboxInputComponent {
     onValueChange(event) {
         this.valueChange.emit(event.target.checked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiCheckboxInputComponent, isStandalone: true, selector: "forms-checkbox-input", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: UiCheckboxInputComponent, isStandalone: true, selector: "forms-checkbox-input", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCheckboxInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-checkbox-input', standalone: true, imports: [CommonModule], template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n" }]
         }], propDecorators: { label: [{
@@ -2027,8 +2027,8 @@ class UiColorInputComponent {
     isColorValue(value) {
         return /^#([0-9a-fA-F]{6})$/.test(value.trim());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiColorInputComponent, isStandalone: true, selector: "forms-color-input", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", fullWidth: "fullWidth", error: "error" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiColorInputComponent, isStandalone: true, selector: "forms-color-input", inputs: { label: "label", hint: "hint", name: "name", id: "id", required: "required", fullWidth: "fullWidth", error: "error" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiColorInputComponent),
@@ -2036,7 +2036,7 @@ class UiColorInputComponent {
             },
         ], 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-sky-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onHexInput($event.target.value)\"\n      (blur)=\"markTouched()\"\n    />\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiColorInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-color-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2109,8 +2109,8 @@ class UiSlugInputComponent {
             .replace(/\s+/g, '_')
             .replace(/[^a-z0-9_]/g, '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSlugInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiSlugInputComponent, isStandalone: true, selector: "forms-slug-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiSlugInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiSlugInputComponent, isStandalone: true, selector: "forms-slug-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", error: "error" }, outputs: { invalidInput: "invalidInput" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiSlugInputComponent),
@@ -2118,7 +2118,7 @@ class UiSlugInputComponent {
             },
         ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    class=\"rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n    [attr.id]=\"controlId\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target))\"\n    (blur)=\"onTouched()\"\n  />\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSlugInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiSlugInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-slug-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2572,10 +2572,10 @@ class UiDynamicFormComponent {
     getLeafFields() {
         return this.getFlatFields().filter((field) => field.type !== 'container' && field.type !== 'template');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiDynamicFormComponent, isStandalone: true, selector: "forms-dynamic-form", inputs: { fields: "fields", value: "value", errors: "errors", submitLabel: "submitLabel", showSubmit: "showSubmit", disabled: "disabled", uploadPhoto: "uploadPhoto" }, outputs: { valueChange: "valueChange", lookupCompleted: "lookupCompleted", submitted: "submitted", filesChange: "filesChange", uploadingChange: "uploadingChange", fieldActionTriggered: "fieldActionTriggered" }, providers: [UiFormContext, UiFormLookupService], usesOnChanges: true, ngImport: i0, template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          @if (isBarcodeField(field)) {\n            <forms-barcode-scanner-input\n              [label]=\"field.label || '\u0428\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [placeholder]=\"field.placeholder || '\u0412\u0456\u0434\u0441\u043A\u0430\u043D\u0443\u0439\u0442\u0435 \u0430\u0431\u043E \u0432\u0432\u0435\u0434\u0456\u0442\u044C \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [hint]=\"field.hint || '\u0421\u043A\u0430\u043D\u0435\u0440 \u043C\u043E\u0436\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0432\u0432\u0435\u0441\u0442\u0438 \u043A\u043E\u0434 \u0456 \u043D\u0430\u0442\u0438\u0441\u043D\u0443\u0442\u0438 Enter.'\"\n              [disabled]=\"isFieldDisabled(field) || isLookupLoading(field.id)\"\n              [autoOpen]=\"field.autoOpen !== false\"\n              [value]=\"getStringValue(field.id)\"\n              [searchButtonLabel]=\"field.searchButtonLabel || '\u0417\u043D\u0430\u0439\u0442\u0438'\"\n              [openCameraLabel]=\"field.openCameraLabel || '\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [closeCameraLabel]=\"field.closeCameraLabel || '\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [cameraTitle]=\"field.cameraTitle || '\u041A\u0430\u043C\u0435\u0440\u0430'\"\n              [cameraStartingLabel]=\"field.cameraStartingLabel || '\u0417\u0430\u043F\u0443\u0441\u043A\u0430\u0454\u043C\u043E \u043A\u0430\u043C\u0435\u0440\u0443\u2026'\"\n              [cameraHint]=\"field.cameraHint || '\u041D\u0430\u0432\u0435\u0434\u0456\u0442\u044C \u043A\u0430\u043C\u0435\u0440\u0443 \u043D\u0430 \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434. \u041F\u0456\u0441\u043B\u044F \u0437\u0447\u0438\u0442\u0443\u0432\u0430\u043D\u043D\u044F \u043A\u043E\u0434 \u043F\u0456\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044C\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u043D\u043E.'\"\n              (valueChange)=\"onBarcodeValueChange(field, $event)\"\n              (searchRequested)=\"runBarcodeLookup(field)\"\n              (scanned)=\"onBarcodeScanned(field, $event)\"\n            ></forms-barcode-scanner-input>\n            @if (getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (isInputField(field)) {\n            <forms-form-input-host\n              [field]=\"field\"\n              [value]=\"modelSignal()[field.id]\"\n              [disabled]=\"disabled\"\n              [error]=\"errors[field.id] ?? ''\"\n              [actions]=\"resolveFieldActions(field)\"\n              (valueChange)=\"updateField(field.id, $any($event))\"\n              (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            ></forms-form-input-host>\n          }\n\n          @if (field.type === 'select') {\n            <forms-select\n              [name]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [data]=\"field.data\"\n              [required]=\"!!field.required\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [options]=\"resolveSelectOptions(field)\"\n              [searchable]=\"(field.searchable ?? !!field.data) || !!field.optionsSource\"\n              [remoteSearch]=\"!!field.optionsSource\"\n              (searchChange)=\"field.optionsSource ? onSelectSearchChange(field, $event) : null\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"onSelectValueChange(field, $event)\">\n            </forms-select>\n            @if (field.lookupApi && getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (field.type === 'checkbox') {\n            <forms-checkbox-input\n              [label]=\"field.label\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"!!modelSignal()[field.id]\"\n              (valueChange)=\"updateField(field.id, $event)\"\n            ></forms-checkbox-input>\n          }\n\n          @if (field.type === 'color') {\n            <forms-color-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-color-input>\n          }\n\n          @if (field.type === 'slug') {\n            <forms-slug-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [readonly]=\"!!field.readonly\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-slug-input>\n          }\n\n          @if (field.type === 'photo') {\n            <forms-photo-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept ?? 'image/*'\"\n              [multiple]=\"!!field.multiple\"\n              [limit]=\"field.limit ?? 0\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              [uploadPhoto]=\"uploadPhoto\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n              (uploadingChange)=\"uploadingChange.emit($event)\"\n            ></forms-photo-input>\n          }\n          @if (field.type === 'file') {\n            <forms-file-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            ></forms-file-input>\n          }\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiFormInputHostComponent, selector: "forms-form-input-host", inputs: ["field", "value", "error", "disabled", "actions", "options"], outputs: ["valueChange", "actionTriggered"] }, { kind: "component", type: UiFileInputComponent, selector: "forms-file-input", inputs: ["label", "hint", "accept", "multiple", "disabled", "value"], outputs: ["valueChange", "filesChange"] }, { kind: "component", type: UiPhotoInputComponent, selector: "forms-photo-input", inputs: ["label", "hint", "accept", "multiple", "limit", "disabled", "value", "uploadPhoto"], outputs: ["valueChange", "filesChange", "uploadingChange"] }, { kind: "component", type: UiCheckboxInputComponent, selector: "forms-checkbox-input", inputs: ["label", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: UiColorInputComponent, selector: "forms-color-input", inputs: ["label", "hint", "name", "id", "required", "fullWidth", "error"] }, { kind: "component", type: UiSlugInputComponent, selector: "forms-slug-input", inputs: ["label", "hint", "placeholder", "name", "id", "required", "fullWidth", "autocomplete", "readonly", "error"], outputs: ["invalidInput"] }, { kind: "component", type: UiBarcodeScannerInputComponent, selector: "forms-barcode-scanner-input", inputs: ["value", "label", "placeholder", "hint", "disabled", "autoOpen", "searchButtonLabel", "openCameraLabel", "closeCameraLabel", "cameraTitle", "cameraStartingLabel", "cameraHint"], outputs: ["valueChange", "scanned", "searchRequested", "cameraStateChange"] }, { kind: "component", type: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiDynamicFormComponent, isStandalone: true, selector: "forms-dynamic-form", inputs: { fields: "fields", value: "value", errors: "errors", submitLabel: "submitLabel", showSubmit: "showSubmit", disabled: "disabled", uploadPhoto: "uploadPhoto" }, outputs: { valueChange: "valueChange", lookupCompleted: "lookupCompleted", submitted: "submitted", filesChange: "filesChange", uploadingChange: "uploadingChange", fieldActionTriggered: "fieldActionTriggered" }, providers: [UiFormContext, UiFormLookupService], usesOnChanges: true, ngImport: i0, template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          @if (isBarcodeField(field)) {\n            <forms-barcode-scanner-input\n              [label]=\"field.label || '\u0428\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [placeholder]=\"field.placeholder || '\u0412\u0456\u0434\u0441\u043A\u0430\u043D\u0443\u0439\u0442\u0435 \u0430\u0431\u043E \u0432\u0432\u0435\u0434\u0456\u0442\u044C \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [hint]=\"field.hint || '\u0421\u043A\u0430\u043D\u0435\u0440 \u043C\u043E\u0436\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0432\u0432\u0435\u0441\u0442\u0438 \u043A\u043E\u0434 \u0456 \u043D\u0430\u0442\u0438\u0441\u043D\u0443\u0442\u0438 Enter.'\"\n              [disabled]=\"isFieldDisabled(field) || isLookupLoading(field.id)\"\n              [autoOpen]=\"field.autoOpen !== false\"\n              [value]=\"getStringValue(field.id)\"\n              [searchButtonLabel]=\"field.searchButtonLabel || '\u0417\u043D\u0430\u0439\u0442\u0438'\"\n              [openCameraLabel]=\"field.openCameraLabel || '\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [closeCameraLabel]=\"field.closeCameraLabel || '\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [cameraTitle]=\"field.cameraTitle || '\u041A\u0430\u043C\u0435\u0440\u0430'\"\n              [cameraStartingLabel]=\"field.cameraStartingLabel || '\u0417\u0430\u043F\u0443\u0441\u043A\u0430\u0454\u043C\u043E \u043A\u0430\u043C\u0435\u0440\u0443\u2026'\"\n              [cameraHint]=\"field.cameraHint || '\u041D\u0430\u0432\u0435\u0434\u0456\u0442\u044C \u043A\u0430\u043C\u0435\u0440\u0443 \u043D\u0430 \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434. \u041F\u0456\u0441\u043B\u044F \u0437\u0447\u0438\u0442\u0443\u0432\u0430\u043D\u043D\u044F \u043A\u043E\u0434 \u043F\u0456\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044C\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u043D\u043E.'\"\n              (valueChange)=\"onBarcodeValueChange(field, $event)\"\n              (searchRequested)=\"runBarcodeLookup(field)\"\n              (scanned)=\"onBarcodeScanned(field, $event)\"\n            ></forms-barcode-scanner-input>\n            @if (getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (isInputField(field)) {\n            <forms-form-input-host\n              [field]=\"field\"\n              [value]=\"modelSignal()[field.id]\"\n              [disabled]=\"disabled\"\n              [error]=\"errors[field.id] ?? ''\"\n              [actions]=\"resolveFieldActions(field)\"\n              (valueChange)=\"updateField(field.id, $any($event))\"\n              (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            ></forms-form-input-host>\n          }\n\n          @if (field.type === 'select') {\n            <forms-select\n              [name]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [data]=\"field.data\"\n              [required]=\"!!field.required\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [options]=\"resolveSelectOptions(field)\"\n              [searchable]=\"(field.searchable ?? !!field.data) || !!field.optionsSource\"\n              [remoteSearch]=\"!!field.optionsSource\"\n              (searchChange)=\"field.optionsSource ? onSelectSearchChange(field, $event) : null\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"onSelectValueChange(field, $event)\">\n            </forms-select>\n            @if (field.lookupApi && getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (field.type === 'checkbox') {\n            <forms-checkbox-input\n              [label]=\"field.label\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"!!modelSignal()[field.id]\"\n              (valueChange)=\"updateField(field.id, $event)\"\n            ></forms-checkbox-input>\n          }\n\n          @if (field.type === 'color') {\n            <forms-color-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-color-input>\n          }\n\n          @if (field.type === 'slug') {\n            <forms-slug-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [readonly]=\"!!field.readonly\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-slug-input>\n          }\n\n          @if (field.type === 'photo') {\n            <forms-photo-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept ?? 'image/*'\"\n              [multiple]=\"!!field.multiple\"\n              [limit]=\"field.limit ?? 0\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              [uploadPhoto]=\"uploadPhoto\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n              (uploadingChange)=\"uploadingChange.emit($event)\"\n            ></forms-photo-input>\n          }\n          @if (field.type === 'file') {\n            <forms-file-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            ></forms-file-input>\n          }\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiFormInputHostComponent, selector: "forms-form-input-host", inputs: ["field", "value", "error", "disabled", "actions", "options"], outputs: ["valueChange", "actionTriggered"] }, { kind: "component", type: UiFileInputComponent, selector: "forms-file-input", inputs: ["label", "hint", "accept", "multiple", "disabled", "value"], outputs: ["valueChange", "filesChange"] }, { kind: "component", type: UiPhotoInputComponent, selector: "forms-photo-input", inputs: ["label", "hint", "accept", "multiple", "limit", "disabled", "value", "uploadPhoto"], outputs: ["valueChange", "filesChange", "uploadingChange"] }, { kind: "component", type: UiCheckboxInputComponent, selector: "forms-checkbox-input", inputs: ["label", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: UiColorInputComponent, selector: "forms-color-input", inputs: ["label", "hint", "name", "id", "required", "fullWidth", "error"] }, { kind: "component", type: UiSlugInputComponent, selector: "forms-slug-input", inputs: ["label", "hint", "placeholder", "name", "id", "required", "fullWidth", "autocomplete", "readonly", "error"], outputs: ["invalidInput"] }, { kind: "component", type: UiBarcodeScannerInputComponent, selector: "forms-barcode-scanner-input", inputs: ["value", "label", "placeholder", "hint", "disabled", "autoOpen", "searchButtonLabel", "openCameraLabel", "closeCameraLabel", "cameraTitle", "cameraStartingLabel", "cameraHint"], outputs: ["valueChange", "scanned", "searchRequested", "cameraStateChange"] }, { kind: "component", type: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiDynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-dynamic-form', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, UiFormInputHostComponent, UiFileInputComponent, UiPhotoInputComponent, UiCheckboxInputComponent, UiColorInputComponent, UiSlugInputComponent, UiBarcodeScannerInputComponent, UiSelectComponent], providers: [UiFormContext, UiFormLookupService], template: "<form class=\"grid grid-cols-1 gap-4 md:grid-cols-12\" (ngSubmit)=\"submitForm()\" #dynamicForm=\"ngForm\">\n  <ng-template #renderField let-field>\n    @if (isFieldVisible(field)) {\n      @if (isContainerField(field)) {\n        @if (getContainerTag(field) === 'aside') {\n          <aside [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <p class=\"text-xs font-semibold uppercase tracking-[0.22em] text-slate-500\">\n                      {{ field.label || field.title }}\n                    </p>\n                  }\n                  @if (field.hint) {\n                    <h3 class=\"mt-1 text-lg font-semibold text-slate-900\">{{ field.hint }}</h3>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </aside>\n        } @else if (getContainerTag(field) === 'fieldset') {\n          <fieldset [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <legend class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</legend>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </fieldset>\n        } @else {\n          <section [ngClass]=\"getContainerClass(field)\">\n            @if (field.label || field.title || getActions(field).length || field.hint) {\n              <header class=\"flex flex-col gap-3 border-b border-slate-100 pb-3 md:flex-row md:items-center md:justify-between\">\n                <div class=\"min-w-0\">\n                  @if (field.label || field.title) {\n                    <h3 class=\"text-lg font-semibold text-slate-900\">{{ field.label || field.title }}</h3>\n                  }\n                  @if (field.hint) {\n                    <p class=\"mt-1 text-sm text-slate-500\">{{ field.hint }}</p>\n                  }\n                </div>\n\n                @if (getActions(field).length) {\n                  <div class=\"flex flex-wrap gap-2 md:justify-end\">\n                    @for (action of getActions(field); track action.id; let i = $index) {\n                      <ui-button\n                        [variant]=\"action.variant || (i === 0 ? 'primary' : 'ghost')\"\n                        [icon]=\"action.icon || ''\"\n                        size=\"sm\"\n                        (click)=\"onFieldActionTriggered(field.id, action)\"\n                      >\n                        {{ action.label }}\n                      </ui-button>\n                    }\n                  </div>\n                }\n              </header>\n            }\n\n            <div [ngClass]=\"getContainerContentClass(field)\">\n              @for (child of field.fields; track child.id) {\n                <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: child }\"></ng-container>\n              }\n            </div>\n          </section>\n        }\n      } @else if (isTemplateField(field)) {\n        <div [ngClass]=\"resolveClassName(field.className)\" [innerHTML]=\"renderTemplate(field)\"></div>\n      } @else {\n        <div [ngClass]=\"getFieldClass(field)\">\n          @if (isBarcodeField(field)) {\n            <forms-barcode-scanner-input\n              [label]=\"field.label || '\u0428\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [placeholder]=\"field.placeholder || '\u0412\u0456\u0434\u0441\u043A\u0430\u043D\u0443\u0439\u0442\u0435 \u0430\u0431\u043E \u0432\u0432\u0435\u0434\u0456\u0442\u044C \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434'\"\n              [hint]=\"field.hint || '\u0421\u043A\u0430\u043D\u0435\u0440 \u043C\u043E\u0436\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0432\u0432\u0435\u0441\u0442\u0438 \u043A\u043E\u0434 \u0456 \u043D\u0430\u0442\u0438\u0441\u043D\u0443\u0442\u0438 Enter.'\"\n              [disabled]=\"isFieldDisabled(field) || isLookupLoading(field.id)\"\n              [autoOpen]=\"field.autoOpen !== false\"\n              [value]=\"getStringValue(field.id)\"\n              [searchButtonLabel]=\"field.searchButtonLabel || '\u0417\u043D\u0430\u0439\u0442\u0438'\"\n              [openCameraLabel]=\"field.openCameraLabel || '\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [closeCameraLabel]=\"field.closeCameraLabel || '\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043A\u0430\u043C\u0435\u0440\u0443'\"\n              [cameraTitle]=\"field.cameraTitle || '\u041A\u0430\u043C\u0435\u0440\u0430'\"\n              [cameraStartingLabel]=\"field.cameraStartingLabel || '\u0417\u0430\u043F\u0443\u0441\u043A\u0430\u0454\u043C\u043E \u043A\u0430\u043C\u0435\u0440\u0443\u2026'\"\n              [cameraHint]=\"field.cameraHint || '\u041D\u0430\u0432\u0435\u0434\u0456\u0442\u044C \u043A\u0430\u043C\u0435\u0440\u0443 \u043D\u0430 \u0448\u0442\u0440\u0438\u0445\u043A\u043E\u0434. \u041F\u0456\u0441\u043B\u044F \u0437\u0447\u0438\u0442\u0443\u0432\u0430\u043D\u043D\u044F \u043A\u043E\u0434 \u043F\u0456\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044C\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u043D\u043E.'\"\n              (valueChange)=\"onBarcodeValueChange(field, $event)\"\n              (searchRequested)=\"runBarcodeLookup(field)\"\n              (scanned)=\"onBarcodeScanned(field, $event)\"\n            ></forms-barcode-scanner-input>\n            @if (getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (isInputField(field)) {\n            <forms-form-input-host\n              [field]=\"field\"\n              [value]=\"modelSignal()[field.id]\"\n              [disabled]=\"disabled\"\n              [error]=\"errors[field.id] ?? ''\"\n              [actions]=\"resolveFieldActions(field)\"\n              (valueChange)=\"updateField(field.id, $any($event))\"\n              (actionTriggered)=\"onFieldActionTriggered(field.id, $event)\"\n            ></forms-form-input-host>\n          }\n\n          @if (field.type === 'select') {\n            <forms-select\n              [name]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [data]=\"field.data\"\n              [required]=\"!!field.required\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [options]=\"resolveSelectOptions(field)\"\n              [searchable]=\"(field.searchable ?? !!field.data) || !!field.optionsSource\"\n              [remoteSearch]=\"!!field.optionsSource\"\n              (searchChange)=\"field.optionsSource ? onSelectSearchChange(field, $event) : null\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"onSelectValueChange(field, $event)\">\n            </forms-select>\n            @if (field.lookupApi && getLookupError(field.id)) {\n              <div class=\"mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700\">\n                {{ getLookupError(field.id) }}\n              </div>\n            }\n          }\n\n          @if (field.type === 'checkbox') {\n            <forms-checkbox-input\n              [label]=\"field.label\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"!!modelSignal()[field.id]\"\n              (valueChange)=\"updateField(field.id, $event)\"\n            ></forms-checkbox-input>\n          }\n\n          @if (field.type === 'color') {\n            <forms-color-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-color-input>\n          }\n\n          @if (field.type === 'slug') {\n            <forms-slug-input\n              [name]=\"field.id\"\n              [id]=\"field.id\"\n              [label]=\"field.label\"\n              [placeholder]=\"field.placeholder\"\n              [hint]=\"field.hint\"\n              [required]=\"!!field.required\"\n              [readonly]=\"!!field.readonly\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [fullWidth]=\"field.fullWidth !== false\"\n              [error]=\"errors[field.id] ?? ''\"\n              [ngModel]=\"modelSignal()[field.id]\"\n              (ngModelChange)=\"updateField(field.id, $event)\"\n            ></forms-slug-input>\n          }\n\n          @if (field.type === 'photo') {\n            <forms-photo-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept ?? 'image/*'\"\n              [multiple]=\"!!field.multiple\"\n              [limit]=\"field.limit ?? 0\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              [uploadPhoto]=\"uploadPhoto\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n              (uploadingChange)=\"uploadingChange.emit($event)\"\n            ></forms-photo-input>\n          }\n          @if (field.type === 'file') {\n            <forms-file-input\n              [label]=\"field.label\"\n              [hint]=\"field.hint\"\n              [accept]=\"field.accept\"\n              [multiple]=\"!!field.multiple\"\n              [disabled]=\"isFieldDisabled(field)\"\n              [value]=\"$any(modelSignal()[field.id])\"\n              (valueChange)=\"updateField(field.id, $event)\"\n              (filesChange)=\"filesChange.emit({ fieldId: field.id, files: $event })\"\n            ></forms-file-input>\n          }\n        </div>\n      }\n    }\n  </ng-template>\n\n  @for (field of fields; track field.id) {\n    <ng-container *ngTemplateOutlet=\"renderField; context: { $implicit: field }\"></ng-container>\n  }\n\n  @if (showSubmit) {\n    <div class=\"flex justify-end md:col-span-12\">\n      <button\n        type=\"submit\"\n        class=\"inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50\"\n        [disabled]=\"disabled || !dynamicForm.form.valid\"\n      >\n        {{ submitLabel }}\n      </button>\n    </div>\n  }\n</form>\n" }]
         }], propDecorators: { fields: [{
@@ -2730,10 +2730,10 @@ class UiActionFormModalComponent {
         if (target && !target.includes(':'))
             void this.router.navigateByUrl(target.startsWith('/') ? target : `/${target}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/40 p-4 sm:items-center sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-2 flex min-h-0 max-h-[calc(100vh-1rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:my-0 sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled", "uploadPhoto"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiActionFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/40 p-4 sm:items-center sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-2 flex min-h-0 max-h-[calc(100vh-1rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:my-0 sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled", "uploadPhoto"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiActionFormModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/40 p-4 sm:items-center sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"my-2 flex min-h-0 max-h-[calc(100vh-1rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:my-0 sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</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 }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], uploadPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhoto", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
@@ -2787,8 +2787,8 @@ class UiInputComponent {
     triggerAction(action) {
         this.actionTriggered.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiInputComponent, isStandalone: true, selector: "forms-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiInputComponent, isStandalone: true, selector: "forms-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", name: "name", id: "id", type: "type", element: "element", rows: "rows", required: "required", fullWidth: "fullWidth", autocomplete: "autocomplete", readonly: "readonly", pattern: "pattern", error: "error", actions: "actions" }, outputs: { actionTriggered: "actionTriggered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UiInputComponent),
@@ -2796,7 +2796,7 @@ class UiInputComponent {
             },
         ], 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-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        ></textarea>\n      } @else {\n        <input\n          [attr.type]=\"type\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.autocomplete]=\"autocomplete\"\n          [attr.pattern]=\"pattern\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-900 placeholder:text-slate-400 transition focus:border-sky-400 focus:outline-none\"\n          [attr.id]=\"controlId\"\n          [value]=\"value\"\n          (input)=\"onValueChange($any($event.target).value)\"\n          (blur)=\"onTouched()\"\n        />\n      }\n    </div>\n\n    @if (actions.length) {\n      <div class=\"flex flex-none items-center gap-2 pb-0.5\">\n        @for (action of actions; track action.id) {\n          <ui-button\n            type=\"button\"\n            [variant]=\"action.variant ?? 'secondary'\"\n            [icon]=\"action.icon || ''\"\n            size=\"sm\"\n            [disabled]=\"disabled\"\n            (click)=\"triggerAction(action)\"\n          >\n            {{ action.label }}\n          </ui-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hint) {\n    <p class=\"text-[0.5rem] text-slate-500\">{{ hint }}</p>\n  }\n  @if (error) {\n    <p class=\"text-[0.5rem] text-rose-400\">{{ error }}</p>\n  }\n</label>\n\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2976,10 +2976,10 @@ class UiPhotoGalleryFieldComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoGalleryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiPhotoGalleryFieldComponent, isStandalone: true, selector: "forms-photo-gallery-field", inputs: { label: "label", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", uploadPhoto: "uploadPhoto", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPhotoGalleryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiPhotoGalleryFieldComponent, isStandalone: true, selector: "forms-photo-gallery-field", inputs: { label: "label", orderLabel: "orderLabel", imageIds: "imageIds", disabled: "disabled", afterUpload: "afterUpload", uploadPhoto: "uploadPhoto", resolveImageUrl: "resolveImageUrl", notify: "notify" }, outputs: { imageIdsChange: "imageIdsChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiPhotoGalleryFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPhotoGalleryFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-photo-gallery-field', standalone: true, imports: [CommonModule, DragDropModule], template: "<label class=\"flex flex-col gap-1 md:col-span-12\">\n  <span class=\"text-sm\">{{ label }}</span>\n  <div class=\"text-xs text-slate-500\">\u041A\u0456\u043B\u044C\u043A\u0456\u0441\u0442\u044C \u0444\u043E\u0442\u043E: {{ photoCount }}</div>\n</label>\n\n<div class=\"md:col-span-12\">\n  <p class=\"mb-2 text-xs uppercase tracking-[0.2em] text-slate-500\">{{ orderLabel }}</p>\n  <div class=\"grid gap-3 md:grid-cols-4\" cdkDropList [cdkDropListData]=\"entries\" (cdkDropListDropped)=\"onDrop($event)\">\n    @for (entry of entries; let i = $index; track entry.clientKey + '-' + i) {\n      <div class=\"image-drag-item relative overflow-hidden rounded-xl border border-slate-200 bg-white\" cdkDrag [cdkDragDisabled]=\"disabled || (!entry.imageId && !entry.file)\">\n        <label class=\"block h-full w-full cursor-pointer\">\n          @if (entry.preview) {\n            <img [src]=\"entry.preview\" alt=\"photo\" class=\"h-48 w-full object-cover\" />\n          } @else {\n            <button type=\"button\" class=\"flex h-48 w-full items-center justify-center bg-slate-50 text-xs text-slate-500\" (click)=\"openFilePicker(fileInput, $event)\">+ \u0414\u043E\u0434\u0430\u0442\u0438 \u0444\u043E\u0442\u043E</button>\n          }\n          <input #fileInput type=\"file\" class=\"hidden\" [disabled]=\"disabled\" multiple (change)=\"onFilesChange($event, i)\" />\n        </label>\n        @if (entry.imageId || entry.file) {\n          @if (i === 0) {\n            <span class=\"absolute left-2 top-2 rounded-full border border-slate-200 bg-white/95 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-700\">\u041E\u0431\u043A\u043B\u0430\u0434\u0438\u043D\u043A\u0430</span>\n          }\n          <span class=\"absolute left-2 bottom-2 rounded-full bg-slate-900/85 px-2 py-1 text-[10px] font-semibold text-white\">#{{ i + 1 }}</span>\n          <button type=\"button\" class=\"absolute right-2 top-2 rounded-full bg-white/95 px-2 py-1 text-xs text-rose-600 shadow\" [disabled]=\"disabled\" (click)=\"removeAt(i)\">\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438</button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".image-drag-item.cdk-drag-preview{transform:scale(1.03) rotate(.6deg);box-shadow:0 28px 60px #0f172a66;border-radius:.9rem}.image-drag-item.cdk-drag-placeholder{opacity:.4;outline:2px dashed #94a3b8;outline-offset:4px}\n"] }]
         }], propDecorators: { label: [{
@@ -3091,8 +3091,8 @@ class UiRangeSliderComponent {
         input.step = String(this.safeStep);
         input.value = String(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiRangeSliderComponent, isStandalone: true, selector: "forms-range-slider", inputs: { min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: UiRangeSliderComponent, isStandalone: true, selector: "forms-range-slider", inputs: { min: "min", max: "max", step: "step", startValue: "startValue", endValue: "endValue", startLabel: "startLabel", endLabel: "endLabel" }, outputs: { startValueChange: "startValueChange", endValueChange: "endValueChange", interactionEnd: "interactionEnd" }, viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="range-slider">
       <div class="range-slider__track"></div>
       <div
@@ -3127,7 +3127,7 @@ class UiRangeSliderComponent {
     </div>
   `, isInline: true, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiRangeSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'forms-range-slider', standalone: true, imports: [CommonModule], template: `
     <div class="range-slider">