@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-field.mjs

@@ -1,183 +1,399 @@
-import * as i0 from '@angular/core';
-import { Directive, inject, contentChild, computed, input, booleanAttribute, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS, rtKitLabel } from '@rt-tools/ui-kit-v2/core';
-import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
-import { RtSkeletonWrapperComponent } from '@rt-tools/ui-kit-v2/skeleton-wrapper';
-
-/**
- * Маркер проецируемого hint'а для rt-field. Нужен, когда подсказке требуется
- * разметка (`<strong>`, интерполяция значений), которую плоский string-input
- * `[hint]` передать не может. Если проецируемый hint присутствует — rt-field
- * рендерит его вместо строкового `[hint]` (тот остаётся fallback'ом).
- */
-class RtFieldHintDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFieldHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtFieldHintDirective, isStandalone: true, selector: "[rtFieldHint]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFieldHintDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtFieldHint]',
-                }]
-        }] });
-
-/**
- * Ключи сообщений об ошибках по имени валидатора (перекрываются input'ом
- * [errors] поштучно, уже готовым текстом).
- *
- * Здесь ключи, а не переводы: карта собирается при загрузке модуля, когда язык
- * страницы ещё неизвестен, и готовый текст остался бы на языке по умолчанию
- * даже под переведённой подписью поля. Переводит сам компонент поля.
- */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, booleanAttribute, computed, contentChild, effect, inject, input } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+import { RtSkeletonWrapperComponent } from "@rt-tools/ui-kit-v2/skeleton-wrapper";
+var RtFieldHintDirective = class RtFieldHintDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtFieldHintDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtFieldHintDirective,
+			isStandalone: true,
+			selector: "[rtFieldHint]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtFieldHintDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtFieldHint]" }]
+	}]
+});
 const RT_FIELD_DEFAULT_ERROR_KEYS = {
-    required: 'fieldErrorRequired',
-    email: 'fieldErrorEmail',
-    minlength: 'fieldErrorMinLength',
-    maxlength: 'fieldErrorMaxLength',
-    min: 'fieldErrorMin',
-    max: 'fieldErrorMax',
-    pattern: 'fieldErrorPattern',
+	required: "fieldErrorRequired",
+	email: "fieldErrorEmail",
+	minlength: "fieldErrorMinLength",
+	maxlength: "fieldErrorMaxLength",
+	min: "fieldErrorMin",
+	max: "fieldErrorMax",
+	pattern: "fieldErrorPattern"
 };
-/** Текст-плейсхолдер read-only поля без значения. */
-const RT_FIELD_EMPTY_VALUE = '—';
-
-const BEM_BLOCK = 'rt-field';
-/** Счётчик для авто-id (связка label[for] ↔ controlId спроецированного контрола). */
+const RT_FIELD_EMPTY_VALUE = "—";
+const BEM_BLOCK = "rt-field";
 let uidSeed = 0;
 function nextAutoId() {
-    uidSeed += 1;
-    return `rt-field-${uidSeed}`;
+	uidSeed += 1;
+	return `rt-field-${uidSeed}`;
 }
-/**
- * Обёртка единой анатомии поля: label (+ опц. help-иконка с popover, + авто «*»
- * для required) сверху, спроецированный rt-контрол посередине, hint/error снизу.
- * `required` объявляет поле обязательным там, где валидатора на контроле нет (шаблонная форма).
- * `hideRequiredMark` глушит авто-«*» — для форм, где все поля обязательны и
- * маркер лишний (логин).
- * `reserveHintSpace` держит под контролом строку высотой в одно сообщение даже
- * когда ни ошибки, ни hint нет — чтобы появление ошибки не сдвигало форму вниз
- * (нужно для полей без постоянного hint, напр. логин).
- *
- * Читает контрол через contentChild(RtFormControlBase): авто-связывает label[for],
- * прокидывает read-only режим, показывает текст ошибки/required-маркер. На loading
- * оборачивает зону контрола в rt-skeleton-wrapper (label/hint остаются видимыми) —
- * нужно для route-aside, где поля рендерятся до прихода данных.
- */
-class RtFieldComponent {
-    #autoId;
-    /** Имя первого сработавшего валидатора: сообщений показываем по одному */
-    #failedValidator;
-    /**
-     * Умолчание переводится по ключу.
-     *
-     * Ключ передаётся сигналом, а не строкой: так подпись пересчитывается и при
-     * смене валидатора, и при смене языка — пользователь переключает его
-     * на лету, и текст ошибки обязан переключиться вместе с формой.
-     */
-    #defaultErrorText;
-    constructor() {
-        // contentChild нельзя объявлять на ES-private (#) поле — Angular это запрещает,
-        // поэтому проекция контрола живёт в protected-поле.
-        this.t = inject(RT_KIT_LABELS);
-        this.projectedControl = contentChild(RtFormControlBase, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "projectedControl" }] : /* istanbul ignore next */ []));
-        // Проецируемый hint (с разметкой) — если присутствует, рендерится вместо
-        // строкового [hint].
-        this.projectedHint = contentChild(RtFieldHintDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "projectedHint" }] : /* istanbul ignore next */ []));
-        this.#autoId = nextAutoId();
-        /** Итоговый id: явный controlId контрола важнее авто-id. */
-        this.controlId = computed(() => this.projectedControl()?.effectiveControlId() ?? this.#autoId, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
-        this.isRequired = computed(() => this.projectedControl()?.required() ?? false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-        this.showError = computed(() => !!this.projectedControl()?.invalid(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-        /** Имя первого сработавшего валидатора: сообщений показываем по одному */
-        this.#failedValidator = computed(() => {
-            const errs = this.projectedControl()?.errors() ?? null;
-            return errs ? (Object.keys(errs)[0] ?? '') : '';
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#failedValidator" }] : /* istanbul ignore next */ []));
-        /**
-         * Умолчание переводится по ключу.
-         *
-         * Ключ передаётся сигналом, а не строкой: так подпись пересчитывается и при
-         * смене валидатора, и при смене языка — пользователь переключает его
-         * на лету, и текст ошибки обязан переключиться вместе с формой.
-         */
-        this.#defaultErrorText = rtKitLabel(computed(() => RT_FIELD_DEFAULT_ERROR_KEYS[this.#failedValidator()] ?? ''));
-        /** Сообщение об ошибке: текст, переданный формой, важнее умолчания */
-        this.errorText = computed(() => {
-            const validator = this.#failedValidator();
-            if (!validator) {
-                return '';
-            }
-            const own = this.errors()[validator];
-            if (own) {
-                return own;
-            }
-            return RT_FIELD_DEFAULT_ERROR_KEYS[validator] ? this.#defaultErrorText() : '';
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-        this.emptyValue = RT_FIELD_EMPTY_VALUE;
-        this.label = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.hint = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-        this.help = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []));
-        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Поле обязательно, хотя валидатора на контроле нет: шаблонная форма его не кладёт. Даёт «*» и
-         * ошибку под тронутым пустым полем. Форму недействительной не делает — решение о записи
-         * остаётся у формы.
-         */
-        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.hideRequiredMark = input(false, { ...(ngDevMode ? { debugName: "hideRequiredMark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.reserveHintSpace = input(false, { ...(ngDevMode ? { debugName: "reserveHintSpace" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.errors = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        // Реактивно прокидываем read-only режим в спроецированный контрол.
-        effect(() => {
-            this.projectedControl()?.setReadonly(this.readonly());
-        });
-        effect(() => {
-            this.projectedControl()?.setRequired(this.required());
-        });
-    }
-    ngAfterContentInit() {
-        const ctrl = this.projectedControl();
-        // Авто-id только если у контрола нет явного controlId — для label[for].
-        if (ctrl && ctrl.effectiveControlId() === null) {
-            ctrl.assignControlId(this.#autoId);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtFieldComponent, isStandalone: true, selector: "rt-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMark: { classPropertyName: "hideRequiredMark", publicName: "hideRequiredMark", isSignal: true, isRequired: false, transformFunction: null }, reserveHintSpace: { classPropertyName: "reserveHintSpace", publicName: "reserveHintSpace", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-field" }, queries: [{ propertyName: "projectedControl", first: true, predicate: RtFormControlBase, descendants: true, isSignal: true }, { propertyName: "projectedHint", first: true, predicate: RtFieldHintDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- \u0421 \u0440\u0435\u0437\u0435\u0440\u0432\u043E\u043C hint \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0432 \u043F\u043E\u0442\u043E\u043A\u0435 \u0434\u0430\u0436\u0435 \u043F\u043E\u0434 \u043E\u0448\u0438\u0431\u043A\u043E\u0439 (\u0441\u043A\u0440\u044B\u0442\u044B\u0439), \u0430 \u0441\u0430\u043C\u0430\n         \u043E\u0448\u0438\u0431\u043A\u0430 \u043A\u043B\u0430\u0434\u0451\u0442\u0441\u044F \u0432 \u0442\u0443 \u0436\u0435 \u044F\u0447\u0435\u0439\u043A\u0443 \u0433\u0440\u0438\u0434\u0430: \u0432\u044B\u0441\u043E\u0442\u0430 \u0437\u043E\u043D\u044B \u0440\u0430\u0432\u043D\u0430 \u0431\u043E\u043B\u044C\u0448\u0435\u043C\u0443 \u0438\u0437\n         \u0434\u0432\u0443\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439 \u0438 \u043D\u0435 \u043C\u0435\u043D\u044F\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u0438\u0445 \u043F\u043E\u0434\u043C\u0435\u043D\u0435. \u0411\u0435\u0437 \u0440\u0435\u0437\u0435\u0440\u0432\u0430 \u2014 \u043A\u0430\u043A \u0431\u044B\u043B\u043E,\n         \u043E\u0434\u043D\u043E \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u0437\u0430 \u0440\u0430\u0437, \u0447\u0442\u043E\u0431\u044B \u043F\u043B\u043E\u0442\u043D\u044B\u0435 \u0444\u043E\u0440\u043C\u044B \u043D\u0435 \u043D\u0430\u0431\u0438\u0440\u0430\u043B\u0438 \u043B\u0438\u0448\u043D\u0438\u0439 \u0432\u043E\u0437\u0434\u0443\u0445. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"], dependencies: [{ kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "component", type: RtSkeletonWrapperComponent, selector: "rt-skeleton-wrapper", inputs: ["width", "height", "shape", "size", "radius", "animation", "isLoading"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconComponent,
-                        RtPopoverDirective,
-                        RtSkeletonWrapperComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], host: { class: BEM_BLOCK }, template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- \u0421 \u0440\u0435\u0437\u0435\u0440\u0432\u043E\u043C hint \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0432 \u043F\u043E\u0442\u043E\u043A\u0435 \u0434\u0430\u0436\u0435 \u043F\u043E\u0434 \u043E\u0448\u0438\u0431\u043A\u043E\u0439 (\u0441\u043A\u0440\u044B\u0442\u044B\u0439), \u0430 \u0441\u0430\u043C\u0430\n         \u043E\u0448\u0438\u0431\u043A\u0430 \u043A\u043B\u0430\u0434\u0451\u0442\u0441\u044F \u0432 \u0442\u0443 \u0436\u0435 \u044F\u0447\u0435\u0439\u043A\u0443 \u0433\u0440\u0438\u0434\u0430: \u0432\u044B\u0441\u043E\u0442\u0430 \u0437\u043E\u043D\u044B \u0440\u0430\u0432\u043D\u0430 \u0431\u043E\u043B\u044C\u0448\u0435\u043C\u0443 \u0438\u0437\n         \u0434\u0432\u0443\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439 \u0438 \u043D\u0435 \u043C\u0435\u043D\u044F\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u0438\u0445 \u043F\u043E\u0434\u043C\u0435\u043D\u0435. \u0411\u0435\u0437 \u0440\u0435\u0437\u0435\u0440\u0432\u0430 \u2014 \u043A\u0430\u043A \u0431\u044B\u043B\u043E,\n         \u043E\u0434\u043D\u043E \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u0437\u0430 \u0440\u0430\u0437, \u0447\u0442\u043E\u0431\u044B \u043F\u043B\u043E\u0442\u043D\u044B\u0435 \u0444\u043E\u0440\u043C\u044B \u043D\u0435 \u043D\u0430\u0431\u0438\u0440\u0430\u043B\u0438 \u043B\u0438\u0448\u043D\u0438\u0439 \u0432\u043E\u0437\u0434\u0443\u0445. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { projectedControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtFormControlBase), { isSignal: true }] }], projectedHint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtFieldHintDirective), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideRequiredMark: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMark", required: false }] }], reserveHintSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserveHintSpace", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtFieldComponent = class RtFieldComponent {
+	#autoId;
+	#failedValidator;
+	#defaultErrorText;
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.projectedControl = contentChild(RtFormControlBase, ...ngDevMode ? [{ debugName: "projectedControl" }] : /* istanbul ignore next */ []);
+		this.projectedHint = contentChild(RtFieldHintDirective, ...ngDevMode ? [{ debugName: "projectedHint" }] : /* istanbul ignore next */ []);
+		this.#autoId = nextAutoId();
+		this.controlId = computed(() => this.projectedControl()?.effectiveControlId() ?? this.#autoId, ...ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []);
+		this.isRequired = computed(() => this.projectedControl()?.required() ?? false, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+		this.showError = computed(() => !!this.projectedControl()?.invalid(), ...ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []);
+		this.#failedValidator = computed(() => {
+			const errs = this.projectedControl()?.errors() ?? null;
+			return errs ? Object.keys(errs)[0] ?? "" : "";
+		}, ...ngDevMode ? [{ debugName: "#failedValidator" }] : /* istanbul ignore next */ []);
+		this.#defaultErrorText = rtKitLabel(computed(() => RT_FIELD_DEFAULT_ERROR_KEYS[this.#failedValidator()] ?? ""));
+		this.errorText = computed(() => {
+			const validator = this.#failedValidator();
+			if (!validator) return "";
+			const own = this.errors()[validator];
+			if (own) return own;
+			return RT_FIELD_DEFAULT_ERROR_KEYS[validator] ? this.#defaultErrorText() : "";
+		}, ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
+		this.emptyValue = "—";
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.help = input("", ...ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []);
+		this.readonly = input(false, {
+			...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.required = input(false, {
+			...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.hideRequiredMark = input(false, {
+			...ngDevMode ? { debugName: "hideRequiredMark" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.reserveHintSpace = input(false, {
+			...ngDevMode ? { debugName: "reserveHintSpace" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.errors = input({}, ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			this.projectedControl()?.setReadonly(this.readonly());
+		});
+		effect(() => {
+			this.projectedControl()?.setRequired(this.required());
+		});
+	}
+	ngAfterContentInit() {
+		const ctrl = this.projectedControl();
+		if (ctrl && ctrl.effectiveControlId() === null) ctrl.assignControlId(this.#autoId);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtFieldComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtFieldComponent,
+			isStandalone: true,
+			selector: "rt-field",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				help: {
+					classPropertyName: "help",
+					publicName: "help",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readonly: {
+					classPropertyName: "readonly",
+					publicName: "readonly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideRequiredMark: {
+					classPropertyName: "hideRequiredMark",
+					publicName: "hideRequiredMark",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				reserveHintSpace: {
+					classPropertyName: "reserveHintSpace",
+					publicName: "reserveHintSpace",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errors: {
+					classPropertyName: "errors",
+					publicName: "errors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { classAttribute: "rt-field" },
+			queries: [{
+				propertyName: "projectedControl",
+				first: true,
+				predicate: RtFormControlBase,
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "projectedHint",
+				first: true,
+				predicate: RtFieldHintDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "component",
+					type: RtSkeletonWrapperComponent,
+					selector: "rt-skeleton-wrapper",
+					inputs: [
+						"width",
+						"height",
+						"shape",
+						"size",
+						"radius",
+						"animation",
+						"isLoading"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-field",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				RtPopoverDirective,
+				RtSkeletonWrapperComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		projectedControl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtFormControlBase), { isSignal: true }]
+		}],
+		projectedHint: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtFieldHintDirective), { isSignal: true }]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		help: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "help",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		hideRequiredMark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideRequiredMark",
+				required: false
+			}]
+		}],
+		reserveHintSpace: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reserveHintSpace",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}]
+	}
+});
 export { RT_FIELD_DEFAULT_ERROR_KEYS, RT_FIELD_EMPTY_VALUE, RtFieldComponent, RtFieldHintDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-field.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-field.mjs.map