@maro-tech/form 0.0.1

package/fesm2022/maro-tech-form.mjs

@@ -0,0 +1,3191 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, InjectionToken, EventEmitter, Output, Input, Component, input, output, computed, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ViewContainerRef, ViewChild, DestroyRef, ElementRef, booleanAttribute } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { forkJoin, Observable, from, Subject, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { UiBarcodeScannerInputComponent as UiBarcodeScannerInputComponent$1 } from '@forms/inputs/barcode/ui-barcode-scanner-input.component';
+import { UiSelectComponent as UiSelectComponent$1 } from '@forms/inputs/select/ui-select.component';
+import { UiFormInputHostComponent as UiFormInputHostComponent$1 } from '@forms/inputs/form-input-host.component';
+import { UiFileInputComponent as UiFileInputComponent$1 } from '@forms/inputs/file/ui-file-input.component';
+import { UiPhotoInputComponent as UiPhotoInputComponent$1 } from '@forms/inputs/photo/ui-photo-input.component';
+import { UiCheckboxInputComponent as UiCheckboxInputComponent$1 } from '@forms/inputs/checkbox/ui-checkbox-input.component';
+import { UiColorInputComponent as UiColorInputComponent$1 } from '@forms/inputs/color/ui-color-input.component';
+import { UiSlugInputComponent as UiSlugInputComponent$1 } from '@forms/inputs/slug/ui-slug-input.component';
+import { UiFormContext as UiFormContext$1 } from '@forms/context/form-context.service';
+import { MaroFormsApiService as MaroFormsApiService$1 } from '@forms/forms-api.service';
+import { UiButtonComponent } from '@maro-tech/ui';
+import { Router } from '@angular/router';
+import { UiDynamicFormComponent as UiDynamicFormComponent$1 } from '@forms/dynamic/ui-dynamic-form.component';
+import { BrowserMultiFormatOneDReader } from '@zxing/browser';
+import { DecodeHintType, BarcodeFormat } from '@zxing/library';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1$2 from 'lucide-angular';
+import { X, ChevronDown, Check, LucideAngularModule } from 'lucide-angular';
+
+class UiFormContext {
+    value = signal({}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    errors = signal({}, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    setValue(value) {
+        this.value.set({ ...value });
+    }
+    patchValue(value) {
+        this.value.update((current) => ({ ...current, ...value }));
+    }
+    setErrors(errors) {
+        this.errors.set({ ...errors });
+    }
+    reset(value = {}) {
+        this.value.set({ ...value });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormContext, decorators: [{
+            type: Injectable
+        }] });
+
+class MaroFormsApiService {
+    http = inject(HttpClient);
+    getSuggestByName(name, query = '') {
+        const suffix = query ? `?search=${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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MaroFormsApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class UiFormLookupService {
+    http = inject(HttpClient);
+    lookup(field, value) {
+        const api = String(field.lookupApi || '').trim();
+        const endpoint = api
+            .replace(/:value/g, encodeURIComponent(value))
+            .replace(new RegExp(`:${field.id}\\b`, 'g'), encodeURIComponent(value));
+        if (/^https?:\/\//i.test(endpoint)) {
+            return this.http.get(endpoint);
+        }
+        const path = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+        return this.http.get(`/api${path}`);
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormLookupService, decorators: [{
+            type: Injectable
+        }] });
+
+const UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS = new InjectionToken('UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS');
+
+const isDynamicFormContainerField = (field) => field.type === 'container';
+const isDynamicFormTemplateField = (field) => field.type === 'template';
+const flattenDynamicFormFields = (fields) => {
+    const result = [];
+    for (const field of fields || []) {
+        if (!field) {
+            continue;
+        }
+        result.push(field);
+        if (isDynamicFormContainerField(field) && Array.isArray(field.fields) && field.fields.length) {
+            result.push(...flattenDynamicFormFields(field.fields));
+        }
+    }
+    return result;
+};
+
+class UiDynamicFormComponent {
+    formsApi = inject(MaroFormsApiService$1);
+    lookupService = inject(UiFormLookupService);
+    formContext = inject(UiFormContext$1);
+    optionsSourceResolvers = inject(UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS, { optional: true }) ?? [];
+    fields = [];
+    value = {};
+    errors = {};
+    submitLabel = 'Submit';
+    showSubmit = true;
+    disabled = false;
+    uploadPhoto = null;
+    valueChange = new EventEmitter();
+    lookupCompleted = new EventEmitter();
+    submitted = new EventEmitter();
+    filesChange = new EventEmitter();
+    uploadingChange = new EventEmitter();
+    fieldActionTriggered = new EventEmitter();
+    modelSignal = signal({}, ...(ngDevMode ? [{ debugName: "modelSignal" }] : /* istanbul ignore next */ []));
+    dictionaryOptionsSignal = signal({}, ...(ngDevMode ? [{ debugName: "dictionaryOptionsSignal" }] : /* istanbul ignore next */ []));
+    lookupLoadingSignal = signal({}, ...(ngDevMode ? [{ debugName: "lookupLoadingSignal" }] : /* istanbul ignore next */ []));
+    lookupErrorsSignal = signal({}, ...(ngDevMode ? [{ debugName: "lookupErrorsSignal" }] : /* istanbul ignore next */ []));
+    selectSearchChanges = new Map();
+    selectSearchSubscriptions = new Map();
+    optionsSourceRequestVersions = new Map();
+    ngOnInit() {
+        this.ensureOptionsSourceOptionsLoaded(this.modelSignal());
+    }
+    ngOnChanges(changes) {
+        if ('fields' in changes || 'value' in changes) {
+            const next = { ...this.value };
+            for (const field of this.getLeafFields()) {
+                const defaultValue = field.type === 'checkbox' ? false : '';
+                const nextValue = this.value[field.id] !== undefined
+                    ? this.value[field.id]
+                    : field.default !== undefined
+                        ? field.default
+                        : defaultValue;
+                next[field.id] = nextValue;
+            }
+            this.modelSignal.set(next);
+            this.formContext.setValue(next);
+            this.formContext.setErrors(this.errors);
+            this.formContext.disabled.set(this.disabled);
+        }
+        if ('fields' in changes || 'value' in changes) {
+            this.ensureOptionsSourceOptionsLoaded(this.modelSignal());
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupSelectSearchStreams();
+    }
+    updateField(fieldId, nextValue) {
+        this.modelSignal.update((current) => {
+            const updated = { ...current, [fieldId]: nextValue };
+            this.formContext.setValue(updated);
+            this.valueChange.emit(updated);
+            this.ensureOptionsSourceOptionsLoaded(updated);
+            return updated;
+        });
+    }
+    onBarcodeValueChange(field, value) {
+        this.updateField(field.id, value);
+        this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
+    }
+    onBarcodeScanned(field, value) {
+        this.updateField(field.id, value);
+        this.runFieldLookup(field, value);
+    }
+    onSelectValueChange(field, value) {
+        this.updateField(field.id, value);
+        const nextValue = Array.isArray(value) ? '' : String(value || '').trim();
+        if (field.lookupApi) {
+            this.runFieldLookup(field, nextValue);
+            return;
+        }
+        this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
+    }
+    runBarcodeLookup(field) {
+        this.runFieldLookup(field);
+    }
+    runFieldLookup(field, overrideValue) {
+        const api = String(field.lookupApi || '').trim();
+        if (!api)
+            return;
+        const value = String(overrideValue ?? this.getStringValue(field.id)).trim();
+        if (!value) {
+            this.lookupErrorsSignal.update((current) => ({
+                ...current,
+                [field.id]: field.type === 'select' ? 'Вкажіть значення для пошуку' : 'Вкажіть штрихкод для пошуку',
+            }));
+            return;
+        }
+        this.lookupLoadingSignal.update((current) => ({ ...current, [field.id]: true }));
+        this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: '' }));
+        this.lookupService.lookup(field, value).subscribe({
+            next: (response) => {
+                this.applyLookupResponse(field, response || {});
+                this.lookupCompleted.emit({ fieldId: field.id, response: response || {} });
+                this.lookupLoadingSignal.update((current) => ({ ...current, [field.id]: false }));
+            },
+            error: (error) => {
+                const message = error?.error?.message || 'Не вдалося знайти запис';
+                this.lookupErrorsSignal.update((current) => ({ ...current, [field.id]: message }));
+                this.lookupLoadingSignal.update((current) => ({ ...current, [field.id]: false }));
+                const errorField = String(field.lookupErrorField || '').trim();
+                if (errorField) {
+                    this.updateField(errorField, message);
+                }
+            },
+        });
+    }
+    onFieldActionTriggered(fieldId, action) {
+        this.fieldActionTriggered.emit({ fieldId, action });
+    }
+    resolveFieldActions(field) {
+        const model = this.modelSignal();
+        return (field.actions || []).filter((action) => {
+            const condition = String(action.condition || '').trim();
+            if (!condition) {
+                return true;
+            }
+            try {
+                const evaluator = new Function('model', `with (model) { return !!(${condition}); }`);
+                return evaluator(model);
+            }
+            catch {
+                return true;
+            }
+        });
+    }
+    getActions(field) {
+        return this.resolveFieldActions(field);
+    }
+    isFieldDisabled(field) {
+        if (this.disabled)
+            return true;
+        if (typeof field.disabled === 'boolean')
+            return field.disabled;
+        const raw = String(field.disabled || '').trim();
+        if (!raw)
+            return false;
+        const condition = raw.startsWith('${') && raw.endsWith('}') ? raw.slice(2, -1).trim() : raw;
+        try {
+            return Boolean(Function('model', `with (model) { return Boolean(${condition}); }`)(this.modelSignal()));
+        }
+        catch {
+            return false;
+        }
+    }
+    submitForm() {
+        this.submitted.emit(this.modelSignal());
+    }
+    isTextArea(field) {
+        return (field.type ?? 'text') === 'textarea';
+    }
+    isInputField(field) {
+        const type = field.type ?? 'text';
+        return type === 'text' || type === 'number' || type === 'date' || type === 'datetime' || type === 'email' || type === 'password' || type === 'textarea';
+    }
+    isBarcodeField(field) {
+        return field.type === 'barcode';
+    }
+    getStringValue(fieldId) {
+        return String(this.modelSignal()[fieldId] || '');
+    }
+    getLookupError(fieldId) {
+        return this.lookupErrorsSignal()[fieldId] || '';
+    }
+    isLookupLoading(fieldId) {
+        return !!this.lookupLoadingSignal()[fieldId];
+    }
+    resolveClassName(value) {
+        return String(value || '').trim();
+    }
+    isContainerField(field) {
+        return isDynamicFormContainerField(field);
+    }
+    isTemplateField(field) {
+        return isDynamicFormTemplateField(field);
+    }
+    isFieldVisible(field) {
+        if (typeof field.hidden === 'boolean') {
+            return !field.hidden;
+        }
+        const hidden = String(field.hidden || '').trim();
+        if (!hidden) {
+            return true;
+        }
+        const expression = hidden.startsWith('${') && hidden.endsWith('}')
+            ? hidden.slice(2, -1)
+            : hidden;
+        try {
+            const model = this.modelSignal();
+            const evaluator = new Function('model', `with (model) { return !!(${expression}); }`);
+            return !evaluator(model);
+        }
+        catch {
+            return false;
+        }
+    }
+    resolveInputType(field) {
+        const type = field.type ?? 'text';
+        if (type === 'number' || type === 'date' || type === 'email' || type === 'password') {
+            return type;
+        }
+        if (type === 'datetime')
+            return 'datetime-local';
+        return 'text';
+    }
+    resolveSelectOptions(field) {
+        if (field.options?.length) {
+            return field.options;
+        }
+        const sourceKey = String(field.optionsSource || '').trim();
+        if (!sourceKey) {
+            return [];
+        }
+        return this.dictionaryOptionsSignal()[sourceKey] ?? [];
+    }
+    renderTemplate(field) {
+        const template = this.isTemplateField(field) ? field.template : '';
+        if (!template) {
+            return '';
+        }
+        const model = this.modelSignal();
+        const context = this.isTemplateField(field) ? { ...(field.templateContext || {}), ...model } : model;
+        return String(template).replace(/\{\{\s*([a-zA-Z0-9_.]+)\s*\}\}/g, (_match, path) => {
+            const value = this.resolveTemplateValue(context, path);
+            return value == null ? '' : String(value);
+        });
+    }
+    getContainerTag(field) {
+        if (!this.isContainerField(field) && !this.isTemplateField(field)) {
+            return 'div';
+        }
+        return field.tag || 'section';
+    }
+    getContainerClass(field) {
+        const className = String(field.className || '').trim();
+        const tag = this.getContainerTag(field);
+        return [
+            this.resolveColSpanClass(field),
+            tag === 'aside'
+                ? 'space-y-4 rounded-3xl border border-slate-200 bg-white p-4 shadow-sm'
+                : 'rounded-3xl border border-slate-200 bg-white p-6 shadow-sm',
+            className,
+        ].filter(Boolean).join(' ');
+    }
+    getContainerContentClass(field) {
+        const className = String(field.contentClassName || '').trim();
+        const layout = this.isContainerField(field) ? field.layout : undefined;
+        return [
+            layout === 'stack' ? 'space-y-4' : 'grid grid-cols-1 gap-4 md:grid-cols-12',
+            className,
+        ].filter(Boolean).join(' ');
+    }
+    getFieldClass(field) {
+        const span = Math.min(12, Math.max(1, Number(field.col ?? 12)));
+        return {
+            'md:col-span-1': span === 1,
+            'md:col-span-2': span === 2,
+            'md:col-span-3': span === 3,
+            'md:col-span-4': span === 4,
+            'md:col-span-5': span === 5,
+            'md:col-span-6': span === 6,
+            'md:col-span-7': span === 7,
+            'md:col-span-8': span === 8,
+            'md:col-span-9': span === 9,
+            'md:col-span-10': span === 10,
+            'md:col-span-11': span === 11,
+            'md:col-span-12': span === 12,
+        };
+    }
+    resolveColSpanClass(field) {
+        const span = Math.min(12, Math.max(1, Number(field.col ?? 12)));
+        const classes = {
+            1: 'md:col-span-1',
+            2: 'md:col-span-2',
+            3: 'md:col-span-3',
+            4: 'md:col-span-4',
+            5: 'md:col-span-5',
+            6: 'md:col-span-6',
+            7: 'md:col-span-7',
+            8: 'md:col-span-8',
+            9: 'md:col-span-9',
+            10: 'md:col-span-10',
+            11: 'md:col-span-11',
+            12: 'md:col-span-12',
+        };
+        return classes[span] || classes[12];
+    }
+    onSelectSearchChange(field, query) {
+        const key = String(field.optionsSource || '').trim();
+        if (!key)
+            return;
+        this.getSelectSearchStream(field, key).next(String(query ?? ''));
+    }
+    ensureOptionsSourceOptionsLoaded(model) {
+        if (!this.optionsSourceResolvers.length) {
+            return;
+        }
+        const sourceKeys = [...new Set(this.getLeafFields()
+                .filter((field) => (field.type ?? 'text') === 'select' && !!field.optionsSource)
+                .map((field) => String(field.optionsSource || '').trim())
+                .filter(Boolean))];
+        if (!sourceKeys.length) {
+            return;
+        }
+        for (const sourceKey of sourceKeys) {
+            const resolver = this.optionsSourceResolvers.find((item) => item.source === sourceKey);
+            if (!resolver) {
+                continue;
+            }
+            const sourceFields = this.getLeafFields().filter((field) => String(field.optionsSource || '').trim() === sourceKey);
+            if (!sourceFields.length) {
+                continue;
+            }
+            const version = (this.optionsSourceRequestVersions.get(sourceKey) || 0) + 1;
+            this.optionsSourceRequestVersions.set(sourceKey, version);
+            forkJoin(sourceFields.map((field) => {
+                const resolved = resolver.resolve({ source: sourceKey, field, model });
+                return resolved instanceof Observable ? resolved : from(Promise.resolve(resolved));
+            })).subscribe({
+                next: (results) => {
+                    if ((this.optionsSourceRequestVersions.get(sourceKey) || 0) !== version) {
+                        return;
+                    }
+                    const options = results
+                        .flat()
+                        .map((item) => ({
+                        label: String(item?.label ?? ''),
+                        value: item?.value == null ? null : String(item.value),
+                        disabled: item?.disabled,
+                        imageUrl: item?.imageUrl ? String(item.imageUrl) : undefined,
+                    }))
+                        .filter((item) => !!item.label || item.value !== null);
+                    this.dictionaryOptionsSignal.update((current) => ({
+                        ...current,
+                        [sourceKey]: options,
+                    }));
+                },
+            });
+        }
+    }
+    getSelectSearchStream(field, key) {
+        const normalizedKey = String(key || '').trim();
+        const existing = this.selectSearchChanges.get(normalizedKey);
+        if (existing) {
+            return existing;
+        }
+        const search$ = new Subject();
+        this.selectSearchChanges.set(normalizedKey, search$);
+        const subscription = search$
+            .pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
+            const resolver = this.optionsSourceResolvers.find((item) => item.source === normalizedKey);
+            if (resolver) {
+                return resolver.resolve({ source: normalizedKey, field, model: this.modelSignal(), query });
+            }
+            return this.formsApi.getSuggestByName(normalizedKey, query);
+        }))
+            .subscribe({
+            next: (items) => {
+                const resolver = this.optionsSourceResolvers.find((item) => item.source === normalizedKey);
+                this.dictionaryOptionsSignal.update((current) => ({
+                    ...current,
+                    [normalizedKey]: resolver
+                        ? (items ?? []).map((item) => ({
+                            label: String(item?.label ?? ''),
+                            value: item?.value == null ? null : String(item.value),
+                            disabled: item?.disabled,
+                            imageUrl: item?.imageUrl ? String(item.imageUrl) : undefined,
+                        }))
+                        : (items ?? []).map((item) => ({
+                            label: String(item?.label ?? ''),
+                            value: item?.['key'] != null ? String(item['key']) : null,
+                        })),
+                }));
+            },
+        });
+        this.selectSearchSubscriptions.set(normalizedKey, subscription);
+        return search$;
+    }
+    cleanupSelectSearchStreams() {
+        for (const subscription of this.selectSearchSubscriptions.values()) {
+            subscription.unsubscribe();
+        }
+        this.selectSearchSubscriptions.clear();
+        this.selectSearchChanges.clear();
+    }
+    applyLookupResponse(field, response) {
+        const lookupMap = field.lookupMap || {};
+        const mapped = Object.entries(lookupMap).reduce((acc, [targetField, sourcePath]) => {
+            acc[targetField] = this.resolveTemplateValue(response, sourcePath);
+            return acc;
+        }, {});
+        this.modelSignal.update((current) => {
+            const updated = { ...current, ...mapped };
+            this.formContext.setValue(updated);
+            this.valueChange.emit(updated);
+            this.ensureOptionsSourceOptionsLoaded(updated);
+            return updated;
+        });
+    }
+    resolveTemplateValue(model, pathRaw) {
+        const path = String(pathRaw || '').trim();
+        if (!path) {
+            return undefined;
+        }
+        return path.split('.').reduce((current, part) => {
+            if (current == null || typeof current !== 'object') {
+                return undefined;
+            }
+            return current[part];
+        }, model);
+    }
+    getFlatFields() {
+        return flattenDynamicFormFields(this.fields);
+    }
+    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$1, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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$1, selector: "forms-form-input-host", inputs: ["field", "value", "error", "disabled", "actions", "options"], outputs: ["valueChange", "actionTriggered"] }, { kind: "component", type: UiFileInputComponent$1, selector: "forms-file-input", inputs: ["label", "hint", "accept", "multiple", "disabled", "value"], outputs: ["valueChange", "filesChange"] }, { kind: "component", type: UiPhotoInputComponent$1, selector: "forms-photo-input", inputs: ["label", "hint", "accept", "multiple", "limit", "disabled", "value", "uploadPhoto"], outputs: ["valueChange", "filesChange", "uploadingChange"] }, { kind: "component", type: UiCheckboxInputComponent$1, selector: "forms-checkbox-input", inputs: ["label", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: UiColorInputComponent$1, selector: "forms-color-input", inputs: ["label", "hint", "name", "id", "required", "fullWidth", "error"] }, { kind: "component", type: UiSlugInputComponent$1, selector: "forms-slug-input", inputs: ["label", "hint", "placeholder", "name", "id", "required", "fullWidth", "autocomplete", "readonly", "error"], outputs: ["invalidInput"] }, { kind: "component", type: UiBarcodeScannerInputComponent$1, 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$1, 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: [{
+            type: Component,
+            args: [{ selector: 'forms-dynamic-form', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent, UiFormInputHostComponent$1, UiFileInputComponent$1, UiPhotoInputComponent$1, UiCheckboxInputComponent$1, UiColorInputComponent$1, UiSlugInputComponent$1, UiBarcodeScannerInputComponent$1, UiSelectComponent$1], providers: [UiFormContext$1, 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: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], submitLabel: [{
+                type: Input
+            }], showSubmit: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], uploadPhoto: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], lookupCompleted: [{
+                type: Output
+            }], submitted: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }], uploadingChange: [{
+                type: Output
+            }], fieldActionTriggered: [{
+                type: Output
+            }] } });
+
+class UiActionFormModalComponent {
+    formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : /* istanbul ignore next */ []));
+    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    initialValue = input({}, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+    uploadPhoto = input(null, ...(ngDevMode ? [{ debugName: "uploadPhoto" }] : /* istanbul ignore next */ []));
+    closed = output();
+    completed = output();
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
+    formConfig = signal(null, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+    formValue = signal({}, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    fields = computed(() => this.formConfig()?.fields ?? [], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    submitAction = computed(() => this.formConfig()?.actions?.find((action) => action.type === 'submit' || action.type === 'api'), ...(ngDevMode ? [{ debugName: "submitAction" }] : /* istanbul ignore next */ []));
+    submitLabel = computed(() => this.submitAction()?.submit || this.submitAction()?.label || 'Save', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    http = inject(HttpClient);
+    router = inject(Router);
+    ngOnChanges(changes) {
+        if (this.isOpen() && ('isOpen' in changes || 'formId' in changes || 'recordId' in changes)) {
+            this.loadForm();
+        }
+    }
+    close() {
+        this.closed.emit();
+    }
+    onValueChange(value) {
+        this.formValue.set(value);
+    }
+    onFieldActionTriggered(event) {
+        const endpoint = this.resolveEndpoint(event.action.api);
+        if (!endpoint)
+            return;
+        this.http.request(this.resolveMethod(event.action.method), endpoint, { body: { ...this.formValue(), ...(event.action.payload || {}) } }).subscribe({
+            next: (response) => {
+                const data = this.extractData(response);
+                if (data)
+                    this.formValue.update((current) => ({ ...current, ...data }));
+            },
+        });
+    }
+    confirm() {
+        if (this.isSubmitting())
+            return;
+        const action = this.submitAction();
+        const endpoint = this.resolveEndpoint(this.formConfig()?.api || action?.api);
+        if (!endpoint)
+            return;
+        const payload = { ...(this.initialValue() || {}), ...(action?.payload || {}), ...this.formValue() };
+        const recordId = String(this.recordId() || '').trim();
+        if (recordId && !Object.prototype.hasOwnProperty.call(payload, 'id'))
+            payload['id'] = recordId;
+        this.isSubmitting.set(true);
+        this.http.request(this.resolveMethod(action?.method || (recordId ? 'PATCH' : 'POST')), endpoint, { body: payload }).subscribe({
+            next: (response) => {
+                this.isSubmitting.set(false);
+                this.completed.emit(response);
+                this.navigateAfterSubmit(response);
+                this.close();
+            },
+            error: () => this.isSubmitting.set(false),
+        });
+    }
+    loadForm() {
+        const formId = String(this.formId() || '').trim();
+        if (!formId)
+            return;
+        this.isLoading.set(true);
+        const recordId = String(this.recordId() || '').trim();
+        const endpoint = `/api/crud/form/${encodeURIComponent(formId)}${recordId ? `/${encodeURIComponent(recordId)}` : ''}`;
+        this.http.get(endpoint).subscribe({
+            next: (response) => {
+                const config = response.form || response;
+                this.formConfig.set(config);
+                this.formValue.set({ ...(config.defaults || {}), ...(config.item || {}), ...(this.initialValue() || {}), ...(recordId ? { id: recordId } : {}) });
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.formConfig.set(null);
+                this.isLoading.set(false);
+            },
+        });
+    }
+    resolveEndpoint(endpoint) {
+        const value = String(endpoint || '').trim();
+        if (!value)
+            return '';
+        if (/^https?:\/\//i.test(value) || value.startsWith('/api/'))
+            return value;
+        return `/api${value.startsWith('/') ? value : `/${value}`}`;
+    }
+    resolveMethod(method) {
+        return String(method || 'POST').toUpperCase();
+    }
+    extractData(response) {
+        if (!response || typeof response !== 'object')
+            return null;
+        const value = response.data;
+        return value && typeof value === 'object' ? value : response;
+    }
+    navigateAfterSubmit(response) {
+        const redirect = this.formConfig()?.redirectTo || this.submitAction()?.redirectTo;
+        if (!redirect)
+            return;
+        const data = this.extractData(response) || {};
+        const target = redirect.replace(/:([a-zA-Z_][a-zA-Z0-9_.]*)/g, (_match, key) => {
+            const value = String(key).split('.').reduce((current, part) => current && typeof current === 'object' ? current[part] : undefined, data);
+            return value == null ? '' : String(value);
+        });
+        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 }, 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-center justify-center bg-slate-950/40 p-4\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-slate-50 shadow-2xl\">\n      <div class=\"flex items-center justify-between border-b border-slate-200 bg-white px-6 py-4\">\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=\"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)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex justify-end gap-3 border-t border-slate-200 bg-white px-6 py-4\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent$1, 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: [{
+            type: Component,
+            args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent$1], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/40 p-4\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-slate-50 shadow-2xl\">\n      <div class=\"flex items-center justify-between border-b border-slate-200 bg-white px-6 py-4\">\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=\"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)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex justify-end gap-3 border-t border-slate-200 bg-white px-6 py-4\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting()\" (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 }] }], 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"] }] } });
+
+class UiDateInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'date';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiDateInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiDateInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [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: [{
+            type: Component,
+            args: [{ selector: 'forms-date-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiDateInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiDatetimeInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'datetime-local';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiDatetimeInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiDatetimeInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-datetime-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiDatetimeInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiEmailInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'email';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiEmailInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiEmailInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-email-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiEmailInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiNumberInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'number';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    disabled = false;
+    pattern;
+    error;
+    actions = [];
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiNumberInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value === '' ? null : Number(value);
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiNumberInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-number-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiNumberInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiPasswordInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'password';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiPasswordInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiPasswordInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-password-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiPasswordInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiTextInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'text';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiTextInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiTextInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-text-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiTextInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiTextareaInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'text';
+    element = 'textarea';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiTextareaInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiTextareaInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-textarea-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiTextareaInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+const UI_FORM_INPUT_REGISTRY = {
+    text: UiTextInputComponent,
+    number: UiNumberInputComponent,
+    date: UiDateInputComponent,
+    datetime: UiDatetimeInputComponent,
+    email: UiEmailInputComponent,
+    password: UiPasswordInputComponent,
+    textarea: UiTextareaInputComponent,
+};
+
+class UiFormInputHostComponent {
+    field;
+    value;
+    error = '';
+    disabled = false;
+    actions = [];
+    options = [];
+    valueChange = new EventEmitter();
+    actionTriggered = new EventEmitter();
+    viewContainer = inject(ViewContainerRef);
+    componentRef;
+    ngOnChanges(changes) {
+        if (changes['field']) {
+            this.render();
+            return;
+        }
+        this.syncInputs();
+    }
+    render() {
+        this.viewContainer.clear();
+        const inputType = String(this.field?.type || 'text');
+        const componentType = UI_FORM_INPUT_REGISTRY[inputType] || UI_FORM_INPUT_REGISTRY.text;
+        this.componentRef = this.viewContainer.createComponent(componentType);
+        this.syncInputs();
+        const instance = this.componentRef.instance;
+        instance.registerOnChange?.((nextValue) => this.valueChange.emit(nextValue));
+        instance.registerOnTouched?.(() => undefined);
+        instance.actionTriggered?.subscribe((action) => this.actionTriggered.emit(action));
+    }
+    syncInputs() {
+        if (!this.componentRef || !this.field)
+            return;
+        const field = this.field;
+        const setInput = (name, value) => this.componentRef?.setInput(name, value);
+        setInput('name', field.id);
+        setInput('id', field.id);
+        setInput('label', field.label);
+        setInput('placeholder', field.placeholder);
+        setInput('hint', field.hint);
+        setInput('required', !!field.required);
+        setInput('readonly', !!field.readonly);
+        setInput('disabled', this.disabled || !!field.disabled);
+        setInput('pattern', field.pattern);
+        setInput('rows', field.rows ?? 4);
+        setInput('fullWidth', field.fullWidth !== false);
+        setInput('error', this.error);
+        setInput('actions', this.actions);
+        const instance = this.componentRef.instance;
+        instance.writeValue?.(this.value);
+        instance.setDisabledState?.(this.disabled || !!field.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiFormInputHostComponent, isStandalone: true, selector: "forms-form-input-host", inputs: { field: "field", value: "value", error: "error", disabled: "disabled", actions: "actions", options: "options" }, outputs: { valueChange: "valueChange", actionTriggered: "actionTriggered" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFormInputHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forms-form-input-host',
+                    standalone: true,
+                    template: '',
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiBarcodeScannerInputComponent {
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('Штрихкод', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Відскануйте або введіть штрихкод', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    hint = input('Сканер може просто ввести код і натиснути Enter.', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    autoOpen = input(true, ...(ngDevMode ? [{ debugName: "autoOpen" }] : /* istanbul ignore next */ []));
+    searchButtonLabel = input('Знайти', ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
+    openCameraLabel = input('Відкрити камеру', ...(ngDevMode ? [{ debugName: "openCameraLabel" }] : /* istanbul ignore next */ []));
+    closeCameraLabel = input('Закрити камеру', ...(ngDevMode ? [{ debugName: "closeCameraLabel" }] : /* istanbul ignore next */ []));
+    cameraTitle = input('Камера', ...(ngDevMode ? [{ debugName: "cameraTitle" }] : /* istanbul ignore next */ []));
+    cameraStartingLabel = input('Запускаємо камеру…', ...(ngDevMode ? [{ debugName: "cameraStartingLabel" }] : /* istanbul ignore next */ []));
+    cameraHint = input('Наведіть камеру на штрихкод. Після зчитування код підставиться автоматично.', ...(ngDevMode ? [{ debugName: "cameraHint" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    scanned = output();
+    searchRequested = output();
+    cameraStateChange = output();
+    isCameraOpen = signal(false, ...(ngDevMode ? [{ debugName: "isCameraOpen" }] : /* istanbul ignore next */ []));
+    isCameraStarting = signal(false, ...(ngDevMode ? [{ debugName: "isCameraStarting" }] : /* istanbul ignore next */ []));
+    cameraError = signal('', ...(ngDevMode ? [{ debugName: "cameraError" }] : /* istanbul ignore next */ []));
+    cameraStatus = signal('Камеру не відкрито', ...(ngDevMode ? [{ debugName: "cameraStatus" }] : /* istanbul ignore next */ []));
+    cameraVideo;
+    barcodeReader = new BrowserMultiFormatOneDReader(new Map([[DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.CODE_128]]]), {
+        delayBetweenScanAttempts: 75,
+        delayBetweenScanSuccess: 250,
+        tryPlayVideoTimeout: 5000,
+    });
+    nativeBarcodeDetector = null;
+    cameraControls = null;
+    cameraStream = null;
+    scanLoopId = null;
+    autoOpenQueued = false;
+    openToken = 0;
+    ngOnChanges(changes) {
+        if (changes['disabled']?.currentValue === true) {
+            this.stopCamera();
+            this.autoOpenQueued = false;
+            return;
+        }
+        if (changes['autoOpen'] && this.autoOpen() && !this.disabled()) {
+            this.scheduleAutoOpen();
+        }
+    }
+    ngAfterViewInit() {
+        this.scheduleAutoOpen();
+    }
+    ngOnDestroy() {
+        this.stopCamera();
+    }
+    onValueChange(nextValue) {
+        this.valueChange.emit(String(nextValue ?? ''));
+    }
+    requestSearch() {
+        this.searchRequested.emit();
+    }
+    async openCamera() {
+        if (this.disabled() || this.isCameraStarting() || this.isCameraOpen()) {
+            return;
+        }
+        this.cameraError.set('');
+        this.cameraStatus.set('Запускаємо камеру…');
+        this.isCameraStarting.set(true);
+        this.cameraStateChange.emit('starting');
+        this.isCameraOpen.set(true);
+        const token = ++this.openToken;
+        try {
+            await new Promise((resolve) => {
+                window.requestAnimationFrame(() => resolve());
+            });
+            if (token !== this.openToken) {
+                return;
+            }
+            const video = this.cameraVideo?.nativeElement;
+            if (!video) {
+                throw new Error('Не вдалося підготувати камеру');
+            }
+            if (await this.tryOpenNativeCamera(token, video)) {
+                this.isCameraOpen.set(true);
+                this.cameraStatus.set('Камера відкрита, наведіть на штрихкод');
+                this.cameraStateChange.emit('open');
+                return;
+            }
+            await this.openZxingCamera(token, video);
+            if (token !== this.openToken) {
+                this.cameraControls?.stop();
+                this.cameraControls = null;
+                return;
+            }
+            this.isCameraOpen.set(true);
+            this.cameraStatus.set('Камера відкрита, наведіть на штрихкод');
+            this.cameraStateChange.emit('open');
+        }
+        catch (error) {
+            if (token !== this.openToken) {
+                return;
+            }
+            this.cameraError.set(error?.message || 'Не вдалося відкрити камеру');
+            this.cameraStatus.set('Камеру не відкрито');
+            this.cameraStateChange.emit('error');
+            this.stopCamera();
+        }
+        finally {
+            if (token === this.openToken) {
+                this.isCameraStarting.set(false);
+            }
+        }
+    }
+    closeCamera() {
+        this.stopCamera();
+    }
+    scheduleAutoOpen() {
+        if (typeof window === 'undefined' || !this.autoOpen() || this.disabled() || this.isCameraOpen() || this.isCameraStarting() || this.autoOpenQueued) {
+            return;
+        }
+        this.autoOpenQueued = true;
+        window.requestAnimationFrame(() => {
+            this.autoOpenQueued = false;
+            if (!this.autoOpen() || this.disabled() || this.isCameraOpen() || this.isCameraStarting()) {
+                return;
+            }
+            void this.openCamera();
+        });
+    }
+    onBarcodeDetected(value) {
+        this.valueChange.emit(value);
+        this.scanned.emit(value);
+        this.cameraStatus.set('Штрихкод знайдено');
+        this.cameraControls?.stop();
+        this.cameraControls = null;
+        this.stopCamera();
+    }
+    stopCamera() {
+        this.openToken += 1;
+        if (this.scanLoopId != null) {
+            window.cancelAnimationFrame(this.scanLoopId);
+            this.scanLoopId = null;
+        }
+        this.cameraControls?.stop();
+        this.cameraControls = null;
+        if (this.cameraStream) {
+            for (const track of this.cameraStream.getTracks()) {
+                track.stop();
+            }
+            this.cameraStream = null;
+        }
+        const video = this.cameraVideo?.nativeElement;
+        if (video) {
+            video.pause();
+            video.srcObject = null;
+        }
+        this.nativeBarcodeDetector = null;
+        this.isCameraOpen.set(false);
+        this.isCameraStarting.set(false);
+        this.cameraStateChange.emit(this.cameraError() ? 'error' : 'idle');
+        if (!this.cameraError()) {
+            this.cameraStatus.set('Камеру зупинено');
+        }
+    }
+    async tryOpenNativeCamera(token, video) {
+        const detector = await this.createNativeBarcodeDetector();
+        if (!detector) {
+            return false;
+        }
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                    facingMode: { ideal: 'environment' },
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 },
+                },
+            });
+            if (token !== this.openToken) {
+                stream.getTracks().forEach((track) => track.stop());
+                return true;
+            }
+            this.nativeBarcodeDetector = detector;
+            this.cameraStream = stream;
+            video.srcObject = stream;
+            await video.play().catch(() => undefined);
+            this.scheduleNativeScan(token);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    async openZxingCamera(token, video) {
+        this.cameraControls = await this.barcodeReader.decodeFromConstraints({
+            audio: false,
+            video: {
+                facingMode: { ideal: 'environment' },
+                width: { ideal: 960 },
+                height: { ideal: 540 },
+            },
+        }, video, (result, error) => {
+            if (token !== this.openToken) {
+                return;
+            }
+            if (error || !result) {
+                return;
+            }
+            const value = String(result.getText()).trim();
+            if (value) {
+                this.onBarcodeDetected(value);
+            }
+        });
+    }
+    scheduleNativeScan(token) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const loop = async () => {
+            if (token !== this.openToken) {
+                return;
+            }
+            const video = this.cameraVideo?.nativeElement;
+            const detector = this.nativeBarcodeDetector;
+            if (!video || !detector || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+                this.scanLoopId = window.requestAnimationFrame(() => {
+                    void loop();
+                });
+                return;
+            }
+            try {
+                const barcodes = await detector.detect(video);
+                const value = String(barcodes?.[0]?.rawValue || '').trim();
+                if (value) {
+                    this.onBarcodeDetected(value);
+                    return;
+                }
+            }
+            catch {
+                // Native detection can fail on a frame; keep scanning.
+            }
+            this.scanLoopId = window.requestAnimationFrame(() => {
+                void loop();
+            });
+        };
+        this.scanLoopId = window.requestAnimationFrame(() => {
+            void loop();
+        });
+    }
+    async createNativeBarcodeDetector() {
+        if (typeof window === 'undefined') {
+            return null;
+        }
+        const detectorCtor = window.BarcodeDetector;
+        if (!detectorCtor) {
+            return null;
+        }
+        try {
+            if (detectorCtor.getSupportedFormats) {
+                const supportedFormats = await detectorCtor.getSupportedFormats();
+                if (!supportedFormats.includes('code_128')) {
+                    return null;
+                }
+            }
+            return new detectorCtor({ formats: ['code_128'] });
+        }
+        catch {
+            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: `
+    <div class="space-y-2">
+      @if (label()) {
+        <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
+          <span class="text-[0.7rem] font-semibold text-slate-600">
+            {{ label() }}
+          </span>
+        </label>
+      }
+
+      <div class="flex items-start gap-2">
+        <div class="min-w-0 flex-1">
+          <input
+            #barcodeInput
+            id="barcode-scanner-input"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
+            [disabled]="disabled()"
+            [ngModel]="value()"
+            (ngModelChange)="onValueChange($event)"
+            (keydown.enter)="requestSearch()"
+            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"
+            [placeholder]="placeholder()"
+          />
+          @if (hint()) {
+            <p class="mt-2 text-[0.5rem] text-slate-500">
+              {{ hint() }}
+            </p>
+          }
+        </div>
+
+        <div class="mt-0.5 flex flex-col gap-2">
+          <ui-button
+            type="button"
+            variant="secondary"
+            size="sm"
+            [disabled]="disabled()"
+            (click)="requestSearch()"
+          >
+            {{ searchButtonLabel() }}
+          </ui-button>
+          <ui-button
+            type="button"
+            variant="ghost"
+            size="sm"
+            [disabled]="disabled() || isCameraStarting()"
+            (click)="isCameraOpen() ? closeCamera() : openCamera()"
+          >
+            {{ isCameraOpen() ? closeCameraLabel() : openCameraLabel() }}
+          </ui-button>
+        </div>
+      </div>
+
+      @if (isCameraStarting()) {
+        <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+          {{ cameraStartingLabel() }}
+        </div>
+      }
+
+      @if (isCameraOpen()) {
+        <section class="space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">{{ cameraTitle() }}</p>
+              <p class="text-sm text-slate-200">{{ cameraStatus() }}</p>
+            </div>
+            <button
+              type="button"
+              class="rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
+              (click)="closeCamera()"
+            >
+              {{ closeCameraLabel() }}
+            </button>
+          </div>
+
+          <div class="overflow-hidden rounded-2xl bg-black">
+            <video #cameraVideo class="h-[260px] w-full object-cover" autoplay muted playsinline></video>
+          </div>
+
+          <p class="text-xs text-slate-300">
+            {{ cameraHint() }}
+          </p>
+        </section>
+      }
+
+      @if (cameraError()) {
+        <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+          {{ cameraError() }}
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiBarcodeScannerInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forms-barcode-scanner-input',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, UiButtonComponent],
+                    template: `
+    <div class="space-y-2">
+      @if (label()) {
+        <label class="flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500" for="barcode-scanner-input">
+          <span class="text-[0.7rem] font-semibold text-slate-600">
+            {{ label() }}
+          </span>
+        </label>
+      }
+
+      <div class="flex items-start gap-2">
+        <div class="min-w-0 flex-1">
+          <input
+            #barcodeInput
+            id="barcode-scanner-input"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
+            [disabled]="disabled()"
+            [ngModel]="value()"
+            (ngModelChange)="onValueChange($event)"
+            (keydown.enter)="requestSearch()"
+            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"
+            [placeholder]="placeholder()"
+          />
+          @if (hint()) {
+            <p class="mt-2 text-[0.5rem] text-slate-500">
+              {{ hint() }}
+            </p>
+          }
+        </div>
+
+        <div class="mt-0.5 flex flex-col gap-2">
+          <ui-button
+            type="button"
+            variant="secondary"
+            size="sm"
+            [disabled]="disabled()"
+            (click)="requestSearch()"
+          >
+            {{ searchButtonLabel() }}
+          </ui-button>
+          <ui-button
+            type="button"
+            variant="ghost"
+            size="sm"
+            [disabled]="disabled() || isCameraStarting()"
+            (click)="isCameraOpen() ? closeCamera() : openCamera()"
+          >
+            {{ isCameraOpen() ? closeCameraLabel() : openCameraLabel() }}
+          </ui-button>
+        </div>
+      </div>
+
+      @if (isCameraStarting()) {
+        <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+          {{ cameraStartingLabel() }}
+        </div>
+      }
+
+      @if (isCameraOpen()) {
+        <section class="space-y-3 rounded-3xl border border-slate-200 bg-slate-950 p-3 text-white">
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-300">{{ cameraTitle() }}</p>
+              <p class="text-sm text-slate-200">{{ cameraStatus() }}</p>
+            </div>
+            <button
+              type="button"
+              class="rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
+              (click)="closeCamera()"
+            >
+              {{ closeCameraLabel() }}
+            </button>
+          </div>
+
+          <div class="overflow-hidden rounded-2xl bg-black">
+            <video #cameraVideo class="h-[260px] w-full object-cover" autoplay muted playsinline></video>
+          </div>
+
+          <p class="text-xs text-slate-300">
+            {{ cameraHint() }}
+          </p>
+        </section>
+      }
+
+      @if (cameraError()) {
+        <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+          {{ cameraError() }}
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpen", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], openCameraLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCameraLabel", required: false }] }], closeCameraLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCameraLabel", required: false }] }], cameraTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraTitle", required: false }] }], cameraStartingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraStartingLabel", required: false }] }], cameraHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameraHint", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scanned: [{ type: i0.Output, args: ["scanned"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], cameraStateChange: [{ type: i0.Output, args: ["cameraStateChange"] }], cameraVideo: [{
+                type: ViewChild,
+                args: ['cameraVideo']
+            }] } });
+
+class UiCheckboxInputComponent {
+    label;
+    disabled = false;
+    value = false;
+    valueChange = new EventEmitter();
+    onValueChange(event) {
+        this.valueChange.emit(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: UiCheckboxInputComponent, isStandalone: true, selector: "forms-checkbox-input", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiCheckboxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forms-checkbox-input', standalone: true, imports: [CommonModule], template: "<label class=\"inline-flex items-center gap-3 text-sm text-slate-700\">\n  <input\n    type=\"checkbox\"\n    class=\"h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onValueChange($event)\"\n  />\n  <span>{{ label }}</span>\n</label>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class UiColorInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    name;
+    id;
+    required = false;
+    fullWidth = false;
+    error;
+    disabled = false;
+    value = '#000000';
+    static nextId = 0;
+    generatedId = `ui-color-input-${UiColorInputComponent.nextId++}`;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    get pickerValue() {
+        return this.isColorValue(this.value) ? this.value : '#000000';
+    }
+    writeValue(value) {
+        this.value = value?.trim() || '#000000';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onPickerChange(value) {
+        this.value = value;
+        this.onChange(value);
+    }
+    onHexInput(value) {
+        this.value = this.normalizeHexInput(value);
+        this.onChange(this.value);
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    normalizeHexInput(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return '';
+        }
+        return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+    }
+    isColorValue(value) {
+        return /^#([0-9a-fA-F]{6})$/.test(value.trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiColorInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-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: [{
+            type: Component,
+            args: [{ selector: 'forms-color-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiColorInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-center gap-3\">\n    <label\n      class=\"relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:border-slate-300\"\n      [class.cursor-not-allowed]=\"disabled\"\n      [class.opacity-60]=\"disabled\"\n      [attr.for]=\"controlId\"\n    >\n      <span\n        class=\"block h-9 w-9 rounded-full border border-black/10\"\n        [style.backgroundColor]=\"pickerValue\"\n      ></span>\n      <input\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        type=\"color\"\n        [attr.id]=\"controlId\"\n        [attr.name]=\"name ? name + '-picker' : null\"\n        [disabled]=\"disabled\"\n        [value]=\"pickerValue\"\n        (input)=\"onPickerChange($event.target.value)\"\n        (blur)=\"markTouched()\"\n      />\n    </label>\n    <input\n      class=\"min-w-[110px] rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold uppercase text-slate-700 transition focus:border-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
+class UiFileInputComponent {
+    label;
+    hint;
+    accept;
+    multiple = false;
+    disabled = false;
+    value = null;
+    valueChange = new EventEmitter();
+    filesChange = new EventEmitter();
+    get selectedFiles() {
+        if (this.value instanceof File)
+            return [this.value];
+        return Array.isArray(this.value) ? this.value.filter((item) => item instanceof File) : [];
+    }
+    onFilesSelected(event) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        const value = this.multiple ? files : (files[0] ?? null);
+        this.valueChange.emit(value);
+        this.filesChange.emit(files);
+        input.value = '';
+    }
+    remove(index) {
+        const files = this.selectedFiles.filter((_file, fileIndex) => fileIndex !== index);
+        const value = this.multiple ? files : (files[0] ?? null);
+        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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", 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: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }] } });
+
+class UiInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    type = 'text';
+    element = 'input';
+    rows = 4;
+    required = false;
+    fullWidth = false;
+    autocomplete;
+    readonly = false;
+    pattern;
+    error;
+    actions = [];
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-input-${UiInputComponent.nextId++}`;
+    actionTriggered = new EventEmitter();
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange(value) {
+        const parsed = this.type === 'number' ? (value === '' ? null : Number(value)) : value;
+        this.value = parsed;
+        this.onChange(parsed);
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-input', standalone: true, imports: [CommonModule, FormsModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <div class=\"flex items-end gap-2\">\n    <div class=\"min-w-0 flex-1\">\n      @if (element === 'textarea') {\n        <textarea\n          [attr.rows]=\"rows\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.name]=\"name\"\n          [attr.id]=\"controlId\"\n          [disabled]=\"disabled\"\n          class=\"w-full rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }] } });
+
+class UiPhotoInputComponent {
+    label;
+    hint;
+    accept = 'image/*';
+    multiple = false;
+    limit = Number.MAX_SAFE_INTEGER;
+    disabled = false;
+    value = null;
+    uploadPhoto = null;
+    valueChange = new EventEmitter();
+    filesChange = new EventEmitter();
+    uploadingChange = new EventEmitter();
+    pendingFiles = [];
+    previews = [];
+    uploading = false;
+    fileTypes = new Map();
+    ngOnChanges(changes) {
+        if (changes['value'] || changes['multiple'])
+            this.rebuildPreviews();
+    }
+    ngOnDestroy() {
+        this.revokeBlobUrls();
+    }
+    get canSelectMore() {
+        return !this.multiple || this.ids.length + this.pendingFiles.length < this.normalizedLimit;
+    }
+    onFilesSelected(event) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (!files.length || this.disabled)
+            return;
+        const accepted = this.multiple ? files.slice(0, Math.max(0, this.normalizedLimit - this.ids.length - this.pendingFiles.length)) : [files[0]];
+        this.pendingFiles = this.multiple ? [...this.pendingFiles, ...accepted] : [accepted[0]];
+        this.filesChange.emit(this.pendingFiles);
+        this.rebuildPreviews();
+        if (this.uploadPhoto)
+            this.uploadFiles(accepted);
+    }
+    remove(index) {
+        const ids = [...this.ids];
+        if (index < ids.length) {
+            ids.splice(index, 1);
+            this.emitValue(this.multiple ? ids : (ids[0] ?? null));
+        }
+        else {
+            this.pendingFiles.splice(index - ids.length, 1);
+            this.filesChange.emit(this.pendingFiles);
+            this.rebuildPreviews();
+        }
+    }
+    drop(event) {
+        if (this.disabled || this.pendingFiles.length || this.ids.length < 2)
+            return;
+        const ids = [...this.ids];
+        moveItemInArray(ids, event.previousIndex, event.currentIndex);
+        this.emitValue(this.multiple ? ids : (ids[0] ?? null));
+    }
+    get ids() {
+        if (typeof this.value === 'string')
+            return this.value.trim() ? [this.value] : [];
+        return Array.isArray(this.value) ? this.value.filter((item) => !!String(item || '').trim()) : [];
+    }
+    get normalizedLimit() {
+        return Number.isInteger(Number(this.limit)) && Number(this.limit) > 0 ? Number(this.limit) : Number.MAX_SAFE_INTEGER;
+    }
+    emitValue(value) {
+        this.valueChange.emit(value);
+        this.rebuildPreviews(value);
+    }
+    uploadFiles(files) {
+        if (!this.uploadPhoto || !files.length)
+            return;
+        this.uploading = true;
+        this.uploadingChange.emit(true);
+        forkJoin(files.map((file) => this.uploadPhoto(file))).subscribe({
+            next: (results) => {
+                const uploaded = results.map((item) => String(item.imageId || '').trim()).filter(Boolean);
+                results.forEach((item) => {
+                    const id = String(item.imageId || '').trim();
+                    if (id && item.type)
+                        this.fileTypes.set(id, item.type);
+                });
+                const next = this.multiple ? [...this.ids, ...uploaded].slice(0, this.normalizedLimit) : (uploaded[0] ?? null);
+                this.pendingFiles = this.pendingFiles.filter((file) => !files.includes(file));
+                this.emitValue(next);
+                this.filesChange.emit(this.pendingFiles);
+                this.uploading = false;
+                this.uploadingChange.emit(false);
+            },
+            error: () => {
+                this.pendingFiles = this.pendingFiles.filter((file) => !files.includes(file));
+                this.rebuildPreviews();
+                this.uploading = false;
+                this.uploadingChange.emit(false);
+            },
+        });
+    }
+    rebuildPreviews(value = this.value) {
+        this.revokeBlobUrls();
+        const ids = typeof value === 'string' ? (value.trim() ? [value] : []) : (Array.isArray(value) ? value : []);
+        this.previews = [
+            ...ids.map((id) => ({ name: id, url: this.resolveImageUrl(id), isImage: this.isPreviewableType(this.fileTypes.get(id)), source: 'id' })),
+            ...this.pendingFiles.map((file) => ({ name: file.name, url: URL.createObjectURL(file), isImage: file.type.startsWith('image/'), source: 'file' })),
+        ];
+    }
+    revokeBlobUrls() {
+        for (const preview of this.previews)
+            if (preview.url.startsWith('blob:'))
+                URL.revokeObjectURL(preview.url);
+    }
+    resolveImageUrl(value) {
+        if (/^(https?:\/\/|\/|data:)/i.test(value))
+            return value;
+        return `/api/files/${encodeURIComponent(value)}/preview?scale=25`;
+    }
+    isPreviewableType(value) {
+        if (!value)
+            return true;
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", 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: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], uploadPhoto: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }], uploadingChange: [{
+                type: Output
+            }] } });
+
+class UiPhotoGalleryFieldComponent {
+    label = 'Фото';
+    orderLabel = 'Порядок фото (перетягуй)';
+    imageIds = [];
+    disabled = false;
+    afterUpload = null;
+    uploadPhoto = null;
+    resolveImageUrl = null;
+    notify = null;
+    imageIdsChange = new EventEmitter();
+    entries = [];
+    imageEntrySequence = 0;
+    get photoCount() {
+        return this.entries.filter((entry) => !!entry.imageId || !!entry.file).length;
+    }
+    ngOnInit() {
+        if (!this.entries.length)
+            this.entries = this.normalizeImageEntries([]);
+    }
+    ngOnChanges(changes) {
+        if (!changes['imageIds'])
+            return;
+        const nextIds = this.imageIds ?? [];
+        const currentIds = this.entries.filter((entry) => !!entry.imageId).map((entry) => entry.imageId);
+        const hasPendingLocalFiles = this.entries.some((entry) => !!entry.file || !!entry.isUploading);
+        const sameIds = nextIds.length === currentIds.length && nextIds.every((id, idx) => id === currentIds[idx]);
+        if (sameIds || hasPendingLocalFiles)
+            return;
+        this.entries = this.normalizeImageEntries(nextIds.map((imageId) => ({
+            clientKey: imageId,
+            imageId,
+            preview: this.resolveImageUrl?.(imageId) || '',
+        })));
+    }
+    ngOnDestroy() {
+        this.entries.forEach((entry) => {
+            if (entry.file && entry.preview)
+                URL.revokeObjectURL(entry.preview);
+        });
+    }
+    onFilesChange(event, index) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        if (this.disabled || !files.length)
+            return;
+        const next = [...this.entries];
+        const baseIndex = Math.max(0, Math.min(index, next.length - 1));
+        files.forEach((file, offset) => {
+            const targetIndex = baseIndex + offset;
+            const existing = next[targetIndex];
+            if (existing?.file && existing.preview)
+                URL.revokeObjectURL(existing.preview);
+            next[targetIndex] = {
+                clientKey: existing?.clientKey ?? `local-${this.imageEntrySequence++}`,
+                file,
+                imageId: existing?.imageId,
+                preview: URL.createObjectURL(file),
+            };
+        });
+        this.entries = this.normalizeImageEntries(next);
+        this.uploadPendingImages();
+        input.value = '';
+    }
+    openFilePicker(input, event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (!this.disabled && input)
+            input.click();
+    }
+    onDrop(event) {
+        if (this.disabled)
+            return;
+        const next = [...this.entries];
+        const nonEmptyCount = next.filter((entry) => entry.imageId || entry.file).length;
+        if (event.previousIndex >= nonEmptyCount || event.currentIndex >= nonEmptyCount) {
+            this.entries = this.normalizeImageEntries(next);
+            return;
+        }
+        moveItemInArray(next, event.previousIndex, event.currentIndex);
+        this.entries = this.normalizeImageEntries(next);
+        this.emitImageIds();
+    }
+    removeAt(index) {
+        if (this.disabled || index < 0 || index >= this.entries.length)
+            return;
+        const next = [...this.entries];
+        const [removed] = next.splice(index, 1);
+        if (removed?.file && removed.preview)
+            URL.revokeObjectURL(removed.preview);
+        this.entries = this.normalizeImageEntries(next);
+        this.emitImageIds();
+    }
+    createImageEntry() {
+        return { clientKey: `local-${this.imageEntrySequence++}` };
+    }
+    normalizeImageEntries(entries) {
+        const nonEmpty = entries.filter((entry) => !!entry?.imageId || !!entry?.file);
+        return nonEmpty.length ? [...nonEmpty, this.createImageEntry()] : [this.createImageEntry()];
+    }
+    emitImageIds() {
+        this.imageIdsChange.emit(this.entries.filter((entry) => !!entry.imageId).map((entry) => entry.imageId));
+    }
+    uploadPendingImages() {
+        const nextIndex = this.entries.findIndex((entry) => !!entry.file && !entry.isUploading);
+        if (nextIndex < 0 || !this.uploadPhoto)
+            return;
+        const entry = this.entries[nextIndex];
+        entry.isUploading = true;
+        const file = entry.file;
+        this.uploadPhoto(file).subscribe({
+            next: (response) => {
+                const persist$ = this.afterUpload ? this.afterUpload(response.imageId) : of(null);
+                persist$.subscribe({
+                    next: () => {
+                        entry.imageId = response.imageId;
+                        entry.file = undefined;
+                        entry.isUploading = undefined;
+                        entry.preview = this.resolveImageUrl?.(response.imageId) || entry.preview;
+                        this.entries = this.normalizeImageEntries([...this.entries]);
+                        this.emitImageIds();
+                        this.notify?.('Фото завантажено', 'success', 2000);
+                        this.uploadPendingImages();
+                    },
+                    error: (error) => {
+                        entry.isUploading = undefined;
+                        this.notify?.(error?.error?.message || 'Не вдалося привʼязати фото', 'error', 3500);
+                        this.uploadPendingImages();
+                    },
+                });
+            },
+            error: (error) => {
+                entry.isUploading = undefined;
+                this.notify?.(error?.error?.message || 'Не вдалося завантажити фото', 'error', 3500);
+                this.uploadPendingImages();
+            },
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", 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: [{
+                type: Input
+            }], orderLabel: [{
+                type: Input
+            }], imageIds: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], afterUpload: [{
+                type: Input
+            }], uploadPhoto: [{
+                type: Input
+            }], resolveImageUrl: [{
+                type: Input
+            }], notify: [{
+                type: Input
+            }], imageIdsChange: [{
+                type: Output
+            }] } });
+
+class UiRangeSliderComponent {
+    min = 0;
+    max = 100;
+    step = 1;
+    startValue = null;
+    endValue = null;
+    startLabel = 'Мінімальне значення';
+    endLabel = 'Максимальне значення';
+    startValueChange = new EventEmitter();
+    endValueChange = new EventEmitter();
+    interactionEnd = new EventEmitter();
+    startInput;
+    endInput;
+    get safeStart() {
+        const min = this.safeMin;
+        const max = this.safeMax;
+        const step = this.safeStep;
+        const start = this.toFiniteNumber(this.startValue, min);
+        const end = this.toFiniteNumber(this.endValue, max);
+        return Math.max(min, Math.min(start, end - step));
+    }
+    get safeEnd() {
+        const min = this.safeMin;
+        const max = this.safeMax;
+        const step = this.safeStep;
+        const start = this.toFiniteNumber(this.startValue, min);
+        const end = this.toFiniteNumber(this.endValue, max);
+        return Math.min(max, Math.max(end, start + step));
+    }
+    get startPercent() {
+        return this.toPercent(this.safeStart);
+    }
+    get endPercent() {
+        return this.toPercent(this.safeEnd);
+    }
+    get rangePercent() {
+        return Math.max(0, this.endPercent - this.startPercent);
+    }
+    get safeMin() {
+        return this.toFiniteNumber(this.min, 0);
+    }
+    get safeMax() {
+        const min = this.safeMin;
+        const max = this.toFiniteNumber(this.max, min + this.safeStep);
+        return max > min ? max : min + this.safeStep;
+    }
+    get safeStep() {
+        const step = this.toFiniteNumber(this.step, 1);
+        return step > 0 ? step : 1;
+    }
+    ngOnChanges(_) {
+        this.syncNativeInputs();
+    }
+    ngAfterViewInit() {
+        this.syncNativeInputs();
+    }
+    onStartInput(event) {
+        const value = Number(event.target.value);
+        this.startValueChange.emit(Math.min(value, this.safeEnd - this.safeStep));
+    }
+    onEndInput(event) {
+        const value = Number(event.target.value);
+        this.endValueChange.emit(Math.max(value, this.safeStart + this.safeStep));
+    }
+    toPercent(value) {
+        const span = this.safeMax - this.safeMin;
+        if (span <= 0) {
+            return 0;
+        }
+        return ((value - this.safeMin) / span) * 100;
+    }
+    toFiniteNumber(value, fallback) {
+        return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    }
+    syncNativeInputs() {
+        queueMicrotask(() => {
+            this.syncNativeInput(this.startInput?.nativeElement, this.safeStart);
+            this.syncNativeInput(this.endInput?.nativeElement, this.safeEnd);
+        });
+    }
+    syncNativeInput(input, value) {
+        if (!input) {
+            return;
+        }
+        input.min = String(this.safeMin);
+        input.max = String(this.safeMax);
+        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: `
+    <div class="range-slider">
+      <div class="range-slider__track"></div>
+      <div
+        class="range-slider__range"
+        [style.left.%]="startPercent"
+        [style.width.%]="rangePercent">
+      </div>
+
+      <input
+        #startInput
+        class="range-slider__input"
+        type="range"
+        [min]="safeMin"
+        [max]="safeMax"
+        [step]="safeStep"
+        [value]="safeStart"
+        [attr.aria-label]="startLabel"
+        (input)="onStartInput($event)"
+        (change)="interactionEnd.emit()">
+
+      <input
+        #endInput
+        class="range-slider__input"
+        type="range"
+        [min]="safeMin"
+        [max]="safeMax"
+        [step]="safeStep"
+        [value]="safeEnd"
+        [attr.aria-label]="endLabel"
+        (input)="onEndInput($event)"
+        (change)="interactionEnd.emit()">
+    </div>
+  `, isInline: true, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiRangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forms-range-slider', standalone: true, imports: [CommonModule], template: `
+    <div class="range-slider">
+      <div class="range-slider__track"></div>
+      <div
+        class="range-slider__range"
+        [style.left.%]="startPercent"
+        [style.width.%]="rangePercent">
+      </div>
+
+      <input
+        #startInput
+        class="range-slider__input"
+        type="range"
+        [min]="safeMin"
+        [max]="safeMax"
+        [step]="safeStep"
+        [value]="safeStart"
+        [attr.aria-label]="startLabel"
+        (input)="onStartInput($event)"
+        (change)="interactionEnd.emit()">
+
+      <input
+        #endInput
+        class="range-slider__input"
+        type="range"
+        [min]="safeMin"
+        [max]="safeMax"
+        [step]="safeStep"
+        [value]="safeEnd"
+        [attr.aria-label]="endLabel"
+        (input)="onEndInput($event)"
+        (change)="interactionEnd.emit()">
+    </div>
+  `, styles: [".range-slider{position:relative;height:2rem;width:100%;display:flex;align-items:center}.range-slider__track,.range-slider__range{position:absolute;left:0;right:0;height:6px;border-radius:999px}.range-slider__track{background:#dbe1ea}.range-slider__range{background:linear-gradient(90deg,#334155,#0f172a)}.range-slider__input{pointer-events:none;position:absolute;left:0;width:100%;height:2rem;margin:0;background:transparent;appearance:none;-webkit-appearance:none}.range-slider__input::-webkit-slider-runnable-track{height:6px;background:transparent}.range-slider__input::-moz-range-track{height:6px;background:transparent}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}.range-slider__input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:2px solid #ffffff;background:#0f172a;box-shadow:0 8px 22px #0f172a38;cursor:pointer}\n"] }]
+        }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], startValue: [{
+                type: Input
+            }], endValue: [{
+                type: Input
+            }], startLabel: [{
+                type: Input
+            }], endLabel: [{
+                type: Input
+            }], startValueChange: [{
+                type: Output
+            }], endValueChange: [{
+                type: Output
+            }], interactionEnd: [{
+                type: Output
+            }], startInput: [{
+                type: ViewChild,
+                args: ['startInput']
+            }], endInput: [{
+                type: ViewChild,
+                args: ['endInput']
+            }] } });
+
+class UiSelectComponent {
+    closeIcon = X;
+    chevronDownIcon = ChevronDown;
+    checkIcon = Check;
+    static openInstance = null;
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    http = inject(HttpClient);
+    label;
+    placeholder;
+    name;
+    data;
+    required = false;
+    fullWidth = false;
+    disabled = false;
+    multiple = false;
+    includeBlankOption = false;
+    blankOptionLabel = 'Оберіть…';
+    emptyStateLabel = 'Немає варіантів для вибору';
+    searchable = true;
+    remoteSearch = false;
+    searchPlaceholder = 'Пошук...';
+    _options = [];
+    set options(value) {
+        this._options = value ?? [];
+        this.updateSelectionFromValue();
+        this.cdr.markForCheck();
+    }
+    get options() {
+        return this._options;
+    }
+    error;
+    hint;
+    triggerClass = '';
+    panelClass = '';
+    valueChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    dropdownTrigger;
+    dropdownPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 4,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -4,
+        },
+    ];
+    isOpen = false;
+    triggerWidth = 0;
+    value = '';
+    multiValue = [];
+    selectedOptions = [];
+    searchTerm = '';
+    isDictionaryLoading = false;
+    searchChanges$ = new Subject();
+    dictionaryRequestVersions = new Map();
+    dictionaryOptions = [];
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    constructor() {
+        this.searchChanges$.pipe(debounceTime(300), distinctUntilChanged()).subscribe((next) => {
+            this.searchTerm = next;
+            if (this.getDictionaryName()) {
+                this.loadDictionaryOptions(next);
+                return;
+            }
+            this.updateSelectionFromValue();
+            this.cdr.markForCheck();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.searchChanges$.complete();
+            this.dictionaryRequestVersions.clear();
+            if (UiSelectComponent.openInstance === this) {
+                UiSelectComponent.openInstance = null;
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if ('data' in changes) {
+            this.reloadDictionaryOptions();
+        }
+    }
+    writeValue(value) {
+        if (this.multiple) {
+            this.multiValue = Array.isArray(value) ? value : [];
+        }
+        else {
+            this.value = value ?? '';
+        }
+        this.updateSelectionFromValue();
+        this.ensureSelectedDictionaryOptionsLoaded();
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
+        }
+        if (UiSelectComponent.openInstance && UiSelectComponent.openInstance !== this) {
+            UiSelectComponent.openInstance.closeDropdown();
+        }
+        this.triggerWidth = this.dropdownTrigger?.nativeElement.getBoundingClientRect().width ?? 0;
+        this.isOpen = true;
+        this.searchTerm = '';
+        this.searchChanges$.next('');
+        UiSelectComponent.openInstance = this;
+        this.cdr.markForCheck();
+    }
+    selectOption(option, event) {
+        event.stopPropagation();
+        const key = this.getOptionValue(option);
+        if (this.multiple) {
+            const normalized = this.multiValue.includes(key)
+                ? this.multiValue.filter((item) => item !== key)
+                : [...this.multiValue, key];
+            this.multiValue = normalized;
+            this.onChange(normalized);
+            this.valueChange.emit(normalized);
+        }
+        else {
+            const nextValue = this.value === key ? null : key;
+            this.value = nextValue;
+            this.onChange(nextValue);
+            this.valueChange.emit(nextValue);
+            this.closeDropdown();
+        }
+        this.updateSelectionFromValue();
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    closeDropdown() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.onTouched();
+        this.searchTerm = '';
+        this.searchChanges$.next('');
+        if (UiSelectComponent.openInstance === this) {
+            UiSelectComponent.openInstance = null;
+        }
+        this.cdr.markForCheck();
+    }
+    get displayLabel() {
+        if (this.multiple) {
+            if (!this.selectedOptions.length) {
+                return this.placeholder ?? this.blankOptionLabel;
+            }
+            return `${this.selectedOptions.length}`;
+        }
+        return this.selectedOptions[0]?.label ?? this.placeholder ?? this.blankOptionLabel;
+    }
+    isSelected(option) {
+        const value = this.getOptionValue(option);
+        if (this.multiple) {
+            return this.multiValue.includes(value);
+        }
+        return this.value === value;
+    }
+    getOptionValue(option) {
+        return option.value ?? '';
+    }
+    trackOption(index, option) {
+        return `${this.getOptionValue(option)}::${String(option.label || '').trim()}::${index}`;
+    }
+    get visibleOptions() {
+        const options = this.getRenderOptions();
+        if (!this.searchable || this.remoteSearch || !this.searchTerm.trim()) {
+            return options;
+        }
+        const search = this.searchTerm.trim().toLowerCase();
+        return options.filter((option) => {
+            if (this.includeBlankOption && !this.multiple && this.isBlankOption(option)) {
+                return true;
+            }
+            return String(option.label ?? '').toLowerCase().includes(search);
+        });
+    }
+    onSearchChange(value) {
+        const next = String(value ?? '');
+        this.searchChanges$.next(next);
+        this.searchChange.emit(next);
+    }
+    removeOption(option, event) {
+        event.stopPropagation();
+        const key = this.getOptionValue(option);
+        if (this.multiple) {
+            this.multiValue = this.multiValue.filter((v) => v !== key);
+            this.onChange(this.multiValue);
+            this.valueChange.emit(this.multiValue);
+            this.updateSelectionFromValue();
+        }
+    }
+    updateSelectionFromValue() {
+        const options = this.getRenderOptions();
+        if (this.multiple) {
+            this.selectedOptions = options.filter((option) => this.multiValue.includes(this.getOptionValue(option)));
+            return;
+        }
+        const current = options.find((option) => this.getOptionValue(option) === (this.value ?? ''));
+        this.selectedOptions = current ? [current] : [];
+    }
+    getRenderOptions() {
+        const merged = this.mergeOptions(this.options, this.dictionaryOptions);
+        if (!this.includeBlankOption || this.multiple) {
+            return merged;
+        }
+        return [{ label: this.blankOptionLabel, value: '' }, ...merged];
+    }
+    mergeOptions(...optionSets) {
+        const merged = new Map();
+        for (const options of optionSets) {
+            for (const option of options || []) {
+                const value = this.getOptionValue(option);
+                const key = `${value}::${String(option.label || '').trim()}`;
+                if (!merged.has(key)) {
+                    merged.set(key, option);
+                }
+            }
+        }
+        return [...merged.values()];
+    }
+    isBlankOption(option) {
+        return String(option.value ?? '') === '';
+    }
+    getDictionaryName() {
+        return String(this.data || '').trim();
+    }
+    reloadDictionaryOptions() {
+        const dictionaryName = this.getDictionaryName();
+        this.dictionaryRequestVersions.clear();
+        this.dictionaryOptions = [];
+        this.isDictionaryLoading = false;
+        if (!dictionaryName) {
+            this.updateSelectionFromValue();
+            this.cdr.markForCheck();
+            return;
+        }
+        this.loadDictionaryOptions(this.searchTerm);
+    }
+    loadDictionaryOptions(query) {
+        const dictionaryName = this.getDictionaryName();
+        if (!dictionaryName) {
+            return;
+        }
+        const requestVersion = (this.dictionaryRequestVersions.get(dictionaryName) || 0) + 1;
+        this.dictionaryRequestVersions.set(dictionaryName, requestVersion);
+        this.isDictionaryLoading = true;
+        this.loadSuggestItems(dictionaryName, String(query || '').trim()).subscribe({
+            next: (items) => {
+                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
+                    return;
+                }
+                this.dictionaryOptions = this.normalizeSuggestItems(items);
+                this.isDictionaryLoading = false;
+                this.ensureSelectedDictionaryOptionsLoaded();
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                if ((this.dictionaryRequestVersions.get(dictionaryName) || 0) !== requestVersion) {
+                    return;
+                }
+                this.dictionaryOptions = [];
+                this.isDictionaryLoading = false;
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    ensureSelectedDictionaryOptionsLoaded() {
+        const dictionaryName = this.getDictionaryName();
+        if (!dictionaryName) {
+            return;
+        }
+        const existingValues = new Set(this.getRenderOptions().map((option) => this.getOptionValue(option)));
+        const selectedValues = this.multiple ? this.multiValue : [this.value];
+        const missingValues = selectedValues
+            .map((item) => String(item || '').trim())
+            .filter((item) => !!item && !existingValues.has(item));
+        if (!missingValues.length) {
+            return;
+        }
+        forkJoin(missingValues.map((value) => this.loadSuggestItem(dictionaryName, value))).subscribe({
+            next: (items) => {
+                const nextOptions = [...this.dictionaryOptions];
+                for (const item of items) {
+                    const normalized = this.normalizeSuggestItem(item);
+                    if (!nextOptions.some((option) => this.getOptionValue(option) === normalized.value)) {
+                        nextOptions.push(normalized);
+                    }
+                }
+                this.dictionaryOptions = nextOptions;
+                this.updateSelectionFromValue();
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    normalizeSuggestItems(items) {
+        return (items || [])
+            .map((item) => this.normalizeSuggestItem(item))
+            .filter((item) => !!item.label || item.value !== null);
+    }
+    normalizeSuggestItem(item) {
+        return {
+            label: String(item?.label ?? ''),
+            value: item?.key != null ? String(item.key) : null,
+            imageUrl: item?.imageId ? `/api/files/${item.imageId}/preview?scale=25` : undefined,
+        };
+    }
+    loadSuggestItems(name, query) {
+        const params = new URLSearchParams();
+        if (query?.trim())
+            params.set('q', query.trim());
+        const suffix = params.toString() ? `?${params.toString()}` : '';
+        return this.http.get(`/api/suggest/${encodeURIComponent(name)}${suffix}`);
+    }
+    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: [
+            {
+                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      [cdkConnectedOverlayWidth]=\"triggerWidth || 0\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 w-full overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\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-center justify-between 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 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=\"truncate\">{{ 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$2.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: [{
+            type: Component,
+            args: [{ selector: 'forms-select', standalone: true, imports: [LucideAngularModule, CommonModule, FormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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      [cdkConnectedOverlayWidth]=\"triggerWidth || 0\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 w-full overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\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-center justify-between 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 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=\"truncate\">{{ 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: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], includeBlankOption: [{
+                type: Input
+            }], blankOptionLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], remoteSearch: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], triggerClass: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], dropdownTrigger: [{
+                type: ViewChild,
+                args: ['dropdownTrigger', { static: true, read: ElementRef }]
+            }] } });
+
+class UiSlugInputComponent {
+    label;
+    hint;
+    placeholder;
+    name;
+    id;
+    required = false;
+    fullWidth = false;
+    autocomplete = 'off';
+    readonly = false;
+    error;
+    invalidInput = new EventEmitter();
+    disabled = false;
+    value = '';
+    static nextId = 0;
+    generatedId = `ui-slug-input-${UiSlugInputComponent.nextId++}`;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    get controlId() {
+        return this.id ?? this.generatedId;
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onValueChange(target) {
+        const normalized = this.normalizeSlug(target.value);
+        if (target.value !== normalized) {
+            target.value = normalized;
+            this.invalidInput.emit();
+        }
+        this.value = normalized;
+        this.onChange(normalized);
+    }
+    normalizeSlug(value) {
+        return (value ?? '')
+            .toLowerCase()
+            .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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UiSlugInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    class=\"rounded-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: [{
+            type: Component,
+            args: [{ selector: 'forms-slug-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UiSlugInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n  [attr.for]=\"controlId\"\n>\n  @if (label) {\n    <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n      {{ label }}\n      @if (required) {\n        <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span>\n      }\n    </span>\n  }\n\n  <input\n    type=\"text\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.name]=\"name\"\n    [attr.autocomplete]=\"autocomplete\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    class=\"rounded-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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], invalidInput: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MaroFormsApiService, UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS, UI_FORM_INPUT_REGISTRY, UiActionFormModalComponent, UiBarcodeScannerInputComponent, UiCheckboxInputComponent, UiColorInputComponent, UiDateInputComponent, UiDatetimeInputComponent, UiDynamicFormComponent, UiEmailInputComponent, UiFileInputComponent, UiFormContext, UiFormInputHostComponent, UiFormLookupService, UiInputComponent, UiNumberInputComponent, UiPasswordInputComponent, UiPhotoGalleryFieldComponent, UiPhotoInputComponent, UiRangeSliderComponent, UiSelectComponent, UiSlugInputComponent, UiTextInputComponent, UiTextareaInputComponent, flattenDynamicFormFields, isDynamicFormContainerField, isDynamicFormTemplateField };
+//# sourceMappingURL=maro-tech-form.mjs.map