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

package/fesm2022/rt-tools-ui-kit-v2-toggle-switch.mjs

@@ -1,162 +1,290 @@
-import * as i0 from '@angular/core';
-import { signal, computed, input, booleanAttribute, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-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';
-
-const BEM_BLOCK = 'rt-toggle-switch';
-/** Счётчик для авто-id (связка подписи с кнопкой, когда `inputId` не задан). */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+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";
+const BEM_BLOCK = "rt-toggle-switch";
 let uidSeed = 0;
 function nextAutoId() {
-    uidSeed += 1;
-    return `rt-toggle-switch-${uidSeed}`;
-}
-/**
- * On/off switch с `role="switch"` + `aria-checked` — более правильный a11y
- * pattern чем `<input type="checkbox">` для toggle (screen readers произносят
- * "switch off/on" вместо "checkbox checked/unchecked").
- *
- * Реализует `ControlValueAccessor` для `boolean` value через
- * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает
- * NG0200 cycle при boot'е.
- *
- * Отключение складывается из двух независимых источников: входа `disabled` и
- * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из
- * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при
- * связывании контрола, то есть раньше, чем переключатель впервые обновит своё
- * вью, и мирроринг входа затирал бы её слово — контрол, созданный отключённым,
- * оказывался бы кликабельным.
- *
- * Опциональные иконки `iconOff` / `iconOn` рисуются внутри трека статично:
- * off-иконка в начальной половине, on-иконка в конечной. Бегунок непрозрачен
- * и наезжает на иконку активного состояния, так что видна всегда иконка того
- * состояния, куда переключится контрол.
- *
- * Вход `label` рисует подпись после кнопки — элементом `<label>`, связанным с
- * кнопкой: нажатие на подпись переключает, и она же называет переключатель
- * скринридеру через `aria-labelledby`.
- *
- * Размер и отключение выводятся модификаторами и на хост: свойства размеров
- * объявлены на хосте, чтобы правило приложения на теге их переопределяло, а
- * прозрачность отключения гасит переключатель вместе с подписью.
- *
- * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.
- */
-class RtToggleSwitchComponent {
-    constructor() {
-        this.#onChange = () => undefined;
-        this.#onTouched = () => undefined;
-        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
-        this.#disabledByForm = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
-        this.#autoId = nextAutoId();
-        this.isOn = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isOn" }] : /* istanbul ignore next */ []));
-        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-        /** Id кнопки: заданный входом или свой — на него указывает подпись. */
-        this.controlId = computed(() => this.inputId() ?? this.#autoId, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
-        this.labelId = `${this.#autoId}-label`;
-        /**
-         * BEM-модификаторы для `[rtMod]`. Собираем в .ts, потому что
-         * Angular template-parser не поддерживает computed property keys
-         * в inline-объектах, а размер приходит ключом.
-         */
-        this.bemMods = computed(() => ({
-            [this.size()]: true,
-            on: this.isOn(),
-            disabled: this.isDisabled(),
-            withIcons: this.iconOff() !== null || this.iconOn() !== null,
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "bemMods" }] : /* istanbul ignore next */ []));
-        this.inputId = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        /** Подпись после переключателя. Пусто — без подписи, как раньше. */
-        this.label = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Размерный тир трека. */
-        this.size = input('sm', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** Иконка выключенного состояния — в начальной половине трека. Пусто — без иконки. */
-        this.iconOff = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []));
-        /** Иконка включённого состояния — в конечной половине трека. Пусто — без иконки. */
-        this.iconOn = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    }
-    #onChange;
-    #onTouched;
-    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
-    #disabledByForm;
-    #autoId;
-    writeValue(value) {
-        this.isOn.set(value === true);
-    }
-    registerOnChange(fn) {
-        this.#onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.#onTouched = fn;
-    }
-    setDisabledState(disabled) {
-        this.#disabledByForm.set(disabled);
-    }
-    toggle() {
-        if (this.isDisabled()) {
-            return;
-        }
-        const next = !this.isOn();
-        this.isOn.set(next);
-        this.#onChange(next);
-        this.#onTouched();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtToggleSwitchComponent, isStandalone: true, selector: "rt-toggle-switch", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-toggle-switch--md": "size() === 'md'", "class.rt-toggle-switch--lg": "size() === 'lg'", "class.rt-toggle-switch--on": "isOn()", "class.rt-toggle-switch--disabled": "isDisabled()" }, classAttribute: "rt-toggle-switch" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RtToggleSwitchComponent),
-                multi: true,
-            },
-        ], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-switch{--rt-toggle-radius: var(--rt-radius-full);--rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-transition-duration: var(--rt-duration-fast);--rt-toggle-disabled-opacity: .5;--rt-toggle-justify: flex-start;--rt-toggle-label-gap: var(--rt-space-2);--rt-toggle-label-size: var(--rt-text-sm);--rt-toggle-label-color-off: var(--rt-color-text-muted);--rt-toggle-label-color-on: var(--rt-color-text-primary);--rt-toggle-label-color-hover: var(--rt-color-text-primary);--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;align-items:center;justify-content:var(--rt-toggle-justify);gap:var(--rt-toggle-label-gap)}rt-toggle-switch.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch.rt-toggle-switch--disabled{opacity:var(--rt-toggle-disabled-opacity)}rt-toggle-switch[data-rt-radius=none]{--rt-toggle-radius: var(--rt-radius-none)}rt-toggle-switch[data-rt-radius=xs]{--rt-toggle-radius: var(--rt-radius-xs)}rt-toggle-switch[data-rt-radius=sm]{--rt-toggle-radius: var(--rt-radius-sm)}rt-toggle-switch[data-rt-radius=ms]{--rt-toggle-radius: var(--rt-radius-ms)}rt-toggle-switch[data-rt-radius=md]{--rt-toggle-radius: var(--rt-radius-md)}rt-toggle-switch[data-rt-radius=lg]{--rt-toggle-radius: var(--rt-radius-lg)}rt-toggle-switch[data-rt-radius=xl]{--rt-toggle-radius: var(--rt-radius-xl)}rt-toggle-switch[data-rt-radius=\"2xl\"]{--rt-toggle-radius: var(--rt-radius-2xl)}rt-toggle-switch[data-rt-radius=full]{--rt-toggle-radius: var(--rt-radius-full)}rt-toggle-switch .rt-toggle-switch{display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-toggle-radius);box-shadow:var(--rt-toggle-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-toggle-transition-duration) ease,box-shadow var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}rt-toggle-switch .rt-toggle-switch__label{color:var(--rt-toggle-label-color-off);cursor:pointer;font-size:var(--rt-toggle-label-size);transition:color var(--rt-toggle-transition-duration) ease;-webkit-user-select:none;user-select:none}rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label{color:var(--rt-toggle-label-color-on)}rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label{color:var(--rt-toggle-label-color-hover)}rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label{cursor:not-allowed}}\n"], dependencies: [{ kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { 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 }); }
+	uidSeed += 1;
+	return `rt-toggle-switch-${uidSeed}`;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToggleSwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-toggle-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RtToggleSwitchComponent),
-                            multi: true,
-                        },
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-toggle-switch--md]': "size() === 'md'",
-                        '[class.rt-toggle-switch--lg]': "size() === 'lg'",
-                        '[class.rt-toggle-switch--on]': 'isOn()',
-                        '[class.rt-toggle-switch--disabled]': 'isDisabled()',
-                    }, template: "<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-switch{--rt-toggle-radius: var(--rt-radius-full);--rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-transition-duration: var(--rt-duration-fast);--rt-toggle-disabled-opacity: .5;--rt-toggle-justify: flex-start;--rt-toggle-label-gap: var(--rt-space-2);--rt-toggle-label-size: var(--rt-text-sm);--rt-toggle-label-color-off: var(--rt-color-text-muted);--rt-toggle-label-color-on: var(--rt-color-text-primary);--rt-toggle-label-color-hover: var(--rt-color-text-primary);--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;align-items:center;justify-content:var(--rt-toggle-justify);gap:var(--rt-toggle-label-gap)}rt-toggle-switch.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch.rt-toggle-switch--disabled{opacity:var(--rt-toggle-disabled-opacity)}rt-toggle-switch[data-rt-radius=none]{--rt-toggle-radius: var(--rt-radius-none)}rt-toggle-switch[data-rt-radius=xs]{--rt-toggle-radius: var(--rt-radius-xs)}rt-toggle-switch[data-rt-radius=sm]{--rt-toggle-radius: var(--rt-radius-sm)}rt-toggle-switch[data-rt-radius=ms]{--rt-toggle-radius: var(--rt-radius-ms)}rt-toggle-switch[data-rt-radius=md]{--rt-toggle-radius: var(--rt-radius-md)}rt-toggle-switch[data-rt-radius=lg]{--rt-toggle-radius: var(--rt-radius-lg)}rt-toggle-switch[data-rt-radius=xl]{--rt-toggle-radius: var(--rt-radius-xl)}rt-toggle-switch[data-rt-radius=\"2xl\"]{--rt-toggle-radius: var(--rt-radius-2xl)}rt-toggle-switch[data-rt-radius=full]{--rt-toggle-radius: var(--rt-radius-full)}rt-toggle-switch .rt-toggle-switch{display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-toggle-radius);box-shadow:var(--rt-toggle-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-toggle-transition-duration) ease,box-shadow var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}rt-toggle-switch .rt-toggle-switch__label{color:var(--rt-toggle-label-color-off);cursor:pointer;font-size:var(--rt-toggle-label-size);transition:color var(--rt-toggle-transition-duration) ease;-webkit-user-select:none;user-select:none}rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label{color:var(--rt-toggle-label-color-on)}rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label{color:var(--rt-toggle-label-color-hover)}rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label{cursor:not-allowed}}\n"] }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-
-/**
- * Модель `<rt-toggle-switch>`: один корневой неймспейс с префиксом `I`.
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtToggleSwitchComponent = class RtToggleSwitchComponent {
+	constructor() {
+		this.#onChange = () => void 0;
+		this.#onTouched = () => void 0;
+		this.#disabledByForm = signal(false, ...ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []);
+		this.#autoId = nextAutoId();
+		this.isOn = signal(false, ...ngDevMode ? [{ debugName: "isOn" }] : /* istanbul ignore next */ []);
+		this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+		this.controlId = computed(() => this.inputId() ?? this.#autoId, ...ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []);
+		this.labelId = `${this.#autoId}-label`;
+		this.bemMods = computed(() => ({
+			[this.size()]: true,
+			on: this.isOn(),
+			disabled: this.isDisabled(),
+			withIcons: this.iconOff() !== null || this.iconOn() !== null
+		}), ...ngDevMode ? [{ debugName: "bemMods" }] : /* istanbul ignore next */ []);
+		this.inputId = input(null, ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.iconOff = input(null, ...ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []);
+		this.iconOn = input(null, ...ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	#onChange;
+	#onTouched;
+	#disabledByForm;
+	#autoId;
+	writeValue(value) {
+		this.isOn.set(value === true);
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#disabledByForm.set(disabled);
+	}
+	toggle() {
+		if (this.isDisabled()) return;
+		const next = !this.isOn();
+		this.isOn.set(next);
+		this.#onChange(next);
+		this.#onTouched();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToggleSwitchComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtToggleSwitchComponent,
+			isStandalone: true,
+			selector: "rt-toggle-switch",
+			inputs: {
+				inputId: {
+					classPropertyName: "inputId",
+					publicName: "inputId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconOff: {
+					classPropertyName: "iconOff",
+					publicName: "iconOff",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconOn: {
+					classPropertyName: "iconOn",
+					publicName: "iconOn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				properties: {
+					"class.rt-toggle-switch--md": "size() === 'md'",
+					"class.rt-toggle-switch--lg": "size() === 'lg'",
+					"class.rt-toggle-switch--on": "isOn()",
+					"class.rt-toggle-switch--disabled": "isDisabled()"
+				},
+				classAttribute: "rt-toggle-switch"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RtToggleSwitchComponent),
+				multi: true
+			}],
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-switch{--rt-toggle-radius: var(--rt-radius-full);--rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-transition-duration: var(--rt-duration-fast);--rt-toggle-disabled-opacity: .5;--rt-toggle-justify: flex-start;--rt-toggle-label-gap: var(--rt-space-2);--rt-toggle-label-size: var(--rt-text-sm);--rt-toggle-label-color-off: var(--rt-color-text-muted);--rt-toggle-label-color-on: var(--rt-color-text-primary);--rt-toggle-label-color-hover: var(--rt-color-text-primary);--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;align-items:center;justify-content:var(--rt-toggle-justify);gap:var(--rt-toggle-label-gap)}rt-toggle-switch.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch.rt-toggle-switch--disabled{opacity:var(--rt-toggle-disabled-opacity)}rt-toggle-switch[data-rt-radius=none]{--rt-toggle-radius: var(--rt-radius-none)}rt-toggle-switch[data-rt-radius=xs]{--rt-toggle-radius: var(--rt-radius-xs)}rt-toggle-switch[data-rt-radius=sm]{--rt-toggle-radius: var(--rt-radius-sm)}rt-toggle-switch[data-rt-radius=ms]{--rt-toggle-radius: var(--rt-radius-ms)}rt-toggle-switch[data-rt-radius=md]{--rt-toggle-radius: var(--rt-radius-md)}rt-toggle-switch[data-rt-radius=lg]{--rt-toggle-radius: var(--rt-radius-lg)}rt-toggle-switch[data-rt-radius=xl]{--rt-toggle-radius: var(--rt-radius-xl)}rt-toggle-switch[data-rt-radius=\"2xl\"]{--rt-toggle-radius: var(--rt-radius-2xl)}rt-toggle-switch[data-rt-radius=full]{--rt-toggle-radius: var(--rt-radius-full)}rt-toggle-switch .rt-toggle-switch{display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-toggle-radius);box-shadow:var(--rt-toggle-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-toggle-transition-duration) ease,box-shadow var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}rt-toggle-switch .rt-toggle-switch__label{color:var(--rt-toggle-label-color-off);cursor:pointer;font-size:var(--rt-toggle-label-size);transition:color var(--rt-toggle-transition-duration) ease;-webkit-user-select:none;user-select:none}rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label{color:var(--rt-toggle-label-color-on)}rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label{color:var(--rt-toggle-label-color-hover)}rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label{cursor:not-allowed}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToggleSwitchComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-toggle-switch",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RtToggleSwitchComponent),
+				multi: true
+			}],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-toggle-switch--md]": "size() === 'md'",
+				"[class.rt-toggle-switch--lg]": "size() === 'lg'",
+				"[class.rt-toggle-switch--on]": "isOn()",
+				"[class.rt-toggle-switch--disabled]": "isDisabled()"
+			},
+			template: "<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-switch{--rt-toggle-radius: var(--rt-radius-full);--rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-transition-duration: var(--rt-duration-fast);--rt-toggle-disabled-opacity: .5;--rt-toggle-justify: flex-start;--rt-toggle-label-gap: var(--rt-space-2);--rt-toggle-label-size: var(--rt-text-sm);--rt-toggle-label-color-off: var(--rt-color-text-muted);--rt-toggle-label-color-on: var(--rt-color-text-primary);--rt-toggle-label-color-hover: var(--rt-color-text-primary);--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;align-items:center;justify-content:var(--rt-toggle-justify);gap:var(--rt-toggle-label-gap)}rt-toggle-switch.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch.rt-toggle-switch--disabled{opacity:var(--rt-toggle-disabled-opacity)}rt-toggle-switch[data-rt-radius=none]{--rt-toggle-radius: var(--rt-radius-none)}rt-toggle-switch[data-rt-radius=xs]{--rt-toggle-radius: var(--rt-radius-xs)}rt-toggle-switch[data-rt-radius=sm]{--rt-toggle-radius: var(--rt-radius-sm)}rt-toggle-switch[data-rt-radius=ms]{--rt-toggle-radius: var(--rt-radius-ms)}rt-toggle-switch[data-rt-radius=md]{--rt-toggle-radius: var(--rt-radius-md)}rt-toggle-switch[data-rt-radius=lg]{--rt-toggle-radius: var(--rt-radius-lg)}rt-toggle-switch[data-rt-radius=xl]{--rt-toggle-radius: var(--rt-radius-xl)}rt-toggle-switch[data-rt-radius=\"2xl\"]{--rt-toggle-radius: var(--rt-radius-2xl)}rt-toggle-switch[data-rt-radius=full]{--rt-toggle-radius: var(--rt-radius-full)}rt-toggle-switch .rt-toggle-switch{display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-toggle-radius);box-shadow:var(--rt-toggle-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-toggle-transition-duration) ease,box-shadow var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-toggle-radius);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-toggle-transition-duration) ease}rt-toggle-switch .rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}rt-toggle-switch .rt-toggle-switch__label{color:var(--rt-toggle-label-color-off);cursor:pointer;font-size:var(--rt-toggle-label-size);transition:color var(--rt-toggle-transition-duration) ease;-webkit-user-select:none;user-select:none}rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label{color:var(--rt-toggle-label-color-on)}rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label{color:var(--rt-toggle-label-color-hover)}rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label{cursor:not-allowed}}\n"]
+		}]
+	}],
+	propDecorators: {
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		iconOff: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOff",
+				required: false
+			}]
+		}],
+		iconOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOn",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtToggleSwitchComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-toggle-switch.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-toggle-switch.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-toggle-switch.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-toggle-switch.component.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-toggle-switch.component.html","../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-toggle-switch.model.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-tools-ui-kit-v2-toggle-switch.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    forwardRef,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtToggleSwitch } from './rt-toggle-switch.model';\n\nconst BEM_BLOCK: string = 'rt-toggle-switch';\n\n/** Счётчик для авто-id (связка подписи с кнопкой, когда `inputId` не задан). */\nlet uidSeed: number = 0;\n\nfunction nextAutoId(): string {\n    uidSeed += 1;\n    return `rt-toggle-switch-${uidSeed}`;\n}\n\n/**\n * On/off switch с `role=\"switch\"` + `aria-checked` — более правильный a11y\n * pattern чем `<input type=\"checkbox\">` для toggle (screen readers произносят\n * \"switch off/on\" вместо \"checkbox checked/unchecked\").\n *\n * Реализует `ControlValueAccessor` для `boolean` value через\n * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает\n * NG0200 cycle при boot'е.\n *\n * Отключение складывается из двух независимых источников: входа `disabled` и\n * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из\n * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при\n * связывании контрола, то есть раньше, чем переключатель впервые обновит своё\n * вью, и мирроринг входа затирал бы её слово — контрол, созданный отключённым,\n * оказывался бы кликабельным.\n *\n * Опциональные иконки `iconOff` / `iconOn` рисуются внутри трека статично:\n * off-иконка в начальной половине, on-иконка в конечной. Бегунок непрозрачен\n * и наезжает на иконку активного состояния, так что видна всегда иконка того\n * состояния, куда переключится контрол.\n *\n * Вход `label` рисует подпись после кнопки — элементом `<label>`, связанным с\n * кнопкой: нажатие на подпись переключает, и она же называет переключатель\n * скринридеру через `aria-labelledby`.\n *\n * Размер и отключение выводятся модификаторами и на хост: свойства размеров\n * объявлены на хосте, чтобы правило приложения на теге их переопределяло, а\n * прозрачность отключения гасит переключатель вместе с подписью.\n *\n * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.\n */\n@Component({\n    selector: 'rt-toggle-switch',\n    templateUrl: './rt-toggle-switch.component.html',\n    styleUrl: './rt-toggle-switch.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef((): typeof RtToggleSwitchComponent => RtToggleSwitchComponent),\n            multi: true,\n        },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-toggle-switch--md]': \"size() === 'md'\",\n        '[class.rt-toggle-switch--lg]': \"size() === 'lg'\",\n        '[class.rt-toggle-switch--on]': 'isOn()',\n        '[class.rt-toggle-switch--disabled]': 'isDisabled()',\n    },\n})\nexport class RtToggleSwitchComponent implements ControlValueAccessor {\n    #onChange: (value: boolean) => void = (): void => undefined;\n    #onTouched: () => void = (): void => undefined;\n\n    /** Отключение, назначенное формой через CVA (`setDisabledState`). */\n    readonly #disabledByForm: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #autoId: string = nextAutoId();\n\n    protected readonly isOn: WritableSignal<boolean> = signal<boolean>(false);\n    protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() || this.#disabledByForm());\n\n    /** Id кнопки: заданный входом или свой — на него указывает подпись. */\n    protected readonly controlId: Signal<string> = computed((): string => this.inputId() ?? this.#autoId);\n\n    protected readonly labelId: string = `${this.#autoId}-label`;\n\n    /**\n     * BEM-модификаторы для `[rtMod]`. Собираем в .ts, потому что\n     * Angular template-parser не поддерживает computed property keys\n     * в inline-объектах, а размер приходит ключом.\n     */\n    protected readonly bemMods: Signal<Record<string, boolean>> = computed((): Record<string, boolean> => ({\n        [this.size()]: true,\n        on: this.isOn(),\n        disabled: this.isDisabled(),\n        withIcons: this.iconOff() !== null || this.iconOn() !== null,\n    }));\n\n    public readonly inputId: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /** Подпись после переключателя. Пусто — без подписи, как раньше. */\n    public readonly label: InputSignal<string | null> = input<string | null>(null);\n\n    /** Размерный тир трека. */\n    public readonly size: InputSignal<IRtToggleSwitch.Size> = input<IRtToggleSwitch.Size>('sm');\n\n    /** Иконка выключенного состояния — в начальной половине трека. Пусто — без иконки. */\n    public readonly iconOff: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Иконка включённого состояния — в конечной половине трека. Пусто — без иконки. */\n    public readonly iconOn: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public writeValue(value: boolean | null | undefined): void {\n        this.isOn.set(value === true);\n    }\n\n    public registerOnChange(fn: (value: boolean) => void): void {\n        this.#onChange = fn;\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 toggle(): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        const next: boolean = !this.isOn();\n        this.isOn.set(next);\n        this.#onChange(next);\n        this.#onTouched();\n    }\n}\n","<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n","/**\n * Модель `<rt-toggle-switch>`: один корневой неймспейс с префиксом `I`.\n */\n\nexport namespace IRtToggleSwitch {\n    /**\n     * Размерный тир трека. Маппинг на пиксели — в SCSS\n     * (`--rt-toggle-track-width` / `-height` / `--rt-toggle-thumb-size`).\n     * Default — `sm`: он совпадает по высоте с плотными контролами формы,\n     * где тоггл стоит в ряду с текстом.\n     */\n    export type Size = 'sm' | 'md' | 'lg';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-toggle-switch.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-toggle-switch.component.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-switch/rt-toggle-switch.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    forwardRef,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtToggleSwitch } from './rt-toggle-switch.model';\n\nconst BEM_BLOCK: string = 'rt-toggle-switch';\n\n/** Счётчик для авто-id (связка подписи с кнопкой, когда `inputId` не задан). */\nlet uidSeed: number = 0;\n\nfunction nextAutoId(): string {\n    uidSeed += 1;\n    return `rt-toggle-switch-${uidSeed}`;\n}\n\n/**\n * On/off switch с `role=\"switch\"` + `aria-checked` — более правильный a11y\n * pattern чем `<input type=\"checkbox\">` для toggle (screen readers произносят\n * \"switch off/on\" вместо \"checkbox checked/unchecked\").\n *\n * Реализует `ControlValueAccessor` для `boolean` value через\n * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает\n * NG0200 cycle при boot'е.\n *\n * Отключение складывается из двух независимых источников: входа `disabled` и\n * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из\n * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при\n * связывании контрола, то есть раньше, чем переключатель впервые обновит своё\n * вью, и мирроринг входа затирал бы её слово — контрол, созданный отключённым,\n * оказывался бы кликабельным.\n *\n * Опциональные иконки `iconOff` / `iconOn` рисуются внутри трека статично:\n * off-иконка в начальной половине, on-иконка в конечной. Бегунок непрозрачен\n * и наезжает на иконку активного состояния, так что видна всегда иконка того\n * состояния, куда переключится контрол.\n *\n * Вход `label` рисует подпись после кнопки — элементом `<label>`, связанным с\n * кнопкой: нажатие на подпись переключает, и она же называет переключатель\n * скринридеру через `aria-labelledby`.\n *\n * Размер и отключение выводятся модификаторами и на хост: свойства размеров\n * объявлены на хосте, чтобы правило приложения на теге их переопределяло, а\n * прозрачность отключения гасит переключатель вместе с подписью.\n *\n * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.\n */\n@Component({\n    selector: 'rt-toggle-switch',\n    templateUrl: './rt-toggle-switch.component.html',\n    styleUrl: './rt-toggle-switch.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef((): typeof RtToggleSwitchComponent => RtToggleSwitchComponent),\n            multi: true,\n        },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-toggle-switch--md]': \"size() === 'md'\",\n        '[class.rt-toggle-switch--lg]': \"size() === 'lg'\",\n        '[class.rt-toggle-switch--on]': 'isOn()',\n        '[class.rt-toggle-switch--disabled]': 'isDisabled()',\n    },\n})\nexport class RtToggleSwitchComponent implements ControlValueAccessor {\n    #onChange: (value: boolean) => void = (): void => undefined;\n    #onTouched: () => void = (): void => undefined;\n\n    /** Отключение, назначенное формой через CVA (`setDisabledState`). */\n    readonly #disabledByForm: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #autoId: string = nextAutoId();\n\n    protected readonly isOn: WritableSignal<boolean> = signal<boolean>(false);\n    protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() || this.#disabledByForm());\n\n    /** Id кнопки: заданный входом или свой — на него указывает подпись. */\n    protected readonly controlId: Signal<string> = computed((): string => this.inputId() ?? this.#autoId);\n\n    protected readonly labelId: string = `${this.#autoId}-label`;\n\n    /**\n     * BEM-модификаторы для `[rtMod]`. Собираем в .ts, потому что\n     * Angular template-parser не поддерживает computed property keys\n     * в inline-объектах, а размер приходит ключом.\n     */\n    protected readonly bemMods: Signal<Record<string, boolean>> = computed((): Record<string, boolean> => ({\n        [this.size()]: true,\n        on: this.isOn(),\n        disabled: this.isDisabled(),\n        withIcons: this.iconOff() !== null || this.iconOn() !== null,\n    }));\n\n    public readonly inputId: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /** Подпись после переключателя. Пусто — без подписи, как раньше. */\n    public readonly label: InputSignal<string | null> = input<string | null>(null);\n\n    /** Размерный тир трека. */\n    public readonly size: InputSignal<IRtToggleSwitch.Size> = input<IRtToggleSwitch.Size>('sm');\n\n    /** Иконка выключенного состояния — в начальной половине трека. Пусто — без иконки. */\n    public readonly iconOff: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Иконка включённого состояния — в конечной половине трека. Пусто — без иконки. */\n    public readonly iconOn: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public writeValue(value: boolean | null | undefined): void {\n        this.isOn.set(value === true);\n    }\n\n    public registerOnChange(fn: (value: boolean) => void): void {\n        this.#onChange = fn;\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 toggle(): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        const next: boolean = !this.isOn();\n        this.isOn.set(next);\n        this.#onChange(next);\n        this.#onTouched();\n    }\n}\n","<ng-container rtBlock=\"rt-toggle-switch\">\n    <button\n        rtBlock=\"rt-toggle-switch\"\n        qa-dataid=\"toggle-switch-control\"\n        type=\"button\"\n        role=\"switch\"\n        [rtMod]=\"bemMods()\"\n        [attr.id]=\"label() ? controlId() : inputId()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"label() ? labelId : null\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\">\n        <span rtElem=\"track\">\n            @if (iconOff(); as iconOffName) {\n                <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n            }\n            @if (iconOn(); as iconOnName) {\n                <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n            }\n            <span rtElem=\"thumb\"></span>\n        </span>\n    </button>\n    @if (label(); as labelText) {\n        <label rtElem=\"label\" qa-dataid=\"toggle-switch-label\" [attr.id]=\"labelId\" [attr.for]=\"controlId()\">{{ labelText }}</label>\n    }\n</ng-container>\n"],"mappings":"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"}