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

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

@@ -1,315 +1,536 @@
-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', ' ']);
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Pipe, ViewEncapsulation, computed, contentChild, forwardRef, inject, input, signal, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS, rtKitLabel } 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 { RtSelectTriggerDirective, rtScrollActiveOptionIntoView, rtTreeBranchState, rtTreeFind, rtTreeIsTree, rtTreeLeaves, rtTreeOpenFor, rtTreeRows, rtTreeSideKey, rtTreeToggle } from "@rt-tools/ui-kit-v2/select";
+import { RtTagComponent } from "@rt-tools/ui-kit-v2/tag";
+var RtMultiselectLabelPipe = class RtMultiselectLabelPipe {
+	transform(value, options) {
+		return rtTreeFind(options, value)?.label ?? String(value);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtMultiselectLabelPipe,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Pipe
+		});
+	}
+	static {
+		this.ɵpipe = i0.ɵɵngDeclarePipe({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtMultiselectLabelPipe,
+			isStandalone: true,
+			name: "rtMultiselectLabel"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtMultiselectLabelPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "rtMultiselectLabel" }]
+	}]
+});
+const BEM_BLOCK = "rt-multiselect";
+const OPEN_KEYS = /* @__PURE__ */ 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", "glyphStrategy", "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 }); }
+	panelIdSeed += 1;
+	return panelIdSeed;
 }
-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.
- */
-
+var RtMultiselectComponent = 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(), ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
+		this.popover = viewChild.required(RtPopoverDirective, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+		this.triggerEl = viewChild("triggerEl", ...ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []);
+		this.activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+		this.openBranches = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "openBranches" }] : /* istanbul ignore next */ []);
+		this.isTree = computed(() => rtTreeIsTree(this.options()), ...ngDevMode ? [{ debugName: "isTree" }] : /* istanbul ignore next */ []);
+		this.rows = computed(() => rtTreeRows(this.options(), this.openBranches()), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.rowChecks = computed(() => this.rows().map((row) => this.#checkOf(row)), ...ngDevMode ? [{ debugName: "rowChecks" }] : /* istanbul ignore next */ []);
+		this.isOpen = computed(() => this.popover().isOpen(), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+		this.activeOptionId = computed(() => this.isOpen() && this.activeIndex() >= 0 ? `${this.panelId}-opt-${this.activeIndex()}` : null, ...ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []);
+		this.triggerTpl = contentChild(RtSelectTriggerDirective, ...ngDevMode ? [{ debugName: "triggerTpl" }] : /* istanbul ignore next */ []);
+		this.hasValue = computed(() => this.value().length > 0, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.visibleChips = computed(() => this.value().slice(0, this.maxChips()), ...ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []);
+		this.extraChipsCount = computed(() => Math.max(0, this.value().length - this.maxChips()), ...ngDevMode ? [{ debugName: "extraChipsCount" }] : /* istanbul ignore next */ []);
+		this.triggerState = computed(() => ({
+			isOpen: this.isOpen(),
+			value: this.value(),
+			label: this.displayText(),
+			isDisabled: this.isDisabled()
+		}), ...ngDevMode ? [{ debugName: "triggerState" }] : /* istanbul ignore next */ []);
+		this.displayText = computed(() => this.value().map((v) => this.labelOf(v)).join(", "), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.maxChips = input(3, ...ngDevMode ? [{ debugName: "maxChips" }] : /* istanbul ignore next */ []);
+		this.iconLeft = input(null, ...ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.panelWidth = input("trigger-min", ...ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []);
+		this.panelMaxHeight = input(null, ...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 next = rtTreeBranchState(opt, current) === "all" ? 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);
+		}
+	}
+	#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.2.2",
+			ngImport: i0,
+			type: RtMultiselectComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: [{
+				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() || '—' }}</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",
+			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: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "component",
+					type: RtTagComponent,
+					selector: "rt-tag",
+					inputs: [
+						"value",
+						"highlight",
+						"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: RtMultiselectLabelPipe,
+					name: "rtMultiselectLabel"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtMultiselectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-multiselect",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconButtonComponent,
+				RtIconComponent,
+				RtPopoverDirective,
+				RtTagComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtMultiselectLabelPipe
+			],
+			providers: [{
+				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() || '—' }}</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",
+			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
+			}]
+		}]
+	}
+});
 export { RtMultiselectComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-multiselect.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-multiselect.mjs.map