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

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

@@ -1,214 +1,456 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, viewChild, signal, computed, input, booleanAttribute, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { 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 { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { rtScrollActiveOptionIntoView } from '@rt-tools/ui-kit-v2/select';
-
-const BEM_BLOCK = 'rt-autocomplete';
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { 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 { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { rtScrollActiveOptionIntoView } from "@rt-tools/ui-kit-v2/select";
+const BEM_BLOCK = "rt-autocomplete";
 let panelIdSeed = 0;
 function nextPanelId() {
-    panelIdSeed += 1;
-    return panelIdSeed;
-}
-/**
- * Typeahead/autocomplete с server-side filter через `(complete)` event.
- *
- * Panel рендерится через CDK Overlay (`[rtPopover]` trigger="manual" на input'е)
- * — открывается по набору текста (не click/hover), не обрезается overflow.
- * Подписчик получает `(complete)` с текущей строкой и сам грузит подсказки.
- *
- * CVA через общий `RtFormControlBase`. Generic `TItem` — тип подсказки и
- * selected value. Крестик (`clearable`) виден при непустом тексте — очищает и
- * текст, и выбранный объект. Keyboard-nav (activedescendant): ArrowUp/Down —
- * highlight, Enter — выбрать активную, Escape — закрыть. Home/End — deferred.
- */
-class RtAutocompleteComponent extends RtFormControlBase {
-    constructor() {
-        super();
-        this.t = inject(RT_KIT_LABELS);
-        this.panelId = `rt-autocomplete-panel-${nextPanelId()}`;
-        this.popover = viewChild.required(RtPopoverDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
-        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
-        this.inputText = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
-        this.activeIndex = signal(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* 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.hasValue = computed(() => this.inputText() !== '', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
-        this.displayText = computed(() => this.displayWith()(this.value()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
-        this.suggestions = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
-        this.displayWith = input((item) => String(item ?? ''), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.minLength = input(1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
-        /** Префикс-иконка слева в поле (например, `map` для поиска). */
-        this.iconLeft = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
-        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.itemTemplate = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
-        this.complete = output();
-        this.itemSelect = output();
-        // Подсветка, сдвинутая клавишами, не уходит за край панели с пределом высоты.
-        rtScrollActiveOptionIntoView(this.activeOptionId);
-    }
-    writeValue(value) {
-        super.writeValue(value);
-        this.inputText.set(this.displayWith()(this.value()));
-    }
-    setDisabledState(disabled) {
-        super.setDisabledState(disabled);
-        if (disabled) {
-            this.popover().close();
-        }
-    }
-    getEmptyValue() {
-        return null;
-    }
-    focusAfterClear() {
-        this.fieldEl()?.nativeElement.focus();
-    }
-    clearValue() {
-        super.clearValue();
-        this.inputText.set('');
-    }
-    onInput(event) {
-        const target = event.target;
-        const query = target.value;
-        this.inputText.set(query);
-        this.activeIndex.set(-1);
-        if (query.length >= this.minLength()) {
-            this.complete.emit({ query, originalEvent: event });
-            this.popover().open();
-        }
-        else {
-            this.popover().close();
-        }
-    }
-    onFocus() {
-        if (!this.openOnFocus()) {
-            return;
-        }
-        this.complete.emit({ query: this.inputText(), originalEvent: new Event('focus') });
-        this.popover().open();
-    }
-    onBlur() {
-        this.markTouched();
-    }
-    onClosed() {
-        this.activeIndex.set(-1);
-    }
-    onSelect(item) {
-        this.value.set(item);
-        this.inputText.set(this.displayWith()(item));
-        this.emitChange(item);
-        this.itemSelect.emit(item);
-        this.popover().close();
-    }
-    onInputKeydown(event) {
-        if (this.isDisabled()) {
-            return;
-        }
-        const key = event.key;
-        if (!this.isOpen()) {
-            return;
-        }
-        switch (key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.#moveActive(1);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.#moveActive(-1);
-                break;
-            case 'Enter':
-                event.preventDefault();
-                this.#selectActive();
-                break;
-            case 'Escape':
-                event.preventDefault();
-                this.popover().close();
-                break;
-            default:
-                break;
-        }
-    }
-    #moveActive(delta) {
-        const items = this.suggestions();
-        if (items.length === 0) {
-            this.activeIndex.set(-1);
-            return;
-        }
-        const index = this.activeIndex();
-        const next = (index + delta + items.length) % items.length;
-        this.activeIndex.set(next);
-    }
-    #selectActive() {
-        const items = this.suggestions();
-        const index = this.activeIndex();
-        if (index >= 0 && index < items.length) {
-            this.onSelect(items[index]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtAutocompleteComponent, isStandalone: true, selector: "rt-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete", itemSelect: "itemSelect" }, host: { properties: { "class.rt-autocomplete--open": "isOpen()", "class.rt-autocomplete--disabled": "isDisabled()", "class.rt-autocomplete--readonly": "isReadonly()", "class.rt-autocomplete--invalid": "isInvalid()", "class.rt-autocomplete--borderless": "!bordered()", "class.rt-autocomplete--size--sm": "size() === 'sm'", "class.rt-autocomplete--size--lg": "size() === 'lg'" }, classAttribute: "rt-autocomplete" }, providers: [
-            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
-            { provide: RtFormControlBase, useExisting: forwardRef(() => RtAutocompleteComponent) },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: RtPopoverDirective, descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-autocomplete\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"autocomplete-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <div rtElem=\"field\" rtPopoverTrigger=\"manual\" rtPopoverWidth=\"trigger\" [rtPopover]=\"panelTpl\" (rtPopoverClosed)=\"onClosed()\">\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"input\"\n            qa-dataid=\"autocomplete-input\"\n            type=\"text\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.aria-autocomplete]=\"'list'\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-activedescendant]=\"activeOptionId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"inputText()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onInputKeydown($event)\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"autocomplete-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    </div>\n\n    <ng-template #panelTpl>\n        <!--\n            \u041E\u043F\u0446\u0438\u0438 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014 \u043D\u0430 input'\u0435\n            (activedescendant), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435 focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E.\n        -->\n        <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <ul rtElem=\"panel\" qa-dataid=\"autocomplete-panel\" role=\"listbox\" [id]=\"panelId\">\n            @for (item of suggestions(); track $index; let i = $index) {\n                <li\n                    rtElem=\"option\"\n                    qa-dataid=\"autocomplete-option\"\n                    role=\"option\"\n                    [id]=\"panelId + '-opt-' + i\"\n                    [rtMod]=\"{ active: i === activeIndex() }\"\n                    [attr.aria-selected]=\"item === value()\"\n                    (click)=\"onSelect(item)\">\n                    @if (itemTemplate(); as tpl) {\n                        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                    } @else {\n                        {{ displayWith()(item) }}\n                    }\n                </li>\n            } @empty {\n                <li rtElem=\"empty\" qa-dataid=\"autocomplete-empty\">{{ t().uiNothingFound }}</li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-autocomplete{--rt-autocomplete-radius: var(--rt-input-radius);position:relative;display:block;width:100%}.rt-autocomplete__field{display:inline-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-autocomplete-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-autocomplete__field:focus-within{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-autocomplete--borderless .rt-autocomplete__field{border-color:transparent}.rt-autocomplete--open .rt-autocomplete__field{border-color:var(--rt-input-color-border-focus)}.rt-autocomplete--invalid .rt-autocomplete__field{border-color:var(--rt-input-color-border-error)}.rt-autocomplete--invalid .rt-autocomplete__field:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-autocomplete--disabled .rt-autocomplete__field{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-autocomplete--size--sm .rt-autocomplete__field{min-height:var(--rt-input-height-sm)}.rt-autocomplete--size--lg .rt-autocomplete__field{min-height:var(--rt-input-height-lg)}.rt-autocomplete--readonly .rt-autocomplete__field{display:none}.rt-autocomplete__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-autocomplete__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-autocomplete__input{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-autocomplete__input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-autocomplete__input:disabled{cursor:not-allowed}.rt-autocomplete__icon-left,.rt-autocomplete__clear{flex-shrink:0}.rt-autocomplete__panel{--rt-autocomplete-panel-shadow: var(--rt-shadow-md);width:100%;max-height:var(--rt-input-panel-max-height);box-sizing:border-box;padding:var(--rt-space-2xs) 0;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);margin:0;background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-autocomplete-panel-shadow);list-style:none;overflow-y:auto}.rt-autocomplete__option{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size)}.rt-autocomplete__option:hover,.rt-autocomplete__option--active{background-color:var(--rt-color-bg-hover)}.rt-autocomplete__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-autocomplete[data-rt-radius=none]{--rt-autocomplete-radius: var(--rt-radius-none)}.rt-autocomplete[data-rt-radius=xs]{--rt-autocomplete-radius: var(--rt-radius-xs)}.rt-autocomplete[data-rt-radius=sm]{--rt-autocomplete-radius: var(--rt-radius-sm)}.rt-autocomplete[data-rt-radius=ms]{--rt-autocomplete-radius: var(--rt-radius-ms)}.rt-autocomplete[data-rt-radius=md]{--rt-autocomplete-radius: var(--rt-radius-md)}.rt-autocomplete[data-rt-radius=lg]{--rt-autocomplete-radius: var(--rt-radius-lg)}.rt-autocomplete[data-rt-radius=xl]{--rt-autocomplete-radius: var(--rt-radius-xl)}.rt-autocomplete[data-rt-radius=\"2xl\"]{--rt-autocomplete-radius: var(--rt-radius-2xl)}.rt-autocomplete[data-rt-radius=full]{--rt-autocomplete-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
-                // Angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "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 }); }
+	panelIdSeed += 1;
+	return panelIdSeed;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // Angular
-                        NgTemplateOutlet,
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        RtIconComponent,
-                        RtPopoverDirective,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], providers: [
-                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
-                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtAutocompleteComponent) },
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-autocomplete--open]': 'isOpen()',
-                        '[class.rt-autocomplete--disabled]': 'isDisabled()',
-                        '[class.rt-autocomplete--readonly]': 'isReadonly()',
-                        '[class.rt-autocomplete--invalid]': 'isInvalid()',
-                        '[class.rt-autocomplete--borderless]': '!bordered()',
-                        '[class.rt-autocomplete--size--sm]': "size() === 'sm'",
-                        '[class.rt-autocomplete--size--lg]': "size() === 'lg'",
-                    }, template: "<ng-container rtBlock=\"rt-autocomplete\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"autocomplete-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    }\n    <div rtElem=\"field\" rtPopoverTrigger=\"manual\" rtPopoverWidth=\"trigger\" [rtPopover]=\"panelTpl\" (rtPopoverClosed)=\"onClosed()\">\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"input\"\n            qa-dataid=\"autocomplete-input\"\n            type=\"text\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.aria-autocomplete]=\"'list'\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-activedescendant]=\"activeOptionId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"inputText()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onInputKeydown($event)\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"autocomplete-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    </div>\n\n    <ng-template #panelTpl>\n        <!--\n            \u041E\u043F\u0446\u0438\u0438 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442\u0441\u044F \u043C\u044B\u0448\u044C\u044E \u0447\u0435\u0440\u0435\u0437 (click); keyboard-nav \u2014 \u043D\u0430 input'\u0435\n            (activedescendant), \u043E\u043F\u0446\u0438\u0438 \u043D\u0435 focusable \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u043E.\n        -->\n        <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <ul rtElem=\"panel\" qa-dataid=\"autocomplete-panel\" role=\"listbox\" [id]=\"panelId\">\n            @for (item of suggestions(); track $index; let i = $index) {\n                <li\n                    rtElem=\"option\"\n                    qa-dataid=\"autocomplete-option\"\n                    role=\"option\"\n                    [id]=\"panelId + '-opt-' + i\"\n                    [rtMod]=\"{ active: i === activeIndex() }\"\n                    [attr.aria-selected]=\"item === value()\"\n                    (click)=\"onSelect(item)\">\n                    @if (itemTemplate(); as tpl) {\n                        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                    } @else {\n                        {{ displayWith()(item) }}\n                    }\n                </li>\n            } @empty {\n                <li rtElem=\"empty\" qa-dataid=\"autocomplete-empty\">{{ t().uiNothingFound }}</li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-autocomplete{--rt-autocomplete-radius: var(--rt-input-radius);position:relative;display:block;width:100%}.rt-autocomplete__field{display:inline-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-autocomplete-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-autocomplete__field:focus-within{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-autocomplete--borderless .rt-autocomplete__field{border-color:transparent}.rt-autocomplete--open .rt-autocomplete__field{border-color:var(--rt-input-color-border-focus)}.rt-autocomplete--invalid .rt-autocomplete__field{border-color:var(--rt-input-color-border-error)}.rt-autocomplete--invalid .rt-autocomplete__field:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-autocomplete--disabled .rt-autocomplete__field{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-autocomplete--size--sm .rt-autocomplete__field{min-height:var(--rt-input-height-sm)}.rt-autocomplete--size--lg .rt-autocomplete__field{min-height:var(--rt-input-height-lg)}.rt-autocomplete--readonly .rt-autocomplete__field{display:none}.rt-autocomplete__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-autocomplete__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-autocomplete__input{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-autocomplete__input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-autocomplete__input:disabled{cursor:not-allowed}.rt-autocomplete__icon-left,.rt-autocomplete__clear{flex-shrink:0}.rt-autocomplete__panel{--rt-autocomplete-panel-shadow: var(--rt-shadow-md);width:100%;max-height:var(--rt-input-panel-max-height);box-sizing:border-box;padding:var(--rt-space-2xs) 0;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);margin:0;background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-autocomplete-panel-shadow);list-style:none;overflow-y:auto}.rt-autocomplete__option{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size)}.rt-autocomplete__option:hover,.rt-autocomplete__option--active{background-color:var(--rt-color-bg-hover)}.rt-autocomplete__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-autocomplete[data-rt-radius=none]{--rt-autocomplete-radius: var(--rt-radius-none)}.rt-autocomplete[data-rt-radius=xs]{--rt-autocomplete-radius: var(--rt-radius-xs)}.rt-autocomplete[data-rt-radius=sm]{--rt-autocomplete-radius: var(--rt-radius-sm)}.rt-autocomplete[data-rt-radius=ms]{--rt-autocomplete-radius: var(--rt-radius-ms)}.rt-autocomplete[data-rt-radius=md]{--rt-autocomplete-radius: var(--rt-radius-md)}.rt-autocomplete[data-rt-radius=lg]{--rt-autocomplete-radius: var(--rt-radius-lg)}.rt-autocomplete[data-rt-radius=xl]{--rt-autocomplete-radius: var(--rt-radius-xl)}.rt-autocomplete[data-rt-radius=\"2xl\"]{--rt-autocomplete-radius: var(--rt-radius-2xl)}.rt-autocomplete[data-rt-radius=full]{--rt-autocomplete-radius: var(--rt-radius-full)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtAutocompleteComponent = class RtAutocompleteComponent extends RtFormControlBase {
+	constructor() {
+		super();
+		this.t = inject(RT_KIT_LABELS);
+		this.panelId = `rt-autocomplete-panel-${nextPanelId()}`;
+		this.popover = viewChild.required(RtPopoverDirective, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+		this.fieldEl = viewChild("fieldEl", ...ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []);
+		this.inputText = signal("", ...ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []);
+		this.activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* 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.hasValue = computed(() => this.inputText() !== "", ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.displayText = computed(() => this.displayWith()(this.value()), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
+		this.suggestions = input([], ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+		this.displayWith = input((item) => String(item ?? ""), ...ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.minLength = input(1, ...ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []);
+		this.iconLeft = input(null, ...ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.openOnFocus = input(false, {
+			...ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.itemTemplate = input(null, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+		this.complete = output();
+		this.itemSelect = output();
+		rtScrollActiveOptionIntoView(this.activeOptionId);
+	}
+	writeValue(value) {
+		super.writeValue(value);
+		this.inputText.set(this.displayWith()(this.value()));
+	}
+	setDisabledState(disabled) {
+		super.setDisabledState(disabled);
+		if (disabled) this.popover().close();
+	}
+	getEmptyValue() {
+		return null;
+	}
+	focusAfterClear() {
+		this.fieldEl()?.nativeElement.focus();
+	}
+	clearValue() {
+		super.clearValue();
+		this.inputText.set("");
+	}
+	onInput(event) {
+		const query = event.target.value;
+		this.inputText.set(query);
+		this.activeIndex.set(-1);
+		if (query.length >= this.minLength()) {
+			this.complete.emit({
+				query,
+				originalEvent: event
+			});
+			this.popover().open();
+		} else this.popover().close();
+	}
+	onFocus() {
+		if (!this.openOnFocus()) return;
+		this.complete.emit({
+			query: this.inputText(),
+			originalEvent: new Event("focus")
+		});
+		this.popover().open();
+	}
+	onBlur() {
+		this.markTouched();
+	}
+	onClosed() {
+		this.activeIndex.set(-1);
+	}
+	onSelect(item) {
+		this.value.set(item);
+		this.inputText.set(this.displayWith()(item));
+		this.emitChange(item);
+		this.itemSelect.emit(item);
+		this.popover().close();
+	}
+	onInputKeydown(event) {
+		if (this.isDisabled()) return;
+		const key = event.key;
+		if (!this.isOpen()) return;
+		switch (key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.#moveActive(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.#moveActive(-1);
+				break;
+			case "Enter":
+				event.preventDefault();
+				this.#selectActive();
+				break;
+			case "Escape":
+				event.preventDefault();
+				this.popover().close();
+		}
+	}
+	#moveActive(delta) {
+		const items = this.suggestions();
+		if (items.length === 0) {
+			this.activeIndex.set(-1);
+			return;
+		}
+		const next = (this.activeIndex() + delta + items.length) % items.length;
+		this.activeIndex.set(next);
+	}
+	#selectActive() {
+		const items = this.suggestions();
+		const index = this.activeIndex();
+		if (index >= 0 && index < items.length) this.onSelect(items[index]);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtAutocompleteComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtAutocompleteComponent,
+			isStandalone: true,
+			selector: "rt-autocomplete",
+			inputs: {
+				suggestions: {
+					classPropertyName: "suggestions",
+					publicName: "suggestions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				displayWith: {
+					classPropertyName: "displayWith",
+					publicName: "displayWith",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minLength: {
+					classPropertyName: "minLength",
+					publicName: "minLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeft: {
+					classPropertyName: "iconLeft",
+					publicName: "iconLeft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				openOnFocus: {
+					classPropertyName: "openOnFocus",
+					publicName: "openOnFocus",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				itemTemplate: {
+					classPropertyName: "itemTemplate",
+					publicName: "itemTemplate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				complete: "complete",
+				itemSelect: "itemSelect"
+			},
+			host: {
+				properties: {
+					"class.rt-autocomplete--open": "isOpen()",
+					"class.rt-autocomplete--disabled": "isDisabled()",
+					"class.rt-autocomplete--readonly": "isReadonly()",
+					"class.rt-autocomplete--invalid": "isInvalid()",
+					"class.rt-autocomplete--borderless": "!bordered()",
+					"class.rt-autocomplete--size--sm": "size() === 'sm'",
+					"class.rt-autocomplete--size--lg": "size() === 'lg'"
+				},
+				classAttribute: "rt-autocomplete"
+			},
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtAutocompleteComponent)
+			}],
+			viewQueries: [{
+				propertyName: "popover",
+				first: true,
+				predicate: RtPopoverDirective,
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "fieldEl",
+				first: true,
+				predicate: ["fieldEl"],
+				descendants: true,
+				isSignal: true
+			}],
+			usesInheritance: true,
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-autocomplete\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"autocomplete-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    }\n    <div rtElem=\"field\" rtPopoverTrigger=\"manual\" rtPopoverWidth=\"trigger\" [rtPopover]=\"panelTpl\" (rtPopoverClosed)=\"onClosed()\">\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"input\"\n            qa-dataid=\"autocomplete-input\"\n            type=\"text\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.aria-autocomplete]=\"'list'\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-activedescendant]=\"activeOptionId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"inputText()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onInputKeydown($event)\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"autocomplete-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    </div>\n\n    <ng-template #panelTpl>\n        <!--\n            Опции выбираются мышью через (click); keyboard-nav — на input'е\n            (activedescendant), опции не focusable индивидуально.\n        -->\n        <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <ul rtElem=\"panel\" qa-dataid=\"autocomplete-panel\" role=\"listbox\" [id]=\"panelId\">\n            @for (item of suggestions(); track $index; let i = $index) {\n                <li\n                    rtElem=\"option\"\n                    qa-dataid=\"autocomplete-option\"\n                    role=\"option\"\n                    [id]=\"panelId + '-opt-' + i\"\n                    [rtMod]=\"{ active: i === activeIndex() }\"\n                    [attr.aria-selected]=\"item === value()\"\n                    (click)=\"onSelect(item)\">\n                    @if (itemTemplate(); as tpl) {\n                        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                    } @else {\n                        {{ displayWith()(item) }}\n                    }\n                </li>\n            } @empty {\n                <li rtElem=\"empty\" qa-dataid=\"autocomplete-empty\">{{ t().uiNothingFound }}</li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-autocomplete{--rt-autocomplete-radius: var(--rt-input-radius);position:relative;display:block;width:100%}.rt-autocomplete__field{display:inline-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-autocomplete-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-autocomplete__field:focus-within{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-autocomplete--borderless .rt-autocomplete__field{border-color:transparent}.rt-autocomplete--open .rt-autocomplete__field{border-color:var(--rt-input-color-border-focus)}.rt-autocomplete--invalid .rt-autocomplete__field{border-color:var(--rt-input-color-border-error)}.rt-autocomplete--invalid .rt-autocomplete__field:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-autocomplete--disabled .rt-autocomplete__field{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-autocomplete--size--sm .rt-autocomplete__field{min-height:var(--rt-input-height-sm)}.rt-autocomplete--size--lg .rt-autocomplete__field{min-height:var(--rt-input-height-lg)}.rt-autocomplete--readonly .rt-autocomplete__field{display:none}.rt-autocomplete__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-autocomplete__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-autocomplete__input{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-autocomplete__input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-autocomplete__input:disabled{cursor:not-allowed}.rt-autocomplete__icon-left,.rt-autocomplete__clear{flex-shrink:0}.rt-autocomplete__panel{--rt-autocomplete-panel-shadow: var(--rt-shadow-md);width:100%;max-height:var(--rt-input-panel-max-height);box-sizing:border-box;padding:var(--rt-space-2xs) 0;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);margin:0;background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-autocomplete-panel-shadow);list-style:none;overflow-y:auto}.rt-autocomplete__option{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size)}.rt-autocomplete__option:hover,.rt-autocomplete__option--active{background-color:var(--rt-color-bg-hover)}.rt-autocomplete__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-autocomplete[data-rt-radius=none]{--rt-autocomplete-radius: var(--rt-radius-none)}.rt-autocomplete[data-rt-radius=xs]{--rt-autocomplete-radius: var(--rt-radius-xs)}.rt-autocomplete[data-rt-radius=sm]{--rt-autocomplete-radius: var(--rt-radius-sm)}.rt-autocomplete[data-rt-radius=ms]{--rt-autocomplete-radius: var(--rt-radius-ms)}.rt-autocomplete[data-rt-radius=md]{--rt-autocomplete-radius: var(--rt-radius-md)}.rt-autocomplete[data-rt-radius=lg]{--rt-autocomplete-radius: var(--rt-radius-lg)}.rt-autocomplete[data-rt-radius=xl]{--rt-autocomplete-radius: var(--rt-radius-xl)}.rt-autocomplete[data-rt-radius=\"2xl\"]{--rt-autocomplete-radius: var(--rt-radius-2xl)}.rt-autocomplete[data-rt-radius=full]{--rt-autocomplete-radius: var(--rt-radius-full)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "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: RtAutocompleteComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-autocomplete",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconButtonComponent,
+				RtIconComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtAutocompleteComponent)
+			}],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-autocomplete--open]": "isOpen()",
+				"[class.rt-autocomplete--disabled]": "isDisabled()",
+				"[class.rt-autocomplete--readonly]": "isReadonly()",
+				"[class.rt-autocomplete--invalid]": "isInvalid()",
+				"[class.rt-autocomplete--borderless]": "!bordered()",
+				"[class.rt-autocomplete--size--sm]": "size() === 'sm'",
+				"[class.rt-autocomplete--size--lg]": "size() === 'lg'"
+			},
+			template: "<ng-container rtBlock=\"rt-autocomplete\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"autocomplete-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    }\n    <div rtElem=\"field\" rtPopoverTrigger=\"manual\" rtPopoverWidth=\"trigger\" [rtPopover]=\"panelTpl\" (rtPopoverClosed)=\"onClosed()\">\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"input\"\n            qa-dataid=\"autocomplete-input\"\n            type=\"text\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.aria-autocomplete]=\"'list'\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-activedescendant]=\"activeOptionId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"inputText()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onInputKeydown($event)\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"autocomplete-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    </div>\n\n    <ng-template #panelTpl>\n        <!--\n            Опции выбираются мышью через (click); keyboard-nav — на input'е\n            (activedescendant), опции не focusable индивидуально.\n        -->\n        <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <ul rtElem=\"panel\" qa-dataid=\"autocomplete-panel\" role=\"listbox\" [id]=\"panelId\">\n            @for (item of suggestions(); track $index; let i = $index) {\n                <li\n                    rtElem=\"option\"\n                    qa-dataid=\"autocomplete-option\"\n                    role=\"option\"\n                    [id]=\"panelId + '-opt-' + i\"\n                    [rtMod]=\"{ active: i === activeIndex() }\"\n                    [attr.aria-selected]=\"item === value()\"\n                    (click)=\"onSelect(item)\">\n                    @if (itemTemplate(); as tpl) {\n                        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                    } @else {\n                        {{ displayWith()(item) }}\n                    }\n                </li>\n            } @empty {\n                <li rtElem=\"empty\" qa-dataid=\"autocomplete-empty\">{{ t().uiNothingFound }}</li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-autocomplete{--rt-autocomplete-radius: var(--rt-input-radius);position:relative;display:block;width:100%}.rt-autocomplete__field{display:inline-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-autocomplete-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-autocomplete__field:focus-within{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-autocomplete--borderless .rt-autocomplete__field{border-color:transparent}.rt-autocomplete--open .rt-autocomplete__field{border-color:var(--rt-input-color-border-focus)}.rt-autocomplete--invalid .rt-autocomplete__field{border-color:var(--rt-input-color-border-error)}.rt-autocomplete--invalid .rt-autocomplete__field:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-autocomplete--disabled .rt-autocomplete__field{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-autocomplete--size--sm .rt-autocomplete__field{min-height:var(--rt-input-height-sm)}.rt-autocomplete--size--lg .rt-autocomplete__field{min-height:var(--rt-input-height-lg)}.rt-autocomplete--readonly .rt-autocomplete__field{display:none}.rt-autocomplete__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-autocomplete__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-autocomplete__input{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-autocomplete__input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-autocomplete__input:disabled{cursor:not-allowed}.rt-autocomplete__icon-left,.rt-autocomplete__clear{flex-shrink:0}.rt-autocomplete__panel{--rt-autocomplete-panel-shadow: var(--rt-shadow-md);width:100%;max-height:var(--rt-input-panel-max-height);box-sizing:border-box;padding:var(--rt-space-2xs) 0;border:var(--rt-input-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-input-radius);margin:0;background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-autocomplete-panel-shadow);list-style:none;overflow-y:auto}.rt-autocomplete__option{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size)}.rt-autocomplete__option:hover,.rt-autocomplete__option--active{background-color:var(--rt-color-bg-hover)}.rt-autocomplete__empty{padding:var(--rt-space-sm) var(--rt-space-md);color:var(--rt-input-color-text-placeholder);font-style:italic}.rt-autocomplete[data-rt-radius=none]{--rt-autocomplete-radius: var(--rt-radius-none)}.rt-autocomplete[data-rt-radius=xs]{--rt-autocomplete-radius: var(--rt-radius-xs)}.rt-autocomplete[data-rt-radius=sm]{--rt-autocomplete-radius: var(--rt-radius-sm)}.rt-autocomplete[data-rt-radius=ms]{--rt-autocomplete-radius: var(--rt-radius-ms)}.rt-autocomplete[data-rt-radius=md]{--rt-autocomplete-radius: var(--rt-radius-md)}.rt-autocomplete[data-rt-radius=lg]{--rt-autocomplete-radius: var(--rt-radius-lg)}.rt-autocomplete[data-rt-radius=xl]{--rt-autocomplete-radius: var(--rt-radius-xl)}.rt-autocomplete[data-rt-radius=\"2xl\"]{--rt-autocomplete-radius: var(--rt-radius-2xl)}.rt-autocomplete[data-rt-radius=full]{--rt-autocomplete-radius: var(--rt-radius-full)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		popover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }]
+		}],
+		fieldEl: [{
+			type: i0.ViewChild,
+			args: ["fieldEl", { isSignal: true }]
+		}],
+		suggestions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suggestions",
+				required: false
+			}]
+		}],
+		displayWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "displayWith",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		minLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minLength",
+				required: false
+			}]
+		}],
+		iconLeft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeft",
+				required: false
+			}]
+		}],
+		openOnFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openOnFocus",
+				required: false
+			}]
+		}],
+		itemTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemTemplate",
+				required: false
+			}]
+		}],
+		complete: [{
+			type: i0.Output,
+			args: ["complete"]
+		}],
+		itemSelect: [{
+			type: i0.Output,
+			args: ["itemSelect"]
+		}]
+	}
+});
 export { RtAutocompleteComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-autocomplete.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-autocomplete.mjs.map