@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

package/fesm2022/rt-tools-ui-kit-v2-form-control.mjs

@@ -0,0 +1,220 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, computed, input, booleanAttribute, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Validators, NgControl } from '@angular/forms';
+
+/** Состояние поля, которому форма ещё ничего не сказала. */
+const PRISTINE_STATE = { invalid: false, errors: null, required: false, interacted: false };
+/** Рассылает ли контрол своё состояние. Переходник сигнальной формы — не рассылает. */
+function emitsEvents(control) {
+    return typeof control.events?.pipe === 'function';
+}
+/** Состояние формы, снятое с контрола любого рода. */
+function stateOf(control) {
+    return {
+        invalid: !!control.invalid && (control.touched || control.dirty),
+        errors: control.errors,
+        required: control.hasValidator(Validators.required),
+        interacted: control.touched || control.dirty,
+    };
+}
+class RtFormControlBase {
+    #ngControl;
+    #destroyRef;
+    #onChange;
+    #onTouched;
+    // Состояние, которым управляет родительский rt-field (через публичные сеттеры):
+    // авто-id для связки label[for], read-only режим, зеркало ошибок/required.
+    #controlIdAssigned;
+    #readonlyAssigned;
+    /**
+     * Обязательность, объявленная полем. Шаблонная форма валидатора на контрол не кладёт, и без
+     * этого признака её обязательное поле не получало бы ни звёздочки, ни ошибки.
+     */
+    #requiredAssigned;
+    /** Состояние, разосланное прежней привязкой: её контрол сигналами не читается. */
+    #pushedState;
+    /**
+     * Контрол сигнальной привязки. Его состояние не рассылается, а читается геттерами, и
+     * внутри геттеров стоят вызовы сигналов формы — то есть из `computed` оно реактивно.
+     */
+    #signalControl;
+    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+    #disabledByForm;
+    /** Состояние формы: у сигнальной привязки читается, у прежней берётся разосланное. */
+    #state;
+    /**
+     * Пустое поле, обязательное по слову rt-field, которого уже коснулись. Валидатор формы здесь
+     * не нужен: его ошибку контрол и так получает от формы.
+     */
+    #missingRequired;
+    constructor() {
+        this.#ngControl = inject(NgControl, { self: true, optional: true });
+        this.#destroyRef = inject(DestroyRef);
+        this.#onChange = () => undefined;
+        this.#onTouched = () => undefined;
+        // Состояние, которым управляет родительский rt-field (через публичные сеттеры):
+        // авто-id для связки label[for], read-only режим, зеркало ошибок/required.
+        this.#controlIdAssigned = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#controlIdAssigned" }] : /* istanbul ignore next */ []));
+        this.#readonlyAssigned = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#readonlyAssigned" }] : /* istanbul ignore next */ []));
+        /**
+         * Обязательность, объявленная полем. Шаблонная форма валидатора на контрол не кладёт, и без
+         * этого признака её обязательное поле не получало бы ни звёздочки, ни ошибки.
+         */
+        this.#requiredAssigned = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#requiredAssigned" }] : /* istanbul ignore next */ []));
+        /** Состояние, разосланное прежней привязкой: её контрол сигналами не читается. */
+        this.#pushedState = signal(PRISTINE_STATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#pushedState" }] : /* istanbul ignore next */ []));
+        /**
+         * Контрол сигнальной привязки. Его состояние не рассылается, а читается геттерами, и
+         * внутри геттеров стоят вызовы сигналов формы — то есть из `computed` оно реактивно.
+         */
+        this.#signalControl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#signalControl" }] : /* istanbul ignore next */ []));
+        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
+        /**
+         * Отключение: вход и форма — два независимых источника, поле отключено,
+         * если так сказал любой из них. Сводить их в один signal нельзя: форма
+         * зовёт `setDisabledState` при связывании контрола, то есть раньше, чем
+         * поле впервые обновит своё вью, и мирроринг входа затирал бы её слово —
+         * контрол, созданный отключённым, оказывался бы редактируемым.
+         */
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Состояние формы: у сигнальной привязки читается, у прежней берётся разосланное. */
+        this.#state = computed(() => {
+            const control = this.#signalControl();
+            return control === null ? this.#pushedState() : stateOf(control);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#state" }] : /* istanbul ignore next */ []));
+        /**
+         * Пустое поле, обязательное по слову rt-field, которого уже коснулись. Валидатор формы здесь
+         * не нужен: его ошибку контрол и так получает от формы.
+         */
+        this.#missingRequired = computed(() => this.#requiredAssigned() && !this.#state().required && this.#state().interacted && !this.hasValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#missingRequired" }] : /* istanbul ignore next */ []));
+        this.isInvalid = computed(() => this.#state().invalid || this.#missingRequired(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+        /** Видимость кнопки очистки: включена, есть значение, поле активно. */
+        this.showClearButton = computed(() => this.clearable() && this.hasValue() && !this.isDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.controlId = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Видимая resting-рамка контрола. По умолчанию `true` — рамка видна на обеих
+         * темах. `false` снимает только resting-рамку; focus/invalid состояния свою
+         * рамку показывают всё равно, read-only остаётся плоским.
+         */
+        this.bordered = input(true, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Итоговый id поля: явный input важнее авто-id, назначенного rt-field. */
+        this.effectiveControlId = computed(() => this.controlId() ?? this.#controlIdAssigned(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveControlId" }] : /* istanbul ignore next */ []));
+        /** Read-only режим (плоский текст вместо контрола); включается rt-field'ом. */
+        this.isReadonly = this.#readonlyAssigned.asReadonly();
+        /** Публичный invalid для rt-field (touched/dirty учтён в состоянии). */
+        this.invalid = computed(() => this.isInvalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /** Текущие ошибки связанного контрола — источник текста ошибки в rt-field. */
+        this.errors = computed(() => this.#state().errors ?? (this.#missingRequired() ? { required: true } : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Обязателен ли контрол — по валидатору формы или по слову rt-field. Для авто-«*». */
+        this.required = computed(() => this.#state().required || this.#requiredAssigned(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.value = signal(this.getEmptyValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        // Self-inject NgControl + ручная привязка valueAccessor: доступ к
+        // control.invalid/touched без NG_VALUE_ACCESSOR provider'а (тот
+        // спровоцировал бы NG0200 cycle при self-reference).
+        if (this.#ngControl !== null) {
+            this.#ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        const control = this.#ngControl?.control ?? null;
+        if (control === null) {
+            return;
+        }
+        // Контрол, который состояния не рассылает, — переходник сигнальной формы: событий у
+        // него нет вовсе, и подписка на них роняла поле из запуска вместе со всем поддеревом
+        // разметки. Состояние у него читается геттерами, поэтому берётся вычислением.
+        if (!emitsEvents(control)) {
+            this.#signalControl.set(control);
+            return;
+        }
+        // Авто-подсветка invalid + зеркало ошибок/required для rt-field.
+        this.#pushedState.set(stateOf(control));
+        control.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#pushedState.set(stateOf(control));
+        });
+    }
+    writeValue(value) {
+        this.value.set(value ?? this.getEmptyValue());
+    }
+    registerOnChange(fn) {
+        this.#onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.#onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.#disabledByForm.set(isDisabled);
+    }
+    /** Назначить авто-id (rt-field), когда у контрола нет явного controlId. */
+    assignControlId(id) {
+        this.#controlIdAssigned.set(id);
+    }
+    /** Включить/выключить read-only режим — вызывает родительский rt-field. */
+    setReadonly(value) {
+        this.#readonlyAssigned.set(value);
+    }
+    /** Объявить контрол обязательным — вызывает родительский rt-field. */
+    setRequired(value) {
+        this.#requiredAssigned.set(value);
+    }
+    /** Очистка значения по кнопке-крестику + возврат фокуса в поле. */
+    clear(event) {
+        event?.stopPropagation();
+        if (this.isDisabled()) {
+            return;
+        }
+        this.clearValue();
+        this.#onChange(this.value());
+        this.#onTouched();
+        this.focusAfterClear();
+    }
+    /** Сбрасывает значение к пустому. Поля с display-сигналом расширяют. */
+    clearValue() {
+        this.value.set(this.getEmptyValue());
+    }
+    /** Прокидывает change наружу — для обработчиков пользовательского ввода. */
+    emitChange(value) {
+        this.#onChange(value);
+    }
+    /** Помечает контрол touched — для blur/close-обработчиков. */
+    markTouched() {
+        this.#onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtFormControlBase, isStandalone: true, inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFormControlBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtFormControlBase };
+//# sourceMappingURL=rt-tools-ui-kit-v2-form-control.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-form-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-form-control.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/form-control/rt-form-control.base.ts","../../../projects/ui-kit-v2/src/lib/components/form-control/rt-tools-ui-kit-v2-form-control.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    DestroyRef,\n    Directive,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    OnInit,\n    Signal,\n    signal,\n    WritableSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors, Validators } from '@angular/forms';\n\nimport { IRtInput } from '@rt-tools/ui-kit-v2/core';\n\n/**\n * Базовый класс input-семейства common/ui. Владеет единым CVA-ядром:\n * - self-injected `NgControl` + ручная привязка `valueAccessor` (без\n *   `NG_VALUE_ACCESSOR` provider — иначе NG0200 cycle при self-reference),\n *   что даёт доступ к `control.invalid/touched` для авто-подсветки ошибки;\n * - сигнал значения `value`, состояния `isDisabled`/`isInvalid` (отключение\n *   складывается из входа `disabled` и слова формы — см. `isDisabled`);\n * - общие инпуты `size`/`disabled`/`controlId`/`ariaLabel`/`clearable`;\n * - оркестрацию очистки (`clear`) через абстрактные хуки конкретного поля.\n *\n * Конкретные поля реализуют `getEmptyValue`/`hasValue`/`focusAfterClear`. Поля\n * с отдельным display-состоянием (autocomplete, input-number) дополнительно\n * переопределяют `writeValue`/`clearValue`, синхронизируя свой display-сигнал.\n */\n/**\n * Состояние формы, каким его видит поле: негодность, ошибки и обязательность.\n *\n * Собрано одной записью затем, что источников у него два и говорят они по-разному. Прежняя\n * привязка рассылает состояние событиями контрола, сигнальная — не рассылает вовсе и отдаёт\n * его чтениями своего переходника. Порознь эти два пути дали бы полю два набора сигналов, и\n * обёртке пришлось бы знать, какой из них живой.\n */\ninterface IControlState {\n    invalid: boolean;\n    errors: ValidationErrors | null;\n    required: boolean;\n    /** Касались ли контрола или правили его: до этого пустое обязательное поле не краснеет. */\n    interacted: boolean;\n}\n\n/** Состояние поля, которому форма ещё ничего не сказала. */\nconst PRISTINE_STATE: IControlState = { invalid: false, errors: null, required: false, interacted: false };\n\n/** Рассылает ли контрол своё состояние. Переходник сигнальной формы — не рассылает. */\nfunction emitsEvents(control: AbstractControl): boolean {\n    return typeof (control.events as { pipe?: unknown } | undefined)?.pipe === 'function';\n}\n\n/** Состояние формы, снятое с контрола любого рода. */\nfunction stateOf(control: AbstractControl): IControlState {\n    return {\n        invalid: !!control.invalid && (control.touched || control.dirty),\n        errors: control.errors,\n        required: control.hasValidator(Validators.required),\n        interacted: control.touched || control.dirty,\n    };\n}\n\n@Directive()\nexport abstract class RtFormControlBase<TValue> implements ControlValueAccessor, OnInit {\n    readonly #ngControl: NgControl | null = inject(NgControl, { self: true, optional: true });\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    #onChange: (value: TValue) => void = (): void => undefined;\n    #onTouched: () => void = (): void => undefined;\n\n    // Состояние, которым управляет родительский rt-field (через публичные сеттеры):\n    // авто-id для связки label[for], read-only режим, зеркало ошибок/required.\n    readonly #controlIdAssigned: WritableSignal<string | null> = signal<string | null>(null);\n    readonly #readonlyAssigned: WritableSignal<boolean> = signal<boolean>(false);\n    /**\n     * Обязательность, объявленная полем. Шаблонная форма валидатора на контрол не кладёт, и без\n     * этого признака её обязательное поле не получало бы ни звёздочки, ни ошибки.\n     */\n    readonly #requiredAssigned: WritableSignal<boolean> = signal<boolean>(false);\n    /** Состояние, разосланное прежней привязкой: её контрол сигналами не читается. */\n    readonly #pushedState: WritableSignal<IControlState> = signal<IControlState>(PRISTINE_STATE);\n    /**\n     * Контрол сигнальной привязки. Его состояние не рассылается, а читается геттерами, и\n     * внутри геттеров стоят вызовы сигналов формы — то есть из `computed` оно реактивно.\n     */\n    readonly #signalControl: WritableSignal<AbstractControl | null> = signal<AbstractControl | null>(null);\n    /** Отключение, назначенное формой через CVA (`setDisabledState`). */\n    readonly #disabledByForm: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly value: WritableSignal<TValue>;\n    /**\n     * Отключение: вход и форма — два независимых источника, поле отключено,\n     * если так сказал любой из них. Сводить их в один signal нельзя: форма\n     * зовёт `setDisabledState` при связывании контрола, то есть раньше, чем\n     * поле впервые обновит своё вью, и мирроринг входа затирал бы её слово —\n     * контрол, созданный отключённым, оказывался бы редактируемым.\n     */\n    protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() || this.#disabledByForm());\n    /** Состояние формы: у сигнальной привязки читается, у прежней берётся разосланное. */\n    readonly #state: Signal<IControlState> = computed((): IControlState => {\n        const control: AbstractControl | null = this.#signalControl();\n        return control === null ? this.#pushedState() : stateOf(control);\n    });\n\n    /**\n     * Пустое поле, обязательное по слову rt-field, которого уже коснулись. Валидатор формы здесь\n     * не нужен: его ошибку контрол и так получает от формы.\n     */\n    readonly #missingRequired: Signal<boolean> = computed(\n        (): boolean => this.#requiredAssigned() && !this.#state().required && this.#state().interacted && !this.hasValue()\n    );\n\n    protected readonly isInvalid: Signal<boolean> = computed((): boolean => this.#state().invalid || this.#missingRequired());\n\n    /** Видимость кнопки очистки: включена, есть значение, поле активно. */\n    protected readonly showClearButton: Signal<boolean> = computed(\n        (): boolean => this.clearable() && this.hasValue() && !this.isDisabled()\n    );\n\n    /** Есть ли в поле значение — гейт видимости крестика. */\n    protected abstract readonly hasValue: Signal<boolean>;\n\n    public readonly size: InputSignal<IRtInput.Size> = input<IRtInput.Size>('md');\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n    public readonly controlId: InputSignal<string | null> = input<string | null>(null);\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n    public readonly clearable: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(true, {\n        transform: booleanAttribute,\n    });\n\n    /**\n     * Видимая resting-рамка контрола. По умолчанию `true` — рамка видна на обеих\n     * темах. `false` снимает только resting-рамку; focus/invalid состояния свою\n     * рамку показывают всё равно, read-only остаётся плоским.\n     */\n    public readonly bordered: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(true, {\n        transform: booleanAttribute,\n    });\n\n    /** Итоговый id поля: явный input важнее авто-id, назначенного rt-field. */\n    public readonly effectiveControlId: Signal<string | null> = computed(\n        (): string | null => this.controlId() ?? this.#controlIdAssigned()\n    );\n\n    /** Read-only режим (плоский текст вместо контрола); включается rt-field'ом. */\n    public readonly isReadonly: Signal<boolean> = this.#readonlyAssigned.asReadonly();\n\n    /** Публичный invalid для rt-field (touched/dirty учтён в состоянии). */\n    public readonly invalid: Signal<boolean> = computed((): boolean => this.isInvalid());\n\n    /** Текущие ошибки связанного контрола — источник текста ошибки в rt-field. */\n    public readonly errors: Signal<ValidationErrors | null> = computed(\n        (): ValidationErrors | null => this.#state().errors ?? (this.#missingRequired() ? { required: true } : null)\n    );\n\n    /** Обязателен ли контрол — по валидатору формы или по слову rt-field. Для авто-«*». */\n    public readonly required: Signal<boolean> = computed((): boolean => this.#state().required || this.#requiredAssigned());\n\n    /** Текст read-only представления. Реализуется конкретным контролом. */\n    public abstract readonly displayText: Signal<string>;\n\n    constructor() {\n        this.value = signal<TValue>(this.getEmptyValue());\n        // Self-inject NgControl + ручная привязка valueAccessor: доступ к\n        // control.invalid/touched без NG_VALUE_ACCESSOR provider'а (тот\n        // спровоцировал бы NG0200 cycle при self-reference).\n        if (this.#ngControl !== null) {\n            this.#ngControl.valueAccessor = this;\n        }\n    }\n\n    public ngOnInit(): void {\n        const control: AbstractControl | null = this.#ngControl?.control ?? null;\n        if (control === null) {\n            return;\n        }\n        // Контрол, который состояния не рассылает, — переходник сигнальной формы: событий у\n        // него нет вовсе, и подписка на них роняла поле из запуска вместе со всем поддеревом\n        // разметки. Состояние у него читается геттерами, поэтому берётся вычислением.\n        if (!emitsEvents(control)) {\n            this.#signalControl.set(control);\n            return;\n        }\n        // Авто-подсветка invalid + зеркало ошибок/required для rt-field.\n        this.#pushedState.set(stateOf(control));\n        control.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((): void => {\n            this.#pushedState.set(stateOf(control));\n        });\n    }\n\n    public writeValue(value: TValue | null): void {\n        this.value.set(value ?? this.getEmptyValue());\n    }\n\n    public registerOnChange(fn: (value: TValue) => void): void {\n        this.#onChange = fn;\n    }\n\n    public registerOnTouched(fn: () => void): void {\n        this.#onTouched = fn;\n    }\n\n    public setDisabledState(isDisabled: boolean): void {\n        this.#disabledByForm.set(isDisabled);\n    }\n\n    /** Назначить авто-id (rt-field), когда у контрола нет явного controlId. */\n    public assignControlId(id: string): void {\n        this.#controlIdAssigned.set(id);\n    }\n\n    /** Включить/выключить read-only режим — вызывает родительский rt-field. */\n    public setReadonly(value: boolean): void {\n        this.#readonlyAssigned.set(value);\n    }\n\n    /** Объявить контрол обязательным — вызывает родительский rt-field. */\n    public setRequired(value: boolean): void {\n        this.#requiredAssigned.set(value);\n    }\n\n    /** Очистка значения по кнопке-крестику + возврат фокуса в поле. */\n    protected clear(event?: Event): void {\n        event?.stopPropagation();\n        if (this.isDisabled()) {\n            return;\n        }\n        this.clearValue();\n        this.#onChange(this.value());\n        this.#onTouched();\n        this.focusAfterClear();\n    }\n\n    /** Сбрасывает значение к пустому. Поля с display-сигналом расширяют. */\n    protected clearValue(): void {\n        this.value.set(this.getEmptyValue());\n    }\n\n    /** Прокидывает change наружу — для обработчиков пользовательского ввода. */\n    protected emitChange(value: TValue): void {\n        this.#onChange(value);\n    }\n\n    /** Помечает контрол touched — для blur/close-обработчиков. */\n    protected markTouched(): void {\n        this.#onTouched();\n    }\n\n    /** Пустое значение поля (тип-специфично: \"\", null, []). */\n    protected abstract getEmptyValue(): TValue;\n\n    /** Возврат фокуса после очистки (в input или на trigger-кнопку). */\n    protected abstract focusAfterClear(): void;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-header';
+/**
+ * Общий хедер приложения.
+ *
+ * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),
+ * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда
+ * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark
+ * выравнивается слева.
+ *
+ * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»
+ * (`showInvite`), слот колокольчика и профиль.
+ *
+ * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот
+ * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.
+ *
+ * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,
+ * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном
+ * страницы в dark).
+ */
+class RtHeaderComponent {
+    constructor() {
+        this.t = inject(RT_KIT_LABELS);
+        this.canGoBack = input(false, { ...(ngDevMode ? { debugName: "canGoBack" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */
+        this.showInvite = input(false, { ...(ngDevMode ? { debugName: "showInvite" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.backClick = output();
+        this.inviteClick = output();
+        this.profileClick = output();
+    }
+    onBackClick() {
+        this.backClick.emit();
+    }
+    onInviteClick() {
+        this.inviteClick.emit();
+    }
+    onProfileClick() {
+        this.profileClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtHeaderComponent, isStandalone: true, selector: "rt-header", inputs: { canGoBack: { classPropertyName: "canGoBack", publicName: "canGoBack", isSignal: true, isRequired: false, transformFunction: null }, showInvite: { classPropertyName: "showInvite", publicName: "showInvite", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick", inviteClick: "inviteClick", profileClick: "profileClick" }, host: { classAttribute: "rt-header" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtLogoComponent, selector: "rt-logo", inputs: ["variant", "height", "aspect", "ariaLabel"] }, { 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: RtHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtLogoComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"] }]
+        }], propDecorators: { canGoBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGoBack", required: false }] }], showInvite: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInvite", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], inviteClick: [{ type: i0.Output, args: ["inviteClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtHeaderComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-header.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-header.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.ts","../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.html","../../../projects/ui-kit-v2/src/lib/components/header/rt-tools-ui-kit-v2-header.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    input,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-header';\n\n/**\n * Общий хедер приложения.\n *\n * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),\n * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда\n * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark\n * выравнивается слева.\n *\n * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»\n * (`showInvite`), слот колокольчика и профиль.\n *\n * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот\n * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.\n *\n * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,\n * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном\n * страницы в dark).\n */\n@Component({\n    selector: 'rt-header',\n    templateUrl: './rt-header.component.html',\n    styleUrls: ['./rt-header.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtLogoComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtHeaderComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    public readonly canGoBack: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */\n    public readonly showInvite: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly backClick: OutputEmitterRef<void> = output<void>();\n    public readonly inviteClick: OutputEmitterRef<void> = output<void>();\n    public readonly profileClick: OutputEmitterRef<void> = output<void>();\n\n    protected onBackClick(): void {\n        this.backClick.emit();\n    }\n\n    protected onInviteClick(): void {\n        this.inviteClick.emit();\n    }\n\n    protected onProfileClick(): void {\n        this.profileClick.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,SAAS,GAAW,WAAW;AAErC;;;;;;;;;;;;;;;;;AAiBG;MAoBU,iBAAiB,CAAA;AAnB9B,IAAA,WAAA,GAAA;AAoBuB,QAAA,IAAA,CAAA,CAAC,GAA2B,MAAM,CAAC,aAAa,CAAC;QAEpD,IAAA,CAAA,SAAS,GAAoD,KAAK,CAAwB,KAAK,iFAC3G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,UAAU,GAAwD,KAAK,CAA4B,KAAK,kFACpH,SAAS,EAAE,gBAAgB,EAAA,CAC7B;QAEc,IAAA,CAAA,SAAS,GAA2B,MAAM,EAAQ;QAClD,IAAA,CAAA,WAAW,GAA2B,MAAM,EAAQ;QACpD,IAAA,CAAA,YAAY,GAA2B,MAAM,EAAQ;AAaxE,IAAA;IAXa,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;IACzB;IAEU,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;IAC3B;IAEU,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC5B;8GA1BS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,ujBC5D9B,q6CA6CA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADIQ,gBAAA,qBAAqB,8PACrB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;+BACI,WAAW,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,qBAAqB;wBACrB,eAAe;wBACf,cAAc;wBACd,aAAa;wBACb,YAAY;AACf,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,q6CAAA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA;;;AE1DL;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-icon-button.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { computed, input, booleanAttribute, numberAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { RtRippleDirective } from '@rt-tools/ui-kit-v2/ripple';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+
+const BEM_BLOCK = 'rt-icon-button';
+/**
+ * Универсальная icon-only кнопка кита.
+ *
+ * Рендерит свой собственный `<button type="...">` внутри template (НЕ host-button).
+ * Все цвета и размеры — через семантические `--rt-*` токены; геометрия квадрата
+ * берётся из `--rt-icon-button-size`, а без него — из шага `size`. Свойство, заданное на теге
+ * `<rt-icon-button>` или выше, доходит до кнопки; так же и `--rt-icon-button-bg`.
+ *
+ * Loading state — заменяет иконку на `<rt-icon name="spinner">` и блокирует
+ * клики (`button[disabled]`). Active state управляет `aria-pressed` (для toggle-кнопок).
+ * Indicator — небольшой dot top-right через BEM-элемент `__indicator`.
+ *
+ * BEM-разметка — через `rtBlock="rt-icon-button"` + `[rtMod]` объект; камелкейс
+ * модификаторов автоматически конвертируется директивой в kebab-case
+ * (`hasIndicator` → `rt-icon-button--has-indicator`).
+ */
+class RtIconButtonComponent {
+    constructor() {
+        /**
+         * Размер дочерней `<rt-icon>`. По умолчанию маппится 1-к-1 от размера кнопки,
+         * но потребитель может задать свой: у крупной кнопки-действия (плавающая
+         * кнопка чата) иконка во весь диаметр выглядит тяжеловесно, а сама кнопка
+         * должна остаться большой — в неё целятся пальцем.
+         */
+        this.resolvedIconSize = computed(() => {
+            const map = {
+                '2xs': 'sm',
+                xs: 'sm',
+                sm: 'sm',
+                md: 'md',
+                lg: 'lg',
+                xl: 'xl',
+                '2xl': '2xl',
+            };
+            return this.iconSize() ?? map[this.size()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
+        /** Кнопка отключена, если установлен disabled ИЛИ loading. */
+        this.isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * BEM-модификаторы для `[rtMod]`. Собираем в .ts (а не в шаблоне), потому что
+         * Angular template-parser не поддерживает computed property keys в inline-объектах.
+         * camelCase ключи `hasIndicator` директива автоматически конвертирует в `has-indicator`.
+         */
+        this.bemMods = computed(() => ({
+            [this.variant()]: true,
+            [this.size()]: true,
+            loading: this.loading(),
+            active: this.active(),
+            hasIndicator: this.indicator(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bemMods" }] : /* istanbul ignore next */ []));
+        /**
+         * Имя иконки в наборе кита. Нужно оно или `glyph`; когда переданы оба, побеждает имя. Нет ни
+         * того ни другого — значок кит не рисует, и кнопка показывает вложенное содержимое: свой
+         * рисунок приложения встаёт в кнопку с её размером, формой и состояниями.
+         */
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Имя Material вместо имени кита — рисуется так же, как вход `glyph` у `rt-icon`. */
+        this.glyph = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /** Доступное имя для screen-reader'ов — обязательно (icon-only кнопка). */
+        this.ariaLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Семантическая палитра. */
+        this.variant = input('ghost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Цвет самой иконки. Default `current` — иконка наследует цвет текста кнопки
+         * (поведение по умолчанию). Явное значение нужно, когда иконка должна
+         * отличаться от текста кнопки — например крестик-очистка внутри поля,
+         * который должен совпадать по цвету с иконками-аффордансами самого поля.
+         */
+        this.iconColor = input('current', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+        /**
+         * Залитый рисунок значка вместо контурного — как `fill` у `rt-icon`. Рисует его материальный
+         * набор; значок своего набора один и от признака не меняется.
+         */
+        this.iconFill = input(false, { ...(ngDevMode ? { debugName: "iconFill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Размер квадрата. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Размер иконки; пусто — берётся от размера кнопки. */
+        this.iconSize = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        /** HTML-type для нативного `<button>`. */
+        this.type = input('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Текст styled-tooltip'а (`rtTooltip`), показывается на hover/focus. Пустая
+         * строка → tooltip выключен. Для icon-only кнопок обычно дублирует `ariaLabel`.
+         */
+        this.tooltip = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        /**
+         * Tabindex внутренней `<button>`. Default `0` (в обычном таб-порядке).
+         * Значение `-1` исключает кнопку из таб-навигации, оставляя клик мышью —
+         * нужно для вспомогательных аффордансов вроде крестика-очистки внутри поля.
+         */
+        this.tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Состояние загрузки: показывает spinner вместо иконки + disabled. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Нативное отключение кнопки. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Toggle-состояние — превращается в `aria-pressed="true"`. */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Бейдж-индикатор (dot top-right через BEM-модификатор). */
+        this.indicator = input(false, { ...(ngDevMode ? { debugName: "indicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Эмиттит MouseEvent при клике (только когда не disabled и не loading). */
+        this.clicked = output();
+    }
+    onClick(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtIconButtonComponent, isStandalone: true, selector: "rt-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconFill: { classPropertyName: "iconFill", publicName: "iconFill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "rt-icon-button" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    rtRipple\n    [rippleDisabled]=\"isDisabled() || loading()\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else if (icon() || glyph()) {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [glyph]=\"glyph()\" [size]=\"resolvedIconSize()\" [fill]=\"iconFill()\" />\n    } @else {\n        <span rtElem=\"content\" qa-dataid=\"icon-button-content\"><ng-content /></span>\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-icon-button{display:inline-flex;--rt-icon-button-color: var(--rt-color-text-primary)}rt-icon-button .rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md);--rt-icon-button-indicator-radius: var(--rt-radius-full);--rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-icon-button-shadow: var(--rt-shadow-none);--rt-icon-button-shadow-hover: var(--rt-icon-button-shadow);--rt-icon-button-color-hover: var(--rt-icon-button-color);--rt-icon-button-transition-duration: var(--rt-duration-fast);--rt-icon-button-bg-variant: transparent;--rt-icon-button-size-step: var(--rt-control-height-md);position:relative;display:inline-flex;width:var(--rt-icon-button-size, var(--rt-icon-button-size-step));height:var(--rt-icon-button-size, var(--rt-icon-button-size-step));align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-icon-button-radius);background-color:var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));box-shadow:var(--rt-icon-button-shadow);color:var(--rt-icon-button-color);cursor:pointer;transition:background-color var(--rt-icon-button-transition-duration) ease,box-shadow var(--rt-icon-button-transition-duration) ease}rt-icon-button .rt-icon-button--2xs{--rt-icon-button-size-step: var(--rt-size-5)}rt-icon-button .rt-icon-button--xs{--rt-icon-button-size-step: 22px}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size-step: var(--rt-control-height-sm)}rt-icon-button .rt-icon-button--md{--rt-icon-button-size-step: var(--rt-control-height-md)}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size-step: var(--rt-control-height-lg)}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size-step: var(--rt-control-height-xl)}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size-step: var(--rt-control-height-2xl)}rt-icon-button .rt-icon-button:hover:not(:disabled){box-shadow:var(--rt-icon-button-shadow-hover)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));color:var(--rt-icon-button-color-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{--rt-icon-button-bg-variant: var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover))}rt-icon-button .rt-icon-button--secondary{--rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{background-color:color-mix(in srgb,var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),transparent);cursor:not-allowed;opacity:var(--rt-icon-button-disabled-opacity)}rt-icon-button .rt-icon-button:disabled .rt-icon svg{color:var(--rt-icon-button-disabled-color)}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-icon-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__content{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-icon-button-indicator-radius);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}rt-icon-button[data-rt-radius=none]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-none)}rt-icon-button[data-rt-radius=xs]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xs)}rt-icon-button[data-rt-radius=sm]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-sm)}rt-icon-button[data-rt-radius=ms]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-ms)}rt-icon-button[data-rt-radius=md]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md)}rt-icon-button[data-rt-radius=lg]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-lg)}rt-icon-button[data-rt-radius=xl]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xl)}rt-icon-button[data-rt-radius=\"2xl\"]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-2xl)}rt-icon-button[data-rt-radius=full]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-full)}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtRippleDirective, selector: "[rtRipple]", inputs: ["rippleDisabled"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { 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: RtIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        RtRippleDirective,
+                        RtTooltipDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    rtRipple\n    [rippleDisabled]=\"isDisabled() || loading()\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else if (icon() || glyph()) {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [glyph]=\"glyph()\" [size]=\"resolvedIconSize()\" [fill]=\"iconFill()\" />\n    } @else {\n        <span rtElem=\"content\" qa-dataid=\"icon-button-content\"><ng-content /></span>\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-icon-button{display:inline-flex;--rt-icon-button-color: var(--rt-color-text-primary)}rt-icon-button .rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md);--rt-icon-button-indicator-radius: var(--rt-radius-full);--rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-icon-button-shadow: var(--rt-shadow-none);--rt-icon-button-shadow-hover: var(--rt-icon-button-shadow);--rt-icon-button-color-hover: var(--rt-icon-button-color);--rt-icon-button-transition-duration: var(--rt-duration-fast);--rt-icon-button-bg-variant: transparent;--rt-icon-button-size-step: var(--rt-control-height-md);position:relative;display:inline-flex;width:var(--rt-icon-button-size, var(--rt-icon-button-size-step));height:var(--rt-icon-button-size, var(--rt-icon-button-size-step));align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-icon-button-radius);background-color:var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));box-shadow:var(--rt-icon-button-shadow);color:var(--rt-icon-button-color);cursor:pointer;transition:background-color var(--rt-icon-button-transition-duration) ease,box-shadow var(--rt-icon-button-transition-duration) ease}rt-icon-button .rt-icon-button--2xs{--rt-icon-button-size-step: var(--rt-size-5)}rt-icon-button .rt-icon-button--xs{--rt-icon-button-size-step: 22px}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size-step: var(--rt-control-height-sm)}rt-icon-button .rt-icon-button--md{--rt-icon-button-size-step: var(--rt-control-height-md)}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size-step: var(--rt-control-height-lg)}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size-step: var(--rt-control-height-xl)}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size-step: var(--rt-control-height-2xl)}rt-icon-button .rt-icon-button:hover:not(:disabled){box-shadow:var(--rt-icon-button-shadow-hover)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));color:var(--rt-icon-button-color-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{--rt-icon-button-bg-variant: var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover))}rt-icon-button .rt-icon-button--secondary{--rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{background-color:color-mix(in srgb,var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),transparent);cursor:not-allowed;opacity:var(--rt-icon-button-disabled-opacity)}rt-icon-button .rt-icon-button:disabled .rt-icon svg{color:var(--rt-icon-button-disabled-color)}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-icon-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__content{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-icon-button-indicator-radius);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}rt-icon-button[data-rt-radius=none]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-none)}rt-icon-button[data-rt-radius=xs]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xs)}rt-icon-button[data-rt-radius=sm]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-sm)}rt-icon-button[data-rt-radius=ms]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-ms)}rt-icon-button[data-rt-radius=md]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md)}rt-icon-button[data-rt-radius=lg]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-lg)}rt-icon-button[data-rt-radius=xl]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xl)}rt-icon-button[data-rt-radius=\"2xl\"]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-2xl)}rt-icon-button[data-rt-radius=full]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-full)}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], iconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFill", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+/**
+ * Модель `<rt-icon-button>`: один корневой неймспейс с префиксом `I`.
+ * Внутри — литеральные union-типы для variant / size / type, чтобы:
+ *  - использовать как контракт `input()` сигналов компонента;
+ *  - переиспользовать в `argTypes` Storybook.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtIconButtonComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-icon-button.mjs.map