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

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

@@ -1,350 +1,651 @@
-import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, TemplateRef, input, booleanAttribute, computed, Directive, contentChildren, signal, viewChild, output, afterNextRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent, debounceTime } from 'rxjs';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
-import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
-
-/**
- * Декларирует одну вкладку `<rt-tabs>`. Ставится на `<ng-template>`: контент
- * шаблона становится телом панели и рендерится только когда вкладка активна.
- *
- * Метаданные (label, icon, disabled, badge, invalid) — signal-inputs, поэтому
- * шапка вкладки реагирует на их изменение без ручной перерегистрации. Сам
- * список вкладок `rt-tabs` собирает через `contentChildren`.
- */
-class RtTabDirective {
-    constructor() {
-        this.#t_uiTabInvalid = rtKitLabel('uiTabInvalid');
-        /** Шаблон тела панели — рендерится в области контента при активной вкладке. */
-        this.templateRef = inject(TemplateRef);
-        /** Стабильный идентификатор вкладки (значение атрибута `rtTab`). */
-        this.id = input('', { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'rtTab' });
-        /** Текстовый заголовок. Игнорируется, если задан `titleTemplate`. */
-        this.label = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Кастомный шаблон заголовка — замещает `label`. */
-        this.titleTemplate = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
-        /** Иконка слева от заголовка. */
-        this.icon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        /** Семантический цвет иконки заголовка. */
-        this.iconColor = input('current', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
-        /** Значение бейджа справа от заголовка (число/строка). `null` — без бейджа. */
-        this.badge = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
-        /**
-         * Подсказка при наведении на бейдж. Подсказка самой кнопки занята неверной вкладкой,
-         * поэтому у бейджа своя. Пусто — подсказки нет.
-         */
-        this.badgeTitle = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "badgeTitle" }] : /* istanbul ignore next */ []));
-        /**
-         * Подпись бейджа для чтения с экрана: точка или число сами по себе не говорят, что значат.
-         * Пусто — атрибут не ставится, и озвучивается значение бейджа как есть.
-         */
-        this.badgeAriaLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []));
-        /** Заблокированная вкладка: не выбирается и не получает фокус. */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Скрытая вкладка: не рендерится ни в шапке, ни в контенте. */
-        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Вкладка с ошибками: подсвечивается danger-цветом. */
-        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Подсказка для невалидной вкладки. Пусто — берётся переведённое умолчание. */
-        this.invalidMessage = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidMessage" }] : /* istanbul ignore next */ []));
-        /** Готовый текст подсказки: своя формулировка важнее умолчания. */
-        this.invalidTitle = computed(() => this.invalidMessage() || this.#t_uiTabInvalid(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidTitle" }] : /* istanbul ignore next */ []));
-    }
-    #t_uiTabInvalid;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtTabDirective, isStandalone: true, selector: "[rtTab]", inputs: { id: { classPropertyName: "id", publicName: "rtTab", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTitle: { classPropertyName: "badgeTitle", publicName: "badgeTitle", isSignal: true, isRequired: false, transformFunction: null }, badgeAriaLabel: { classPropertyName: "badgeAriaLabel", publicName: "badgeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTabDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtTab]',
-                }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtTab", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTitle", required: false }] }], badgeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeAriaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }] } });
-
-/**
- * Декларирует header-контрол `<rt-tabs>` — произвольный шаблон (кнопка, фильтр),
- * который рендерится слева или справа от полосы вкладок. Ставится на
- * `<ng-template>`; `rt-tabs` собирает контролы через `contentChildren` и
- * раскладывает по сторонам согласно `side`.
- */
-class RtTabsControlDirective {
-    constructor() {
-        /** Шаблон контрола, выводимый в header-слоте. */
-        this.templateRef = inject(TemplateRef);
-        /**
-         * Сторона размещения относительно полосы вкладок.
-         *
-         * Пустое значение приводится к правой стороне: `<ng-template rtTabsControl>` без значения
-         * задаёт входу пустую строку, а не умолчание, и такой контрол не попадал ни в левый слот,
-         * ни в правый — он пропадал из шапки вовсе.
-         */
-        this.side = input('right', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'rtTabsControl',
-            transform: (value) => (value === '' ? 'right' : value) });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTabsControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtTabsControlDirective, isStandalone: true, selector: "[rtTabsControl]", inputs: { side: { classPropertyName: "side", publicName: "rtTabsControl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTabsControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtTabsControl]',
-                }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtTabsControl", required: false }] }] } });
-
-/** Шаг ручной прокрутки полосы вкладок за один тик удержания стрелки (px). */
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChildren, inject, input, output, signal, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { debounceTime, fromEvent } from "rxjs";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+import { rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+var RtTabDirective = class RtTabDirective {
+	constructor() {
+		this.#t_uiTabInvalid = rtKitLabel("uiTabInvalid");
+		this.templateRef = inject(TemplateRef);
+		this.id = input("", {
+			...ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {},
+			alias: "rtTab"
+		});
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.titleTemplate = input(null, ...ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []);
+		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.iconColor = input("current", ...ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []);
+		this.badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
+		this.badgeTitle = input("", ...ngDevMode ? [{ debugName: "badgeTitle" }] : /* istanbul ignore next */ []);
+		this.badgeAriaLabel = input("", ...ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.hidden = input(false, {
+			...ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.invalid = input(false, {
+			...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.invalidMessage = input("", ...ngDevMode ? [{ debugName: "invalidMessage" }] : /* istanbul ignore next */ []);
+		this.invalidTitle = computed(() => this.invalidMessage() || this.#t_uiTabInvalid(), ...ngDevMode ? [{ debugName: "invalidTitle" }] : /* istanbul ignore next */ []);
+	}
+	#t_uiTabInvalid;
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtTabDirective,
+			isStandalone: true,
+			selector: "[rtTab]",
+			inputs: {
+				id: {
+					classPropertyName: "id",
+					publicName: "rtTab",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				titleTemplate: {
+					classPropertyName: "titleTemplate",
+					publicName: "titleTemplate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconColor: {
+					classPropertyName: "iconColor",
+					publicName: "iconColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				badge: {
+					classPropertyName: "badge",
+					publicName: "badge",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				badgeTitle: {
+					classPropertyName: "badgeTitle",
+					publicName: "badgeTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				badgeAriaLabel: {
+					classPropertyName: "badgeAriaLabel",
+					publicName: "badgeAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hidden: {
+					classPropertyName: "hidden",
+					publicName: "hidden",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				invalid: {
+					classPropertyName: "invalid",
+					publicName: "invalid",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				invalidMessage: {
+					classPropertyName: "invalidMessage",
+					publicName: "invalidMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtTabDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtTab]" }]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtTab",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		titleTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleTemplate",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconColor",
+				required: false
+			}]
+		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
+		badgeTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badgeTitle",
+				required: false
+			}]
+		}],
+		badgeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badgeAriaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		hidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidden",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		invalidMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalidMessage",
+				required: false
+			}]
+		}]
+	}
+});
+var RtTabsControlDirective = class RtTabsControlDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+		this.side = input("right", {
+			...ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {},
+			alias: "rtTabsControl",
+			transform: (value) => value === "" ? "right" : value
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabsControlDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtTabsControlDirective,
+			isStandalone: true,
+			selector: "[rtTabsControl]",
+			inputs: { side: {
+				classPropertyName: "side",
+				publicName: "rtTabsControl",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtTabsControlDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtTabsControl]" }]
+	}],
+	propDecorators: { side: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rtTabsControl",
+			required: false
+		}]
+	}] }
+});
 const SCROLL_STEP = 12;
-/** Интервал тика прокрутки при зажатой стрелке (мс). */
 const SCROLL_TICK_MS = 15;
-/** Дебаунс пересчёта видимости стрелок прокрутки на resize/scroll (мс). */
 const REST_DEBOUNCE_MS = 50;
-const BEM_BLOCK = 'rt-tabs';
-/**
- * Полоса вкладок с проекцией контента. Вкладки декларируются через
- * `<ng-template rtTab="id" label="…">…</ng-template>` (см. {@link RtTabDirective}),
- * собираются `contentChildren` и рендерятся как header-кнопки + активная панель.
- * Опциональные header-контролы — через `[rtTabsControl]`.
- *
- * Компонент "controlled-ish": активная вкладка берётся из `activeId` (если
- * задан), иначе — из внутреннего выбора, иначе — первая доступная. Клик/клавиша
- * эмиттят `activeIdChange`; синхронизацию `activeId` оставляем потребителю.
- *
- * Горизонтальная полоса при переполнении прячет вкладки под скролл и показывает
- * стрелки-«хвосты» (`__rest`) с прокруткой по удержанию. Вертикальная ориентация
- * раскладывает вкладки в колонку без стрелок.
- *
- * Доступность: `role="tablist"`/`role="tab"`/`role="tabpanel"`, `aria-selected`,
- * roving `tabindex`, навигация стрелками + Home/End.
- */
-class RtTabsComponent {
-    /** `Window` через `DOCUMENT` (SSR-safe: `defaultView` может быть `null`). */
-    #win;
-    /** Внутренний выбор (uncontrolled-ветка). */
-    #internalId;
-    /** Хэндл интервала прокрутки по удержанию стрелки. */
-    #scrollIntervalId;
-    constructor() {
-        /** `Window` через `DOCUMENT` (SSR-safe: `defaultView` может быть `null`). */
-        this.#win = inject(DOCUMENT).defaultView;
-        /** Все задекларированные вкладки (включая скрытые). */
-        this.tabs = contentChildren(RtTabDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-        /** Все header-контролы. */
-        this.controls = contentChildren(RtTabsControlDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
-        /** Видимые вкладки (без `hidden`). */
-        this.visibleTabs = computed(() => this.tabs().filter((tab) => !tab.hidden()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
-        this.leftControls = computed(() => this.controls().filter((c) => c.side() === 'left'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leftControls" }] : /* istanbul ignore next */ []));
-        this.rightControls = computed(() => this.controls().filter((c) => c.side() === 'right'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rightControls" }] : /* istanbul ignore next */ []));
-        /**
-         * Эффективный id активной вкладки. Приоритет: контролируемый `activeId` →
-         * внутренний выбор → первая доступная. Кандидат валидируется по множеству
-         * видимых незаблокированных вкладок, поэтому корректно реагирует на
-         * асинхронную загрузку/смену набора вкладок.
-         */
-        this.selectedId = computed(() => {
-            const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
-            const candidate = this.activeId() ?? this.#internalId();
-            const candidateValid = candidate !== null && enabled.some((tab) => tab.id() === candidate);
-            let result;
-            if (candidateValid) {
-                result = candidate;
-            }
-            else if (enabled.length) {
-                result = enabled[0].id();
-            }
-            else {
-                result = null;
-            }
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
-        /** Активная вкладка целиком (для рендера панели). */
-        this.activeTab = computed(() => this.visibleTabs().find((tab) => tab.id() === this.selectedId()) ?? null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-        /** Видны ли стрелки прокрутки слева/справа (только горизонтальная полоса). */
-        this.restBeforeVisible = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "restBeforeVisible" }] : /* istanbul ignore next */ []));
-        this.restAfterVisible = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "restAfterVisible" }] : /* istanbul ignore next */ []));
-        this.tabListRef = viewChild('tabList', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []));
-        /** Контролируемый активный id. `null` — компонент сам выбирает первую вкладку. */
-        this.activeId = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
-        /** Ориентация полосы. */
-        this.direction = input('horizontal', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-        /** Растягивать вкладки на всю ширину полосы. */
-        this.stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Скроллить область контента при переполнении. */
-        this.contentScrollable = input(true, { ...(ngDevMode ? { debugName: "contentScrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Эмиттит id вкладки при её выборе (клик/клавиатура). */
-        this.activeIdChange = output();
-        /** Внутренний выбор (uncontrolled-ветка). */
-        this.#internalId = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#internalId" }] : /* istanbul ignore next */ []));
-        /** Хэндл интервала прокрутки по удержанию стрелки. */
-        this.#scrollIntervalId = null;
-        if (this.#win) {
-            fromEvent(this.#win, 'resize')
-                .pipe(debounceTime(REST_DEBOUNCE_MS), takeUntilDestroyed())
-                .subscribe(() => this.#updateRestVisibility());
-        }
-        afterNextRender(() => this.#updateRestVisibility());
-        // Снимаем hold-scroll интервал при уничтожении: если компонент разрушить
-        // с зажатой стрелкой (pointerdown без pointerup), интервал остался бы жив.
-        inject(DestroyRef).onDestroy(() => this.#clearScrollInterval());
-    }
-    selectTab(id) {
-        const target = this.visibleTabs().find((tab) => tab.id() === id);
-        if (!target || target.disabled()) {
-            return;
-        }
-        this.#internalId.set(id);
-        this.activeIdChange.emit(id);
-        this.#scrollTabIntoView(id);
-    }
-    /** Навигация по вкладкам с клавиатуры (automatic activation). */
-    onTabKeydown(event) {
-        const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
-        if (!enabled.length) {
-            return;
-        }
-        const isVertical = this.direction() === 'vertical';
-        const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
-        const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
-        const currentIndex = enabled.findIndex((tab) => tab.id() === this.selectedId());
-        // Карта клавиша → целевой индекс (без if/else-if цепочки).
-        const moveByKey = new Map([
-            [nextKey, (currentIndex + 1) % enabled.length],
-            [prevKey, (currentIndex - 1 + enabled.length) % enabled.length],
-            ['Home', 0],
-            ['End', enabled.length - 1],
-        ]);
-        const targetIndex = moveByKey.get(event.key);
-        if (targetIndex === undefined) {
-            return;
-        }
-        event.preventDefault();
-        const targetId = enabled[targetIndex].id();
-        this.selectTab(targetId);
-        this.#focusTab(targetId);
-    }
-    /** Старт прокрутки полосы по удержанию ЛКМ на стрелке. */
-    onRestPointerDown(direction, event) {
-        if (event.button !== 0 || this.#scrollIntervalId !== null || !this.#win) {
-            return;
-        }
-        this.#scrollIntervalId = this.#win.setInterval(() => {
-            this.#scrollStep(direction);
-            this.#updateRestVisibility();
-        }, SCROLL_TICK_MS);
-    }
-    onRestPointerUp() {
-        this.#clearScrollInterval();
-    }
-    onTabListScroll() {
-        this.#updateRestVisibility();
-    }
-    #clearScrollInterval() {
-        if (this.#win && this.#scrollIntervalId !== null) {
-            this.#win.clearInterval(this.#scrollIntervalId);
-            this.#scrollIntervalId = null;
-        }
-    }
-    #scrollStep(direction) {
-        const list = this.tabListRef()?.nativeElement;
-        if (!list) {
-            return;
-        }
-        const scrolledLeft = list.scrollLeft;
-        const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
-        const remaining = direction === 'before' ? scrolledLeft : scrolledRight;
-        if (remaining > 0) {
-            list.scrollBy(direction === 'before' ? -SCROLL_STEP : SCROLL_STEP, 0);
-        }
-        if (remaining - SCROLL_STEP <= 0) {
-            this.#clearScrollInterval();
-        }
-    }
-    #updateRestVisibility() {
-        const list = this.tabListRef()?.nativeElement;
-        if (!list || this.direction() !== 'horizontal') {
-            this.restBeforeVisible.set(false);
-            this.restAfterVisible.set(false);
-            return;
-        }
-        const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
-        this.restBeforeVisible.set(list.scrollLeft > 0);
-        // 1px — погрешность субпиксельного scrollWidth
-        this.restAfterVisible.set(scrolledRight > 1);
-    }
-    #scrollTabIntoView(id) {
-        const list = this.tabListRef()?.nativeElement;
-        const tab = list?.querySelector(`[data-tabid="${id}"]`);
-        if (!list || !tab) {
-            return;
-        }
-        const viewLeft = list.scrollLeft;
-        const viewRight = list.scrollLeft + list.clientWidth;
-        if (tab.offsetLeft < viewLeft) {
-            list.scrollTo({ left: tab.offsetLeft });
-        }
-        else if (tab.offsetLeft + tab.offsetWidth > viewRight) {
-            list.scrollTo({ left: tab.offsetLeft + tab.offsetWidth - list.clientWidth });
-        }
-        else {
-            // вкладка целиком в зоне видимости — прокрутка не нужна
-        }
-    }
-    #focusTab(id) {
-        const list = this.tabListRef()?.nativeElement;
-        list?.querySelector(`[data-tabid="${id}"]`)?.focus();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtTabsComponent, isStandalone: true, selector: "rt-tabs", inputs: { activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, contentScrollable: { classPropertyName: "contentScrollable", publicName: "contentScrollable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIdChange: "activeIdChange" }, host: { properties: { "class.rt-tabs--direction--horizontal": "direction() === 'horizontal'", "class.rt-tabs--direction--vertical": "direction() === 'vertical'" }, classAttribute: "rt-tabs" }, queries: [{ propertyName: "tabs", predicate: RtTabDirective, isSignal: true }, { propertyName: "controls", predicate: RtTabsControlDirective, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\n                            <!-- \u0412 \u043E\u0434\u043D\u0443 \u0441\u0442\u0440\u043E\u043A\u0443: \u043F\u0435\u0440\u0435\u043D\u043E\u0441 \u0432\u043D\u0443\u0442\u0440\u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u043B \u0431\u044B \u043F\u0440\u043E\u0431\u0435\u043B \u0432 \u0442\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438. -->\n                            <!-- prettier-ignore -->\n                            <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                        }\n                    </button>\n                }\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"], dependencies: [{ kind: "directive", type: 
-                // angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { 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: RtTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // angular
-                        NgTemplateOutlet,
-                        // standalone components / directives
-                        RtIconComponent,
-                        RtTooltipDirective,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-tabs--direction--horizontal]': "direction() === 'horizontal'",
-                        '[class.rt-tabs--direction--vertical]': "direction() === 'vertical'",
-                    }, template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\n                            <!-- \u0412 \u043E\u0434\u043D\u0443 \u0441\u0442\u0440\u043E\u043A\u0443: \u043F\u0435\u0440\u0435\u043D\u043E\u0441 \u0432\u043D\u0443\u0442\u0440\u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u043B \u0431\u044B \u043F\u0440\u043E\u0431\u0435\u043B \u0432 \u0442\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438. -->\n                            <!-- prettier-ignore -->\n                            <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                        }\n                    </button>\n                }\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RtTabDirective), { isSignal: true }] }], controls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RtTabsControlDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], contentScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentScrollable", required: false }] }], activeIdChange: [{ type: i0.Output, args: ["activeIdChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const BEM_BLOCK = "rt-tabs";
+var RtTabsComponent = class RtTabsComponent {
+	#win;
+	#internalId;
+	#scrollIntervalId;
+	constructor() {
+		this.#win = inject(DOCUMENT).defaultView;
+		this.tabs = contentChildren(RtTabDirective, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+		this.controls = contentChildren(RtTabsControlDirective, ...ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []);
+		this.visibleTabs = computed(() => this.tabs().filter((tab) => !tab.hidden()), ...ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []);
+		this.leftControls = computed(() => this.controls().filter((c) => c.side() === "left"), ...ngDevMode ? [{ debugName: "leftControls" }] : /* istanbul ignore next */ []);
+		this.rightControls = computed(() => this.controls().filter((c) => c.side() === "right"), ...ngDevMode ? [{ debugName: "rightControls" }] : /* istanbul ignore next */ []);
+		this.selectedId = computed(() => {
+			const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
+			const candidate = this.activeId() ?? this.#internalId();
+			const candidateValid = candidate !== null && enabled.some((tab) => tab.id() === candidate);
+			let result;
+			if (candidateValid) result = candidate;
+			else if (enabled.length) result = enabled[0].id();
+			else result = null;
+			return result;
+		}, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+		this.activeTab = computed(() => this.visibleTabs().find((tab) => tab.id() === this.selectedId()) ?? null, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
+		this.restBeforeVisible = signal(false, ...ngDevMode ? [{ debugName: "restBeforeVisible" }] : /* istanbul ignore next */ []);
+		this.restAfterVisible = signal(false, ...ngDevMode ? [{ debugName: "restAfterVisible" }] : /* istanbul ignore next */ []);
+		this.tabListRef = viewChild("tabList", ...ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []);
+		this.activeId = input(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+		this.direction = input("horizontal", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+		this.stretch = input(false, {
+			...ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.contentScrollable = input(true, {
+			...ngDevMode ? { debugName: "contentScrollable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.activeIdChange = output();
+		this.#internalId = signal(null, ...ngDevMode ? [{ debugName: "#internalId" }] : /* istanbul ignore next */ []);
+		this.#scrollIntervalId = null;
+		if (this.#win) fromEvent(this.#win, "resize").pipe(debounceTime(REST_DEBOUNCE_MS), takeUntilDestroyed()).subscribe(() => this.#updateRestVisibility());
+		afterNextRender(() => this.#updateRestVisibility());
+		inject(DestroyRef).onDestroy(() => this.#clearScrollInterval());
+	}
+	selectTab(id) {
+		const target = this.visibleTabs().find((tab) => tab.id() === id);
+		if (!target || target.disabled()) return;
+		this.#internalId.set(id);
+		this.activeIdChange.emit(id);
+		this.#scrollTabIntoView(id);
+	}
+	onTabKeydown(event) {
+		const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
+		if (!enabled.length) return;
+		const isVertical = this.direction() === "vertical";
+		const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+		const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+		const currentIndex = enabled.findIndex((tab) => tab.id() === this.selectedId());
+		const targetIndex = (/* @__PURE__ */ new Map([
+			[nextKey, (currentIndex + 1) % enabled.length],
+			[prevKey, (currentIndex - 1 + enabled.length) % enabled.length],
+			["Home", 0],
+			["End", enabled.length - 1]
+		])).get(event.key);
+		if (targetIndex === void 0) return;
+		event.preventDefault();
+		const targetId = enabled[targetIndex].id();
+		this.selectTab(targetId);
+		this.#focusTab(targetId);
+	}
+	onRestPointerDown(direction, event) {
+		if (event.button !== 0 || this.#scrollIntervalId !== null || !this.#win) return;
+		this.#scrollIntervalId = this.#win.setInterval(() => {
+			this.#scrollStep(direction);
+			this.#updateRestVisibility();
+		}, SCROLL_TICK_MS);
+	}
+	onRestPointerUp() {
+		this.#clearScrollInterval();
+	}
+	onTabListScroll() {
+		this.#updateRestVisibility();
+	}
+	#clearScrollInterval() {
+		if (this.#win && this.#scrollIntervalId !== null) {
+			this.#win.clearInterval(this.#scrollIntervalId);
+			this.#scrollIntervalId = null;
+		}
+	}
+	#scrollStep(direction) {
+		const list = this.tabListRef()?.nativeElement;
+		if (!list) return;
+		const scrolledLeft = list.scrollLeft;
+		const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
+		const remaining = direction === "before" ? scrolledLeft : scrolledRight;
+		if (remaining > 0) list.scrollBy(direction === "before" ? -12 : SCROLL_STEP, 0);
+		if (remaining - SCROLL_STEP <= 0) this.#clearScrollInterval();
+	}
+	#updateRestVisibility() {
+		const list = this.tabListRef()?.nativeElement;
+		if (!list || this.direction() !== "horizontal") {
+			this.restBeforeVisible.set(false);
+			this.restAfterVisible.set(false);
+			return;
+		}
+		const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
+		this.restBeforeVisible.set(list.scrollLeft > 0);
+		this.restAfterVisible.set(scrolledRight > 1);
+	}
+	#scrollTabIntoView(id) {
+		const list = this.tabListRef()?.nativeElement;
+		const tab = list?.querySelector(`[data-tabid="${id}"]`);
+		if (!list || !tab) return;
+		const viewLeft = list.scrollLeft;
+		const viewRight = list.scrollLeft + list.clientWidth;
+		if (tab.offsetLeft < viewLeft) list.scrollTo({ left: tab.offsetLeft });
+		else if (tab.offsetLeft + tab.offsetWidth > viewRight) list.scrollTo({ left: tab.offsetLeft + tab.offsetWidth - list.clientWidth });
+	}
+	#focusTab(id) {
+		(this.tabListRef()?.nativeElement)?.querySelector(`[data-tabid="${id}"]`)?.focus();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtTabsComponent,
+			isStandalone: true,
+			selector: "rt-tabs",
+			inputs: {
+				activeId: {
+					classPropertyName: "activeId",
+					publicName: "activeId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				direction: {
+					classPropertyName: "direction",
+					publicName: "direction",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stretch: {
+					classPropertyName: "stretch",
+					publicName: "stretch",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentScrollable: {
+					classPropertyName: "contentScrollable",
+					publicName: "contentScrollable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { activeIdChange: "activeIdChange" },
+			host: {
+				properties: {
+					"class.rt-tabs--direction--horizontal": "direction() === 'horizontal'",
+					"class.rt-tabs--direction--vertical": "direction() === 'vertical'"
+				},
+				classAttribute: "rt-tabs"
+			},
+			queries: [{
+				propertyName: "tabs",
+				predicate: RtTabDirective,
+				isSignal: true
+			}, {
+				propertyName: "controls",
+				predicate: RtTabsControlDirective,
+				isSignal: true
+			}],
+			viewQueries: [{
+				propertyName: "tabListRef",
+				first: true,
+				predicate: ["tabList"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\n                            <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                            <!-- prettier-ignore -->\n                            <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                        }\n                    </button>\n                }\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					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: RtTabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-tabs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconComponent,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-tabs--direction--horizontal]": "direction() === 'horizontal'",
+				"[class.rt-tabs--direction--vertical]": "direction() === 'vertical'"
+			},
+			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\n                            <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                            <!-- prettier-ignore -->\n                            <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                        }\n                    </button>\n                }\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtTabDirective), { isSignal: true }]
+		}],
+		controls: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtTabsControlDirective), { isSignal: true }]
+		}],
+		tabListRef: [{
+			type: i0.ViewChild,
+			args: ["tabList", { isSignal: true }]
+		}],
+		activeId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeId",
+				required: false
+			}]
+		}],
+		direction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "direction",
+				required: false
+			}]
+		}],
+		stretch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stretch",
+				required: false
+			}]
+		}],
+		contentScrollable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentScrollable",
+				required: false
+			}]
+		}],
+		activeIdChange: [{
+			type: i0.Output,
+			args: ["activeIdChange"]
+		}]
+	}
+});
 export { RtTabDirective, RtTabsComponent, RtTabsControlDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-tabs.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-tabs.mjs.map