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

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

@@ -1,72 +1,200 @@
-import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, output, 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 { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-
-const BEM_BLOCK = 'rt-header';
-/**
- * Общий хедер приложения.
- *
- * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),
- * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда
- * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark
- * выравнивается слева.
- *
- * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»
- * (`showInvite`), слот колокольчика и профиль.
- *
- * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот
- * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.
- *
- * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,
- * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном
- * страницы в dark).
- */
-class RtHeaderComponent {
-    constructor() {
-        this.t = inject(RT_KIT_LABELS);
-        this.canGoBack = input(false, { ...(ngDevMode ? { debugName: "canGoBack" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */
-        this.showInvite = input(false, { ...(ngDevMode ? { debugName: "showInvite" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.backClick = output();
-        this.inviteClick = output();
-        this.profileClick = output();
-    }
-    onBackClick() {
-        this.backClick.emit();
-    }
-    onInviteClick() {
-        this.inviteClick.emit();
-    }
-    onProfileClick() {
-        this.profileClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtHeaderComponent, isStandalone: true, selector: "rt-header", inputs: { canGoBack: { classPropertyName: "canGoBack", publicName: "canGoBack", isSignal: true, isRequired: false, transformFunction: null }, showInvite: { classPropertyName: "showInvite", publicName: "showInvite", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick", inviteClick: "inviteClick", profileClick: "profileClick" }, host: { classAttribute: "rt-header" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"], dependencies: [{ 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: RtLogoComponent, selector: "rt-logo", inputs: ["variant", "height", "aspect", "ariaLabel"] }, { 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: RtHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        RtLogoComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"] }]
-        }], propDecorators: { canGoBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGoBack", required: false }] }], showInvite: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInvite", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], inviteClick: [{ type: i0.Output, args: ["inviteClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, inject, input, output } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtLogoComponent } from "@rt-tools/ui-kit-v2/logo";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+const BEM_BLOCK = "rt-header";
+var RtHeaderComponent = class RtHeaderComponent {
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.canGoBack = input(false, {
+			...ngDevMode ? { debugName: "canGoBack" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.showInvite = input(false, {
+			...ngDevMode ? { debugName: "showInvite" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.backClick = output();
+		this.inviteClick = output();
+		this.profileClick = output();
+	}
+	onBackClick() {
+		this.backClick.emit();
+	}
+	onInviteClick() {
+		this.inviteClick.emit();
+	}
+	onProfileClick() {
+		this.profileClick.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtHeaderComponent,
+			isStandalone: true,
+			selector: "rt-header",
+			inputs: {
+				canGoBack: {
+					classPropertyName: "canGoBack",
+					publicName: "canGoBack",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showInvite: {
+					classPropertyName: "showInvite",
+					publicName: "showInvite",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				backClick: "backClick",
+				inviteClick: "inviteClick",
+				profileClick: "profileClick"
+			},
+			host: { classAttribute: "rt-header" },
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"],
+			dependencies: [
+				{
+					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: RtLogoComponent,
+					selector: "rt-logo",
+					inputs: [
+						"variant",
+						"height",
+						"aspect",
+						"ariaLabel"
+					]
+				},
+				{
+					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: RtHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconButtonComponent,
+				RtLogoComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"]
+		}]
+	}],
+	propDecorators: {
+		canGoBack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canGoBack",
+				required: false
+			}]
+		}],
+		showInvite: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showInvite",
+				required: false
+			}]
+		}],
+		backClick: [{
+			type: i0.Output,
+			args: ["backClick"]
+		}],
+		inviteClick: [{
+			type: i0.Output,
+			args: ["inviteClick"]
+		}],
+		profileClick: [{
+			type: i0.Output,
+			args: ["profileClick"]
+		}]
+	}
+});
 export { RtHeaderComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-header.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-header.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-header.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.ts","../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.html","../../../projects/ui-kit-v2/src/lib/components/header/rt-tools-ui-kit-v2-header.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    input,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-header';\n\n/**\n * Общий хедер приложения.\n *\n * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),\n * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда\n * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark\n * выравнивается слева.\n *\n * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»\n * (`showInvite`), слот колокольчика и профиль.\n *\n * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот\n * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.\n *\n * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,\n * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном\n * страницы в dark).\n */\n@Component({\n    selector: 'rt-header',\n    templateUrl: './rt-header.component.html',\n    styleUrls: ['./rt-header.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtLogoComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtHeaderComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    public readonly canGoBack: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */\n    public readonly showInvite: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly backClick: OutputEmitterRef<void> = output<void>();\n    public readonly inviteClick: OutputEmitterRef<void> = output<void>();\n    public readonly profileClick: OutputEmitterRef<void> = output<void>();\n\n    protected onBackClick(): void {\n        this.backClick.emit();\n    }\n\n    protected onInviteClick(): void {\n        this.inviteClick.emit();\n    }\n\n    protected onProfileClick(): void {\n        this.profileClick.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,SAAS,GAAW,WAAW;AAErC;;;;;;;;;;;;;;;;;AAiBG;MAoBU,iBAAiB,CAAA;AAnB9B,IAAA,WAAA,GAAA;AAoBuB,QAAA,IAAA,CAAA,CAAC,GAA2B,MAAM,CAAC,aAAa,CAAC;QAEpD,IAAA,CAAA,SAAS,GAAoD,KAAK,CAAwB,KAAK,iFAC3G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,UAAU,GAAwD,KAAK,CAA4B,KAAK,kFACpH,SAAS,EAAE,gBAAgB,EAAA,CAC7B;QAEc,IAAA,CAAA,SAAS,GAA2B,MAAM,EAAQ;QAClD,IAAA,CAAA,WAAW,GAA2B,MAAM,EAAQ;QACpD,IAAA,CAAA,YAAY,GAA2B,MAAM,EAAQ;AAaxE,IAAA;IAXa,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;IACzB;IAEU,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;IAC3B;IAEU,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC5B;8GA1BS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,ujBC5D9B,q6CA6CA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADIQ,gBAAA,qBAAqB,8PACrB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;+BACI,WAAW,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,qBAAqB;wBACrB,eAAe;wBACf,cAAc;wBACd,aAAa;wBACb,YAAY;AACf,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,q6CAAA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA;;;AE1DL;;AAEG;;;;"}
+{"version":3,"file":"rt-tools-ui-kit-v2-header.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.ts","../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    input,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-header';\n\n/**\n * Общий хедер приложения.\n *\n * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),\n * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда\n * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark\n * выравнивается слева.\n *\n * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»\n * (`showInvite`), слот колокольчика и профиль.\n *\n * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот\n * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.\n *\n * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,\n * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном\n * страницы в dark).\n */\n@Component({\n    selector: 'rt-header',\n    templateUrl: './rt-header.component.html',\n    styleUrls: ['./rt-header.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtLogoComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtHeaderComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    public readonly canGoBack: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */\n    public readonly showInvite: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly backClick: OutputEmitterRef<void> = output<void>();\n    public readonly inviteClick: OutputEmitterRef<void> = output<void>();\n    public readonly profileClick: OutputEmitterRef<void> = output<void>();\n\n    protected onBackClick(): void {\n        this.backClick.emit();\n    }\n\n    protected onInviteClick(): void {\n        this.inviteClick.emit();\n    }\n\n    protected onProfileClick(): void {\n        this.profileClick.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n"],"mappings":";;;;;;;;AAqBA,MAAM,YAAoB;AAuC1B,IAAa,oBAAb,MAAa,kBAAiB;CAnB9B,cAAA;EAoBuB,KAAA,IAA4B,OAAO,aAAa;EAEnD,KAAA,YAA6D,MAA6B,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;GAC3G,WAAW;EAAgB,CAAA;EAIf,KAAA,aAAkE,MAAiC,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;GACpH,WAAW;EAAgB,CAAA;EAGf,KAAA,YAAoC,OAAM;EAC1C,KAAA,cAAsC,OAAM;EAC5C,KAAA,eAAuC,OAAM;CAahE;CAXa,cAAW;EACjB,KAAK,UAAU,KAAI;CACvB;CAEU,gBAAa;EACnB,KAAK,YAAY,KAAI;CACzB;CAEU,iBAAc;EACpB,KAAK,aAAa,KAAI;CAC1B;CA1BS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAiB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAjB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAiB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,YAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,SAAA;IAAA,WAAA;IAAA,aAAA;IAAA,cAAA;GAAA;GAAA,MAAA,EAAA,gBAAA,YAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UC5D9B;GA6CA,QAAA,CAAA,06DAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDIQ;KAAqB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,SAAA,CAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACrB;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACf;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAY,UAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAOP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAnB7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAW,iBAGJ,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;IACA;IACA;GACH;GAAA,gBACe,CAAC;IAAE,WAAW;IAAmB,QAAQ,CAAC,QAAQ;GAAC,CAAE;GAAC,MAChE,EACF,OAAO,UACV;GAAA,UAAA;GAAA,QAAA,CAAA,06DAAA;EAAA,CAAA"}

package/fesm2022/rt-tools-ui-kit-v2-hybrid-tree-selector.mjs

@@ -0,0 +1,231 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { RtHybridTreeComponent } from "@rt-tools/ui-kit-v2/hybrid-tree";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtInputComponent } from "@rt-tools/ui-kit-v2/input";
+import { RtToggleSwitchComponent } from "@rt-tools/ui-kit-v2/toggle-switch";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+import { RtTreeComponent } from "@rt-tools/ui-kit-v2/tree";
+import { RtTreeSelectorComponent } from "@rt-tools/ui-kit-v2/tree-selector";
+const BEM_BLOCK = "rt-tree-selector";
+var RtHybridTreeSelectorComponent = class RtHybridTreeSelectorComponent extends RtTreeSelectorComponent {
+	constructor() {
+		super(...arguments);
+		this.hybrid = true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtHybridTreeSelectorComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtHybridTreeSelectorComponent,
+			isStandalone: true,
+			selector: "rt-hybrid-tree-selector",
+			host: { classAttribute: "rt-tree-selector" },
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-tree-selector\">\n    <div rtElem=\"head\">\n        @if (label()) {\n            <div rtElem=\"label\" qa-dataid=\"tree-selector-label\">{{ label() }}</div>\n        }\n\n        <rt-input\n            rtElem=\"search\"\n            qa-dataid=\"tree-selector-search\"\n            iconLeft=\"search\"\n            [disabled]=\"disabled()\"\n            [placeholder]=\"searchLabel()\"\n            [ariaLabel]=\"searchLabel()\"\n            [ngModel]=\"term()\"\n            (ngModelChange)=\"onTerm($event)\"\n            (keydown)=\"onSearchKeydown($event)\" />\n\n        @if (underSearchTpl(); as underSearch) {\n            <div rtElem=\"under-search\" qa-dataid=\"tree-selector-under-search\">\n                <ng-container [ngTemplateOutlet]=\"underSearch.templateRef\" />\n            </div>\n        }\n\n        <div rtElem=\"controls\">\n            <div rtElem=\"row\">\n                @if (isExpandShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-expand-all\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"expand-all\"\n                        [rtTooltip]=\"expandAllLabel()\"\n                        [attr.aria-label]=\"expandAllLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"expandAll()\"></button>\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-collapse-all\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"collapse-all\"\n                        [rtTooltip]=\"collapseAllLabel()\"\n                        [attr.aria-label]=\"collapseAllLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"collapseAll()\"></button>\n                }\n                @if (isRevertShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-revert\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"undo\"\n                        [rtTooltip]=\"revertLabel()\"\n                        [attr.aria-label]=\"revertLabel()\"\n                        [disabled]=\"disabled() || !isDraftChanged()\"\n                        (click)=\"onRevert()\"></button>\n                }\n                @if (isClearShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-clear\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"danger\"\n                        size=\"sm\"\n                        icon=\"trash\"\n                        [rtTooltip]=\"clearLabel()\"\n                        [attr.aria-label]=\"clearLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"onClear()\"></button>\n                }\n                @if (controlsTpl(); as controls) {\n                    <div rtElem=\"own\">\n                        <ng-container [ngTemplateOutlet]=\"controls.templateRef\" />\n                    </div>\n                }\n            </div>\n\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"multi\">\n                    <rt-toggle-switch\n                        qa-dataid=\"tree-selector-multi\"\n                        [ariaLabel]=\"multiLabel()\"\n                        [disabled]=\"disabled()\"\n                        [ngModel]=\"multiOn()\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onMultiToggle($event)\" />\n                    <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                    <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                </div>\n            }\n        </div>\n    </div>\n\n    @if (isNothingFound()) {\n        <div rtElem=\"empty\" qa-dataid=\"tree-selector-empty\" [rtMod]=\"{ 'with-icon': !!emptyIcon() }\">\n            @if (emptyIcon(); as icon) {\n                <rt-icon rtElem=\"empty-icon\" qa-dataid=\"tree-selector-empty-icon\" size=\"lg\" [name]=\"icon\" />\n            }\n            {{ nothingFoundLabel() }}\n        </div>\n    } @else {\n        @if (hybrid) {\n            <rt-hybrid-tree\n                rtElem=\"tree\"\n                qa-dataid=\"tree-selector-tree\"\n                [nodes]=\"shownNodes()\"\n                [value]=\"draft()\"\n                [mode]=\"mode()\"\n                [cascade]=\"cascade()\"\n                [branchMarks]=\"branchMarks()\"\n                [exclusive]=\"isExclusive()\"\n                [showSelectAll]=\"selectAll()\"\n                [searchTerm]=\"markTerm()\"\n                [filter]=\"false\"\n                [emptyIcon]=\"emptyIcon()\"\n                [nodeEndTemplate]=\"endTemplate()\"\n                [nodeMetaTemplate]=\"metaTemplate()\"\n                [ariaLabel]=\"ariaLabel()\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onTreeChange($event)\"\n                (picked)=\"onPicked()\" />\n        } @else {\n            <rt-tree\n                rtElem=\"tree\"\n                qa-dataid=\"tree-selector-tree\"\n                [nodes]=\"shownNodes()\"\n                [value]=\"draft()\"\n                [mode]=\"mode()\"\n                [cascade]=\"cascade()\"\n                [branchMarks]=\"branchMarks()\"\n                [exclusive]=\"isExclusive()\"\n                [showSelectAll]=\"selectAll()\"\n                [searchTerm]=\"markTerm()\"\n                [filter]=\"false\"\n                [emptyIcon]=\"emptyIcon()\"\n                [nodeEndTemplate]=\"endTemplate()\"\n                [nodeMetaTemplate]=\"metaTemplate()\"\n                [ariaLabel]=\"ariaLabel()\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onTreeChange($event)\"\n                (picked)=\"onPicked()\" />\n        }\n    }\n\n    @if (isFooterShown()) {\n        <div rtElem=\"foot\">\n            <button\n                rtButton\n                qa-dataid=\"tree-selector-cancel\"\n                type=\"button\"\n                appearance=\"text\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                [disabled]=\"disabled()\"\n                (click)=\"cancel()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"tree-selector-apply\"\n                type=\"button\"\n                [label]=\"applyLabel()\"\n                [attr.aria-label]=\"applyLabel()\"\n                [disabled]=\"!canApply()\"\n                (click)=\"apply()\"></button>\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tree-selector{--rt-tree-selector-border-width: var(--rt-border-width-thin);--rt-tree-selector-bg: var(--rt-color-bg-surface);--rt-tree-selector-gap: var(--rt-space-sm);--rt-tree-selector-empty-color: var(--rt-color-text-muted);--rt-tree-selector-empty-gap: var(--rt-space-sm);display:flex;min-height:0;box-sizing:border-box;flex-direction:column;background-color:var(--rt-tree-selector-bg);color:var(--rt-color-text-primary);gap:var(--rt-tree-selector-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-tree-selector{--rt-tree-selector-gap: calc(var(--rt-space-2) + var(--rt-space-0-5))}.rt-tree-selector__head{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-tree-selector__label{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-tree-selector__search{display:block}.rt-tree-selector__controls{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-tree-selector__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-xs)}.rt-tree-selector__control{flex:0 0 auto}.rt-tree-selector__own{display:flex;align-items:center;gap:var(--rt-space-xs);margin-inline-start:auto}.rt-tree-selector__multi{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-tree-selector__multi-label{font-size:var(--rt-text-sm)}.rt-tree-selector__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-tree-selector__tree{min-height:0;flex:1 1 auto;overflow-y:auto}.rt-tree-selector__empty{flex:1 1 auto;padding:var(--rt-space-md);color:var(--rt-tree-selector-empty-color);text-align:center}.rt-tree-selector__empty--with-icon{display:flex;flex-direction:column;align-items:center;gap:var(--rt-tree-selector-empty-gap)}.rt-tree-selector__empty-icon{flex-shrink:0}.rt-tree-selector__under-search{display:block}.rt-tree-selector__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-tree-selector-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtInputComponent,
+					selector: "rt-input",
+					inputs: [
+						"appearance",
+						"type",
+						"placeholder",
+						"iconLeft",
+						"iconRight",
+						"passwordToggle",
+						"autocomplete"
+					]
+				},
+				{
+					kind: "component",
+					type: RtToggleSwitchComponent,
+					selector: "rt-toggle-switch",
+					inputs: [
+						"inputId",
+						"ariaLabel",
+						"label",
+						"size",
+						"iconOff",
+						"iconOn",
+						"disabled"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "component",
+					type: RtTreeComponent,
+					selector: "rt-tree",
+					inputs: [
+						"nodes",
+						"value",
+						"mode",
+						"cascade",
+						"searchTerm",
+						"showSelectAll",
+						"ariaLabel",
+						"branchMarks",
+						"exclusive",
+						"filter",
+						"emptyIcon",
+						"nodeEndTemplate",
+						"nodeMetaTemplate",
+						"disabled"
+					],
+					outputs: ["valueChange", "picked"]
+				},
+				{
+					kind: "component",
+					type: RtHybridTreeComponent,
+					selector: "rt-hybrid-tree"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtHybridTreeSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-hybrid-tree-selector",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				FormsModule,
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtButtonDirective,
+				RtIconComponent,
+				RtInputComponent,
+				RtToggleSwitchComponent,
+				RtTooltipDirective,
+				RtTreeComponent,
+				RtHybridTreeComponent
+			],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-tree-selector\">\n    <div rtElem=\"head\">\n        @if (label()) {\n            <div rtElem=\"label\" qa-dataid=\"tree-selector-label\">{{ label() }}</div>\n        }\n\n        <rt-input\n            rtElem=\"search\"\n            qa-dataid=\"tree-selector-search\"\n            iconLeft=\"search\"\n            [disabled]=\"disabled()\"\n            [placeholder]=\"searchLabel()\"\n            [ariaLabel]=\"searchLabel()\"\n            [ngModel]=\"term()\"\n            (ngModelChange)=\"onTerm($event)\"\n            (keydown)=\"onSearchKeydown($event)\" />\n\n        @if (underSearchTpl(); as underSearch) {\n            <div rtElem=\"under-search\" qa-dataid=\"tree-selector-under-search\">\n                <ng-container [ngTemplateOutlet]=\"underSearch.templateRef\" />\n            </div>\n        }\n\n        <div rtElem=\"controls\">\n            <div rtElem=\"row\">\n                @if (isExpandShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-expand-all\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"expand-all\"\n                        [rtTooltip]=\"expandAllLabel()\"\n                        [attr.aria-label]=\"expandAllLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"expandAll()\"></button>\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-collapse-all\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"collapse-all\"\n                        [rtTooltip]=\"collapseAllLabel()\"\n                        [attr.aria-label]=\"collapseAllLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"collapseAll()\"></button>\n                }\n                @if (isRevertShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-revert\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"secondary\"\n                        size=\"sm\"\n                        icon=\"undo\"\n                        [rtTooltip]=\"revertLabel()\"\n                        [attr.aria-label]=\"revertLabel()\"\n                        [disabled]=\"disabled() || !isDraftChanged()\"\n                        (click)=\"onRevert()\"></button>\n                }\n                @if (isClearShown()) {\n                    <button\n                        rtButton\n                        rtElem=\"control\"\n                        qa-dataid=\"tree-selector-clear\"\n                        type=\"button\"\n                        appearance=\"outlined\"\n                        theme=\"danger\"\n                        size=\"sm\"\n                        icon=\"trash\"\n                        [rtTooltip]=\"clearLabel()\"\n                        [attr.aria-label]=\"clearLabel()\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"onClear()\"></button>\n                }\n                @if (controlsTpl(); as controls) {\n                    <div rtElem=\"own\">\n                        <ng-container [ngTemplateOutlet]=\"controls.templateRef\" />\n                    </div>\n                }\n            </div>\n\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"multi\">\n                    <rt-toggle-switch\n                        qa-dataid=\"tree-selector-multi\"\n                        [ariaLabel]=\"multiLabel()\"\n                        [disabled]=\"disabled()\"\n                        [ngModel]=\"multiOn()\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onMultiToggle($event)\" />\n                    <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                    <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                </div>\n            }\n        </div>\n    </div>\n\n    @if (isNothingFound()) {\n        <div rtElem=\"empty\" qa-dataid=\"tree-selector-empty\" [rtMod]=\"{ 'with-icon': !!emptyIcon() }\">\n            @if (emptyIcon(); as icon) {\n                <rt-icon rtElem=\"empty-icon\" qa-dataid=\"tree-selector-empty-icon\" size=\"lg\" [name]=\"icon\" />\n            }\n            {{ nothingFoundLabel() }}\n        </div>\n    } @else {\n        @if (hybrid) {\n            <rt-hybrid-tree\n                rtElem=\"tree\"\n                qa-dataid=\"tree-selector-tree\"\n                [nodes]=\"shownNodes()\"\n                [value]=\"draft()\"\n                [mode]=\"mode()\"\n                [cascade]=\"cascade()\"\n                [branchMarks]=\"branchMarks()\"\n                [exclusive]=\"isExclusive()\"\n                [showSelectAll]=\"selectAll()\"\n                [searchTerm]=\"markTerm()\"\n                [filter]=\"false\"\n                [emptyIcon]=\"emptyIcon()\"\n                [nodeEndTemplate]=\"endTemplate()\"\n                [nodeMetaTemplate]=\"metaTemplate()\"\n                [ariaLabel]=\"ariaLabel()\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onTreeChange($event)\"\n                (picked)=\"onPicked()\" />\n        } @else {\n            <rt-tree\n                rtElem=\"tree\"\n                qa-dataid=\"tree-selector-tree\"\n                [nodes]=\"shownNodes()\"\n                [value]=\"draft()\"\n                [mode]=\"mode()\"\n                [cascade]=\"cascade()\"\n                [branchMarks]=\"branchMarks()\"\n                [exclusive]=\"isExclusive()\"\n                [showSelectAll]=\"selectAll()\"\n                [searchTerm]=\"markTerm()\"\n                [filter]=\"false\"\n                [emptyIcon]=\"emptyIcon()\"\n                [nodeEndTemplate]=\"endTemplate()\"\n                [nodeMetaTemplate]=\"metaTemplate()\"\n                [ariaLabel]=\"ariaLabel()\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onTreeChange($event)\"\n                (picked)=\"onPicked()\" />\n        }\n    }\n\n    @if (isFooterShown()) {\n        <div rtElem=\"foot\">\n            <button\n                rtButton\n                qa-dataid=\"tree-selector-cancel\"\n                type=\"button\"\n                appearance=\"text\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                [disabled]=\"disabled()\"\n                (click)=\"cancel()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"tree-selector-apply\"\n                type=\"button\"\n                [label]=\"applyLabel()\"\n                [attr.aria-label]=\"applyLabel()\"\n                [disabled]=\"!canApply()\"\n                (click)=\"apply()\"></button>\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tree-selector{--rt-tree-selector-border-width: var(--rt-border-width-thin);--rt-tree-selector-bg: var(--rt-color-bg-surface);--rt-tree-selector-gap: var(--rt-space-sm);--rt-tree-selector-empty-color: var(--rt-color-text-muted);--rt-tree-selector-empty-gap: var(--rt-space-sm);display:flex;min-height:0;box-sizing:border-box;flex-direction:column;background-color:var(--rt-tree-selector-bg);color:var(--rt-color-text-primary);gap:var(--rt-tree-selector-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-tree-selector{--rt-tree-selector-gap: calc(var(--rt-space-2) + var(--rt-space-0-5))}.rt-tree-selector__head{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-tree-selector__label{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-tree-selector__search{display:block}.rt-tree-selector__controls{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-tree-selector__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-xs)}.rt-tree-selector__control{flex:0 0 auto}.rt-tree-selector__own{display:flex;align-items:center;gap:var(--rt-space-xs);margin-inline-start:auto}.rt-tree-selector__multi{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-tree-selector__multi-label{font-size:var(--rt-text-sm)}.rt-tree-selector__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-tree-selector__tree{min-height:0;flex:1 1 auto;overflow-y:auto}.rt-tree-selector__empty{flex:1 1 auto;padding:var(--rt-space-md);color:var(--rt-tree-selector-empty-color);text-align:center}.rt-tree-selector__empty--with-icon{display:flex;flex-direction:column;align-items:center;gap:var(--rt-tree-selector-empty-gap)}.rt-tree-selector__empty-icon{flex-shrink:0}.rt-tree-selector__under-search{display:block}.rt-tree-selector__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-tree-selector-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm)}}\n"]
+		}]
+	}]
+});
+export { RtHybridTreeSelectorComponent };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-hybrid-tree-selector.mjs.map