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

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

@@ -1,509 +1,728 @@
-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` — подсветки нет или панель закрыта
- */
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, contentChild, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
+import * as i2 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+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 { 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";
 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' });
-        }
-    });
+	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 ?? [];
+	return option.children ?? [];
 }
 function isBranch(option) {
-    return childrenOf(option).length > 0;
+	return childrenOf(option).length > 0;
 }
-/** Список — дерево, если хоть у одной опции есть дети. Плоский список рисуется как прежде. */
 function rtTreeIsTree(options) {
-    return options.some((option) => isBranch(option));
+	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;
+	for (const option of options) {
+		if (option.value === value) return option;
+		const found = rtTreeFind(childrenOf(option), value);
+		if (found) return found;
+	}
 }
-/**
- * Включённые листья под опцией; у самого листа — он сам. Отключённая ветка не отдаёт никого: её
- * листья выбрать нельзя, как и её саму.
- */
 function rtTreeLeaves(option) {
-    if (option.disabled) {
-        return [];
-    }
-    if (!isBranch(option)) {
-        return [option.value];
-    }
-    return childrenOf(option).flatMap((child) => rtTreeLeaves(child));
+	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';
+	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));
+	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);
-        }
-    }
+	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;
+	const open = /* @__PURE__ */ new Set();
+	collectOpen(options, chosen, open);
+	return open;
 }
 function matches(option, term) {
-    return option.label.toLowerCase().includes(term);
+	return option.label.toLowerCase().includes(term);
 }
 function descendantMatches(option, term) {
-    return childrenOf(option).some((child) => matches(child, term) || descendantMatches(child, 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;
+	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);
-        }
-    }
+	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 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 };
+	if (row.branch && !row.open) return {
+		toggle: row.option.value,
+		index
+	};
+	return {
+		toggle: null,
+		index: row.branch && rows[index + 1]?.parent === row.option.value ? 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 };
+	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 };
+	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;
+	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', ' ']);
+var RtSelectTriggerDirective = class RtSelectTriggerDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtSelectTriggerDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtSelectTriggerDirective,
+			isStandalone: true,
+			selector: "[rtSelectTrigger]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtSelectTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtSelectTrigger]" }]
+	}]
+});
+const BEM_BLOCK = "rt-select";
+const OPEN_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Enter",
+	" "
+]);
 let panelIdSeed = 0;
 function nextPanelId() {
-    panelIdSeed += 1;
-    return panelIdSeed;
+	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);
-    }
-    /**
-     * Открытый список встаёт подсветкой на выбранный пункт.
-     *
-     * Иначе стрелка вниз начинала с первого пункта, и человек с выбранным «20» из «10, 20, 40»
-     * получал «10» вместо «40».
-     */
-    onOpened() {
-        const v = this.value();
-        this.openBranches.set(rtTreeOpenFor(this.options(), v === null ? [] : [v]));
-        if (v !== null) {
-            const chosen = this.rows().findIndex((row) => row.option.value === v);
-            if (chosen >= 0) {
-                this.activeIndex.set(chosen);
-            }
-        }
-    }
-    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();
-                if (this.activeIndex() < 0) {
-                    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", "glyphStrategy", "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.
- */
-
+var RtSelectComponent = 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(), ...ngDevMode ? [{ debugName: "filterPlaceholderText" }] : /* 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.filterTerm = signal("", ...ngDevMode ? [{ debugName: "filterTerm" }] : /* 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.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() !== null, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.selectedLabel = computed(() => {
+			const v = this.value();
+			if (v === null) return "";
+			return rtTreeFind(this.options(), v)?.label ?? "";
+		}, ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+		this.isTree = computed(() => rtTreeIsTree(this.options()), ...ngDevMode ? [{ debugName: "isTree" }] : /* istanbul ignore next */ []);
+		this.rows = computed(() => rtTreeRows(this.options(), this.openBranches(), this.filterTerm()), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.triggerState = computed(() => ({
+			isOpen: this.isOpen(),
+			value: this.value(),
+			label: this.selectedLabel(),
+			isDisabled: this.isDisabled()
+		}), ...ngDevMode ? [{ debugName: "triggerState" }] : /* istanbul ignore next */ []);
+		this.appearance = input("outline", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.displayText = computed(() => this.selectedLabel(), ...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.iconLeft = input(null, ...ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.filter = input(false, {
+			...ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.filterPlaceholder = input("", ...ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []);
+		this.panelWidth = input("trigger-min", ...ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []);
+		this.panelMaxHeight = input(null, ...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]));
+		if (v !== null) {
+			const chosen = this.rows().findIndex((row) => row.option.value === v);
+			if (chosen >= 0) this.activeIndex.set(chosen);
+		}
+	}
+	toggleBranch(event, value) {
+		event.stopPropagation();
+		this.openBranches.update((open) => rtTreeToggle(open, value));
+	}
+	onClosed() {
+		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();
+				if (this.activeIndex() < 0) 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);
+		}
+	}
+	#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.2.2",
+			ngImport: i0,
+			type: RtSelectComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: [{
+				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() || '—' }}</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            Разметка указателя: своя, если потребитель её объявил, иначе зашитая китом. Она встаёт\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\" 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                Опции listbox'а выбираются мышью через (click); keyboard-nav —\n                на trigger'е (activedescendant: ArrowUp/Down/Enter), опции не\n                focusable индивидуально, поэтому a11y-правила здесь не применимы.\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: 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: 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: "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",
+						"rtPopoverPositions"
+					],
+					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.2.2",
+	ngImport: i0,
+	type: RtSelectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-select",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				FormsModule,
+				NgTemplateOutlet,
+				RtIconButtonComponent,
+				RtIconComponent,
+				RtInputComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				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() || '—' }}</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            Разметка указателя: своя, если потребитель её объявил, иначе зашитая китом. Она встаёт\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\" 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                Опции listbox'а выбираются мышью через (click); keyboard-nav —\n                на trigger'е (activedescendant: ArrowUp/Down/Enter), опции не\n                focusable индивидуально, поэтому a11y-правила здесь не применимы.\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"]
+		}]
+	}
+});
 export { RtSelectComponent, RtSelectTriggerDirective, rtScrollActiveOptionIntoView, rtTreeBranchState, rtTreeFind, rtTreeIsTree, rtTreeLeaves, rtTreeOpenFor, rtTreeRows, rtTreeSideKey, rtTreeToggle };
-//# sourceMappingURL=rt-tools-ui-kit-v2-select.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-select.mjs.map