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

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

@@ -0,0 +1,174 @@
+import * as i0 from '@angular/core';
+import { booleanAttribute, inject, Injector, DestroyRef, signal, computed, input, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject, distinctUntilChanged, switchMap, EMPTY } from 'rxjs';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-radio-button';
+/** Вход выбранности: не заданный вход — `null`, и тогда выбранность решает форма. */
+function checkedAttribute(value) {
+    return value === null || value === undefined ? null : booleanAttribute(value);
+}
+/**
+ * Радиокнопка: `role="radio"` с `aria-checked` и `aria-disabled`, выбор нажатием, пробелом и Enter.
+ *
+ * Выбор приходит двумя путями. Форма пишет модель через `ControlValueAccessor`, и радиокнопка
+ * выбрана, когда её значение — сама модель, а не равное ей. Без формы выбранность ставится входом
+ * `checked`, а выбор сообщается выходом `checkedChange`: так строку отмечает таблица. Заданный вход
+ * решает раньше модели формы.
+ *
+ * Нажатие на выбранную выбор не снимает — радиокнопку покидают только выбором другой. Каждое
+ * нажатие сообщается наружу `clickAction` и дальше обёртки не идёт: строка таблицы под кружком не
+ * открывается. Выбор клавишей наружу нажатием не сообщается.
+ *
+ * Отключение складывается из входа `disabled` и слова формы: форма зовёт `setDisabledState`
+ * раньше первого обновления вида, и один общий signal затёр бы её слово.
+ *
+ * Каждая радиокнопка — свой `ControlValueAccessor`, и значение, отданное одной, форма соседям на
+ * том же контроле не пишет: поэтому модель берётся и у самого контрола.
+ */
+class RtRadioButtonComponent {
+    #injector;
+    #destroyRef;
+    #onChange;
+    #onTouched;
+    /**
+     * Контрол, к которому радиокнопка привязана сейчас. Директива формы меняет его, не пересоздавая
+     * себя: `[formControl]` получил другой контрол, `[formGroup]` — другую группу. Слушать надо
+     * только нынешний — прежний, оставшись под подпиской, зажёг бы точку из мёртвой формы, и
+     * нажатие по ней уже не дошло бы до живой.
+     */
+    #controlSource;
+    /** Модель, записанная формой. */
+    #model;
+    /** Отключение, назначенное формой через `setDisabledState`. */
+    #disabledByForm;
+    constructor() {
+        this.#injector = inject(Injector);
+        this.#destroyRef = inject(DestroyRef);
+        this.#onChange = () => undefined;
+        this.#onTouched = () => undefined;
+        /**
+         * Контрол, к которому радиокнопка привязана сейчас. Директива формы меняет его, не пересоздавая
+         * себя: `[formControl]` получил другой контрол, `[formGroup]` — другую группу. Слушать надо
+         * только нынешний — прежний, оставшись под подпиской, зажёг бы точку из мёртвой формы, и
+         * нажатие по ней уже не дошло бы до живой.
+         */
+        this.#controlSource = new Subject();
+        /** Модель, записанная формой. */
+        this.#model = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#model" }] : /* istanbul ignore next */ []));
+        /** Отключение, назначенное формой через `setDisabledState`. */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
+        this.isChecked = computed(() => this.checked() ?? this.value() === this.#model(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Значение радиокнопки: выбрана та, чьё значение — модель формы. */
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Выбранность без формы; не заданный вход оставляет решение форме. */
+        this.checked = input(null, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: checkedAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Вид «карточка»: рамка, содержимое слева, кружок справа. */
+        this.card = input(false, { ...(ngDevMode ? { debugName: "card" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** Имя для вспомогательных средств, когда видимой подписи нет — кружок в строке таблицы. */
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Каждое нажатие указателем, сменило оно выбор или нет. */
+        this.clickAction = output();
+        /** Радиокнопка стала выбранной. */
+        this.checkedChange = output();
+        // Значение, отданное соседкой, форма этой радиокнопке не пишет — модель берётся у самого
+        // контрола, иначе точка осталась бы у двух сразу. Подписка идёт за сменой контрола и
+        // бросает прежний.
+        this.#controlSource
+            .pipe(distinctUntilChanged(), switchMap((control) => control?.valueChanges ?? EMPTY), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => this.#model.set(value));
+    }
+    writeValue(value) {
+        this.#model.set(value);
+    }
+    /**
+     * Директива формы зовёт это при каждой привязке к контролу — и первой, и после смены контрола,
+     * — уже поставив новый контрол себе. Здесь радиокнопка и узнаёт, кого слушать. Спросить
+     * директиву в конструкторе нельзя: она берёт радиокнопку своим accessor, и это круговая
+     * зависимость.
+     */
+    registerOnChange(fn) {
+        this.#onChange = fn;
+        this.#controlSource.next(this.#injector.get(NgControl, null, { self: true, optional: true })?.control ?? null);
+    }
+    registerOnTouched(fn) {
+        this.#onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.#disabledByForm.set(disabled);
+    }
+    onClick(event) {
+        this.#select();
+        this.clickAction.emit(event);
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    onKeydown(event) {
+        if (event.key !== ' ' && event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+        this.#select();
+    }
+    #select() {
+        if (this.isDisabled()) {
+            return;
+        }
+        if (!this.isChecked()) {
+            this.#model.set(this.value());
+            this.#onChange(this.value());
+            this.checkedChange.emit(true);
+        }
+        this.#onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtRadioButtonComponent, isStandalone: true, selector: "rt-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction", checkedChange: "checkedChange" }, host: { classAttribute: "rt-radio-button" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RtRadioButtonComponent),
+                multi: true,
+            },
+        ], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<div\n    rtBlock=\"rt-radio-button\"\n    qa-dataid=\"radio-button-control\"\n    role=\"radio\"\n    tabindex=\"0\"\n    [rtMod]=\"{ checked: isChecked(), disabled: isDisabled(), card: card() }\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    <span rtElem=\"indicator\">\n        @if (isChecked()) {\n            <span rtElem=\"dot\"></span>\n        }\n    </span>\n\n    @if (label() || description()) {\n        <span rtElem=\"content\">\n            @if (label()) {\n                <span rtElem=\"label\" qa-dataid=\"radio-button-label\">{{ label() }}</span>\n            }\n            @if (description()) {\n                <span rtElem=\"description\" qa-dataid=\"radio-button-description\">{{ description() }}</span>\n            }\n        </span>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-radio-button{display:inline-block}rt-radio-button[data-rt-radius=none]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-none)}rt-radio-button[data-rt-radius=xs]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-xs)}rt-radio-button[data-rt-radius=sm]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-sm)}rt-radio-button[data-rt-radius=ms]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-ms)}rt-radio-button[data-rt-radius=md]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-md)}rt-radio-button[data-rt-radius=lg]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-lg)}rt-radio-button[data-rt-radius=xl]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-xl)}rt-radio-button[data-rt-radius=\"2xl\"]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-2xl)}rt-radio-button[data-rt-radius=full]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-full)}rt-radio-button .rt-radio-button{--rt-radio-button-size: var(--rt-size-4);--rt-radio-button-dot-size: var(--rt-size-2);--rt-radio-button-rim-width: var(--rt-border-width-medium);--rt-radio-button-round: var(--rt-radius-full);--rt-radio-button-focus-radius: var(--rt-radius-sm);--rt-radio-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-radio-button-card-radius: var(--rt-radius-md);--rt-radio-button-card-border-width: var(--rt-border-width-thin);--rt-radio-button-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;cursor:pointer;gap:var(--rt-space-sm);text-align:start}rt-radio-button .rt-radio-button:focus-visible{border-radius:var(--rt-radio-button-focus-radius);box-shadow:var(--rt-radio-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-radio-button .rt-radio-button__indicator{display:inline-flex;width:var(--rt-radio-button-size);height:var(--rt-radio-button-size);flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-radio-button-rim-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radio-button-round);transition:border-color var(--rt-radio-button-transition-duration) ease}rt-radio-button .rt-radio-button__dot{width:var(--rt-radio-button-dot-size);height:var(--rt-radio-button-dot-size);border-radius:var(--rt-radio-button-round);background:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button__content{display:flex;min-width:0;flex:1;flex-direction:column;gap:var(--rt-space-xs)}rt-radio-button .rt-radio-button__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}rt-radio-button .rt-radio-button__description{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}rt-radio-button .rt-radio-button--checked .rt-radio-button__indicator{border-color:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button--card{flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;padding:var(--rt-space-sm) var(--rt-space-md);border:var(--rt-radio-button-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-radio-button-card-radius);transition:border-color var(--rt-radio-button-transition-duration) ease}rt-radio-button .rt-radio-button--card .rt-radio-button__label{font-weight:var(--rt-font-weight-medium)}rt-radio-button .rt-radio-button--card.rt-radio-button--checked{border-color:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button--disabled{cursor:not-allowed;opacity:var(--rt-opacity-disabled);pointer-events:none}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone directives
+                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: RtRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RtRadioButtonComponent),
+                            multi: true,
+                        },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<div\n    rtBlock=\"rt-radio-button\"\n    qa-dataid=\"radio-button-control\"\n    role=\"radio\"\n    tabindex=\"0\"\n    [rtMod]=\"{ checked: isChecked(), disabled: isDisabled(), card: card() }\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    <span rtElem=\"indicator\">\n        @if (isChecked()) {\n            <span rtElem=\"dot\"></span>\n        }\n    </span>\n\n    @if (label() || description()) {\n        <span rtElem=\"content\">\n            @if (label()) {\n                <span rtElem=\"label\" qa-dataid=\"radio-button-label\">{{ label() }}</span>\n            }\n            @if (description()) {\n                <span rtElem=\"description\" qa-dataid=\"radio-button-description\">{{ description() }}</span>\n            }\n        </span>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-radio-button{display:inline-block}rt-radio-button[data-rt-radius=none]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-none)}rt-radio-button[data-rt-radius=xs]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-xs)}rt-radio-button[data-rt-radius=sm]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-sm)}rt-radio-button[data-rt-radius=ms]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-ms)}rt-radio-button[data-rt-radius=md]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-md)}rt-radio-button[data-rt-radius=lg]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-lg)}rt-radio-button[data-rt-radius=xl]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-xl)}rt-radio-button[data-rt-radius=\"2xl\"]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-2xl)}rt-radio-button[data-rt-radius=full]>.rt-radio-button{--rt-radio-button-card-radius: var(--rt-radius-full)}rt-radio-button .rt-radio-button{--rt-radio-button-size: var(--rt-size-4);--rt-radio-button-dot-size: var(--rt-size-2);--rt-radio-button-rim-width: var(--rt-border-width-medium);--rt-radio-button-round: var(--rt-radius-full);--rt-radio-button-focus-radius: var(--rt-radius-sm);--rt-radio-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-radio-button-card-radius: var(--rt-radius-md);--rt-radio-button-card-border-width: var(--rt-border-width-thin);--rt-radio-button-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;cursor:pointer;gap:var(--rt-space-sm);text-align:start}rt-radio-button .rt-radio-button:focus-visible{border-radius:var(--rt-radio-button-focus-radius);box-shadow:var(--rt-radio-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-radio-button .rt-radio-button__indicator{display:inline-flex;width:var(--rt-radio-button-size);height:var(--rt-radio-button-size);flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-radio-button-rim-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radio-button-round);transition:border-color var(--rt-radio-button-transition-duration) ease}rt-radio-button .rt-radio-button__dot{width:var(--rt-radio-button-dot-size);height:var(--rt-radio-button-dot-size);border-radius:var(--rt-radio-button-round);background:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button__content{display:flex;min-width:0;flex:1;flex-direction:column;gap:var(--rt-space-xs)}rt-radio-button .rt-radio-button__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}rt-radio-button .rt-radio-button__description{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}rt-radio-button .rt-radio-button--checked .rt-radio-button__indicator{border-color:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button--card{flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;padding:var(--rt-space-sm) var(--rt-space-md);border:var(--rt-radio-button-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-radio-button-card-radius);transition:border-color var(--rt-radio-button-transition-duration) ease}rt-radio-button .rt-radio-button--card .rt-radio-button__label{font-weight:var(--rt-font-weight-medium)}rt-radio-button .rt-radio-button--card.rt-radio-button--checked{border-color:var(--rt-color-action-primary)}rt-radio-button .rt-radio-button--disabled{cursor:not-allowed;opacity:var(--rt-opacity-disabled);pointer-events:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtRadioButtonComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-radio-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-radio-button.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/radio-button/rt-radio-button.component.ts","../../../projects/ui-kit-v2/src/lib/components/radio-button/rt-radio-button.component.html","../../../projects/ui-kit-v2/src/lib/components/radio-button/rt-tools-ui-kit-v2-radio-button.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    DestroyRef,\n    forwardRef,\n    inject,\n    Injector,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { distinctUntilChanged, EMPTY, Observable, Subject, switchMap } from 'rxjs';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-radio-button';\n\n/** Вход выбранности: не заданный вход — `null`, и тогда выбранность решает форма. */\nfunction checkedAttribute(value: BooleanInput | null | undefined): boolean | null {\n    return value === null || value === undefined ? null : booleanAttribute(value);\n}\n\n/**\n * Радиокнопка: `role=\"radio\"` с `aria-checked` и `aria-disabled`, выбор нажатием, пробелом и Enter.\n *\n * Выбор приходит двумя путями. Форма пишет модель через `ControlValueAccessor`, и радиокнопка\n * выбрана, когда её значение — сама модель, а не равное ей. Без формы выбранность ставится входом\n * `checked`, а выбор сообщается выходом `checkedChange`: так строку отмечает таблица. Заданный вход\n * решает раньше модели формы.\n *\n * Нажатие на выбранную выбор не снимает — радиокнопку покидают только выбором другой. Каждое\n * нажатие сообщается наружу `clickAction` и дальше обёртки не идёт: строка таблицы под кружком не\n * открывается. Выбор клавишей наружу нажатием не сообщается.\n *\n * Отключение складывается из входа `disabled` и слова формы: форма зовёт `setDisabledState`\n * раньше первого обновления вида, и один общий signal затёр бы её слово.\n *\n * Каждая радиокнопка — свой `ControlValueAccessor`, и значение, отданное одной, форма соседям на\n * том же контроле не пишет: поэтому модель берётся и у самого контрола.\n */\n@Component({\n    selector: 'rt-radio-button',\n    templateUrl: './rt-radio-button.component.html',\n    styleUrl: './rt-radio-button.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef((): typeof RtRadioButtonComponent => RtRadioButtonComponent),\n            multi: true,\n        },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtRadioButtonComponent implements ControlValueAccessor {\n    readonly #injector: Injector = inject(Injector);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    #onChange: (value: unknown) => void = (): void => undefined;\n    #onTouched: () => void = (): void => undefined;\n\n    /**\n     * Контрол, к которому радиокнопка привязана сейчас. Директива формы меняет его, не пересоздавая\n     * себя: `[formControl]` получил другой контрол, `[formGroup]` — другую группу. Слушать надо\n     * только нынешний — прежний, оставшись под подпиской, зажёг бы точку из мёртвой формы, и\n     * нажатие по ней уже не дошло бы до живой.\n     */\n    readonly #controlSource: Subject<AbstractControl | null> = new Subject<AbstractControl | null>();\n\n    /** Модель, записанная формой. */\n    readonly #model: WritableSignal<unknown> = signal<unknown>(null);\n\n    /** Отключение, назначенное формой через `setDisabledState`. */\n    readonly #disabledByForm: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly isChecked: Signal<boolean> = computed((): boolean => this.checked() ?? this.value() === this.#model());\n    protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() || this.#disabledByForm());\n\n    /** Значение радиокнопки: выбрана та, чьё значение — модель формы. */\n    public readonly value: InputSignal<unknown> = input.required<unknown>();\n\n    /** Выбранность без формы; не заданный вход оставляет решение форме. */\n    public readonly checked: InputSignalWithTransform<boolean | null, BooleanInput | null | undefined> = input<\n        boolean | null,\n        BooleanInput | null | undefined\n    >(null, { transform: checkedAttribute });\n\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Вид «карточка»: рамка, содержимое слева, кружок справа. */\n    public readonly card: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly label: InputSignal<string> = input<string>('');\n    public readonly description: InputSignal<string> = input<string>('');\n\n    /** Имя для вспомогательных средств, когда видимой подписи нет — кружок в строке таблицы. */\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /** Каждое нажатие указателем, сменило оно выбор или нет. */\n    public readonly clickAction: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n    /** Радиокнопка стала выбранной. */\n    public readonly checkedChange: OutputEmitterRef<boolean> = output<boolean>();\n\n    constructor() {\n        // Значение, отданное соседкой, форма этой радиокнопке не пишет — модель берётся у самого\n        // контрола, иначе точка осталась бы у двух сразу. Подписка идёт за сменой контрола и\n        // бросает прежний.\n        this.#controlSource\n            .pipe(\n                distinctUntilChanged(),\n                switchMap((control: AbstractControl | null): Observable<unknown> => control?.valueChanges ?? EMPTY),\n                takeUntilDestroyed(this.#destroyRef)\n            )\n            .subscribe((value: unknown): void => this.#model.set(value));\n    }\n\n    public writeValue(value: unknown): void {\n        this.#model.set(value);\n    }\n\n    /**\n     * Директива формы зовёт это при каждой привязке к контролу — и первой, и после смены контрола,\n     * — уже поставив новый контрол себе. Здесь радиокнопка и узнаёт, кого слушать. Спросить\n     * директиву в конструкторе нельзя: она берёт радиокнопку своим accessor, и это круговая\n     * зависимость.\n     */\n    public registerOnChange(fn: (value: unknown) => void): void {\n        this.#onChange = fn;\n        this.#controlSource.next(this.#injector.get(NgControl, null, { self: true, optional: true })?.control ?? null);\n    }\n\n    public registerOnTouched(fn: () => void): void {\n        this.#onTouched = fn;\n    }\n\n    public setDisabledState(disabled: boolean): void {\n        this.#disabledByForm.set(disabled);\n    }\n\n    protected onClick(event: MouseEvent): void {\n        this.#select();\n        this.clickAction.emit(event);\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    protected onKeydown(event: KeyboardEvent): void {\n        if (event.key !== ' ' && event.key !== 'Enter') {\n            return;\n        }\n        event.preventDefault();\n        this.#select();\n    }\n\n    #select(): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        if (!this.isChecked()) {\n            this.#model.set(this.value());\n            this.#onChange(this.value());\n            this.checkedChange.emit(true);\n        }\n        this.#onTouched();\n    }\n}\n","<div\n    rtBlock=\"rt-radio-button\"\n    qa-dataid=\"radio-button-control\"\n    role=\"radio\"\n    tabindex=\"0\"\n    [rtMod]=\"{ checked: isChecked(), disabled: isDisabled(), card: card() }\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    <span rtElem=\"indicator\">\n        @if (isChecked()) {\n            <span rtElem=\"dot\"></span>\n        }\n    </span>\n\n    @if (label() || description()) {\n        <span rtElem=\"content\">\n            @if (label()) {\n                <span rtElem=\"label\" qa-dataid=\"radio-button-label\">{{ label() }}</span>\n            }\n            @if (description()) {\n                <span rtElem=\"description\" qa-dataid=\"radio-button-description\">{{ description() }}</span>\n            }\n        </span>\n    }\n</div>\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-radius.mjs

@@ -0,0 +1,56 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, Directive } from '@angular/core';
+import { RT_RADIUS_DEFAULT } from '@rt-tools/ui-kit-v2/core';
+
+/**
+ * Вход скругления, один на весь кит. Компонент с поверхностью берёт его
+ * хост-директивой, и у всех он называется одинаково — `radius`.
+ *
+ * Шаг ложится на хост атрибутом `data-rt-radius`, а не наследуемым свойством:
+ * свойство протекло бы в каждый вложенный компонент, и скруглённая карточка
+ * скруглила бы все кнопки в себе. Атрибут читают только правила своего хоста.
+ *
+ * Пустой вход атрибута не пишет: компонент остаётся со своим скруглением по
+ * умолчанию из собственных стилей.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *     selector: 'rt-card',
+ *     hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],
+ * })
+ * ```
+ * ```html
+ * <rt-card radius="none">…</rt-card>
+ * ```
+ */
+class RtRadiusDirective {
+    constructor() {
+        this.#fallback = inject(RT_RADIUS_DEFAULT, { optional: true }) ?? null;
+        /** Шаг шкалы. Пусто — скругление компонента по умолчанию. */
+        this.radius = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+        /** Шаг на хосте: названный входом, иначе умолчание хоста, если оно задано. */
+        this.step = computed(() => this.radius() ?? this.#fallback, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    }
+    #fallback;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRadiusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtRadiusDirective, isStandalone: true, selector: "[rtRadius]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-rt-radius": "step()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRadiusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtRadius]',
+                    host: {
+                        '[attr.data-rt-radius]': 'step()',
+                    },
+                }]
+        }], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtRadiusDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-radius.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-radius.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/radius/rt-radius.directive.ts","../../../projects/ui-kit-v2/src/lib/components/radius/rt-tools-ui-kit-v2-radius.ts"],"sourcesContent":["import { computed, Directive, inject, input, InputSignal, Signal } from '@angular/core';\n\nimport { RT_RADIUS_DEFAULT, TRtRadius } from '@rt-tools/ui-kit-v2/core';\n\n/**\n * Вход скругления, один на весь кит. Компонент с поверхностью берёт его\n * хост-директивой, и у всех он называется одинаково — `radius`.\n *\n * Шаг ложится на хост атрибутом `data-rt-radius`, а не наследуемым свойством:\n * свойство протекло бы в каждый вложенный компонент, и скруглённая карточка\n * скруглила бы все кнопки в себе. Атрибут читают только правила своего хоста.\n *\n * Пустой вход атрибута не пишет: компонент остаётся со своим скруглением по\n * умолчанию из собственных стилей.\n *\n * @example\n * ```ts\n * @Component({\n *     selector: 'rt-card',\n *     hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n * })\n * ```\n * ```html\n * <rt-card radius=\"none\">…</rt-card>\n * ```\n */\n@Directive({\n    selector: '[rtRadius]',\n    host: {\n        '[attr.data-rt-radius]': 'step()',\n    },\n})\nexport class RtRadiusDirective {\n    readonly #fallback: TRtRadius | null = inject(RT_RADIUS_DEFAULT, { optional: true }) ?? null;\n\n    /** Шаг шкалы. Пусто — скругление компонента по умолчанию. */\n    public readonly radius: InputSignal<TRtRadius | null | undefined> = input<TRtRadius | null | undefined>(null);\n\n    /** Шаг на хосте: названный входом, иначе умолчание хоста, если оно задано. */\n    public readonly step: Signal<TRtRadius | null> = computed((): TRtRadius | null => this.radius() ?? this.#fallback);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;MAOU,iBAAiB,CAAA;AAN9B,IAAA,WAAA,GAAA;AAOa,QAAA,IAAA,CAAA,SAAS,GAAqB,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAI,IAAI;;QAG5E,IAAA,CAAA,MAAM,GAA8C,KAAK,CAA+B,IAAI;mFAAC;;AAG7F,QAAA,IAAA,CAAA,IAAI,GAA6B,QAAQ,CAAC,MAAwB,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,SAAS;iFAAC;AACrH,IAAA;AAPY,IAAA,SAAS;8GADT,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACF,wBAAA,uBAAuB,EAAE,QAAQ;AACpC,qBAAA;AACJ,iBAAA;;;AC/BD;;AAEG;;;;"}

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

@@ -0,0 +1,118 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, DestroyRef, input, booleanAttribute, Directive } from '@angular/core';
+
+const BEM_BLOCK = 'rt-ripple';
+/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */
+const RIPPLE_LIFETIME_MS = 550;
+/**
+ * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся
+ * от точки касания круг.
+ *
+ * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:
+ * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —
+ * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.
+ *
+ * @example
+ * ```html
+ * <button rtRipple>Сохранить</button>
+ * <button rtRipple [rippleDisabled]="loading()">Сохранить</button>
+ * ```
+ */
+class RtRippleDirective {
+    #el;
+    #renderer;
+    #destroyRef;
+    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
+    #live;
+    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
+    #area;
+    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */
+    constructor() {
+        this.#el = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#destroyRef = inject(DestroyRef);
+        /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
+        this.#live = new Set();
+        /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
+        this.#area = null;
+        /**
+         * Отключает волну, не трогая остальное поведение элемента.
+         * Отключённая и загружающаяся кнопка волны не даёт.
+         */
+        this.rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.#destroyRef.onDestroy(() => {
+            for (const timer of this.#live) {
+                clearTimeout(timer);
+            }
+            this.#live.clear();
+        });
+    }
+    /**
+     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.
+     *
+     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть
+     * противоположный, иначе на широкой кнопке она обрывается на полпути.
+     */
+    launch(event) {
+        const host = this.#el.nativeElement;
+        if (this.rippleDisabled() || host.disabled) {
+            return;
+        }
+        const box = host.getBoundingClientRect();
+        const x = event.clientX - box.left;
+        const y = event.clientY - box.top;
+        const radius = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));
+        const area = this.#ensureArea(host);
+        const layer = this.#renderer.createElement('span');
+        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);
+        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);
+        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);
+        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);
+        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);
+        this.#renderer.appendChild(area, layer);
+        const timer = setTimeout(() => {
+            this.#live.delete(timer);
+            if (layer.parentNode) {
+                this.#renderer.removeChild(area, layer);
+            }
+        }, RIPPLE_LIFETIME_MS);
+        this.#live.add(timer);
+    }
+    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */
+    #ensureArea(host) {
+        if (this.#area?.parentNode) {
+            return this.#area;
+        }
+        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция
+           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и
+           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */
+        if (getComputedStyle(host).position === 'static') {
+            this.#renderer.setStyle(host, 'position', 'relative');
+        }
+        const area = this.#renderer.createElement('span');
+        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);
+        this.#renderer.setAttribute(area, 'aria-hidden', 'true');
+        this.#renderer.appendChild(host, area);
+        this.#area = area;
+        return area;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtRippleDirective, isStandalone: true, selector: "[rtRipple]", inputs: { rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "rippleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "launch($event)" }, classAttribute: "rt-ripple" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtRipple]',
+                    host: {
+                        class: BEM_BLOCK,
+                        '(pointerdown)': 'launch($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtRippleDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-ripple.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-ripple.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/ripple/rt-ripple.directive.ts","../../../projects/ui-kit-v2/src/lib/components/ripple/rt-tools-ui-kit-v2-ripple.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input, InputSignalWithTransform, Renderer2 } from '@angular/core';\n\nconst BEM_BLOCK: string = 'rt-ripple';\n\n/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */\nconst RIPPLE_LIFETIME_MS: number = 550;\n\n/**\n * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся\n * от точки касания круг.\n *\n * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:\n * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —\n * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.\n *\n * @example\n * ```html\n * <button rtRipple>Сохранить</button>\n * <button rtRipple [rippleDisabled]=\"loading()\">Сохранить</button>\n * ```\n */\n@Directive({\n    selector: '[rtRipple]',\n    host: {\n        class: BEM_BLOCK,\n        '(pointerdown)': 'launch($event)',\n    },\n})\nexport class RtRippleDirective {\n    readonly #el: ElementRef<HTMLElement> = inject<ElementRef<HTMLElement>>(ElementRef);\n    readonly #renderer: Renderer2 = inject(Renderer2);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */\n    readonly #live: Set<ReturnType<typeof setTimeout>> = new Set<ReturnType<typeof setTimeout>>();\n\n    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */\n    #area: HTMLElement | null = null;\n\n    /**\n     * Отключает волну, не трогая остальное поведение элемента.\n     * Отключённая и загружающаяся кнопка волны не даёт.\n     */\n    public readonly rippleDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */\n    constructor() {\n        this.#destroyRef.onDestroy((): void => {\n            for (const timer of this.#live) {\n                clearTimeout(timer);\n            }\n            this.#live.clear();\n        });\n    }\n\n    /**\n     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.\n     *\n     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть\n     * противоположный, иначе на широкой кнопке она обрывается на полпути.\n     */\n    public launch(event: PointerEvent): void {\n        const host: HTMLElement = this.#el.nativeElement;\n        if (this.rippleDisabled() || (host as HTMLButtonElement).disabled) {\n            return;\n        }\n\n        const box: DOMRect = host.getBoundingClientRect();\n        const x: number = event.clientX - box.left;\n        const y: number = event.clientY - box.top;\n        const radius: number = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));\n\n        const area: HTMLElement = this.#ensureArea(host);\n        const layer: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);\n        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);\n        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);\n        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);\n        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);\n        this.#renderer.appendChild(area, layer);\n\n        const timer: ReturnType<typeof setTimeout> = setTimeout((): void => {\n            this.#live.delete(timer);\n            if (layer.parentNode) {\n                this.#renderer.removeChild(area, layer);\n            }\n        }, RIPPLE_LIFETIME_MS);\n        this.#live.add(timer);\n    }\n\n    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */\n    #ensureArea(host: HTMLElement): HTMLElement {\n        if (this.#area?.parentNode) {\n            return this.#area;\n        }\n\n        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция\n           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и\n           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */\n        if (getComputedStyle(host).position === 'static') {\n            this.#renderer.setStyle(host, 'position', 'relative');\n        }\n\n        const area: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);\n        this.#renderer.setAttribute(area, 'aria-hidden', 'true');\n        this.#renderer.appendChild(host, area);\n        this.#area = area;\n\n        return area;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}