npm - @rt-tools/ui-kit-v2 - Versions diffs - 0.38.0 → 0.39.0 - Mend

@rt-tools/ui-kit-v2 0.38.0 → 0.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs CHANGED Viewed

@@ -1,7 +1,158 @@
-import { NgTemplateOutlet } from "@angular/common";
+import { InteractivityChecker } from "@angular/cdk/a11y";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, booleanAttribute, contentChild, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, output, untracked } from "@angular/core";
+import { firstValueFrom } from "rxjs";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { BreakpointsService, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RT_ASIDE_DATA, RtAsideComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideRef, RtAsideService } from "@rt-tools/ui-kit-v2/aside";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+const BEM_BLOCK$1 = "rt-toolbar-filters-aside";
+var RtToolbarFiltersAsideComponent = class RtToolbarFiltersAsideComponent {
+	constructor() {
+		this.#asideRef = inject(RtAsideRef);
+		this.data = inject(RT_ASIDE_DATA);
+		this.title = rtKitLabel("uiFilters");
+		this.resetLabel = rtKitLabel("uiReset");
+		this.applyLabel = rtKitLabel("uiApply");
+	}
+	#asideRef;
+	onReset() {
+		this.data.reset();
+	}
+	onApply() {
+		this.data.apply();
+		this.#asideRef.close();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToolbarFiltersAsideComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtToolbarFiltersAsideComponent,
+			isStandalone: true,
+			selector: "rt-toolbar-filters-aside",
+			host: { classAttribute: "rt-toolbar-filters-aside" },
+			ngImport: i0,
+			template: "<rt-aside size=\"sm\" trapFocus modal [ariaLabel]=\"title()\">\n    <rt-aside-header [title]=\"title()\" />\n\n    <ng-container rtBlock=\"rt-toolbar-filters-aside\">\n        <!-- Начальный фокус — на блоке полей, а не на стрелке: рамка фокуса не встаёт на кнопку, которую не нажимали -->\n        <div rtElem=\"fields\" qa-dataid=\"toolbar-filters-fields\" tabindex=\"-1\" cdkFocusInitial>\n            <ng-container [ngTemplateOutlet]=\"data.template\" [ngTemplateOutletContext]=\"{ $implicit: 'panel' }\" />\n        </div>\n    </ng-container>\n\n    <rt-aside-footer [phoneCloseLabel]=\"false\">\n        <button rtButton asideDismiss qa-dataid=\"toolbar-filters-reset\" type=\"button\" [label]=\"resetLabel()\" (click)=\"onReset()\">\n            <!-- empty: label is drawn by the directive -->\n        </button>\n        <button rtButton asidePrimary qa-dataid=\"toolbar-filters-apply\" type=\"button\" [label]=\"applyLabel()\" (click)=\"onApply()\">\n            <!-- empty: label is drawn by the directive -->\n        </button>\n    </rt-aside-footer>\n</rt-aside>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar-filters-aside{--rt-toolbar-filters-aside-gap: var(--rt-space-md)}.rt-toolbar-filters-aside__fields{display:flex;flex-direction:column;gap:var(--rt-toolbar-filters-aside-gap)}.rt-toolbar-filters-aside__fields:focus{outline:none}.rt-toolbar-filters-aside__fields>*{width:100%}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtAsideComponent,
+					selector: "rt-aside",
+					inputs: [
+						"size",
+						"contentLayout",
+						"width",
+						"ariaLabel",
+						"requestError",
+						"trapFocus",
+						"modal",
+						"pending"
+					]
+				},
+				{
+					kind: "component",
+					type: RtAsideFooterComponent,
+					selector: "rt-aside-footer",
+					inputs: ["phoneCloseLabel"]
+				},
+				{
+					kind: "component",
+					type: RtAsideHeaderComponent,
+					selector: "rt-aside-header",
+					inputs: [
+						"title",
+						"overline",
+						"subtitle",
+						"badges",
+						"closable",
+						"loading"
+					],
+					outputs: ["dismiss"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToolbarFiltersAsideComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-toolbar-filters-aside",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtAsideComponent,
+				RtAsideFooterComponent,
+				RtAsideHeaderComponent,
+				BlockDirective,
+				ElemDirective,
+				RtButtonDirective
+			],
+			host: { class: BEM_BLOCK$1 },
+			template: "<rt-aside size=\"sm\" trapFocus modal [ariaLabel]=\"title()\">\n    <rt-aside-header [title]=\"title()\" />\n\n    <ng-container rtBlock=\"rt-toolbar-filters-aside\">\n        <!-- Начальный фокус — на блоке полей, а не на стрелке: рамка фокуса не встаёт на кнопку, которую не нажимали -->\n        <div rtElem=\"fields\" qa-dataid=\"toolbar-filters-fields\" tabindex=\"-1\" cdkFocusInitial>\n            <ng-container [ngTemplateOutlet]=\"data.template\" [ngTemplateOutletContext]=\"{ $implicit: 'panel' }\" />\n        </div>\n    </ng-container>\n\n    <rt-aside-footer [phoneCloseLabel]=\"false\">\n        <button rtButton asideDismiss qa-dataid=\"toolbar-filters-reset\" type=\"button\" [label]=\"resetLabel()\" (click)=\"onReset()\">\n            <!-- empty: label is drawn by the directive -->\n        </button>\n        <button rtButton asidePrimary qa-dataid=\"toolbar-filters-apply\" type=\"button\" [label]=\"applyLabel()\" (click)=\"onApply()\">\n            <!-- empty: label is drawn by the directive -->\n        </button>\n    </rt-aside-footer>\n</rt-aside>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar-filters-aside{--rt-toolbar-filters-aside-gap: var(--rt-space-md)}.rt-toolbar-filters-aside__fields{display:flex;flex-direction:column;gap:var(--rt-toolbar-filters-aside-gap)}.rt-toolbar-filters-aside__fields:focus{outline:none}.rt-toolbar-filters-aside__fields>*{width:100%}}\n"]
+		}]
+	}]
+});
 var RtToolbarLeftDirective = class RtToolbarLeftDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -98,9 +249,68 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ selector: "[rtToolbarRight]" }]
 	}]
 });
+var RtToolbarFiltersDirective = class RtToolbarFiltersDirective {
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToolbarFiltersDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtToolbarFiltersDirective,
+			isStandalone: true,
+			selector: "[rtToolbarFilters]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToolbarFiltersDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtToolbarFilters]" }]
+	}]
+});
 const BEM_BLOCK = "rt-toolbar";
 var RtToolbarComponent = class RtToolbarComponent {
+	#narrow;
+	#asideService;
+	#injector;
+	#host;
+	#document;
+	#interactivity;
+	#filtersActiveLabel;
+	#filtersRef;
 	constructor() {
+		this.#narrow = inject(BreakpointsService).narrow;
+		this.#asideService = inject(RtAsideService);
+		this.#injector = inject(Injector);
+		this.#host = inject(ElementRef).nativeElement;
+		this.#document = inject(DOCUMENT);
+		this.#interactivity = inject(InteractivityChecker);
+		this.#filtersActiveLabel = rtKitLabel("uiFiltersActive");
+		this.#filtersRef = null;
+		this.filtersLabel = rtKitLabel("uiFilters");
+		this.filtersAriaLabel = computed(() => this.filtersActive() ? this.#filtersActiveLabel() : this.filtersLabel(), ...ngDevMode ? [{ debugName: "filtersAriaLabel" }] : /* istanbul ignore next */ []);
+		this.filtersTpl = contentChild(RtToolbarFiltersDirective, {
+			...ngDevMode ? { debugName: "filtersTpl" } : /* istanbul ignore next */ {},
+			read: TemplateRef
+		});
+		this.collapsed = computed(() => this.filtersTpl() !== void 0 && this.#narrow(), ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+		this.filtersInBar = computed(() => this.filtersTpl() !== void 0 && !this.#narrow(), ...ngDevMode ? [{ debugName: "filtersInBar" }] : /* istanbul ignore next */ []);
 		this.leftTpl = contentChild(RtToolbarLeftDirective, {
 			...ngDevMode ? { debugName: "leftTpl" } : /* istanbul ignore next */ {},
 			read: TemplateRef
@@ -117,6 +327,44 @@ var RtToolbarComponent = class RtToolbarComponent {
 			...ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.filtersActive = input(false, {
+			...ngDevMode ? { debugName: "filtersActive" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.filtersApply = output();
+		this.filtersReset = output();
+		effect(() => {
+			if (this.filtersInBar()) untracked(() => this.#closeFilters());
+		});
+	}
+	openFilters() {
+		const template = this.filtersTpl();
+		if (template === void 0 || this.#filtersRef !== null) return;
+		const ref = this.#asideService.open(RtToolbarFiltersAsideComponent, {
+			injector: this.#injector,
+			data: {
+				template,
+				reset: () => this.filtersReset.emit(),
+				apply: () => this.filtersApply.emit()
+			},
+			position: "right",
+			backdropClass: "rt-aside-backdrop"
+		});
+		this.#filtersRef = ref;
+		firstValueFrom(ref.afterClosed(), { defaultValue: null }).then(() => {
+			if (this.#filtersRef === ref) this.#filtersRef = null;
+		});
+	}
+	#closeFilters() {
+		if (this.#filtersRef === null) return;
+		const focusInPanel = this.#document.activeElement?.closest("rt-toolbar-filters-aside") != null;
+		this.#filtersRef.close();
+		this.#filtersRef = null;
+		if (focusInPanel) afterNextRender({ write: () => this.#focusBar() }, { injector: this.#injector });
+	}
+	#focusBar() {
+		const place = this.#host.querySelector("[data-slot=\"left\"]") ?? this.#host;
+		Array.from(place.querySelectorAll("*")).find((node) => this.#interactivity.isFocusable(node) && this.#interactivity.isTabbable(node))?.focus();
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -135,18 +383,42 @@ var RtToolbarComponent = class RtToolbarComponent {
 			type: RtToolbarComponent,
 			isStandalone: true,
 			selector: "rt-toolbar",
-			inputs: { dense: {
-				classPropertyName: "dense",
-				publicName: "dense",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			} },
+			inputs: {
+				dense: {
+					classPropertyName: "dense",
+					publicName: "dense",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filtersActive: {
+					classPropertyName: "filtersActive",
+					publicName: "filtersActive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				filtersApply: "filtersApply",
+				filtersReset: "filtersReset"
+			},
 			host: {
-				properties: { "class.rt-toolbar--dense": "dense()" },
+				properties: {
+					"class.rt-toolbar--dense": "dense()",
+					"class.rt-toolbar--filters-collapsed": "collapsed()"
+				},
 				classAttribute: "rt-toolbar"
 			},
 			queries: [
+				{
+					propertyName: "filtersTpl",
+					first: true,
+					predicate: RtToolbarFiltersDirective,
+					descendants: true,
+					read: TemplateRef,
+					isSignal: true
+				},
 				{
 					propertyName: "leftTpl",
 					first: true,
@@ -173,8 +445,8 @@ var RtToolbarComponent = class RtToolbarComponent {
 				}
 			],
 			ngImport: i0,
-			template: "@if (leftTpl() || centerTpl() || rightTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;--rt-toolbar-field-width: var(--rt-size-100);display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{min-width:0;flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--left>rt-input{width:var(--rt-toolbar-field-width);max-width:100%}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}.rt-toolbar--dense .rt-toolbar__bar--left{min-width:0;flex:0 1 auto}@container rt-place (width <= 768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}}\n"],
+			template: "@if (leftTpl() || centerTpl() || rightTpl() || filtersTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl() || filtersInBar()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n\n                    <!-- На широком месте отборы стоят в полосе сами, после содержимого левой секции -->\n                    @if (filtersInBar()) {\n                        <ng-container [ngTemplateOutlet]=\"filtersTpl() ?? null\" [ngTemplateOutletContext]=\"{ $implicit: 'bar' }\" />\n                    }\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl() || collapsed()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <!-- На узком месте отборы уходят за кнопку: она первая в ряду кнопок полосы -->\n                    @if (collapsed()) {\n                        <rt-icon-button\n                            rtElem=\"filters-trigger\"\n                            qa-dataid=\"toolbar-filters-trigger\"\n                            icon=\"filter\"\n                            variant=\"primary\"\n                            [ariaLabel]=\"filtersAriaLabel()\"\n                            [tooltip]=\"filtersLabel()\"\n                            [indicator]=\"filtersActive()\"\n                            (clicked)=\"openFilters()\" />\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;--rt-toolbar-field-width: var(--rt-size-100);display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{min-width:0;flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--left>rt-input{width:var(--rt-toolbar-field-width);max-width:100%}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}.rt-toolbar__filters-trigger{flex-shrink:0}.rt-toolbar--dense .rt-toolbar__bar--left{min-width:0;flex:0 1 auto}@container rt-place (width <= 768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}.rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-start}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}:where(html:not(:has(.rt-container))) .rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-start}}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -202,6 +474,33 @@ var RtToolbarComponent = class RtToolbarComponent {
 					kind: "directive",
 					type: ModDirective,
 					selector: "[rtMod]"
+				},
+				{
+					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",
+						"ariaHaspopup",
+						"link",
+						"indicator"
+					],
+					outputs: ["clicked"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -224,17 +523,27 @@ i0.ɵɵngDeclareClassMetadata({
 				NgTemplateOutlet,
 				BlockDirective,
 				ElemDirective,
-				ModDirective
+				ModDirective,
+				RtIconButtonComponent
 			],
 			host: {
 				class: BEM_BLOCK,
-				"[class.rt-toolbar--dense]": "dense()"
+				"[class.rt-toolbar--dense]": "dense()",
+				"[class.rt-toolbar--filters-collapsed]": "collapsed()"
 			},
-			template: "@if (leftTpl() || centerTpl() || rightTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;--rt-toolbar-field-width: var(--rt-size-100);display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{min-width:0;flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--left>rt-input{width:var(--rt-toolbar-field-width);max-width:100%}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}.rt-toolbar--dense .rt-toolbar__bar--left{min-width:0;flex:0 1 auto}@container rt-place (width <= 768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}}}\n"]
+			template: "@if (leftTpl() || centerTpl() || rightTpl() || filtersTpl()) {\n    <ng-container rtBlock=\"rt-toolbar\">\n        <div rtElem=\"bars\">\n            @if (leftTpl() || filtersInBar()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n                    <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n\n                    <!-- На широком месте отборы стоят в полосе сами, после содержимого левой секции -->\n                    @if (filtersInBar()) {\n                        <ng-container [ngTemplateOutlet]=\"filtersTpl() ?? null\" [ngTemplateOutletContext]=\"{ $implicit: 'bar' }\" />\n                    }\n                </div>\n            }\n\n            @if (centerTpl()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n                    <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n                </div>\n            }\n\n            @if (rightTpl() || collapsed()) {\n                <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n                    <!-- На узком месте отборы уходят за кнопку: она первая в ряду кнопок полосы -->\n                    @if (collapsed()) {\n                        <rt-icon-button\n                            rtElem=\"filters-trigger\"\n                            qa-dataid=\"toolbar-filters-trigger\"\n                            icon=\"filter\"\n                            variant=\"primary\"\n                            [ariaLabel]=\"filtersAriaLabel()\"\n                            [tooltip]=\"filtersLabel()\"\n                            [indicator]=\"filtersActive()\"\n                            (clicked)=\"openFilters()\" />\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </ng-container>\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toolbar{--rt-toolbar-padding-top: var(--rt-space-2);--rt-toolbar-padding-bottom: var(--rt-space-2);--rt-toolbar-padding-inline: 0;--rt-toolbar-height: auto;--rt-toolbar-border-bottom: none;--rt-toolbar-gap: var(--rt-space-2);--rt-toolbar-center-justify: flex-end;--rt-toolbar-center-overflow: visible;--rt-toolbar-field-width: var(--rt-size-100);display:block}.rt-toolbar__bars{display:flex;width:100%;min-height:var(--rt-toolbar-height);box-sizing:border-box;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);border-bottom:var(--rt-toolbar-border-bottom);gap:var(--rt-toolbar-gap)}.rt-toolbar__bar{display:flex;align-items:center}.rt-toolbar__bar--left{min-width:0;flex:0 0 auto;gap:var(--rt-space-2)}.rt-toolbar__bar--left>rt-input{width:var(--rt-toolbar-field-width);max-width:100%}.rt-toolbar__bar--center{overflow:var(--rt-toolbar-center-overflow);flex:1 1 auto;justify-content:var(--rt-toolbar-center-justify);gap:var(--rt-space-2)}.rt-toolbar__bar--center rt-input,.rt-toolbar__bar--center rt-select{width:100%}.rt-toolbar__bar--right{flex:0 1 auto;margin-left:auto;gap:var(--rt-space-sm)}.rt-toolbar__filters-trigger{flex-shrink:0}.rt-toolbar--dense .rt-toolbar__bar--left{min-width:0;flex:0 1 auto}@container rt-place (width <= 768px){.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}.rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}.rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-start}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bars{flex-direction:column;align-items:stretch;gap:var(--rt-space-sm)}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar{flex-wrap:wrap}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--center{justify-content:stretch}:where(html:not(:has(.rt-container))) .rt-toolbar:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-end;margin-left:0}:where(html:not(:has(.rt-container))) .rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right{justify-content:flex-start}}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
+		filtersTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtToolbarFiltersDirective), {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
 		leftTpl: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => RtToolbarLeftDirective), {
@@ -263,9 +572,25 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "dense",
 				required: false
 			}]
+		}],
+		filtersActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filtersActive",
+				required: false
+			}]
+		}],
+		filtersApply: [{
+			type: i0.Output,
+			args: ["filtersApply"]
+		}],
+		filtersReset: [{
+			type: i0.Output,
+			args: ["filtersReset"]
 		}]
 	}
 });
-export { RtToolbarCenterDirective, RtToolbarComponent, RtToolbarLeftDirective, RtToolbarRightDirective };
+export { RtToolbarCenterDirective, RtToolbarComponent, RtToolbarFiltersAsideComponent, RtToolbarFiltersDirective, RtToolbarLeftDirective, RtToolbarRightDirective };
 //# sourceMappingURL=rt-tools-ui-kit-v2-toolbar.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rt-tools-ui-kit-v2-toolbar.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.ts","../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChild,\n Directive,\n input,\n InputSignalWithTransform,\n Signal,\n TemplateRef,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\n/*\n Маркер-директива для контента в левой секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarLeft>\n * <button rtButton label=\"Создать\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarLeft]',\n})\nexport class RtToolbarLeftDirective {}\n\n/\n Маркер-директива для контента в центральной секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarCenter>\n * <span>Заголовок страницы</span>\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarCenter]',\n})\nexport class RtToolbarCenterDirective {}\n\n/\n Маркер-директива для контента в правой секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarRight>\n * <input type=\"search\" placeholder=\"Поиск\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarRight]',\n})\nexport class RtToolbarRightDirective {}\n\n/\n Универсальный тулбар с тремя секциями: left, center, right.\n * Секции задаются `<ng-template>` с директивами-маркерами и подставляются через `ngTemplateOutlet`.\n * Каждый модуль/фича подключает `rt-toolbar` в своём layout и наполняет нужные секции.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarLeft>\n * <button rtButton label=\"Создать\" />\n * <button rtButton label=\"Удалить\" appearance=\"text\" />\n * </ng-template>\n \n <ng-template rtToolbarCenter>\n * <span>Заявки</span>\n * </ng-template>\n \n <ng-template rtToolbarRight>\n * <input type=\"search\" [formControl]=\"searchCtrl\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\nconst BEM_BLOCK: string = 'rt-toolbar';\n\n@Component({\n selector: 'rt-toolbar',\n templateUrl: './rt-toolbar.component.html',\n styleUrls: ['./rt-toolbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // Angular\n NgTemplateOutlet,\n\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n host: {\n class: BEM_BLOCK,\n '[class.rt-toolbar--dense]': 'dense()',\n },\n})\nexport class RtToolbarComponent {\n protected readonly leftTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarLeftDirective, { read: TemplateRef });\n\n protected readonly centerTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarCenterDirective, { read: TemplateRef });\n\n protected readonly rightTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarRightDirective, { read: TemplateRef });\n\n /\n Компактная шапка (заголовок + иконки-действия): зоны остаются в одну строку\n * даже на мобилке. Без этого трёхзонный list-тулбар стекается в колонку на\n * ≤768px, что для узкой шапки (напр. rt-chat) неверно.\n */\n public readonly dense: InputSignalWithTransform<boolean, boolean \| string> = input<boolean, boolean \| string>(false, {\n transform: booleanAttribute,\n });\n}\n","@if (leftTpl() \|\| centerTpl() \|\| rightTpl()) {\n <ng-container rtBlock=\"rt-toolbar\">\n <div rtElem=\"bars\">\n @if (leftTpl()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n </div>\n }\n\n @if (centerTpl()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n </div>\n }\n\n @if (rightTpl()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n </div>\n }\n </div>\n </ng-container>\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"rt-tools-ui-kit-v2-toolbar.mjs","names":["BEM_BLOCK"],"sources":["../../../projects/ui-kit-v2/src/lib/components/toolbar/filters-aside/rt-toolbar-filters-aside.component.ts","../../../projects/ui-kit-v2/src/lib/components/toolbar/filters-aside/rt-toolbar-filters-aside.component.html","../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.ts","../../../projects/ui-kit-v2/src/lib/components/toolbar/rt-toolbar.component.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, Signal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RT_ASIDE_DATA, RtAsideComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideRef } from '@rt-tools/ui-kit-v2/aside';\nimport { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';\nimport { IRtToolbar } from '../rt-toolbar.model';\n\nconst BEM_BLOCK: string = 'rt-toolbar-filters-aside';\n\n/*\n Панель отборов полосы `rt-toolbar` на узком экране.\n \n Её поднимает кнопка фильтров полосы службой боковых панелей кита. В теле — слот\n * `rtToolbarFilters` с контекстом `panel`; шапка — заголовок «Фильтры» и стрелка возврата, без\n * надзаголовка и действий; подвал — «Сбросить» и «Применить» по краям. «Сбросить» сообщает о себе\n * и оставляет панель открытой, «Применить» сообщает и закрывает, стрелка закрывает молча.\n /\n@Component({\n selector: 'rt-toolbar-filters-aside',\n templateUrl: './rt-toolbar-filters-aside.component.html',\n styleUrl: './rt-toolbar-filters-aside.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // Angular\n NgTemplateOutlet,\n\n // components\n RtAsideComponent,\n RtAsideFooterComponent,\n RtAsideHeaderComponent,\n\n // directives\n BlockDirective,\n ElemDirective,\n RtButtonDirective,\n ],\n host: { class: BEM_BLOCK },\n})\nexport class RtToolbarFiltersAsideComponent {\n readonly #asideRef: RtAsideRef = inject(RtAsideRef);\n\n protected readonly data: IRtToolbar.IFiltersPanelData = inject(RT_ASIDE_DATA) as IRtToolbar.IFiltersPanelData;\n\n protected readonly title: Signal<string> = rtKitLabel('uiFilters');\n protected readonly resetLabel: Signal<string> = rtKitLabel('uiReset');\n protected readonly applyLabel: Signal<string> = rtKitLabel('uiApply');\n\n protected onReset(): void {\n this.data.reset();\n }\n\n protected onApply(): void {\n this.data.apply();\n this.#asideRef.close();\n }\n}\n","<rt-aside size=\"sm\" trapFocus modal [ariaLabel]=\"title()\">\n <rt-aside-header [title]=\"title()\" />\n\n <ng-container rtBlock=\"rt-toolbar-filters-aside\">\n <!-- Начальный фокус — на блоке полей, а не на стрелке: рамка фокуса не встаёт на кнопку, которую не нажимали -->\n <div rtElem=\"fields\" qa-dataid=\"toolbar-filters-fields\" tabindex=\"-1\" cdkFocusInitial>\n <ng-container [ngTemplateOutlet]=\"data.template\" [ngTemplateOutletContext]=\"{ $implicit: 'panel' }\" />\n </div>\n </ng-container>\n\n <rt-aside-footer [phoneCloseLabel]=\"false\">\n <button rtButton asideDismiss qa-dataid=\"toolbar-filters-reset\" type=\"button\" [label]=\"resetLabel()\" (click)=\"onReset()\">\n <!-- empty: label is drawn by the directive -->\n </button>\n <button rtButton asidePrimary qa-dataid=\"toolbar-filters-apply\" type=\"button\" [label]=\"applyLabel()\" (click)=\"onApply()\">\n <!-- empty: label is drawn by the directive -->\n </button>\n </rt-aside-footer>\n</rt-aside>\n","import { InteractivityChecker } from '@angular/cdk/a11y';\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n Directive,\n effect,\n ElementRef,\n inject,\n Injector,\n input,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n Signal,\n TemplateRef,\n untracked,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { firstValueFrom } from 'rxjs';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { BreakpointsService, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtAsideRef, RtAsideService } from '@rt-tools/ui-kit-v2/aside';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtToolbarFiltersAsideComponent } from './filters-aside/rt-toolbar-filters-aside.component';\nimport { IRtToolbar } from './rt-toolbar.model';\n\n/\n Маркер-директива для контента в левой секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarLeft>\n * <button rtButton label=\"Создать\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarLeft]',\n})\nexport class RtToolbarLeftDirective {}\n\n/\n Маркер-директива для контента в центральной секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarCenter>\n * <span>Заголовок страницы</span>\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarCenter]',\n})\nexport class RtToolbarCenterDirective {}\n\n/\n Маркер-директива для контента в правой секции тулбара.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarRight>\n * <input type=\"search\" placeholder=\"Поиск\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarRight]',\n})\nexport class RtToolbarRightDirective {}\n\n/\n Маркер-директива для отборов списка. На широком экране они стоят в левой секции после её\n * содержимого, на узком — за кнопкой фильтров, которая открывает панель отборов. Контекст шаблона\n * — место, где он нарисован: `bar` или `panel`.\n \n @example\n * ```html\n * <rt-toolbar [filtersActive]=\"hasFilter()\" (filtersReset)=\"reset()\">\n * <ng-template rtToolbarFilters let-place>\n * <rt-select [label]=\"place === 'panel' ? 'Статус' : null\" … />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\n@Directive({\n selector: '[rtToolbarFilters]',\n})\nexport class RtToolbarFiltersDirective {\n public static ngTemplateContextGuard(\n _directive: RtToolbarFiltersDirective,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n context: unknown\n ): context is IRtToolbar.IFiltersContext {\n return true;\n }\n}\n\n/\n Универсальный тулбар с тремя секциями: left, center, right.\n * Секции задаются `<ng-template>` с директивами-маркерами и подставляются через `ngTemplateOutlet`.\n * Каждый модуль/фича подключает `rt-toolbar` в своём layout и наполняет нужные секции.\n \n @example\n * ```html\n * <rt-toolbar>\n * <ng-template rtToolbarLeft>\n * <button rtButton label=\"Создать\" />\n * <button rtButton label=\"Удалить\" appearance=\"text\" />\n * </ng-template>\n \n <ng-template rtToolbarCenter>\n * <span>Заявки</span>\n * </ng-template>\n \n <ng-template rtToolbarRight>\n * <input type=\"search\" [formControl]=\"searchCtrl\" />\n * </ng-template>\n * </rt-toolbar>\n * ```\n /\nconst BEM_BLOCK: string = 'rt-toolbar';\n\n@Component({\n selector: 'rt-toolbar',\n templateUrl: './rt-toolbar.component.html',\n styleUrls: ['./rt-toolbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // Angular\n NgTemplateOutlet,\n\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n RtIconButtonComponent,\n ],\n host: {\n class: BEM_BLOCK,\n '[class.rt-toolbar--dense]': 'dense()',\n '[class.rt-toolbar--filters-collapsed]': 'collapsed()',\n },\n})\nexport class RtToolbarComponent {\n readonly #narrow: Signal<boolean> = inject(BreakpointsService).narrow;\n readonly #asideService: RtAsideService = inject(RtAsideService);\n readonly #injector: Injector = inject(Injector);\n readonly #host: HTMLElement = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n readonly #document: Document = inject(DOCUMENT);\n readonly #interactivity: InteractivityChecker = inject(InteractivityChecker);\n readonly #filtersActiveLabel: Signal<string> = rtKitLabel('uiFiltersActive');\n\n /* Открытая панель отборов: на широком месте её закрывают, чтобы поля не жили в двух местах. /\n #filtersRef: RtAsideRef \| null = null;\n\n protected readonly filtersLabel: Signal<string> = rtKitLabel('uiFilters');\n\n /* Имя кнопки для скринридера: точку в углу он не видит, и включённый отбор назван словами. /\n protected readonly filtersAriaLabel: Signal<string> = computed((): string =>\n this.filtersActive() ? this.#filtersActiveLabel() : this.filtersLabel()\n );\n\n protected readonly filtersTpl: Signal<TemplateRef<IRtToolbar.IFiltersContext> \| undefined> = contentChild(RtToolbarFiltersDirective, {\n read: TemplateRef,\n });\n\n /* Отборы ушли за кнопку: они объявлены, а место узкое. /\n protected readonly collapsed: Signal<boolean> = computed((): boolean => this.filtersTpl() !== undefined && this.#narrow());\n\n /* Отборы стоят в левой секции: они объявлены, а место широкое. /\n protected readonly filtersInBar: Signal<boolean> = computed((): boolean => this.filtersTpl() !== undefined && !this.#narrow());\n\n protected readonly leftTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarLeftDirective, { read: TemplateRef });\n\n protected readonly centerTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarCenterDirective, { read: TemplateRef });\n\n protected readonly rightTpl: Signal<TemplateRef<unknown> \| undefined> = contentChild(RtToolbarRightDirective, { read: TemplateRef });\n\n /\n Компактная шапка (заголовок + иконки-действия): зоны остаются в одну строку\n * даже на мобилке. Без этого трёхзонный list-тулбар стекается в колонку на\n * ≤768px, что для узкой шапки (напр. rt-chat) неверно.\n /\n public readonly dense: InputSignalWithTransform<boolean, boolean \| string> = input<boolean, boolean \| string>(false, {\n transform: booleanAttribute,\n });\n\n /* Включён хотя бы один отбор: кнопка фильтров узкого экрана несёт точку в углу значка. /\n public readonly filtersActive: InputSignalWithTransform<boolean, boolean \| string> = input<boolean, boolean \| string>(false, {\n transform: booleanAttribute,\n });\n\n /* Нажата «Применить» панели отборов; панель после этого закрыта. /\n public readonly filtersApply: OutputEmitterRef<void> = output<void>();\n\n /* Нажата «Сбросить» панели отборов; панель остаётся открытой. /\n public readonly filtersReset: OutputEmitterRef<void> = output<void>();\n\n constructor() {\n // Место расширилось при открытой панели: отборы вернулись в полосу, и второй экземпляр\n // полей в панели закрывается, иначе одни и те же отборы показаны дважды\n effect((): void => {\n if (this.filtersInBar()) {\n untracked((): void => this.#closeFilters());\n }\n });\n }\n\n protected openFilters(): void {\n const template: TemplateRef<IRtToolbar.IFiltersContext> \| undefined = this.filtersTpl();\n // Подложка ловит нажатия только со следующего кадра: второе нажатие до него открыло бы\n // вторую панель поверх первой\n if (template === undefined \|\| this.#filtersRef !== null) {\n return;\n }\n\n // Инжектор полосы — хозяин панели: уничтожение полосы закрывает и панель\n const ref: RtAsideRef = this.#asideService.open<RtToolbarFiltersAsideComponent, IRtToolbar.IFiltersPanelData>(\n RtToolbarFiltersAsideComponent,\n {\n injector: this.#injector,\n data: {\n template,\n reset: (): void => this.filtersReset.emit(),\n apply: (): void => this.filtersApply.emit(),\n },\n position: 'right',\n backdropClass: 'rt-aside-backdrop',\n }\n );\n this.#filtersRef = ref;\n // Панель закрывается и сама — «Применить», стрелкой, подложкой: ссылка гаснет вместе с ней\n void firstValueFrom(ref.afterClosed(), { defaultValue: null }).then((): void => {\n if (this.#filtersRef === ref) {\n this.#filtersRef = null;\n }\n });\n }\n\n #closeFilters(): void {\n if (this.#filtersRef === null) {\n return;\n }\n // Кнопка, с которой панель открыли, на широком месте уже снята, и вернуть фокус панели\n // некуда: он уходит в левую секцию полосы, куда вернулись поля отборов\n const focusInPanel: boolean = this.#document.activeElement?.closest('rt-toolbar-filters-aside') != null;\n this.#filtersRef.close();\n this.#filtersRef = null;\n if (focusInPanel) {\n afterNextRender({ write: (): void => this.#focusBar() }, { injector: this.#injector });\n }\n }\n\n #focusBar(): void {\n const place: HTMLElement = this.#host.querySelector<HTMLElement>('[data-slot=\"left\"]') ?? this.#host;\n const target: HTMLElement \| undefined = Array.from(place.querySelectorAll<HTMLElement>('')).find(\n (node: HTMLElement): boolean => this.#interactivity.isFocusable(node) && this.#interactivity.isTabbable(node)\n );\n target?.focus();\n }\n}\n","@if (leftTpl() \|\| centerTpl() \|\| rightTpl() \|\| filtersTpl()) {\n <ng-container rtBlock=\"rt-toolbar\">\n <div rtElem=\"bars\">\n @if (leftTpl() \|\| filtersInBar()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"left\" [rtMod]=\"{ left: true }\">\n <ng-container [ngTemplateOutlet]=\"leftTpl() ?? null\" />\n\n <!-- На широком месте отборы стоят в полосе сами, после содержимого левой секции -->\n @if (filtersInBar()) {\n <ng-container [ngTemplateOutlet]=\"filtersTpl() ?? null\" [ngTemplateOutletContext]=\"{ $implicit: 'bar' }\" />\n }\n </div>\n }\n\n @if (centerTpl()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"center\" [rtMod]=\"{ center: true }\">\n <ng-container [ngTemplateOutlet]=\"centerTpl() ?? null\" />\n </div>\n }\n\n @if (rightTpl() \|\| collapsed()) {\n <div rtElem=\"bar\" qa-dataid=\"toolbar-bar\" data-slot=\"right\" [rtMod]=\"{ right: true }\">\n <!-- На узком месте отборы уходят за кнопку: она первая в ряду кнопок полосы -->\n @if (collapsed()) {\n <rt-icon-button\n rtElem=\"filters-trigger\"\n qa-dataid=\"toolbar-filters-trigger\"\n icon=\"filter\"\n variant=\"primary\"\n [ariaLabel]=\"filtersAriaLabel()\"\n [tooltip]=\"filtersLabel()\"\n [indicator]=\"filtersActive()\"\n (clicked)=\"openFilters()\" />\n }\n\n <ng-container [ngTemplateOutlet]=\"rightTpl() ?? null\" />\n </div>\n }\n </div>\n </ng-container>\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/aside/CONTEXT.md CHANGED Viewed

@@ -26,6 +26,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | `ariaLabel`     | `string \| null`       | `null`      |
 | `requestError`  | `unknown`              | `null`      |
 | `trapFocus`     | `boolean`              | `false`     |
+| `modal`         | `boolean`              | `false`     |
 | `pending`       | `boolean`              | `false`     |
 | настройка `open()`                       | умолчание                                 |
@@ -44,7 +45,9 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 минуту открытия. Открытая не по нажатию — через `panelClass` приложения.
 **Асайд объявлен `role="complementary"`, а не диалогом.** Он не модален: страница за ним
-остаётся видна, и это осознанный выбор — карточку смотрят, не теряя список.
+остаётся видна, и это осознанный выбор — карточку смотрят, не теряя список. Панель, которая
+блокирует страницу подложкой и держит фокус, включает вход `modal`: рамка становится
+`role="dialog"` с `aria-modal="true"`.
 **Закрытие двухтактное.** `close(result)` отдаёт результат **сразу**, а панель убирает через
 200 мс — чтобы доиграла анимация ухода. В тестах это значит: подписчик получил значение, а

package/src/lib/components/aside/header/rt-aside-header.component.scss CHANGED Viewed

@@ -41,12 +41,15 @@
         }
         /* Колонка overline + title. flex/min-width живут здесь, чтобы ellipsis
-           у title работал и в двухстрочном варианте. */
+           у title работал и в двухстрочном варианте. Колонка не ниже кнопки «назад» и держит
+           содержимое посередине: заголовок без надзаголовка стоит на линии стрелки. */
         &__heading {
             display: flex;
             min-width: 0;
+            min-height: var(--rt-aside-header-back-size, var(--rt-control-height-sm));
             flex: 1 1 auto;
             flex-direction: column;
+            justify-content: center;
             gap: var(--rt-space-0-5);
         }

package/src/lib/components/popover/CONTEXT.md CHANGED Viewed

@@ -42,6 +42,9 @@
 - `manual` — для контролов со своим жестом (поле с подсказками открывает панель по набору текста).
 - `hover` держит панель открытой при переходе курсора на неё: закрытие отложено на 100 мс, и
   наведение на панель отсрочку гасит.
+- `hover` судит наведение только мышиное: касание и перо браузер дублирует событиями мыши, и они
+  панель не открывают и не закрывают. Касанию открывает панель нажатие на host, второе нажатие её
+  не закрывает — закрывают нажатие снаружи и подложка.
 - `fitViewport` **выключен по умолчанию**: панель стоит там, куда её ставит привязка к триггеру,
   даже если часть ушла за экран. Включать для широких и высоких панелей, иначе их содержимое
   остаётся недостижимым. Порог 120 точек решает только, сдвинуть панель или ужать: короткая

package/src/lib/components/profile-menu/CONTEXT.md CHANGED Viewed

@@ -23,6 +23,10 @@
 **Панель рисует само меню.** У поповера кита оформления нет, и голые пункты меню в попапе шапки
 легли бы прямо поверх страницы. Стили без инкапсуляции: попап живёт в перекрытии у конца `<body>`.
+**В панели поповера меню не выше свободного места и прокручивается.** На низком экране — телефон
+боком, невысокое окно — нижние пункты уходили за край. Шапка открывает меню с подгонкой под окно, а
+меню в панели ужимается до её высоты; вне панели оно рисуется во весь рост.
 **Тему переключает `ThemeService`**, как у `rt-theme-toggle`: значок показывает тему, к которой
 переведёт нажатие.

package/src/lib/components/profile-menu/rt-profile-menu.component.scss CHANGED Viewed

@@ -16,6 +16,17 @@
         box-shadow: var(--rt-profile-menu-shadow);
         gap: var(--rt-space-2);
+        /* В панели поповера меню ужимается до свободного места под именем, а пункты прокручиваются
+           внутри него: на низком экране — телефон боком, невысокое окно — нижние пункты уходили за
+           край экрана, и до «Выйти» было не дотянуться. Вне панели меню рисуется как раньше.
+           По горизонтали прокрутки нет: строки выступают в поле отступа, и прокручиваемый блок
+           прибавлял к ним правый отступ — меню ездило вбок на 8 точек. */
+        .rt-popover-panel > & {
+            overflow: hidden auto;
+            min-height: 0;
+            max-height: 100%;
+        }
         &__user {
             display: flex;
             flex-direction: column;

package/src/lib/components/tabs/CONTEXT.md CHANGED Viewed

@@ -25,6 +25,7 @@
 | `scrollStep`        | `'fixed' \| 'page' \| 'third'` | `'fixed'`      |
 | `animationDuration` | `string \| number \| null`     | `null`         |
 | `preserveContent`   | `boolean`                      | `false`        |
+| `dense`             | `boolean`                      | `false`        |
 Выходы: `activeIdChange: IRtTabs.Id`, `tabClose: IRtTabs.Id` — просьба закрыть вкладку с `closable`.