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

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

@@ -0,0 +1,495 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, afterRenderEffect, TemplateRef, Directive, computed, viewChild, signal, contentChild, input, booleanAttribute, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+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 { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
+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';
+
+/**
+ * Держит подсвеченную клавишами опцию в видимой части панели.
+ *
+ * Панель списка ограничена по высоте, и длинный список прокручивается внутри неё. Клавиши двигают
+ * подсветку, но фокус остаётся на поле: браузер сам панель не прокручивает, и подсветка уходила
+ * за нижний край — человек выбирал Enter'ом то, чего не видел. После каждой отрисовки, в которой
+ * сменилась подсвеченная опция, она прокручивается ровно настолько, чтобы встать в панель.
+ *
+ * Панель рисуется в наложении, вне поддерева семьи, поэтому опция ищется в документе по своему
+ * идентификатору — тому же, что стоит в `aria-activedescendant`. На сервере отрисовки нет, и
+ * эффект не выполняется; среда без `scrollIntoView` пропускается.
+ *
+ * Зовётся в контексте внедрения — полем или конструктором семьи.
+ *
+ * @param activeOptionId идентификатор подсвеченной опции; `null` — подсветки нет или панель закрыта
+ */
+function rtScrollActiveOptionIntoView(activeOptionId) {
+    const document = inject(DOCUMENT);
+    afterRenderEffect(() => {
+        const id = activeOptionId();
+        const option = id ? document.getElementById(id) : null;
+        if (typeof option?.scrollIntoView === 'function') {
+            option.scrollIntoView({ block: 'nearest' });
+        }
+    });
+}
+
+function childrenOf(option) {
+    return option.children ?? [];
+}
+function isBranch(option) {
+    return childrenOf(option).length > 0;
+}
+/** Список — дерево, если хоть у одной опции есть дети. Плоский список рисуется как прежде. */
+function rtTreeIsTree(options) {
+    return options.some((option) => isBranch(option));
+}
+/** Опция по значению на любой глубине. */
+function rtTreeFind(options, value) {
+    for (const option of options) {
+        if (option.value === value) {
+            return option;
+        }
+        const found = rtTreeFind(childrenOf(option), value);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+}
+/**
+ * Включённые листья под опцией; у самого листа — он сам. Отключённая ветка не отдаёт никого: её
+ * листья выбрать нельзя, как и её саму.
+ */
+function rtTreeLeaves(option) {
+    if (option.disabled) {
+        return [];
+    }
+    if (!isBranch(option)) {
+        return [option.value];
+    }
+    return childrenOf(option).flatMap((child) => rtTreeLeaves(child));
+}
+/** Сколько включённых листьев ветки выбрано. Флажок ветки выводится из этого, а не хранится. */
+function rtTreeBranchState(option, chosen) {
+    const leaves = rtTreeLeaves(option);
+    const count = leaves.filter((leaf) => chosen.includes(leaf)).length;
+    if (count === 0) {
+        return 'none';
+    }
+    return count === leaves.length ? 'all' : 'some';
+}
+function holdsChosen(option, chosen) {
+    return childrenOf(option).some((child) => chosen.includes(child.value) || holdsChosen(child, chosen));
+}
+function collectOpen(list, chosen, open) {
+    for (const option of list) {
+        if (holdsChosen(option, chosen)) {
+            open.add(option.value);
+            collectOpen(childrenOf(option), chosen, open);
+        }
+    }
+}
+/** Ветки, под которыми лежит выбранное значение: они раскрыты, когда список открывается. */
+function rtTreeOpenFor(options, chosen) {
+    const open = new Set();
+    collectOpen(options, chosen, open);
+    return open;
+}
+function matches(option, term) {
+    return option.label.toLowerCase().includes(term);
+}
+function descendantMatches(option, term) {
+    return childrenOf(option).some((child) => matches(child, term) || descendantMatches(child, term));
+}
+/**
+ * Раскладка одной опции: кладёт её строку и отвечает, где раскладывать её детей, или `null`, если
+ * их не видно. `filtered` — действует ли поисковое слово на уровень: под веткой, совпавшей самой и
+ * раскрытой, дети идут все, как без поиска.
+ */
+function placeOption(walk, option, place) {
+    const self = !place.filtered || matches(option, walk.term);
+    const below = place.filtered && descendantMatches(option, walk.term);
+    if (!self && !below) {
+        return null;
+    }
+    const branch = isBranch(option);
+    const openBySet = self && walk.open.has(option.value);
+    const open = branch && (openBySet || below);
+    walk.rows.push({ option, branch, open, level: place.level, parent: place.parent });
+    return open ? { level: place.level + 1, parent: option.value, filtered: place.filtered && !openBySet } : null;
+}
+function walkRows(walk, list, place) {
+    for (const option of list) {
+        const childPlace = placeOption(walk, option, place);
+        if (childPlace) {
+            walkRows(walk, childrenOf(option), childPlace);
+        }
+    }
+}
+/**
+ * Видимые строки по уровням. Без поискового слова раскрыты ветки из `open`. Со словом строка
+ * остаётся, если совпала она сама или кто-то под ней, и путь к совпадению показан раскрытым.
+ * Ветка, совпавшая сама, держит детей такими, какими они были.
+ */
+function rtTreeRows(options, open, rawTerm = '') {
+    const term = rawTerm.toLowerCase().trim();
+    const walk = { open, term, rows: [] };
+    walkRows(walk, options, { level: 0, parent: null, filtered: term.length > 0 });
+    return walk.rows;
+}
+function sideRight(rows, row, index) {
+    if (row.branch && !row.open) {
+        return { toggle: row.option.value, index };
+    }
+    const firstChild = row.branch && rows[index + 1]?.parent === row.option.value;
+    return { toggle: null, index: firstChild ? index + 1 : index };
+}
+function sideLeft(rows, row, index) {
+    if (row.branch && row.open) {
+        return { toggle: row.option.value, index };
+    }
+    const parentIndex = rows.findIndex((candidate) => candidate.option.value === row.parent);
+    return { toggle: null, index: parentIndex >= 0 ? parentIndex : index };
+}
+/**
+ * Ответ на боковую стрелку. Вправо: свёрнутая ветка раскрывается, раскрытая уводит подсветку на
+ * первого ребёнка. Влево: раскрытая ветка сворачивается, иначе подсветка уходит на родителя.
+ */
+function rtTreeSideKey(rows, index, key) {
+    const row = rows[index];
+    if (row && key === 'ArrowRight') {
+        return sideRight(rows, row, index);
+    }
+    if (row && key === 'ArrowLeft') {
+        return sideLeft(rows, row, index);
+    }
+    return { toggle: null, index };
+}
+/** Набор раскрытых веток с переключённой одной. */
+function rtTreeToggle(open, value) {
+    const next = new Set(open);
+    if (next.has(value)) {
+        next.delete(value);
+    }
+    else {
+        next.add(value);
+    }
+    return next;
+}
+
+/**
+ * Маркер своей разметки указателя — того, что человек нажимает, чтобы открыть список.
+ *
+ * Поведение указателя остаётся киту: открытие панели, её ширина, приметы доступности,
+ * отключённость, клавиши и закрытие висят на кнопке. Потребитель даёт только то, что рисуется
+ * внутри неё, и получает три значения обстановки: открыт ли список, что выбрано, отключён ли выбор.
+ *
+ * Один маркер на обе семьи выбора: они отличаются только разметкой внутри кнопки, и два маркера
+ * разошлись бы на первой же правке.
+ *
+ * @example
+ * ```html
+ * <rt-select [options]="options">
+ *     <ng-template rtSelectTrigger let-state>
+ *         <rt-tag [value]="state.label" [icon]="state.isOpen ? 'chevron-up' : 'chevron-down'" />
+ *     </ng-template>
+ * </rt-select>
+ * ```
+ */
+class RtSelectTriggerDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtSelectTriggerDirective, isStandalone: true, selector: "[rtSelectTrigger]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtSelectTrigger]',
+                }]
+        }] });
+
+const BEM_BLOCK = 'rt-select';
+/** Клавиши, открывающие закрытый dropdown с фокуса на trigger'е. */
+const OPEN_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Enter', ' ']);
+let panelIdSeed = 0;
+function nextPanelId() {
+    panelIdSeed += 1;
+    return panelIdSeed;
+}
+/**
+ * Single-select dropdown с опциональным filter input.
+ *
+ * Panel рендерится через CDK Overlay (директива `[rtPopover]` на trigger'е) —
+ * не обрезается `overflow: hidden` предками (таблицы, aside, карточки) и
+ * авто-flip'ается у края viewport. CVA через общий `RtFormControlBase`. Крестик
+ * (`clearable`) слева от шеврона — виден при наличии значения, очищает выбор.
+ *
+ * Keyboard-nav (activedescendant): фокус на trigger'е, ArrowUp/Down двигают
+ * виртуальный highlight (`aria-activedescendant`), Enter выбирает, Escape
+ * закрывает. Home/End/typeahead — deferred.
+ */
+class RtSelectComponent extends RtFormControlBase {
+    #t_uiSearch;
+    constructor() {
+        super();
+        this.#t_uiSearch = rtKitLabel('uiSearch');
+        this.t = inject(RT_KIT_LABELS);
+        this.panelId = `rt-select-panel-${nextPanelId()}`;
+        this.filterPlaceholderText = computed(() => this.filterPlaceholder() || this.#t_uiSearch(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholderText" }] : /* 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.filterTerm = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterTerm" }] : /* 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.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() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.selectedLabel = computed(() => {
+            const v = this.value();
+            if (v === null) {
+                return '';
+            }
+            return rtTreeFind(this.options(), v)?.label ?? '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* 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(), this.filterTerm()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */
+        this.triggerState = computed(() => ({
+            isOpen: this.isOpen(),
+            value: this.value(),
+            label: this.selectedLabel(),
+            isDisabled: this.isDisabled(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerState" }] : /* istanbul ignore next */ []));
+        /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.selectedLabel(), /* @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.iconLeft = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+        this.filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.filterPlaceholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* 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 */ []));
+        this.selectionChange = output();
+        // Подсветка, сдвинутая клавишами, не уходит за край панели с пределом высоты.
+        rtScrollActiveOptionIntoView(this.activeOptionId);
+    }
+    setDisabledState(disabled) {
+        super.setDisabledState(disabled);
+        if (disabled) {
+            this.popover().close();
+        }
+    }
+    getEmptyValue() {
+        return null;
+    }
+    focusAfterClear() {
+        this.triggerEl()?.nativeElement.focus();
+    }
+    clear(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        super.clear(event);
+        this.selectionChange.emit(null);
+    }
+    onOpened() {
+        const v = this.value();
+        this.openBranches.set(rtTreeOpenFor(this.options(), v === null ? [] : [v]));
+    }
+    toggleBranch(event, value) {
+        event.stopPropagation();
+        this.openBranches.update((open) => rtTreeToggle(open, value));
+    }
+    onClosed() {
+        // Закрытие (outside-click / Escape / выбор) = пользователь увёл фокус.
+        this.filterTerm.set('');
+        this.activeIndex.set(-1);
+        this.markTouched();
+    }
+    select(opt) {
+        if (opt.disabled) {
+            return;
+        }
+        this.value.set(opt.value);
+        this.emitChange(opt.value);
+        this.selectionChange.emit(opt.value);
+        this.popover().close();
+    }
+    setFilter(term) {
+        this.filterTerm.set(term);
+        this.activeIndex.set(-1);
+    }
+    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.#selectActive();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.popover().close();
+                break;
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.#sideKey(event.key);
+                break;
+            default:
+                break;
+        }
+    }
+    #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;
+            }
+        }
+    }
+    #selectActive() {
+        const opts = this.rows().map((row) => row.option);
+        const index = this.activeIndex();
+        if (index >= 0 && index < opts.length) {
+            this.select(opts[index]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSelectComponent, isStandalone: true, selector: "rt-select", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.rt-select--open": "isOpen()", "class.rt-select--disabled": "isDisabled()", "class.rt-select--readonly": "isReadonly()", "class.rt-select--invalid": "isInvalid()", "class.rt-select--borderless": "!bordered()", "class.rt-select--appearance--fill": "appearance() === 'fill'", "class.rt-select--size--sm": "size() === 'sm'", "class.rt-select--size--lg": "size() === 'lg'", "class.rt-select--with-icon-left": "!!iconLeft()" }, classAttribute: "rt-select" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtSelectComponent) },
+        ], 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-select\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"select-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\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            <span rtElem=\"label\" [rtMod]=\"{ placeholder: !selectedLabel() }\">\n                {{ selectedLabel() || placeholder() }}\n            </span>\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"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 rtElem=\"panel\" role=\"listbox\" [style.--rt-select-panel-max-height]=\"panelMaxHeight()\" [attr.aria-label]=\"ariaLabel()\">\n            @if (filter()) {\n                <div rtElem=\"filter\">\n                    <rt-input\n                        iconLeft=\"ico-search\"\n                        [placeholder]=\"filterPlaceholderText()\"\n                        [ngModel]=\"filterTerm()\"\n                        (ngModelChange)=\"setFilter($event)\" />\n                </div>\n            }\n            <!--\n                \u041E\u043F\u0446\u0438\u0438 listbox'\u0430 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014\n                \u043D\u0430 trigger'\u0435 (activedescendant: ArrowUp/Down/Enter), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435\n                focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 a11y-\u043F\u0440\u0430\u0432\u0438\u043B\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435 \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u043C\u044B.\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=\"select-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-select-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: row.option.value === value(),\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"row.option.value === value()\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"select(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"select-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                        <span rtElem=\"option-label\">{{ row.option.label }}</span>\n                        @if (row.option.value === value()) {\n                            <rt-icon rtElem=\"check\" name=\"check\" size=\"sm\" aria-hidden=\"true\" />\n                        }\n                    </li>\n                } @empty {\n                    <li rtElem=\"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-select{--rt-select-radius: var(--rt-input-radius);--rt-select-fill-radius: var(--rt-radius-sm);--rt-select-caret-transition-duration: var(--rt-duration-fast);--rt-select-own-outline-width: var(--rt-border-width-medium);position:relative;display:block;width:100%}.rt-select--borderless .rt-select__trigger{border-color:transparent}.rt-select--appearance--fill .rt-select__trigger{border-color:transparent;border-radius:var(--rt-select-fill-radius) var(--rt-select-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-select__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-select-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-select__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-select__trigger:disabled{cursor:not-allowed}.rt-select__trigger--own{width:auto;min-height:0;padding:0;border-color:transparent;background-color:transparent;line-height:var(--rt-leading-none)}.rt-select__trigger--own:focus{border-color:transparent;box-shadow:none}.rt-select__trigger--own:focus-visible{outline:var(--rt-select-own-outline-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-select--open .rt-select__trigger{border-color:var(--rt-input-color-border-focus)}.rt-select--open .rt-select__trigger--own{border-color:transparent}.rt-select--invalid .rt-select__trigger{border-color:var(--rt-input-color-border-error)}.rt-select--invalid .rt-select__trigger:focus{box-shadow:var(--rt-input-focus-shadow-error)}.rt-select--invalid .rt-select__trigger--own{border-color:transparent}.rt-select--invalid .rt-select__trigger--own:focus{box-shadow:none}.rt-select--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-select--readonly .rt-select__trigger{display:none}.rt-select__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-select__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-select--size--sm .rt-select__trigger{min-height:var(--rt-input-height-sm)}.rt-select--size--lg .rt-select__trigger{min-height:var(--rt-input-height-lg)}.rt-select__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-select__label--placeholder{color:var(--rt-input-color-text-placeholder)}.rt-select__icon-left,.rt-select__clear{flex-shrink:0}.rt-select__chevron{flex-shrink:0;transition:transform var(--rt-select-caret-transition-duration) ease}.rt-select--open .rt-select__chevron{transform:rotate(180deg)}:is(.rt-preset-material,[data-preset=material]) .rt-select__chevron{max-width:10px;max-height:5px;background-color:currentcolor;clip-path:polygon(0 0,100% 0,50% 100%);transform:none}:is(.rt-preset-material,[data-preset=material]) .rt-select__chevron svg{display:none}.rt-select__panel{--rt-select-panel-shadow: var(--rt-overlay-select-shadow);--rt-select-panel-radius: var(--rt-overlay-select-radius);--rt-select-option-font-size: var(--rt-overlay-select-option-font-size);--rt-select-selected-bg: var(--rt-overlay-select-selected-bg);--rt-select-selected-weight: var(--rt-overlay-select-selected-weight);--rt-select-check-display: var(--rt-overlay-select-check-display);--rt-select-option-min-height: var(--rt-overlay-select-option-min-height);--rt-select-panel-border-width: var(--rt-overlay-select-panel-border-width);--rt-select-tree-indent: var(--rt-space-lg);--rt-select-panel-max-height: var(--rt-input-panel-max-height);width:100%;max-height:var(--rt-select-panel-max-height);box-sizing:border-box;border:var(--rt-select-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-select-panel-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-select-panel-shadow);overflow-y:auto}.rt-select__filter{padding:var(--rt-space-sm);border-block-end:var(--rt-input-border-width) solid var(--rt-color-border-subtle)}.rt-select__list{padding:var(--rt-space-2xs) 0;margin:0;list-style:none}.rt-select__option{--rt-select-tree-level: 0;display:flex;min-height:var(--rt-select-option-min-height);box-sizing:border-box;align-items:center;justify-content:space-between;padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-select-option-font-size);gap:var(--rt-space-sm);padding-inline-start:calc(var(--rt-space-md) + var(--rt-select-tree-indent) * var(--rt-select-tree-level))}.rt-select__option:hover,.rt-select__option--active{background-color:var(--rt-color-bg-hover)}.rt-select__option--selected{background-color:var(--rt-select-selected-bg);font-weight:var(--rt-select-selected-weight)}.rt-select__option--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-select__option--disabled:hover{background-color:transparent}.rt-select__option-label{min-width:0;flex:1 1 auto}.rt-select__toggle,.rt-select__toggle-space{display:inline-flex;flex-shrink:0;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-select__toggle{align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.rt-select__check{display:var(--rt-select-check-display);flex-shrink:0}.rt-select__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-select[data-rt-radius=none]{--rt-select-radius: var(--rt-radius-none)}.rt-select[data-rt-radius=xs]{--rt-select-radius: var(--rt-radius-xs)}.rt-select[data-rt-radius=sm]{--rt-select-radius: var(--rt-radius-sm)}.rt-select[data-rt-radius=ms]{--rt-select-radius: var(--rt-radius-ms)}.rt-select[data-rt-radius=md]{--rt-select-radius: var(--rt-radius-md)}.rt-select[data-rt-radius=lg]{--rt-select-radius: var(--rt-radius-lg)}.rt-select[data-rt-radius=xl]{--rt-select-radius: var(--rt-radius-xl)}.rt-select[data-rt-radius=\"2xl\"]{--rt-select-radius: var(--rt-radius-2xl)}.rt-select[data-rt-radius=full]{--rt-select-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        FormsModule,
+                        NgTemplateOutlet,
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtIconComponent,
+                        RtInputComponent,
+                        RtPopoverDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtSelectComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-select--open]': 'isOpen()',
+                        '[class.rt-select--disabled]': 'isDisabled()',
+                        '[class.rt-select--readonly]': 'isReadonly()',
+                        '[class.rt-select--invalid]': 'isInvalid()',
+                        '[class.rt-select--borderless]': '!bordered()',
+                        '[class.rt-select--appearance--fill]': "appearance() === 'fill'",
+                        '[class.rt-select--size--sm]': "size() === 'sm'",
+                        '[class.rt-select--size--lg]': "size() === 'lg'",
+                        '[class.rt-select--with-icon-left]': '!!iconLeft()',
+                    }, template: "<ng-container rtBlock=\"rt-select\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"select-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\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            <span rtElem=\"label\" [rtMod]=\"{ placeholder: !selectedLabel() }\">\n                {{ selectedLabel() || placeholder() }}\n            </span>\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"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 rtElem=\"panel\" role=\"listbox\" [style.--rt-select-panel-max-height]=\"panelMaxHeight()\" [attr.aria-label]=\"ariaLabel()\">\n            @if (filter()) {\n                <div rtElem=\"filter\">\n                    <rt-input\n                        iconLeft=\"ico-search\"\n                        [placeholder]=\"filterPlaceholderText()\"\n                        [ngModel]=\"filterTerm()\"\n                        (ngModelChange)=\"setFilter($event)\" />\n                </div>\n            }\n            <!--\n                \u041E\u043F\u0446\u0438\u0438 listbox'\u0430 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014\n                \u043D\u0430 trigger'\u0435 (activedescendant: ArrowUp/Down/Enter), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435\n                focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 a11y-\u043F\u0440\u0430\u0432\u0438\u043B\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435 \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u043C\u044B.\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=\"select-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-select-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: row.option.value === value(),\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"row.option.value === value()\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"select(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"select-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                        <span rtElem=\"option-label\">{{ row.option.label }}</span>\n                        @if (row.option.value === value()) {\n                            <rt-icon rtElem=\"check\" name=\"check\" size=\"sm\" aria-hidden=\"true\" />\n                        }\n                    </li>\n                } @empty {\n                    <li rtElem=\"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-select{--rt-select-radius: var(--rt-input-radius);--rt-select-fill-radius: var(--rt-radius-sm);--rt-select-caret-transition-duration: var(--rt-duration-fast);--rt-select-own-outline-width: var(--rt-border-width-medium);position:relative;display:block;width:100%}.rt-select--borderless .rt-select__trigger{border-color:transparent}.rt-select--appearance--fill .rt-select__trigger{border-color:transparent;border-radius:var(--rt-select-fill-radius) var(--rt-select-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-select__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-select-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-select__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-select__trigger:disabled{cursor:not-allowed}.rt-select__trigger--own{width:auto;min-height:0;padding:0;border-color:transparent;background-color:transparent;line-height:var(--rt-leading-none)}.rt-select__trigger--own:focus{border-color:transparent;box-shadow:none}.rt-select__trigger--own:focus-visible{outline:var(--rt-select-own-outline-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-select--open .rt-select__trigger{border-color:var(--rt-input-color-border-focus)}.rt-select--open .rt-select__trigger--own{border-color:transparent}.rt-select--invalid .rt-select__trigger{border-color:var(--rt-input-color-border-error)}.rt-select--invalid .rt-select__trigger:focus{box-shadow:var(--rt-input-focus-shadow-error)}.rt-select--invalid .rt-select__trigger--own{border-color:transparent}.rt-select--invalid .rt-select__trigger--own:focus{box-shadow:none}.rt-select--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-select--readonly .rt-select__trigger{display:none}.rt-select__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-select__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-select--size--sm .rt-select__trigger{min-height:var(--rt-input-height-sm)}.rt-select--size--lg .rt-select__trigger{min-height:var(--rt-input-height-lg)}.rt-select__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-select__label--placeholder{color:var(--rt-input-color-text-placeholder)}.rt-select__icon-left,.rt-select__clear{flex-shrink:0}.rt-select__chevron{flex-shrink:0;transition:transform var(--rt-select-caret-transition-duration) ease}.rt-select--open .rt-select__chevron{transform:rotate(180deg)}:is(.rt-preset-material,[data-preset=material]) .rt-select__chevron{max-width:10px;max-height:5px;background-color:currentcolor;clip-path:polygon(0 0,100% 0,50% 100%);transform:none}:is(.rt-preset-material,[data-preset=material]) .rt-select__chevron svg{display:none}.rt-select__panel{--rt-select-panel-shadow: var(--rt-overlay-select-shadow);--rt-select-panel-radius: var(--rt-overlay-select-radius);--rt-select-option-font-size: var(--rt-overlay-select-option-font-size);--rt-select-selected-bg: var(--rt-overlay-select-selected-bg);--rt-select-selected-weight: var(--rt-overlay-select-selected-weight);--rt-select-check-display: var(--rt-overlay-select-check-display);--rt-select-option-min-height: var(--rt-overlay-select-option-min-height);--rt-select-panel-border-width: var(--rt-overlay-select-panel-border-width);--rt-select-tree-indent: var(--rt-space-lg);--rt-select-panel-max-height: var(--rt-input-panel-max-height);width:100%;max-height:var(--rt-select-panel-max-height);box-sizing:border-box;border:var(--rt-select-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-select-panel-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-select-panel-shadow);overflow-y:auto}.rt-select__filter{padding:var(--rt-space-sm);border-block-end:var(--rt-input-border-width) solid var(--rt-color-border-subtle)}.rt-select__list{padding:var(--rt-space-2xs) 0;margin:0;list-style:none}.rt-select__option{--rt-select-tree-level: 0;display:flex;min-height:var(--rt-select-option-min-height);box-sizing:border-box;align-items:center;justify-content:space-between;padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-select-option-font-size);gap:var(--rt-space-sm);padding-inline-start:calc(var(--rt-space-md) + var(--rt-select-tree-indent) * var(--rt-select-tree-level))}.rt-select__option:hover,.rt-select__option--active{background-color:var(--rt-color-bg-hover)}.rt-select__option--selected{background-color:var(--rt-select-selected-bg);font-weight:var(--rt-select-selected-weight)}.rt-select__option--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-select__option--disabled:hover{background-color:transparent}.rt-select__option-label{min-width:0;flex:1 1 auto}.rt-select__toggle,.rt-select__toggle-space{display:inline-flex;flex-shrink:0;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-select__toggle{align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.rt-select__check{display:var(--rt-select-check-display);flex-shrink:0}.rt-select__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-select[data-rt-radius=none]{--rt-select-radius: var(--rt-radius-none)}.rt-select[data-rt-radius=xs]{--rt-select-radius: var(--rt-radius-xs)}.rt-select[data-rt-radius=sm]{--rt-select-radius: var(--rt-radius-sm)}.rt-select[data-rt-radius=ms]{--rt-select-radius: var(--rt-radius-ms)}.rt-select[data-rt-radius=md]{--rt-select-radius: var(--rt-radius-md)}.rt-select[data-rt-radius=lg]{--rt-select-radius: var(--rt-radius-lg)}.rt-select[data-rt-radius=xl]{--rt-select-radius: var(--rt-radius-xl)}.rt-select[data-rt-radius=\"2xl\"]{--rt-select-radius: var(--rt-radius-2xl)}.rt-select[data-rt-radius=full]{--rt-select-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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtSelectComponent, RtSelectTriggerDirective, rtScrollActiveOptionIntoView, rtTreeBranchState, rtTreeFind, rtTreeIsTree, rtTreeLeaves, rtTreeOpenFor, rtTreeRows, rtTreeSideKey, rtTreeToggle };
+//# sourceMappingURL=rt-tools-ui-kit-v2-select.mjs.map