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

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

@@ -0,0 +1,132 @@
+import * as i0 from '@angular/core';
+import { computed, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+
+const BEM_BLOCK = 'rt-toggle-button-group';
+/**
+ * Маппинг размера группы на размер вложенной `<rt-icon>`. rt-icon не имеет
+ * промежуточных значений (12 / 16 / 20 / 24 / 32), поэтому `lg` тоже едет
+ * на `sm` (16px) — ближе к расчётным 18px у rt-button lg, чем md (20px).
+ */
+const ICON_SIZE_BY_SIZE = Object.freeze({
+    sm: 'xs',
+    md: 'sm',
+    lg: 'sm',
+});
+/**
+ * Generic segmented control кита.
+ *
+ * API `toggle-button-group` с тремя особенностями:
+ *  1. BEM через `rtBlock/rtElem/rtMod` (camelCase mods → kebab-case в CSS).
+ *  2. Tooltip — нативный `[attr.title]` вместо `MatTooltip` (Angular Material
+ *     запрещён, см. CLAUDE.md).
+ *  3. Визуал — текстовые лейблы + опциональная иконка, а не icon-only кнопки.
+ *     Иконка остаётся опциональной, чтобы покрыть оба сценария.
+ *
+ * Компонент "controlled" — рендерит сегмент с `value === option.value` как
+ * активный, эмиттит `valueChange` при клике, обновление `value` остаётся за
+ * потребителем.
+ *
+ * Generic `<T = string>` сохраняет типизацию по value (`'list' | 'grid'`,
+ * union'ы, enum'ы). Дефолт `string` нужен, чтобы шаблон-инстанцирование
+ * без явного параметра компилировалось.
+ */
+class RtToggleButtonGroupComponent {
+    constructor() {
+        this.iconSize = computed(() => ICON_SIZE_BY_SIZE[this.size()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Сегменты, готовые к отрисовке: подсветка и недоступность посчитаны здесь, а не в шаблоне.
+         *
+         * Подсветка читается по-разному в одиночном и множественном выборе, а недоступность приходит
+         * с двух сторон — от группы и от самого сегмента. Признак группы главнее: доступный сегмент
+         * внутри отключённой группы читался бы как её единственное живое место.
+         */
+        this.items = computed(() => {
+            const multiple = this.multiple();
+            const chosen = this.values();
+            const single = this.value();
+            const groupDisabled = this.disabled();
+            return this.options().map((option) => ({
+                option,
+                active: multiple ? chosen.includes(option.value) : single === option.value,
+                disabled: groupDisabled || !!option.disabled,
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.options = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.value = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Множественный выбор: нажатие добавляет сегмент или снимает его, а не переносит выбор.
+         *
+         * Своим входом, а не расширением типа `value`: вход, у которого тип значения меняется от
+         * значения другого входа, не проверяет ни сборка, ни линтер — потребитель узнаёт о своей
+         * ошибке, когда группа перестаёт подсвечивать выбранное.
+         */
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Набор выбранного. Читается только при множественном выборе, одиночный берёт `value`. */
+        this.values = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.size = input('sm', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Растягивает группу на всю ширину контейнера; опции делят ширину поровну. */
+        this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.valueChange = output();
+        /**
+         * Весь набор выбранного после нажатия, а не разница с прежним: разницу вызывающий сводит со
+         * своим состоянием сам, и каждый сводит по-своему.
+         */
+        this.valuesChange = output();
+    }
+    onOptionClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        const option = item.option;
+        if (!this.multiple()) {
+            this.valueChange.emit(option.value);
+            return;
+        }
+        const chosen = this.values();
+        const next = chosen.includes(option.value)
+            ? chosen.filter((one) => one !== option.value)
+            : [...chosen, option.value];
+        this.valuesChange.emit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToggleButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtToggleButtonGroupComponent, isStandalone: true, selector: "rt-toggle-button-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valuesChange: "valuesChange" }, host: { properties: { "class.rt-toggle-button-group--full-width": "fullWidth()", "class.rt-toggle-button-group--md": "size() === 'md'", "class.rt-toggle-button-group--lg": "size() === 'lg'" }, classAttribute: "rt-toggle-button-group" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (item.option.icon || item.option.glyph) {\n                <rt-icon\n                    rtElem=\"icon\"\n                    color=\"current\"\n                    [name]=\"item.option.icon ?? null\"\n                    [glyph]=\"item.option.glyph ?? null\"\n                    [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ item.option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToggleButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-toggle-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        RtTooltipDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-toggle-button-group--full-width]': 'fullWidth()',
+                        '[class.rt-toggle-button-group--md]': "size() === 'md'",
+                        '[class.rt-toggle-button-group--lg]': "size() === 'lg'",
+                    }, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (item.option.icon || item.option.glyph) {\n                <rt-icon\n                    rtElem=\"icon\"\n                    color=\"current\"\n                    [name]=\"item.option.icon ?? null\"\n                    [glyph]=\"item.option.glyph ?? null\"\n                    [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ item.option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtToggleButtonGroupComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-toggle-button-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-toggle-button-group.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.html","../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-tools-ui-kit-v2-toggle-button-group.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { 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 { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtToggleButtonGroup } from './rt-toggle-button-group.model';\n\nconst BEM_BLOCK: string = 'rt-toggle-button-group';\n\n/**\n * Маппинг размера группы на размер вложенной `<rt-icon>`. rt-icon не имеет\n * промежуточных значений (12 / 16 / 20 / 24 / 32), поэтому `lg` тоже едет\n * на `sm` (16px) — ближе к расчётным 18px у rt-button lg, чем md (20px).\n */\nconst ICON_SIZE_BY_SIZE: Readonly<Record<IRtToggleButtonGroup.Size, IRtIcon.Size>> = Object.freeze({\n    sm: 'xs',\n    md: 'sm',\n    lg: 'sm',\n});\n\n/**\n * Generic segmented control кита.\n *\n * API `toggle-button-group` с тремя особенностями:\n *  1. BEM через `rtBlock/rtElem/rtMod` (camelCase mods → kebab-case в CSS).\n *  2. Tooltip — нативный `[attr.title]` вместо `MatTooltip` (Angular Material\n *     запрещён, см. CLAUDE.md).\n *  3. Визуал — текстовые лейблы + опциональная иконка, а не icon-only кнопки.\n *     Иконка остаётся опциональной, чтобы покрыть оба сценария.\n *\n * Компонент \"controlled\" — рендерит сегмент с `value === option.value` как\n * активный, эмиттит `valueChange` при клике, обновление `value` остаётся за\n * потребителем.\n *\n * Generic `<T = string>` сохраняет типизацию по value (`'list' | 'grid'`,\n * union'ы, enum'ы). Дефолт `string` нужен, чтобы шаблон-инстанцирование\n * без явного параметра компилировалось.\n */\n@Component({\n    selector: 'rt-toggle-button-group',\n    templateUrl: './rt-toggle-button-group.component.html',\n    styleUrls: ['./rt-toggle-button-group.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        RtTooltipDirective,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-toggle-button-group--full-width]': 'fullWidth()',\n        '[class.rt-toggle-button-group--md]': \"size() === 'md'\",\n        '[class.rt-toggle-button-group--lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtToggleButtonGroupComponent<T = string> {\n    protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_SIZE_BY_SIZE[this.size()]);\n\n    /**\n     * Сегменты, готовые к отрисовке: подсветка и недоступность посчитаны здесь, а не в шаблоне.\n     *\n     * Подсветка читается по-разному в одиночном и множественном выборе, а недоступность приходит\n     * с двух сторон — от группы и от самого сегмента. Признак группы главнее: доступный сегмент\n     * внутри отключённой группы читался бы как её единственное живое место.\n     */\n    protected readonly items: Signal<ReadonlyArray<IRtToggleButtonGroup.Rendered<T>>> = computed(\n        (): ReadonlyArray<IRtToggleButtonGroup.Rendered<T>> => {\n            const multiple: boolean = this.multiple();\n            const chosen: ReadonlyArray<T> = this.values();\n            const single: T | undefined = this.value();\n            const groupDisabled: boolean = this.disabled();\n\n            return this.options().map((option: IRtToggleButtonGroup.Option<T>): IRtToggleButtonGroup.Rendered<T> => ({\n                option,\n                active: multiple ? chosen.includes(option.value) : single === option.value,\n                disabled: groupDisabled || !!option.disabled,\n            }));\n        }\n    );\n\n    public readonly options: InputSignal<ReadonlyArray<IRtToggleButtonGroup.Option<T>>> =\n        input.required<ReadonlyArray<IRtToggleButtonGroup.Option<T>>>();\n\n    public readonly value: InputSignal<T | undefined> = input<T | undefined>(undefined);\n\n    /**\n     * Множественный выбор: нажатие добавляет сегмент или снимает его, а не переносит выбор.\n     *\n     * Своим входом, а не расширением типа `value`: вход, у которого тип значения меняется от\n     * значения другого входа, не проверяет ни сборка, ни линтер — потребитель узнаёт о своей\n     * ошибке, когда группа перестаёт подсвечивать выбранное.\n     */\n    public readonly multiple: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Набор выбранного. Читается только при множественном выборе, одиночный берёт `value`. */\n    public readonly values: InputSignal<ReadonlyArray<T>> = input<ReadonlyArray<T>>([]);\n\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly size: InputSignal<IRtToggleButtonGroup.Size> = input<IRtToggleButtonGroup.Size>('sm');\n\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Растягивает группу на всю ширину контейнера; опции делят ширину поровну. */\n    public readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly valueChange: OutputEmitterRef<T> = output<T>();\n\n    /**\n     * Весь набор выбранного после нажатия, а не разница с прежним: разницу вызывающий сводит со\n     * своим состоянием сам, и каждый сводит по-своему.\n     */\n    public readonly valuesChange: OutputEmitterRef<ReadonlyArray<T>> = output<ReadonlyArray<T>>();\n\n    protected onOptionClick(item: IRtToggleButtonGroup.Rendered<T>): void {\n        if (item.disabled) {\n            return;\n        }\n\n        const option: IRtToggleButtonGroup.Option<T> = item.option;\n\n        if (!this.multiple()) {\n            this.valueChange.emit(option.value);\n\n            return;\n        }\n\n        const chosen: ReadonlyArray<T> = this.values();\n        const next: T[] = chosen.includes(option.value)\n            ? chosen.filter((one: T): boolean => one !== option.value)\n            : [...chosen, option.value];\n\n        this.valuesChange.emit(next);\n    }\n}\n","<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (item.option.icon || item.option.glyph) {\n                <rt-icon\n                    rtElem=\"icon\"\n                    color=\"current\"\n                    [name]=\"item.option.icon ?? null\"\n                    [glyph]=\"item.option.glyph ?? null\"\n                    [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ item.option.label }}</span>\n        </button>\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-toggle-switch.mjs

@@ -0,0 +1,162 @@
+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` не задан). */
+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", "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.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.
+ */
+
+export { RtToggleSwitchComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-toggle-switch.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,135 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, contentChild, TemplateRef, input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+
+/**
+ * Маркер-директива для контента в левой секции тулбара.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar>
+ *     <ng-template rtToolbarLeft>
+ *         <button rtButton label="Создать" />
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+class RtToolbarLeftDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtToolbarLeftDirective, isStandalone: true, selector: "[rtToolbarLeft]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarLeftDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtToolbarLeft]',
+                }]
+        }] });
+/**
+ * Маркер-директива для контента в центральной секции тулбара.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar>
+ *     <ng-template rtToolbarCenter>
+ *         <span>Заголовок страницы</span>
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+class RtToolbarCenterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtToolbarCenterDirective, isStandalone: true, selector: "[rtToolbarCenter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarCenterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtToolbarCenter]',
+                }]
+        }] });
+/**
+ * Маркер-директива для контента в правой секции тулбара.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar>
+ *     <ng-template rtToolbarRight>
+ *         <input type="search" placeholder="Поиск" />
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+class RtToolbarRightDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtToolbarRightDirective, isStandalone: true, selector: "[rtToolbarRight]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarRightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtToolbarRight]',
+                }]
+        }] });
+/**
+ * Универсальный тулбар с тремя секциями: left, center, right.
+ * Секции задаются `<ng-template>` с директивами-маркерами и подставляются через `ngTemplateOutlet`.
+ * Каждый модуль/фича подключает `rt-toolbar` в своём layout и наполняет нужные секции.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar>
+ *     <ng-template rtToolbarLeft>
+ *         <button rtButton label="Создать" />
+ *         <button rtButton label="Удалить" appearance="text" />
+ *     </ng-template>
+ *
+ *     <ng-template rtToolbarCenter>
+ *         <span>Заявки</span>
+ *     </ng-template>
+ *
+ *     <ng-template rtToolbarRight>
+ *         <input type="search" [formControl]="searchCtrl" />
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+const BEM_BLOCK = 'rt-toolbar';
+class RtToolbarComponent {
+    constructor() {
+        this.leftTpl = contentChild(RtToolbarLeftDirective, { ...(ngDevMode ? { debugName: "leftTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.centerTpl = contentChild(RtToolbarCenterDirective, { ...(ngDevMode ? { debugName: "centerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.rightTpl = contentChild(RtToolbarRightDirective, { ...(ngDevMode ? { debugName: "rightTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * Компактная шапка (заголовок + иконки-действия): зоны остаются в одну строку
+         * даже на мобилке. Без этого трёхзонный list-тулбар стекается в колонку на
+         * ≤768px, что для узкой шапки (напр. rt-chat) неверно.
+         */
+        this.dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtToolbarComponent, isStandalone: true, selector: "rt-toolbar", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-toolbar--dense": "dense()" }, classAttribute: "rt-toolbar" }, queries: [{ propertyName: "leftTpl", first: true, predicate: RtToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerTpl", first: true, predicate: RtToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightTpl", first: true, predicate: RtToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (leftTpl() || centerTpl() || rightTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}@media(width<=768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}}\n"], dependencies: [{ kind: "directive", type: 
+                // Angular
+                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
+                // standalone components / 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: RtToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        NgTemplateOutlet,
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-toolbar--dense]': 'dense()',
+                    }, template: "@if (leftTpl() || centerTpl() || rightTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}@media(width<=768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}}\n"] }]
+        }], propDecorators: { leftTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtToolbarLeftDirective), { ...{ read: TemplateRef }, isSignal: true }] }], centerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtToolbarCenterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], rightTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtToolbarRightDirective), { ...{ read: TemplateRef }, isSignal: true }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtToolbarCenterDirective, RtToolbarComponent, RtToolbarLeftDirective, RtToolbarRightDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-toolbar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-toolbar.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.ts","../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.html","../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-tools-ui-kit-v2-toolbar.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    Directive,\n    input,\n    InputSignalWithTransform,\n    Signal,\n    TemplateRef,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\n/**\n * Маркер-директива для контента в левой секции тулбара.\n *\n * @example\n * ```html\n * <rt-toolbar>\n *     <ng-template rtToolbarLeft>\n *         <button rtButton label=\"Создать\" />\n *     </ng-template>\n * </rt-toolbar>\n * ```\n */\n@Directive({\n    selector: '[rtToolbarLeft]',\n})\nexport class RtToolbarLeftDirective {}\n\n/**\n * Маркер-директива для контента в центральной секции тулбара.\n *\n * @example\n * ```html\n * <rt-toolbar>\n *     <ng-template rtToolbarCenter>\n *         <span>Заголовок страницы</span>\n *     </ng-template>\n * </rt-toolbar>\n * ```\n */\n@Directive({\n    selector: '[rtToolbarCenter]',\n})\nexport class RtToolbarCenterDirective {}\n\n/**\n * Маркер-директива для контента в правой секции тулбара.\n *\n * @example\n * ```html\n * <rt-toolbar>\n *     <ng-template rtToolbarRight>\n *         <input type=\"search\" placeholder=\"Поиск\" />\n *     </ng-template>\n * </rt-toolbar>\n * ```\n */\n@Directive({\n    selector: '[rtToolbarRight]',\n})\nexport class RtToolbarRightDirective {}\n\n/**\n * Универсальный тулбар с тремя секциями: left, center, right.\n * Секции задаются `<ng-template>` с директивами-маркерами и подставляются через `ngTemplateOutlet`.\n * Каждый модуль/фича подключает `rt-toolbar` в своём layout и наполняет нужные секции.\n *\n * @example\n * ```html\n * <rt-toolbar>\n *     <ng-template rtToolbarLeft>\n *         <button rtButton label=\"Создать\" />\n *         <button rtButton label=\"Удалить\" appearance=\"text\" />\n *     </ng-template>\n *\n *     <ng-template rtToolbarCenter>\n *         <span>Заявки</span>\n *     </ng-template>\n *\n *     <ng-template rtToolbarRight>\n *         <input type=\"search\" [formControl]=\"searchCtrl\" />\n *     </ng-template>\n * </rt-toolbar>\n * ```\n */\nconst BEM_BLOCK: string = 'rt-toolbar';\n\n@Component({\n    selector: 'rt-toolbar',\n    templateUrl: './rt-toolbar.component.html',\n    styleUrls: ['./rt-toolbar.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-toolbar--dense]': 'dense()',\n    },\n})\nexport class RtToolbarComponent {\n    protected readonly leftTpl: Signal<TemplateRef<unknown> | undefined> = contentChild(RtToolbarLeftDirective, { read: TemplateRef });\n\n    protected readonly centerTpl: Signal<TemplateRef<unknown> | undefined> = contentChild(RtToolbarCenterDirective, { read: TemplateRef });\n\n    protected readonly rightTpl: Signal<TemplateRef<unknown> | undefined> = contentChild(RtToolbarRightDirective, { read: TemplateRef });\n\n    /**\n     * Компактная шапка (заголовок + иконки-действия): зоны остаются в одну строку\n     * даже на мобилке. Без этого трёхзонный list-тулбар стекается в колонку на\n     * ≤768px, что для узкой шапки (напр. rt-chat) неверно.\n     */\n    public readonly dense: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n}\n","@if (leftTpl() || centerTpl() || rightTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}