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

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

@@ -0,0 +1,315 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, inject, computed, viewChild, signal, contentChild, input, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { rtKitLabel, RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
+import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { rtTreeFind, rtTreeIsTree, rtTreeRows, RtSelectTriggerDirective, rtScrollActiveOptionIntoView, rtTreeOpenFor, rtTreeToggle, rtTreeLeaves, rtTreeBranchState, rtTreeSideKey } from '@rt-tools/ui-kit-v2/select';
+import { RtTagComponent } from '@rt-tools/ui-kit-v2/tag';
+
+/** Лейбл опции по её value для отображения чипа выбранного значения — на любой глубине дерева. */
+class RtMultiselectLabelPipe {
+    transform(value, options) {
+        return rtTreeFind(options, value)?.label ?? String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMultiselectLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: RtMultiselectLabelPipe, isStandalone: true, name: "rtMultiselectLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMultiselectLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rtMultiselectLabel' }]
+        }] });
+
+const BEM_BLOCK = 'rt-multiselect';
+/** Клавиши, открывающие закрытый dropdown с фокуса на trigger'е. */
+const OPEN_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Enter', ' ']);
+let panelIdSeed = 0;
+function nextPanelId() {
+    panelIdSeed += 1;
+    return panelIdSeed;
+}
+/**
+ * Multi-select с chip-rendering выбранных значений в trigger.
+ *
+ * Panel рендерится через CDK Overlay (`[rtPopover]`) — не обрезается overflow,
+ * авто-flip. Панель НЕ закрывается после выбора (multi vs single). CVA через
+ * общий `RtFormControlBase`. Reuses `IRtSelect.Option<TValue>` (type-import).
+ * Чипы закрываются поштучно; крестик (`clearable`) слева от шеврона очищает весь
+ * выбор.
+ *
+ * Keyboard-nav (activedescendant): фокус на trigger'е, ArrowUp/Down — highlight,
+ * Enter — toggle опции (panel остаётся открытой), Escape — закрыть. Home/End —
+ * deferred.
+ */
+class RtMultiselectComponent extends RtFormControlBase {
+    #t_uiSelectValues;
+    constructor() {
+        super();
+        this.#t_uiSelectValues = rtKitLabel('uiSelectValues');
+        this.t = inject(RT_KIT_LABELS);
+        this.panelId = `rt-multiselect-panel-${nextPanelId()}`;
+        this.placeholderText = computed(() => this.placeholder() || this.#t_uiSelectValues(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+        this.popover = viewChild.required(RtPopoverDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        this.triggerEl = viewChild('triggerEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.activeIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        /** Раскрытые ветки дерева. Живут, пока открыта панель: при открытии раскрыты ветки над выбранным. */
+        this.openBranches = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openBranches" }] : /* istanbul ignore next */ []));
+        /** Дерево ли список: тогда у строк есть место под стрелку и отступ по уровню. */
+        this.isTree = computed(() => rtTreeIsTree(this.options()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTree" }] : /* istanbul ignore next */ []));
+        /** Видимые строки: плоский список — как прежде, дерево — по раскрытым веткам. */
+        this.rows = computed(() => rtTreeRows(this.options(), this.openBranches()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /** Флажок каждой строки: у листа — выбран ли он, у ветки — выведен из её включённых листьев. */
+        this.rowChecks = computed(() => this.rows().map((row) => this.#checkOf(row)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowChecks" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.popover().isOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */
+        this.activeOptionId = computed(() => this.isOpen() && this.activeIndex() >= 0 ? `${this.panelId}-opt-${this.activeIndex()}` : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+        /**
+         * Своя разметка указателя, если потребитель её объявил. Маркер тот же, что у выбора одного
+         * значения: семьи отличаются только разметкой внутри кнопки.
+         */
+        this.triggerTpl = contentChild(RtSelectTriggerDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerTpl" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.visibleChips = computed(() => this.value().slice(0, this.maxChips()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+        this.extraChipsCount = computed(() => Math.max(0, this.value().length - this.maxChips()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "extraChipsCount" }] : /* istanbul ignore next */ []));
+        /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */
+        this.triggerState = computed(() => ({
+            isOpen: this.isOpen(),
+            value: this.value(),
+            label: this.displayText(),
+            isDisabled: this.isDisabled(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerState" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.value()
+            .map((v) => this.labelOf(v))
+            .join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        this.options = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.maxChips = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxChips" }] : /* istanbul ignore next */ []));
+        /** Иконка слева в указателе — та же, что у `rt-select`: перед подсказкой или чипами. */
+        this.iconLeft = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+        /**
+         * Чем мерится панель. По умолчанию она не уже кнопки и дальше растёт по содержимому:
+         * со своим указателем кнопка бывает узкой, и панель по её ширине давила бы содержимое.
+         * `trigger` возвращает прежнее — ровно по кнопке, `auto` пускает панель по содержимому
+         * целиком. Предел высоты назначается входом `panelMaxHeight`.
+         */
+        this.panelWidth = input('trigger-min', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Предел высоты панели — длина как в стилях, например `20rem`. Пусто — предел кита
+         * `--rt-input-panel-max-height`, и длинный список прокручивается внутри панели: без предела
+         * он уходил за нижний край экрана, и пункты за краем были недостижимы. `none` снимает предел —
+         * для короткого списка, который должен открываться целиком, без прокрутки. Значение ставится
+         * на саму панель: она рисуется в наложении, вне поддерева блока.
+         */
+        this.panelMaxHeight = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+        // Подсветка, сдвинутая клавишами, не уходит за край панели с пределом высоты.
+        rtScrollActiveOptionIntoView(this.activeOptionId);
+    }
+    setDisabledState(disabled) {
+        super.setDisabledState(disabled);
+        if (disabled) {
+            this.popover().close();
+        }
+    }
+    getEmptyValue() {
+        return [];
+    }
+    focusAfterClear() {
+        this.triggerEl()?.nativeElement.focus();
+    }
+    labelOf(value) {
+        return rtTreeFind(this.options(), value)?.label ?? String(value);
+    }
+    isSelected(value) {
+        return this.value().includes(value);
+    }
+    onOpened() {
+        this.openBranches.set(rtTreeOpenFor(this.options(), this.value()));
+    }
+    toggleBranch(event, value) {
+        event.stopPropagation();
+        this.openBranches.update((open) => rtTreeToggle(open, value));
+    }
+    onClosed() {
+        this.activeIndex.set(-1);
+        this.markTouched();
+    }
+    /**
+     * Лист переключается сам. Ветка выбирает все свои включённые листья или снимает их, когда
+     * выбраны все; своё значение ветки в выбор не пишется.
+     */
+    toggleOption(opt) {
+        if (opt.disabled || this.isDisabled()) {
+            return;
+        }
+        const leaves = rtTreeLeaves(opt);
+        const current = this.value();
+        const clearing = rtTreeBranchState(opt, current) === 'all';
+        const next = clearing
+            ? current.filter((v) => !leaves.includes(v))
+            : [...current, ...leaves.filter((leaf) => !current.includes(leaf))];
+        this.value.set(next);
+        this.emitChange([...next]);
+    }
+    removeChip(value, event) {
+        event.stopPropagation();
+        if (this.isDisabled()) {
+            return;
+        }
+        const next = this.value().filter((v) => v !== value);
+        this.value.set(next);
+        this.emitChange([...next]);
+    }
+    onTriggerKeydown(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        if (!this.isOpen()) {
+            if (OPEN_KEYS.has(event.key)) {
+                event.preventDefault();
+                this.popover().open();
+                this.#moveActive(1);
+            }
+            return;
+        }
+        this.#handleOpenKeydown(event);
+    }
+    #handleOpenKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.#moveActive(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.#moveActive(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.#toggleActive();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.popover().close();
+                break;
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.#sideKey(event.key);
+                break;
+            default:
+                break;
+        }
+    }
+    #checkOf(row) {
+        if (row.branch) {
+            return rtTreeBranchState(row.option, this.value());
+        }
+        return this.value().includes(row.option.value) ? 'all' : 'none';
+    }
+    #sideKey(key) {
+        const answer = rtTreeSideKey(this.rows(), this.activeIndex(), key);
+        const toggle = answer.toggle;
+        if (toggle !== null) {
+            this.openBranches.update((open) => rtTreeToggle(open, toggle));
+        }
+        this.activeIndex.set(answer.index);
+    }
+    #moveActive(delta) {
+        const opts = this.rows().map((row) => row.option);
+        if (opts.length === 0) {
+            this.activeIndex.set(-1);
+            return;
+        }
+        let index = this.activeIndex();
+        for (let step = 0; step < opts.length; step += 1) {
+            index = (index + delta + opts.length) % opts.length;
+            if (!opts[index].disabled) {
+                this.activeIndex.set(index);
+                return;
+            }
+        }
+    }
+    #toggleActive() {
+        const opts = this.rows().map((row) => row.option);
+        const index = this.activeIndex();
+        if (index >= 0 && index < opts.length) {
+            this.toggleOption(opts[index]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMultiselectComponent, isStandalone: true, selector: "rt-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-multiselect--open": "isOpen()", "class.rt-multiselect--disabled": "isDisabled()", "class.rt-multiselect--readonly": "isReadonly()", "class.rt-multiselect--invalid": "isInvalid()", "class.rt-multiselect--borderless": "!bordered()", "class.rt-multiselect--size--sm": "size() === 'sm'", "class.rt-multiselect--size--lg": "size() === 'lg'" }, classAttribute: "rt-multiselect" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtMultiselectComponent) },
+        ], queries: [{ propertyName: "triggerTpl", first: true, predicate: RtSelectTriggerDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: RtPopoverDirective, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-multiselect\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"multiselect-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"multiselect-trigger\"\n        type=\"button\"\n        [rtPopoverWidth]=\"panelWidth()\"\n        [rtMod]=\"{ own: !!triggerTpl() }\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverDisabled]=\"isDisabled()\"\n        [attr.id]=\"effectiveControlId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        [disabled]=\"isDisabled()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\">\n        <!--\n            \u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0443\u043A\u0430\u0437\u0430\u0442\u0435\u043B\u044F: \u0441\u0432\u043E\u044F, \u0435\u0441\u043B\u0438 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0435\u0451 \u043E\u0431\u044A\u044F\u0432\u0438\u043B, \u0438\u043D\u0430\u0447\u0435 \u0437\u0430\u0448\u0438\u0442\u0430\u044F \u043A\u0438\u0442\u043E\u043C. \u041E\u043D\u0430 \u0432\u0441\u0442\u0430\u0451\u0442\n            \u0432\u043D\u0443\u0442\u0440\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0451: \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u2014 \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u0435 \u043F\u0430\u043D\u0435\u043B\u0438, \u043F\u0440\u0438\u043C\u0435\u0442\u044B \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u0438,\n            \u043E\u0442\u043A\u043B\u044E\u0447\u0451\u043D\u043D\u043E\u0441\u0442\u044C, \u043A\u043B\u0430\u0432\u0438\u0448\u0438 \u0438 \u0437\u0430\u043A\u0440\u044B\u0442\u0438\u0435 \u2014 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435 \u043A\u0438\u0442\u0430.\n        -->\n        @if (triggerTpl(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: triggerState() }\" />\n        } @else {\n            @if (iconLeft(); as left) {\n                <rt-icon rtElem=\"icon-left\" qa-dataid=\"multiselect-icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            @if (value().length === 0) {\n                <span rtElem=\"placeholder\" qa-dataid=\"multiselect-placeholder\">{{ placeholderText() }}</span>\n            } @else {\n                <span rtElem=\"chips\">\n                    @for (val of visibleChips(); track val) {\n                        <span rtElem=\"chip\" qa-dataid=\"multiselect-chip\" [attr.data-value]=\"val\">\n                            <rt-tag\n                                severity=\"info\"\n                                [value]=\"val | rtMultiselectLabel: options()\"\n                                [closable]=\"true\"\n                                (closed)=\"removeChip(val, $event)\" />\n                        </span>\n                    }\n                    @if (extraChipsCount() > 0) {\n                        <span rtElem=\"chip-more\" qa-dataid=\"multiselect-chip-more\">+{{ extraChipsCount() }}</span>\n                    }\n                </span>\n            }\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"multiselect-clear\"\n                    icon=\"ico-close\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [ariaLabel]=\"t().uiClear\"\n                    [tabIndex]=\"-1\"\n                    (clicked)=\"clear($event)\" />\n            }\n            <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" color=\"muted\" />\n        }\n    </button>\n\n    <ng-template #panelTpl>\n        <div\n            rtElem=\"panel\"\n            qa-dataid=\"multiselect-panel\"\n            role=\"listbox\"\n            [style.--rt-multiselect-panel-max-height]=\"panelMaxHeight()\"\n            [attr.aria-label]=\"ariaLabel()\">\n            <!--\n                \u041E\u043F\u0446\u0438\u0438 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014 \u043D\u0430 trigger'\u0435\n                (activedescendant), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435 focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E.\n            -->\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <ul rtElem=\"list\">\n                @for (row of rows(); track row.option.value; let i = $index) {\n                    <li\n                        rtElem=\"option\"\n                        qa-dataid=\"multiselect-option\"\n                        role=\"option\"\n                        [id]=\"panelId + '-opt-' + i\"\n                        [attr.data-value]=\"row.option.value\"\n                        [attr.aria-level]=\"isTree() ? row.level + 1 : null\"\n                        [style.--rt-multiselect-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: rowChecks()[i] === 'all',\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"rowChecks()[i] === 'all'\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"toggleOption(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"multiselect-option-toggle\"\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                                    [attr.aria-expanded]=\"row.open\"\n                                    (click)=\"toggleBranch($event, row.option.value)\">\n                                    <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                                </button>\n                            } @else {\n                                <span rtElem=\"toggle-space\"></span>\n                            }\n                        }\n                        <input\n                            rtElem=\"checkbox\"\n                            qa-dataid=\"multiselect-option-checkbox\"\n                            type=\"checkbox\"\n                            tabindex=\"-1\"\n                            [checked]=\"rowChecks()[i] === 'all'\"\n                            [indeterminate]=\"rowChecks()[i] === 'some'\" />\n                        <span rtElem=\"option-label\" qa-dataid=\"multiselect-option-label\">{{ row.option.label }}</span>\n                    </li>\n                } @empty {\n                    <li rtElem=\"empty\" qa-dataid=\"multiselect-empty\">{{ t().uiNoOptions }}</li>\n                }\n            </ul>\n        </div>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-multiselect{--rt-multiselect-radius: var(--rt-input-radius);--rt-multiselect-caret-transition-duration: var(--rt-duration-fast);--rt-multiselect-own-outline-width: var(--rt-border-width-medium);position:relative;display:block;width:100%}.rt-multiselect--borderless .rt-multiselect__trigger{border-color:transparent}.rt-multiselect__trigger{display:flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-multiselect-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:pointer;font-family:inherit;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);text-align:start;transition:var(--rt-input-transition)}.rt-multiselect__trigger:focus{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-multiselect__trigger:disabled{cursor:not-allowed}.rt-multiselect__trigger--own{width:auto;min-height:0;padding:0;border-color:transparent;background-color:transparent}.rt-multiselect__trigger--own:focus{border-color:transparent;box-shadow:none}.rt-multiselect__trigger--own:focus-visible{outline:var(--rt-multiselect-own-outline-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-multiselect--open .rt-multiselect__trigger{border-color:var(--rt-input-color-border-focus)}.rt-multiselect--open .rt-multiselect__trigger--own{border-color:transparent}.rt-multiselect--invalid .rt-multiselect__trigger{border-color:var(--rt-input-color-border-error)}.rt-multiselect--invalid .rt-multiselect__trigger:focus{box-shadow:var(--rt-input-focus-shadow-error)}.rt-multiselect--invalid .rt-multiselect__trigger--own{border-color:transparent}.rt-multiselect--invalid .rt-multiselect__trigger--own:focus{box-shadow:none}.rt-multiselect--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-multiselect--readonly .rt-multiselect__trigger{display:none}.rt-multiselect__readonly{display:inline-flex;min-height:var(--rt-input-height);align-items:center;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-multiselect__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-multiselect--size--sm .rt-multiselect__trigger{min-height:var(--rt-input-height-sm)}.rt-multiselect--size--lg .rt-multiselect__trigger{min-height:var(--rt-input-height-lg)}.rt-multiselect__placeholder{overflow:hidden;min-width:0;flex:1 1 auto;color:var(--rt-input-color-text-placeholder);text-overflow:ellipsis;white-space:nowrap}.rt-multiselect__chips{display:flex;min-width:0;flex:1 1 auto;flex-wrap:wrap;gap:var(--rt-space-2xs)}.rt-multiselect__chip{display:inline-flex;align-items:center}.rt-multiselect__chip-more{display:inline-flex;align-items:center;padding:0 var(--rt-space-xs);color:var(--rt-input-color-text-placeholder);font-size:var(--rt-input-font-size)}.rt-multiselect__icon-left,.rt-multiselect__clear{flex-shrink:0}.rt-multiselect__chevron{flex-shrink:0;transition:transform var(--rt-multiselect-caret-transition-duration) ease}.rt-multiselect--open .rt-multiselect__chevron{transform:rotate(180deg)}.rt-multiselect__panel{--rt-multiselect-panel-shadow: var(--rt-shadow-md);--rt-multiselect-tree-indent: var(--rt-space-lg);--rt-multiselect-panel-max-height: var(--rt-input-panel-max-height);width:100%;max-height:var(--rt-multiselect-panel-max-height);box-sizing:border-box;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-multiselect-panel-shadow);overflow-y:auto}.rt-multiselect__list{padding:var(--rt-space-2xs) 0;margin:0;list-style:none}.rt-multiselect__option{--rt-multiselect-tree-level: 0;display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);padding-inline-start:calc(var(--rt-space-md) + var(--rt-multiselect-tree-indent) * var(--rt-multiselect-tree-level))}.rt-multiselect__option:hover,.rt-multiselect__option--active{background-color:var(--rt-color-bg-hover)}.rt-multiselect__option--selected{background-color:var(--rt-color-action-primary-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-multiselect__option--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-multiselect__option--disabled:hover{background-color:transparent}.rt-multiselect__toggle,.rt-multiselect__toggle-space{display:inline-flex;flex-shrink:0;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-multiselect__toggle{align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.rt-multiselect__checkbox{flex-shrink:0;margin:0;pointer-events:none}.rt-multiselect__option-label{min-width:0;flex:1 1 auto}.rt-multiselect__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-multiselect[data-rt-radius=none]{--rt-multiselect-radius: var(--rt-radius-none)}.rt-multiselect[data-rt-radius=xs]{--rt-multiselect-radius: var(--rt-radius-xs)}.rt-multiselect[data-rt-radius=sm]{--rt-multiselect-radius: var(--rt-radius-sm)}.rt-multiselect[data-rt-radius=ms]{--rt-multiselect-radius: var(--rt-radius-ms)}.rt-multiselect[data-rt-radius=md]{--rt-multiselect-radius: var(--rt-radius-md)}.rt-multiselect[data-rt-radius=lg]{--rt-multiselect-radius: var(--rt-radius-lg)}.rt-multiselect[data-rt-radius=xl]{--rt-multiselect-radius: var(--rt-radius-xl)}.rt-multiselect[data-rt-radius=\"2xl\"]{--rt-multiselect-radius: var(--rt-radius-2xl)}.rt-multiselect[data-rt-radius=full]{--rt-multiselect-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
+                // Angular
+                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+                // standalone components / directives
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "component", type: RtTagComponent, selector: "rt-tag", inputs: ["value", "severity", "size", "appearance", "icon", "iconEnd", "closable"], outputs: ["closed"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
+                // pipes
+                RtMultiselectLabelPipe, name: "rtMultiselectLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        NgTemplateOutlet,
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtIconComponent,
+                        RtPopoverDirective,
+                        RtTagComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        // pipes
+                        RtMultiselectLabelPipe,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtMultiselectComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-multiselect--open]': 'isOpen()',
+                        '[class.rt-multiselect--disabled]': 'isDisabled()',
+                        '[class.rt-multiselect--readonly]': 'isReadonly()',
+                        '[class.rt-multiselect--invalid]': 'isInvalid()',
+                        '[class.rt-multiselect--borderless]': '!bordered()',
+                        '[class.rt-multiselect--size--sm]': "size() === 'sm'",
+                        '[class.rt-multiselect--size--lg]': "size() === 'lg'",
+                    }, template: "<ng-container rtBlock=\"rt-multiselect\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"multiselect-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"multiselect-trigger\"\n        type=\"button\"\n        [rtPopoverWidth]=\"panelWidth()\"\n        [rtMod]=\"{ own: !!triggerTpl() }\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverDisabled]=\"isDisabled()\"\n        [attr.id]=\"effectiveControlId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        [disabled]=\"isDisabled()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\">\n        <!--\n            \u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0443\u043A\u0430\u0437\u0430\u0442\u0435\u043B\u044F: \u0441\u0432\u043E\u044F, \u0435\u0441\u043B\u0438 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0435\u0451 \u043E\u0431\u044A\u044F\u0432\u0438\u043B, \u0438\u043D\u0430\u0447\u0435 \u0437\u0430\u0448\u0438\u0442\u0430\u044F \u043A\u0438\u0442\u043E\u043C. \u041E\u043D\u0430 \u0432\u0441\u0442\u0430\u0451\u0442\n            \u0432\u043D\u0443\u0442\u0440\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0451: \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u2014 \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u0435 \u043F\u0430\u043D\u0435\u043B\u0438, \u043F\u0440\u0438\u043C\u0435\u0442\u044B \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u0438,\n            \u043E\u0442\u043A\u043B\u044E\u0447\u0451\u043D\u043D\u043E\u0441\u0442\u044C, \u043A\u043B\u0430\u0432\u0438\u0448\u0438 \u0438 \u0437\u0430\u043A\u0440\u044B\u0442\u0438\u0435 \u2014 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435 \u043A\u0438\u0442\u0430.\n        -->\n        @if (triggerTpl(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: triggerState() }\" />\n        } @else {\n            @if (iconLeft(); as left) {\n                <rt-icon rtElem=\"icon-left\" qa-dataid=\"multiselect-icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            @if (value().length === 0) {\n                <span rtElem=\"placeholder\" qa-dataid=\"multiselect-placeholder\">{{ placeholderText() }}</span>\n            } @else {\n                <span rtElem=\"chips\">\n                    @for (val of visibleChips(); track val) {\n                        <span rtElem=\"chip\" qa-dataid=\"multiselect-chip\" [attr.data-value]=\"val\">\n                            <rt-tag\n                                severity=\"info\"\n                                [value]=\"val | rtMultiselectLabel: options()\"\n                                [closable]=\"true\"\n                                (closed)=\"removeChip(val, $event)\" />\n                        </span>\n                    }\n                    @if (extraChipsCount() > 0) {\n                        <span rtElem=\"chip-more\" qa-dataid=\"multiselect-chip-more\">+{{ extraChipsCount() }}</span>\n                    }\n                </span>\n            }\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"multiselect-clear\"\n                    icon=\"ico-close\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [ariaLabel]=\"t().uiClear\"\n                    [tabIndex]=\"-1\"\n                    (clicked)=\"clear($event)\" />\n            }\n            <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" color=\"muted\" />\n        }\n    </button>\n\n    <ng-template #panelTpl>\n        <div\n            rtElem=\"panel\"\n            qa-dataid=\"multiselect-panel\"\n            role=\"listbox\"\n            [style.--rt-multiselect-panel-max-height]=\"panelMaxHeight()\"\n            [attr.aria-label]=\"ariaLabel()\">\n            <!--\n                \u041E\u043F\u0446\u0438\u0438 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014 \u043D\u0430 trigger'\u0435\n                (activedescendant), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435 focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E.\n            -->\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <ul rtElem=\"list\">\n                @for (row of rows(); track row.option.value; let i = $index) {\n                    <li\n                        rtElem=\"option\"\n                        qa-dataid=\"multiselect-option\"\n                        role=\"option\"\n                        [id]=\"panelId + '-opt-' + i\"\n                        [attr.data-value]=\"row.option.value\"\n                        [attr.aria-level]=\"isTree() ? row.level + 1 : null\"\n                        [style.--rt-multiselect-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: rowChecks()[i] === 'all',\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"rowChecks()[i] === 'all'\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"toggleOption(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"multiselect-option-toggle\"\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                                    [attr.aria-expanded]=\"row.open\"\n                                    (click)=\"toggleBranch($event, row.option.value)\">\n                                    <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                                </button>\n                            } @else {\n                                <span rtElem=\"toggle-space\"></span>\n                            }\n                        }\n                        <input\n                            rtElem=\"checkbox\"\n                            qa-dataid=\"multiselect-option-checkbox\"\n                            type=\"checkbox\"\n                            tabindex=\"-1\"\n                            [checked]=\"rowChecks()[i] === 'all'\"\n                            [indeterminate]=\"rowChecks()[i] === 'some'\" />\n                        <span rtElem=\"option-label\" qa-dataid=\"multiselect-option-label\">{{ row.option.label }}</span>\n                    </li>\n                } @empty {\n                    <li rtElem=\"empty\" qa-dataid=\"multiselect-empty\">{{ t().uiNoOptions }}</li>\n                }\n            </ul>\n        </div>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-multiselect{--rt-multiselect-radius: var(--rt-input-radius);--rt-multiselect-caret-transition-duration: var(--rt-duration-fast);--rt-multiselect-own-outline-width: var(--rt-border-width-medium);position:relative;display:block;width:100%}.rt-multiselect--borderless .rt-multiselect__trigger{border-color:transparent}.rt-multiselect__trigger{display:flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-multiselect-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:pointer;font-family:inherit;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);text-align:start;transition:var(--rt-input-transition)}.rt-multiselect__trigger:focus{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-multiselect__trigger:disabled{cursor:not-allowed}.rt-multiselect__trigger--own{width:auto;min-height:0;padding:0;border-color:transparent;background-color:transparent}.rt-multiselect__trigger--own:focus{border-color:transparent;box-shadow:none}.rt-multiselect__trigger--own:focus-visible{outline:var(--rt-multiselect-own-outline-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-multiselect--open .rt-multiselect__trigger{border-color:var(--rt-input-color-border-focus)}.rt-multiselect--open .rt-multiselect__trigger--own{border-color:transparent}.rt-multiselect--invalid .rt-multiselect__trigger{border-color:var(--rt-input-color-border-error)}.rt-multiselect--invalid .rt-multiselect__trigger:focus{box-shadow:var(--rt-input-focus-shadow-error)}.rt-multiselect--invalid .rt-multiselect__trigger--own{border-color:transparent}.rt-multiselect--invalid .rt-multiselect__trigger--own:focus{box-shadow:none}.rt-multiselect--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-multiselect--readonly .rt-multiselect__trigger{display:none}.rt-multiselect__readonly{display:inline-flex;min-height:var(--rt-input-height);align-items:center;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-multiselect__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-multiselect--size--sm .rt-multiselect__trigger{min-height:var(--rt-input-height-sm)}.rt-multiselect--size--lg .rt-multiselect__trigger{min-height:var(--rt-input-height-lg)}.rt-multiselect__placeholder{overflow:hidden;min-width:0;flex:1 1 auto;color:var(--rt-input-color-text-placeholder);text-overflow:ellipsis;white-space:nowrap}.rt-multiselect__chips{display:flex;min-width:0;flex:1 1 auto;flex-wrap:wrap;gap:var(--rt-space-2xs)}.rt-multiselect__chip{display:inline-flex;align-items:center}.rt-multiselect__chip-more{display:inline-flex;align-items:center;padding:0 var(--rt-space-xs);color:var(--rt-input-color-text-placeholder);font-size:var(--rt-input-font-size)}.rt-multiselect__icon-left,.rt-multiselect__clear{flex-shrink:0}.rt-multiselect__chevron{flex-shrink:0;transition:transform var(--rt-multiselect-caret-transition-duration) ease}.rt-multiselect--open .rt-multiselect__chevron{transform:rotate(180deg)}.rt-multiselect__panel{--rt-multiselect-panel-shadow: var(--rt-shadow-md);--rt-multiselect-tree-indent: var(--rt-space-lg);--rt-multiselect-panel-max-height: var(--rt-input-panel-max-height);width:100%;max-height:var(--rt-multiselect-panel-max-height);box-sizing:border-box;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-multiselect-panel-shadow);overflow-y:auto}.rt-multiselect__list{padding:var(--rt-space-2xs) 0;margin:0;list-style:none}.rt-multiselect__option{--rt-multiselect-tree-level: 0;display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);padding-inline-start:calc(var(--rt-space-md) + var(--rt-multiselect-tree-indent) * var(--rt-multiselect-tree-level))}.rt-multiselect__option:hover,.rt-multiselect__option--active{background-color:var(--rt-color-bg-hover)}.rt-multiselect__option--selected{background-color:var(--rt-color-action-primary-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-multiselect__option--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-multiselect__option--disabled:hover{background-color:transparent}.rt-multiselect__toggle,.rt-multiselect__toggle-space{display:inline-flex;flex-shrink:0;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-multiselect__toggle{align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.rt-multiselect__checkbox{flex-shrink:0;margin:0;pointer-events:none}.rt-multiselect__option-label{min-width:0;flex:1 1 auto}.rt-multiselect__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-multiselect[data-rt-radius=none]{--rt-multiselect-radius: var(--rt-radius-none)}.rt-multiselect[data-rt-radius=xs]{--rt-multiselect-radius: var(--rt-radius-xs)}.rt-multiselect[data-rt-radius=sm]{--rt-multiselect-radius: var(--rt-radius-sm)}.rt-multiselect[data-rt-radius=ms]{--rt-multiselect-radius: var(--rt-radius-ms)}.rt-multiselect[data-rt-radius=md]{--rt-multiselect-radius: var(--rt-radius-md)}.rt-multiselect[data-rt-radius=lg]{--rt-multiselect-radius: var(--rt-radius-lg)}.rt-multiselect[data-rt-radius=xl]{--rt-multiselect-radius: var(--rt-radius-xl)}.rt-multiselect[data-rt-radius=\"2xl\"]{--rt-multiselect-radius: var(--rt-radius-2xl)}.rt-multiselect[data-rt-radius=full]{--rt-multiselect-radius: var(--rt-radius-full)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], triggerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSelectTriggerDirective), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtMultiselectComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-multiselect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-multiselect.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect-label.pipe.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.html","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-tools-ui-kit-v2-multiselect.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\nimport { rtTreeFind } from '@rt-tools/ui-kit-v2/select';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\n\n/** Лейбл опции по её value для отображения чипа выбранного значения — на любой глубине дерева. */\n@Pipe({ name: 'rtMultiselectLabel' })\nexport class RtMultiselectLabelPipe implements PipeTransform {\n    public transform<TValue>(value: TValue, options: ReadonlyArray<IRtSelect.Option<TValue>>): string {\n        return rtTreeFind(options, value)?.label ?? String(value);\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    computed,\n    contentChild,\n    forwardRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { IRtPopover } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { rtScrollActiveOptionIntoView } from '@rt-tools/ui-kit-v2/select';\nimport {\n    rtTreeBranchState,\n    rtTreeFind,\n    rtTreeIsTree,\n    rtTreeLeaves,\n    rtTreeOpenFor,\n    rtTreeRows,\n    rtTreeSideKey,\n    rtTreeToggle,\n} from '@rt-tools/ui-kit-v2/select';\nimport { RtSelectTriggerDirective } from '@rt-tools/ui-kit-v2/select';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\nimport { RtTagComponent } from '@rt-tools/ui-kit-v2/tag';\nimport { RtMultiselectLabelPipe } from './rt-multiselect-label.pipe';\n\nconst BEM_BLOCK: string = 'rt-multiselect';\n\n/** Клавиши, открывающие закрытый dropdown с фокуса на trigger'е. */\nconst OPEN_KEYS: ReadonlySet<string> = new Set<string>(['ArrowDown', 'ArrowUp', 'Enter', ' ']);\n\nlet panelIdSeed: number = 0;\n\nfunction nextPanelId(): number {\n    panelIdSeed += 1;\n    return panelIdSeed;\n}\n\n/**\n * Multi-select с chip-rendering выбранных значений в trigger.\n *\n * Panel рендерится через CDK Overlay (`[rtPopover]`) — не обрезается overflow,\n * авто-flip. Панель НЕ закрывается после выбора (multi vs single). CVA через\n * общий `RtFormControlBase`. Reuses `IRtSelect.Option<TValue>` (type-import).\n * Чипы закрываются поштучно; крестик (`clearable`) слева от шеврона очищает весь\n * выбор.\n *\n * Keyboard-nav (activedescendant): фокус на trigger'е, ArrowUp/Down — highlight,\n * Enter — toggle опции (panel остаётся открытой), Escape — закрыть. Home/End —\n * deferred.\n */\n@Component({\n    selector: 'rt-multiselect',\n    templateUrl: './rt-multiselect.component.html',\n    styleUrl: './rt-multiselect.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        RtPopoverDirective,\n        RtTagComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n\n        // pipes\n        RtMultiselectLabelPipe,\n    ],\n    providers: [\n        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtMultiselectComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-multiselect--open]': 'isOpen()',\n        '[class.rt-multiselect--disabled]': 'isDisabled()',\n        '[class.rt-multiselect--readonly]': 'isReadonly()',\n        '[class.rt-multiselect--invalid]': 'isInvalid()',\n        '[class.rt-multiselect--borderless]': '!bordered()',\n        '[class.rt-multiselect--size--sm]': \"size() === 'sm'\",\n        '[class.rt-multiselect--size--lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtMultiselectComponent<TValue> extends RtFormControlBase<ReadonlyArray<TValue>> {\n    readonly #t_uiSelectValues: Signal<string> = rtKitLabel('uiSelectValues');\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly panelId: string = `rt-multiselect-panel-${nextPanelId()}`;\n\n    protected readonly placeholderText: Signal<string> = computed((): string => this.placeholder() || this.#t_uiSelectValues());\n\n    protected readonly popover: Signal<RtPopoverDirective> = viewChild.required(RtPopoverDirective);\n\n    protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined> = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');\n\n    protected readonly activeIndex: WritableSignal<number> = signal<number>(-1);\n    /** Раскрытые ветки дерева. Живут, пока открыта панель: при открытии раскрыты ветки над выбранным. */\n    protected readonly openBranches: WritableSignal<ReadonlySet<TValue>> = signal<ReadonlySet<TValue>>(new Set<TValue>());\n\n    /** Дерево ли список: тогда у строк есть место под стрелку и отступ по уровню. */\n    protected readonly isTree: Signal<boolean> = computed((): boolean => rtTreeIsTree(this.options()));\n\n    /** Видимые строки: плоский список — как прежде, дерево — по раскрытым веткам. */\n    protected readonly rows: Signal<ReadonlyArray<IRtSelect.Row<TValue>>> = computed((): ReadonlyArray<IRtSelect.Row<TValue>> =>\n        rtTreeRows(this.options(), this.openBranches())\n    );\n\n    /** Флажок каждой строки: у листа — выбран ли он, у ветки — выведен из её включённых листьев. */\n    protected readonly rowChecks: Signal<ReadonlyArray<IRtSelect.TBranchState>> = computed((): ReadonlyArray<IRtSelect.TBranchState> =>\n        this.rows().map((row: IRtSelect.Row<TValue>): IRtSelect.TBranchState => this.#checkOf(row))\n    );\n\n    protected readonly isOpen: Signal<boolean> = computed((): boolean => this.popover().isOpen());\n\n    /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */\n    protected readonly activeOptionId: Signal<string | null> = computed((): string | null =>\n        this.isOpen() && this.activeIndex() >= 0 ? `${this.panelId}-opt-${this.activeIndex()}` : null\n    );\n\n    /**\n     * Своя разметка указателя, если потребитель её объявил. Маркер тот же, что у выбора одного\n     * значения: семьи отличаются только разметкой внутри кнопки.\n     */\n    protected readonly triggerTpl: Signal<RtSelectTriggerDirective<ReadonlyArray<TValue>> | undefined> =\n        contentChild(RtSelectTriggerDirective);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value().length > 0);\n\n    protected readonly visibleChips: Signal<ReadonlyArray<TValue>> = computed((): ReadonlyArray<TValue> =>\n        this.value().slice(0, this.maxChips())\n    );\n\n    protected readonly extraChipsCount: Signal<number> = computed((): number => Math.max(0, this.value().length - this.maxChips()));\n\n    /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */\n    protected readonly triggerState: Signal<IRtSelect.TriggerState<ReadonlyArray<TValue>>> = computed(\n        (): IRtSelect.TriggerState<ReadonlyArray<TValue>> => ({\n            isOpen: this.isOpen(),\n            value: this.value(),\n            label: this.displayText(),\n            isDisabled: this.isDisabled(),\n        })\n    );\n\n    public readonly displayText: Signal<string> = computed((): string =>\n        this.value()\n            .map((v: TValue): string => this.labelOf(v))\n            .join(', ')\n    );\n\n    public readonly options: InputSignal<ReadonlyArray<IRtSelect.Option<TValue>>> = input<ReadonlyArray<IRtSelect.Option<TValue>>>([]);\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly maxChips: InputSignal<number> = input<number>(3);\n\n    /** Иконка слева в указателе — та же, что у `rt-select`: перед подсказкой или чипами. */\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /**\n     * Чем мерится панель. По умолчанию она не уже кнопки и дальше растёт по содержимому:\n     * со своим указателем кнопка бывает узкой, и панель по её ширине давила бы содержимое.\n     * `trigger` возвращает прежнее — ровно по кнопке, `auto` пускает панель по содержимому\n     * целиком. Предел высоты назначается входом `panelMaxHeight`.\n     */\n    public readonly panelWidth: InputSignal<IRtPopover.Width> = input<IRtPopover.Width>('trigger-min');\n\n    /**\n     * Предел высоты панели — длина как в стилях, например `20rem`. Пусто — предел кита\n     * `--rt-input-panel-max-height`, и длинный список прокручивается внутри панели: без предела\n     * он уходил за нижний край экрана, и пункты за краем были недостижимы. `none` снимает предел —\n     * для короткого списка, который должен открываться целиком, без прокрутки. Значение ставится\n     * на саму панель: она рисуется в наложении, вне поддерева блока.\n     */\n    public readonly panelMaxHeight: InputSignal<string | null> = input<string | null>(null);\n\n    constructor() {\n        super();\n        // Подсветка, сдвинутая клавишами, не уходит за край панели с пределом высоты.\n        rtScrollActiveOptionIntoView(this.activeOptionId);\n    }\n\n    public override setDisabledState(disabled: boolean): void {\n        super.setDisabledState(disabled);\n        if (disabled) {\n            this.popover().close();\n        }\n    }\n\n    protected getEmptyValue(): ReadonlyArray<TValue> {\n        return [];\n    }\n\n    protected focusAfterClear(): void {\n        this.triggerEl()?.nativeElement.focus();\n    }\n\n    protected labelOf(value: TValue): string {\n        return rtTreeFind(this.options(), value)?.label ?? String(value);\n    }\n\n    protected isSelected(value: TValue): boolean {\n        return this.value().includes(value);\n    }\n\n    protected onOpened(): void {\n        this.openBranches.set(rtTreeOpenFor(this.options(), this.value()));\n    }\n\n    protected toggleBranch(event: Event, value: TValue): void {\n        event.stopPropagation();\n        this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, value));\n    }\n\n    protected onClosed(): void {\n        this.activeIndex.set(-1);\n        this.markTouched();\n    }\n\n    /**\n     * Лист переключается сам. Ветка выбирает все свои включённые листья или снимает их, когда\n     * выбраны все; своё значение ветки в выбор не пишется.\n     */\n    protected toggleOption(opt: IRtSelect.Option<TValue>): void {\n        if (opt.disabled || this.isDisabled()) {\n            return;\n        }\n        const leaves: ReadonlyArray<TValue> = rtTreeLeaves(opt);\n        const current: ReadonlyArray<TValue> = this.value();\n        const clearing: boolean = rtTreeBranchState(opt, current) === 'all';\n        const next: ReadonlyArray<TValue> = clearing\n            ? current.filter((v: TValue): boolean => !leaves.includes(v))\n            : [...current, ...leaves.filter((leaf: TValue): boolean => !current.includes(leaf))];\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected removeChip(value: TValue, event: MouseEvent): void {\n        event.stopPropagation();\n        if (this.isDisabled()) {\n            return;\n        }\n        const next: ReadonlyArray<TValue> = this.value().filter((v: TValue): boolean => v !== value);\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected onTriggerKeydown(event: KeyboardEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        if (!this.isOpen()) {\n            if (OPEN_KEYS.has(event.key)) {\n                event.preventDefault();\n                this.popover().open();\n                this.#moveActive(1);\n            }\n            return;\n        }\n        this.#handleOpenKeydown(event);\n    }\n\n    #handleOpenKeydown(event: KeyboardEvent): void {\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                this.#moveActive(1);\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                this.#moveActive(-1);\n                break;\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                this.#toggleActive();\n                break;\n            case 'Escape':\n                event.preventDefault();\n                this.popover().close();\n                break;\n            case 'ArrowRight':\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.#sideKey(event.key);\n                break;\n            default:\n                break;\n        }\n    }\n\n    #checkOf(row: IRtSelect.Row<TValue>): IRtSelect.TBranchState {\n        if (row.branch) {\n            return rtTreeBranchState(row.option, this.value());\n        }\n        return this.value().includes(row.option.value) ? 'all' : 'none';\n    }\n\n    #sideKey(key: string): void {\n        const answer: IRtSelect.SideKeyAnswer<TValue> = rtTreeSideKey(this.rows(), this.activeIndex(), key);\n        const toggle: TValue | null = answer.toggle;\n        if (toggle !== null) {\n            this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, toggle));\n        }\n        this.activeIndex.set(answer.index);\n    }\n\n    #moveActive(delta: number): void {\n        const opts: ReadonlyArray<IRtSelect.Option<TValue>> = this.rows().map(\n            (row: IRtSelect.Row<TValue>): IRtSelect.Option<TValue> => row.option\n        );\n        if (opts.length === 0) {\n            this.activeIndex.set(-1);\n            return;\n        }\n        let index: number = this.activeIndex();\n        for (let step: number = 0; step < opts.length; step += 1) {\n            index = (index + delta + opts.length) % opts.length;\n            if (!opts[index].disabled) {\n                this.activeIndex.set(index);\n                return;\n            }\n        }\n    }\n\n    #toggleActive(): void {\n        const opts: ReadonlyArray<IRtSelect.Option<TValue>> = this.rows().map(\n            (row: IRtSelect.Row<TValue>): IRtSelect.Option<TValue> => row.option\n        );\n        const index: number = this.activeIndex();\n        if (index >= 0 && index < opts.length) {\n            this.toggleOption(opts[index]);\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-multiselect\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"multiselect-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"multiselect-trigger\"\n        type=\"button\"\n        [rtPopoverWidth]=\"panelWidth()\"\n        [rtMod]=\"{ own: !!triggerTpl() }\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverDisabled]=\"isDisabled()\"\n        [attr.id]=\"effectiveControlId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        [disabled]=\"isDisabled()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\">\n        <!--\n            Разметка указателя: своя, если потребитель её объявил, иначе зашитая китом. Она встаёт\n            внутрь кнопки, а не вместо неё: поведение — открытие панели, приметы доступности,\n            отключённость, клавиши и закрытие — остаётся на кнопке кита.\n        -->\n        @if (triggerTpl(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: triggerState() }\" />\n        } @else {\n            @if (iconLeft(); as left) {\n                <rt-icon rtElem=\"icon-left\" qa-dataid=\"multiselect-icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            @if (value().length === 0) {\n                <span rtElem=\"placeholder\" qa-dataid=\"multiselect-placeholder\">{{ placeholderText() }}</span>\n            } @else {\n                <span rtElem=\"chips\">\n                    @for (val of visibleChips(); track val) {\n                        <span rtElem=\"chip\" qa-dataid=\"multiselect-chip\" [attr.data-value]=\"val\">\n                            <rt-tag\n                                severity=\"info\"\n                                [value]=\"val | rtMultiselectLabel: options()\"\n                                [closable]=\"true\"\n                                (closed)=\"removeChip(val, $event)\" />\n                        </span>\n                    }\n                    @if (extraChipsCount() > 0) {\n                        <span rtElem=\"chip-more\" qa-dataid=\"multiselect-chip-more\">+{{ extraChipsCount() }}</span>\n                    }\n                </span>\n            }\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"multiselect-clear\"\n                    icon=\"ico-close\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [ariaLabel]=\"t().uiClear\"\n                    [tabIndex]=\"-1\"\n                    (clicked)=\"clear($event)\" />\n            }\n            <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" color=\"muted\" />\n        }\n    </button>\n\n    <ng-template #panelTpl>\n        <div\n            rtElem=\"panel\"\n            qa-dataid=\"multiselect-panel\"\n            role=\"listbox\"\n            [style.--rt-multiselect-panel-max-height]=\"panelMaxHeight()\"\n            [attr.aria-label]=\"ariaLabel()\">\n            <!--\n                Опции выбираются мышью через (click); keyboard-nav — на trigger'е\n                (activedescendant), опции не focusable индивидуально.\n            -->\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <ul rtElem=\"list\">\n                @for (row of rows(); track row.option.value; let i = $index) {\n                    <li\n                        rtElem=\"option\"\n                        qa-dataid=\"multiselect-option\"\n                        role=\"option\"\n                        [id]=\"panelId + '-opt-' + i\"\n                        [attr.data-value]=\"row.option.value\"\n                        [attr.aria-level]=\"isTree() ? row.level + 1 : null\"\n                        [style.--rt-multiselect-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: rowChecks()[i] === 'all',\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"rowChecks()[i] === 'all'\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"toggleOption(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"multiselect-option-toggle\"\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                                    [attr.aria-expanded]=\"row.open\"\n                                    (click)=\"toggleBranch($event, row.option.value)\">\n                                    <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                                </button>\n                            } @else {\n                                <span rtElem=\"toggle-space\"></span>\n                            }\n                        }\n                        <input\n                            rtElem=\"checkbox\"\n                            qa-dataid=\"multiselect-option-checkbox\"\n                            type=\"checkbox\"\n                            tabindex=\"-1\"\n                            [checked]=\"rowChecks()[i] === 'all'\"\n                            [indeterminate]=\"rowChecks()[i] === 'some'\" />\n                        <span rtElem=\"option-label\" qa-dataid=\"multiselect-option-label\">{{ row.option.label }}</span>\n                    </li>\n                } @empty {\n                    <li rtElem=\"empty\" qa-dataid=\"multiselect-empty\">{{ t().uiNoOptions }}</li>\n                }\n            </ul>\n        </div>\n    </ng-template>\n</ng-container>\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-night-grid.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { computed, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+
+const BEM_BLOCK = 'rt-night-grid';
+/**
+ * Плотная сетка суток: ряд мелких ячеек, каждая — одна ночь. Применяется там, где
+ * нужно окинуть взглядом занятость на недели вперёд, а не листать календарь.
+ *
+ * Сетка скроллится внутри себя по горизонтали — документ боком не едет.
+ */
+class RtNightGridComponent {
+    constructor() {
+        this.#t_uiNightGridAria = rtKitLabel('uiNightGridAria');
+        this.ariaText = computed(() => this.ariaLabel() || this.#t_uiNightGridAria(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaText" }] : /* istanbul ignore next */ []));
+        this.cells = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.cellClick = output();
+    }
+    #t_uiNightGridAria;
+    onCellClick(cell) {
+        this.cellClick.emit(cell);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtNightGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtNightGridComponent, isStandalone: true, selector: "rt-night-grid", inputs: { cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick" }, host: { classAttribute: "rt-night-grid" }, ngImport: i0, template: "<!--\n    \u0413\u0440\u0443\u043F\u043F\u0430, \u0430 \u043D\u0435 \u0441\u043F\u0438\u0441\u043E\u043A: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, \u0438 `role=\"listitem\"` \u043D\u0430 \u043D\u0438\u0445\n    \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0431\u044B \u0440\u043E\u043B\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0442\u0430\u043A \u0447\u0442\u043E \u0441\u043A\u0440\u0438\u043D\u0440\u0438\u0434\u0435\u0440 \u043D\u0430\u0437\u044B\u0432\u0430\u043B \u0431\u044B \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441\u043F\u0438\u0441\u043A\u0430 \u0438\n    \u0443\u043C\u0430\u043B\u0447\u0438\u0432\u0430\u043B, \u0447\u0442\u043E \u043F\u043E \u043D\u0435\u043C\u0443 \u043D\u0430\u0436\u0438\u043C\u0430\u044E\u0442. \u041E\u0431\u0435\u0440\u043D\u0443\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0432 `listitem` \u0442\u043E\u0436\u0435\n    \u043D\u0435\u043B\u044C\u0437\u044F: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043F\u0440\u044F\u043C\u044B\u0435 \u0434\u0435\u0442\u0438 grid-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u043E\u0431\u0451\u0440\u0442\u043A\u0430 \u0440\u0430\u0437\u0432\u0430\u043B\u0438\u043B\u0430 \u0431\u044B \u0440\u0430\u0441\u043A\u043B\u0430\u0434\u043A\u0443.\n-->\n<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"group\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-night-grid{display:block}rt-night-grid .rt-night-grid{--rt-night-grid-cell-radius: var(--rt-radius-sm);--rt-night-grid-outline-width: var(--rt-border-width-thin);display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}rt-night-grid .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-night-grid-cell-radius);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}rt-night-grid .rt-night-grid__cell:hover{outline:var(--rt-night-grid-outline-width) solid var(--rt-color-border-strong)}rt-night-grid .rt-night-grid__cell:focus-visible{outline:var(--rt-night-grid-outline-width) solid var(--rt-color-border-focus);outline-offset:1px}rt-night-grid .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}rt-night-grid .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}}\n"], dependencies: [{ 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: RtNightGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-night-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<!--\n    \u0413\u0440\u0443\u043F\u043F\u0430, \u0430 \u043D\u0435 \u0441\u043F\u0438\u0441\u043E\u043A: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, \u0438 `role=\"listitem\"` \u043D\u0430 \u043D\u0438\u0445\n    \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0431\u044B \u0440\u043E\u043B\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0442\u0430\u043A \u0447\u0442\u043E \u0441\u043A\u0440\u0438\u043D\u0440\u0438\u0434\u0435\u0440 \u043D\u0430\u0437\u044B\u0432\u0430\u043B \u0431\u044B \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441\u043F\u0438\u0441\u043A\u0430 \u0438\n    \u0443\u043C\u0430\u043B\u0447\u0438\u0432\u0430\u043B, \u0447\u0442\u043E \u043F\u043E \u043D\u0435\u043C\u0443 \u043D\u0430\u0436\u0438\u043C\u0430\u044E\u0442. \u041E\u0431\u0435\u0440\u043D\u0443\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0432 `listitem` \u0442\u043E\u0436\u0435\n    \u043D\u0435\u043B\u044C\u0437\u044F: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043F\u0440\u044F\u043C\u044B\u0435 \u0434\u0435\u0442\u0438 grid-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u043E\u0431\u0451\u0440\u0442\u043A\u0430 \u0440\u0430\u0437\u0432\u0430\u043B\u0438\u043B\u0430 \u0431\u044B \u0440\u0430\u0441\u043A\u043B\u0430\u0434\u043A\u0443.\n-->\n<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"group\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-night-grid{display:block}rt-night-grid .rt-night-grid{--rt-night-grid-cell-radius: var(--rt-radius-sm);--rt-night-grid-outline-width: var(--rt-border-width-thin);display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}rt-night-grid .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-night-grid-cell-radius);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}rt-night-grid .rt-night-grid__cell:hover{outline:var(--rt-night-grid-outline-width) solid var(--rt-color-border-strong)}rt-night-grid .rt-night-grid__cell:focus-visible{outline:var(--rt-night-grid-outline-width) solid var(--rt-color-border-focus);outline-offset:1px}rt-night-grid .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}rt-night-grid .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}}\n"] }]
+        }], propDecorators: { cells: [{ type: i0.Input, args: [{ isSignal: true, alias: "cells", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtNightGridComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-night-grid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-night-grid.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/night-grid/rt-night-grid.component.ts","../../../projects/ui-kit-v2/src/lib/components/night-grid/rt-night-grid.component.html","../../../projects/ui-kit-v2/src/lib/components/night-grid/rt-tools-ui-kit-v2-night-grid.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtNightGrid } from './rt-night-grid.model';\n\nconst BEM_BLOCK: string = 'rt-night-grid';\n\n/**\n * Плотная сетка суток: ряд мелких ячеек, каждая — одна ночь. Применяется там, где\n * нужно окинуть взглядом занятость на недели вперёд, а не листать календарь.\n *\n * Сетка скроллится внутри себя по горизонтали — документ боком не едет.\n */\n@Component({\n    selector: 'rt-night-grid',\n    templateUrl: './rt-night-grid.component.html',\n    styleUrl: './rt-night-grid.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtNightGridComponent {\n    readonly #t_uiNightGridAria: Signal<string> = rtKitLabel('uiNightGridAria');\n\n    protected readonly ariaText: Signal<string> = computed((): string => this.ariaLabel() || this.#t_uiNightGridAria());\n\n    public readonly cells: InputSignal<ReadonlyArray<IRtNightGrid.Cell>> = input.required<ReadonlyArray<IRtNightGrid.Cell>>();\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly ariaLabel: InputSignal<string> = input<string>('');\n\n    public readonly cellClick: OutputEmitterRef<IRtNightGrid.Cell> = output<IRtNightGrid.Cell>();\n\n    protected onCellClick(cell: IRtNightGrid.Cell): void {\n        this.cellClick.emit(cell);\n    }\n}\n","<!--\n    Группа, а не список: клетки — настоящие кнопки, и `role=\"listitem\"` на них\n    перебивал бы роль кнопки, так что скринридер называл бы элемент списка и\n    умалчивал, что по нему нажимают. Обернуть каждую кнопку в `listitem` тоже\n    нельзя: клетки — прямые дети grid-контейнера, обёртка развалила бы раскладку.\n-->\n<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"group\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,SAAS,GAAW,eAAe;AAEzC;;;;;AAKG;MAiBU,oBAAoB,CAAA;AAhBjC,IAAA,WAAA,GAAA;AAiBa,QAAA,IAAA,CAAA,kBAAkB,GAAmB,UAAU,CAAC,iBAAiB,CAAC;AAExD,QAAA,IAAA,CAAA,QAAQ,GAAmB,QAAQ,CAAC,MAAc,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE;qFAAC;QAEnG,IAAA,CAAA,KAAK,GAAkD,KAAK,CAAC,QAAQ;kFAAoC;;QAGzG,IAAA,CAAA,SAAS,GAAwB,KAAK,CAAS,EAAE;sFAAC;QAElD,IAAA,CAAA,SAAS,GAAwC,MAAM,EAAqB;AAK/F,IAAA;AAdY,IAAA,kBAAkB;AAWjB,IAAA,WAAW,CAAC,IAAuB,EAAA;AACzC,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC7B;8GAdS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,gaCzCjC,06DAoBA,EAAA,MAAA,EAAA,CAAA,28BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBDaQ,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMP,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAhBhC,SAAS;+BACI,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;wBACb,YAAY;qBACf,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,06DAAA,EAAA,MAAA,EAAA,CAAA,28BAAA,CAAA,EAAA;;;AEvCL;;AAEG;;;;"}

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

@@ -0,0 +1,44 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective } from '@rt-tools/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-note';
+/**
+ * Тихая информационная заметка-callout для асайдов и форм: приглушённый текст
+ * на subtle-фоне, без иконки и severity-цвета. Назначение — пояснить контекст
+ * (предупреждения, подсказки, контекстные примечания),
+ * не перебивая основной контент.
+ *
+ * Семантика — `role="note"` (ancillary-контент). Это НЕ alert: для громких
+ * цветных уведомлений с severity/иконкой/закрытием используйте `rt-message`.
+ *
+ * Контент проецируется через `<ng-content />` — допустимы инлайн-теги
+ * (`<strong>`, `<a>`) и control-flow (`@if`) внутри.
+ */
+class RtNoteComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtNoteComponent, isStandalone: true, selector: "rt-note", host: { attributes: { "role": "note" }, classAttribute: "rt-note" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-note\">\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-note{--rt-note-radius: var(--rt-radius-md);display:block;padding:var(--rt-space-sm) var(--rt-space-md);border-radius:var(--rt-note-radius);background:var(--rt-color-bg-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-note[data-rt-radius=none]{--rt-note-radius: var(--rt-radius-none)}.rt-note[data-rt-radius=xs]{--rt-note-radius: var(--rt-radius-xs)}.rt-note[data-rt-radius=sm]{--rt-note-radius: var(--rt-radius-sm)}.rt-note[data-rt-radius=ms]{--rt-note-radius: var(--rt-radius-ms)}.rt-note[data-rt-radius=md]{--rt-note-radius: var(--rt-radius-md)}.rt-note[data-rt-radius=lg]{--rt-note-radius: var(--rt-radius-lg)}.rt-note[data-rt-radius=xl]{--rt-note-radius: var(--rt-radius-xl)}.rt-note[data-rt-radius=\"2xl\"]{--rt-note-radius: var(--rt-radius-2xl)}.rt-note[data-rt-radius=full]{--rt-note-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtNoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-note', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        // Block-класс на host (BlockDirective пропускает comment-ноду ng-container),
+                        // role — на том же элементе: rt-note самодостаточен, без внутреннего контейнера.
+                        class: BEM_BLOCK,
+                        role: 'note',
+                    }, template: "<ng-container rtBlock=\"rt-note\">\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-note{--rt-note-radius: var(--rt-radius-md);display:block;padding:var(--rt-space-sm) var(--rt-space-md);border-radius:var(--rt-note-radius);background:var(--rt-color-bg-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-note[data-rt-radius=none]{--rt-note-radius: var(--rt-radius-none)}.rt-note[data-rt-radius=xs]{--rt-note-radius: var(--rt-radius-xs)}.rt-note[data-rt-radius=sm]{--rt-note-radius: var(--rt-radius-sm)}.rt-note[data-rt-radius=ms]{--rt-note-radius: var(--rt-radius-ms)}.rt-note[data-rt-radius=md]{--rt-note-radius: var(--rt-radius-md)}.rt-note[data-rt-radius=lg]{--rt-note-radius: var(--rt-radius-lg)}.rt-note[data-rt-radius=xl]{--rt-note-radius: var(--rt-radius-xl)}.rt-note[data-rt-radius=\"2xl\"]{--rt-note-radius: var(--rt-radius-2xl)}.rt-note[data-rt-radius=full]{--rt-note-radius: var(--rt-radius-full)}}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtNoteComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-note.mjs.map