@rt-tools/ui-kit-v2 0.17.0 → 0.19.0

package/README.md

@@ -23,6 +23,24 @@ import { RtChatComponent, RtMessageComposerComponent, RtRichEditorComponent } fr
 
 Основной вход quill не называет, и приложение без этих трёх компонентов собирается без него.
 
+### Точки входа компонентов
+
+Каждый компонент собран своей точкой входа по имени своего каталога: `@rt-tools/ui-kit-v2/table`,
+`@rt-tools/ui-kit-v2/calendar` и так далее. Настройки, словари, среда исполнения, токены и чистые
+функции лежат во входе `@rt-tools/ui-kit-v2/core`. Корень пакета переотдаёт их все, и прежние
+импорты из `@rt-tools/ui-kit-v2` работают как раньше. В кусок бандла сборщик кладёт только модули
+тех компонентов, что импортированы.
+
+Компонент внутри `@defer` берётся из своей точки входа. Отложенный блок грузит импорт целиком, и
+импорт из корня оставил бы в бандле весь пакет.
+Типы идут отдельной строкой `import type`: импорт, где рядом с компонентом стоит тип, Angular не
+откладывает.
+
+```typescript
+import { RtTableComponent } from '@rt-tools/ui-kit-v2/table';
+import type { IRtStatTile } from '@rt-tools/ui-kit-v2/stat-tile';
+```
+
 ## Подключение
 
 ```typescript
@@ -208,8 +226,9 @@ export const appConfig: ApplicationConfig = {
 переживает перезагрузку), `RtThemeScopeDirective` (метка `rtTheme`: своя тема у узла),
 `BreakpointsService` (сигналы совпадения по ширине), `NotificationBus` (шина тостов).
 
-**Умолчания кита** — `provideRtKit`: приложение одной раздачей задаёт тему старта и вид кнопки и
-шторы. Раздача необязательна, а вход, написанный в разметке, её перебивает.
+**Умолчания кита** — `provideRtKit`: приложение одной раздачей задаёт тему старта, вид кнопки,
+шторы, таблицы, списка и полей выбора. Раздача необязательна, а вход, написанный в разметке, её
+перебивает.
 
 **Подписи** — 131 ключ: кнопки диалогов, тексты ошибок поля, расшифровки иконок для
 скринридера. Своего языка у кита нет и быть не может — его знает приложение.

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

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { linkedSignal, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+
+/**
+ * Раскрытые пункты после нажатия на пункт `index`: раскрытый сворачивается, свёрнутый
+ * раскрывается, остальные остаются как были. Читающий сравнивает два ответа, и свернуть первый
+ * при раскрытии второго значило бы отнять у него то, что он читал.
+ */
+function toggleAccordionItem(open, index) {
+    const next = new Set(open);
+    if (next.has(index)) {
+        next.delete(index);
+    }
+    else {
+        next.add(index);
+    }
+    return next;
+}
+/** Раскрытые пункты при входе: пункт из входа, если такой есть в списке, иначе ни одного. */
+function initialAccordionOpen(openIndex, count) {
+    if (openIndex === null || openIndex < 0 || openIndex >= count) {
+        return new Set();
+    }
+    return new Set([openIndex]);
+}
+
+const BEM_BLOCK = 'rt-accordion';
+let accordionIdSeed = 0;
+function nextAccordionId() {
+    accordionIdSeed += 1;
+    return accordionIdSeed;
+}
+/**
+ * Список пунктов, у каждого заголовок-кнопка и текст под ней. Нажатие раскрывает или сворачивает
+ * пункт, соседи остаются как были. Предмета показа аккордеон не знает: пункты приходят входом уже
+ * переведёнными.
+ */
+class RtAccordionComponent {
+    constructor() {
+        /** Основа id кнопок и панелей: два аккордеона на одной странице не ссылаются на чужие панели. */
+        this.idBase = `rt-accordion-${nextAccordionId()}`;
+        /** Пришёл новый список — раскрытие начинается заново с пункта из входа. */
+        this.open = linkedSignal(() => initialAccordionOpen(this.openIndex(), this.items().length), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.items = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Пункт, раскрытый при входе. `null` оставляет все свёрнутыми. */
+        this.openIndex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
+    }
+    toggle(index) {
+        this.open.update((open) => toggleAccordionItem(open, index));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtAccordionComponent, isStandalone: true, selector: "rt-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, openIndex: { classPropertyName: "openIndex", publicName: "openIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-accordion" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-accordion\">\n    @for (item of items(); track $index; let index = $index) {\n        <div rtElem=\"item\" [rtMod]=\"{ open: open().has(index) }\">\n            <h3 rtElem=\"heading\">\n                <button\n                    rtElem=\"toggle\"\n                    qa-dataid=\"accordion-toggle\"\n                    type=\"button\"\n                    [id]=\"idBase + '-toggle-' + index\"\n                    [attr.aria-expanded]=\"open().has(index)\"\n                    [attr.aria-controls]=\"idBase + '-panel-' + index\"\n                    (click)=\"toggle(index)\">\n                    <span rtElem=\"title\">{{ item.title }}</span>\n                    <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" aria-hidden=\"true\" />\n                </button>\n            </h3>\n            <div\n                rtElem=\"panel\"\n                qa-dataid=\"accordion-panel\"\n                role=\"region\"\n                [id]=\"idBase + '-panel-' + index\"\n                [attr.aria-labelledby]=\"idBase + '-toggle-' + index\"\n                [hidden]=\"!open().has(index)\">\n                <p rtElem=\"text\">{{ item.text }}</p>\n            </div>\n        </div>\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-accordion{--rt-accordion-border-width: var(--rt-border-width-thin);--rt-accordion-duration: var(--rt-duration-fast);--rt-accordion-focus-shadow: var(--rt-shadow-focus-ring);display:block;width:100%}.rt-accordion__item{border-bottom:var(--rt-accordion-border-width) solid var(--rt-color-border-subtle)}.rt-accordion__heading{margin:0;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-snug)}.rt-accordion__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:var(--rt-space-md) 0;border:0;background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-md);text-align:start}.rt-accordion__toggle:focus-visible{box-shadow:var(--rt-accordion-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-accordion__chevron{flex:none;transition:transform var(--rt-accordion-duration)}.rt-accordion__text{padding-bottom:var(--rt-space-md);margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-accordion__item--open .rt-accordion__chevron{transform:rotate(180deg)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-accordion', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        RtIconComponent,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-accordion\">\n    @for (item of items(); track $index; let index = $index) {\n        <div rtElem=\"item\" [rtMod]=\"{ open: open().has(index) }\">\n            <h3 rtElem=\"heading\">\n                <button\n                    rtElem=\"toggle\"\n                    qa-dataid=\"accordion-toggle\"\n                    type=\"button\"\n                    [id]=\"idBase + '-toggle-' + index\"\n                    [attr.aria-expanded]=\"open().has(index)\"\n                    [attr.aria-controls]=\"idBase + '-panel-' + index\"\n                    (click)=\"toggle(index)\">\n                    <span rtElem=\"title\">{{ item.title }}</span>\n                    <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" aria-hidden=\"true\" />\n                </button>\n            </h3>\n            <div\n                rtElem=\"panel\"\n                qa-dataid=\"accordion-panel\"\n                role=\"region\"\n                [id]=\"idBase + '-panel-' + index\"\n                [attr.aria-labelledby]=\"idBase + '-toggle-' + index\"\n                [hidden]=\"!open().has(index)\">\n                <p rtElem=\"text\">{{ item.text }}</p>\n            </div>\n        </div>\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-accordion{--rt-accordion-border-width: var(--rt-border-width-thin);--rt-accordion-duration: var(--rt-duration-fast);--rt-accordion-focus-shadow: var(--rt-shadow-focus-ring);display:block;width:100%}.rt-accordion__item{border-bottom:var(--rt-accordion-border-width) solid var(--rt-color-border-subtle)}.rt-accordion__heading{margin:0;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-snug)}.rt-accordion__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:var(--rt-space-md) 0;border:0;background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-md);text-align:start}.rt-accordion__toggle:focus-visible{box-shadow:var(--rt-accordion-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-accordion__chevron{flex:none;transition:transform var(--rt-accordion-duration)}.rt-accordion__text{padding-bottom:var(--rt-space-md);margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-accordion__item--open .rt-accordion__chevron{transform:rotate(180deg)}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], openIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndex", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtAccordionComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-accordion.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-accordion.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/accordion/rt-accordion.logic.ts","../../../projects/ui-kit-v2/src/lib/components/accordion/rt-accordion.component.ts","../../../projects/ui-kit-v2/src/lib/components/accordion/rt-accordion.component.html","../../../projects/ui-kit-v2/src/lib/components/accordion/rt-tools-ui-kit-v2-accordion.ts"],"sourcesContent":["/**\n * Раскрытые пункты после нажатия на пункт `index`: раскрытый сворачивается, свёрнутый\n * раскрывается, остальные остаются как были. Читающий сравнивает два ответа, и свернуть первый\n * при раскрытии второго значило бы отнять у него то, что он читал.\n */\nexport function toggleAccordionItem(open: ReadonlySet<number>, index: number): ReadonlySet<number> {\n    const next: Set<number> = new Set(open);\n\n    if (next.has(index)) {\n        next.delete(index);\n    } else {\n        next.add(index);\n    }\n\n    return next;\n}\n\n/** Раскрытые пункты при входе: пункт из входа, если такой есть в списке, иначе ни одного. */\nexport function initialAccordionOpen(openIndex: number | null, count: number): ReadonlySet<number> {\n    if (openIndex === null || openIndex < 0 || openIndex >= count) {\n        return new Set();\n    }\n\n    return new Set([openIndex]);\n}\n","import { input, linkedSignal, ChangeDetectionStrategy, Component, InputSignal, ViewEncapsulation, WritableSignal } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { initialAccordionOpen, toggleAccordionItem } from './rt-accordion.logic';\nimport { IRtAccordion } from './rt-accordion.model';\n\nconst BEM_BLOCK: string = 'rt-accordion';\n\nlet accordionIdSeed: number = 0;\n\nfunction nextAccordionId(): number {\n    accordionIdSeed += 1;\n    return accordionIdSeed;\n}\n\n/**\n * Список пунктов, у каждого заголовок-кнопка и текст под ней. Нажатие раскрывает или сворачивает\n * пункт, соседи остаются как были. Предмета показа аккордеон не знает: пункты приходят входом уже\n * переведёнными.\n */\n@Component({\n    selector: 'rt-accordion',\n    templateUrl: './rt-accordion.component.html',\n    styleUrl: './rt-accordion.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n        RtIconComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtAccordionComponent {\n    /** Основа id кнопок и панелей: два аккордеона на одной странице не ссылаются на чужие панели. */\n    protected readonly idBase: string = `rt-accordion-${nextAccordionId()}`;\n\n    /** Пришёл новый список — раскрытие начинается заново с пункта из входа. */\n    protected readonly open: WritableSignal<ReadonlySet<number>> = linkedSignal<ReadonlySet<number>>((): ReadonlySet<number> =>\n        initialAccordionOpen(this.openIndex(), this.items().length)\n    );\n\n    public readonly items: InputSignal<readonly IRtAccordion.Item[]> = input.required<readonly IRtAccordion.Item[]>();\n\n    /** Пункт, раскрытый при входе. `null` оставляет все свёрнутыми. */\n    public readonly openIndex: InputSignal<number | null> = input<number | null>(0);\n\n    protected toggle(index: number): void {\n        this.open.update((open: ReadonlySet<number>): ReadonlySet<number> => toggleAccordionItem(open, index));\n    }\n}\n","<ng-container rtBlock=\"rt-accordion\">\n    @for (item of items(); track $index; let index = $index) {\n        <div rtElem=\"item\" [rtMod]=\"{ open: open().has(index) }\">\n            <h3 rtElem=\"heading\">\n                <button\n                    rtElem=\"toggle\"\n                    qa-dataid=\"accordion-toggle\"\n                    type=\"button\"\n                    [id]=\"idBase + '-toggle-' + index\"\n                    [attr.aria-expanded]=\"open().has(index)\"\n                    [attr.aria-controls]=\"idBase + '-panel-' + index\"\n                    (click)=\"toggle(index)\">\n                    <span rtElem=\"title\">{{ item.title }}</span>\n                    <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" aria-hidden=\"true\" />\n                </button>\n            </h3>\n            <div\n                rtElem=\"panel\"\n                qa-dataid=\"accordion-panel\"\n                role=\"region\"\n                [id]=\"idBase + '-panel-' + index\"\n                [attr.aria-labelledby]=\"idBase + '-toggle-' + index\"\n                [hidden]=\"!open().has(index)\">\n                <p rtElem=\"text\">{{ item.text }}</p>\n            </div>\n        </div>\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/rt-tools-ui-kit-v2-action-bar.mjs

@@ -0,0 +1,233 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, Injectable, inject, DestroyRef, effect, untracked } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtMenuItemComponent } from '@rt-tools/ui-kit-v2/menu';
+import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK$1 = 'rt-action-bar';
+/**
+ * Полоса массовых действий: счёт слева, действия рядом, крестик справа.
+ *
+ * Своего состояния не держит вовсе — ни выбранного, ни открытости. Ей дают
+ * настройку входом, а наружу она сообщает две вещи: что нажали действие и что
+ * нажали крестик. Держатель `rt-action-bar-holder` решает, стоит ли она в
+ * разметке и где над страницей приколота.
+ *
+ * Действие с вложенным списком само не срабатывает: оно заголовок группы, и
+ * список раскрывается всплывающим слоем кита. Нажатие пункта списка закрывает
+ * полосу так же, как нажатие обычного действия: где человек нажал — в полосе
+ * или на шаг глубже — о трате выбранного не говорит ничего.
+ */
+class RtActionBarComponent {
+    constructor() {
+        /** Подстановки счётчика: подпись собирает словарь, а не склейка слов в шаблоне. */
+        this.#countParams = computed(() => ({
+            count: this.config().selected,
+            total: this.config().total,
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#countParams" }] : /* istanbul ignore next */ []));
+        this.countText = rtKitLabel('uiSelectedOf', this.#countParams);
+        this.closeLabel = rtKitLabel('uiClose');
+        /**
+         * Действия с готовыми модификаторами. Признак значка стоит модификатором, а не
+         * условием в шаблоне: подпись у действия со значком снимает правило стиля по
+         * грубому указателю, и решать это условием значило бы увезти оформление в код.
+         */
+        this.actions = computed(() => this.config().actions.map((action) => ({
+            action,
+            modifiers: { danger: action.look === 'danger', withIcon: !!(action.icon || action.glyph) },
+            ariaLabel: action.icon || action.glyph ? action.label : null,
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        /** Значок кнопки, закрывающей полосу. */
+        this.closeIcon = input('close', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeIcon" }] : /* istanbul ignore next */ []));
+        this.actionRun = output();
+        this.closed = output();
+    }
+    /** Подстановки счётчика: подпись собирает словарь, а не склейка слов в шаблоне. */
+    #countParams;
+    onAction(action) {
+        action.run?.();
+        this.actionRun.emit(action);
+        this.closed.emit();
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtActionBarComponent, isStandalone: true, selector: "rt-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionRun: "actionRun", closed: "closed" }, host: { attributes: { "role": "toolbar" }, classAttribute: "rt-action-bar" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-action-bar\">\n    <span rtElem=\"counter\" qa-dataid=\"action-bar-counter\">{{ countText() }}</span>\n\n    @if (actions().length) {\n        <div rtElem=\"actions\" qa-dataid=\"action-bar-actions\">\n            @for (view of actions(); track view.action.label) {\n                @if (view.action.menu) {\n                    <!--\n                        \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0432\u043B\u043E\u0436\u0435\u043D\u043D\u044B\u043C \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0441\u0430\u043C\u043E \u043D\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0435\u0442: \u043E\u043D\u043E \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B, \u0438\n                        \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u043E\u0439. \u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043B\u043E\u044E \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u043E\u043C \u2014 \u043E\u0434\u043D\u043E\u0433\u043E \u0448\u0430\u0431\u043B\u043E\u043D\u0430\n                        \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043D\u0430 \u0432\u0441\u0435 \u0442\u0430\u043A\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F.\n                    -->\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        [rtPopover]=\"menuTpl\"\n                        [rtPopoverContext]=\"view.action.menu\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                } @else {\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        (click)=\"onAction(view.action)\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"action-bar-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [icon]=\"closeIcon()\"\n        [ariaLabel]=\"closeLabel()\"\n        (clicked)=\"onClose()\" />\n\n    <!--\n        \u041E\u0431\u0430 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D\u044B \u0432\u043D\u0443\u0442\u0440\u0438 \u0431\u043B\u043E\u043A\u0430 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: `rtElem` \u0431\u0435\u0440\u0451\u0442 \u0438\u043C\u044F \u0431\u043B\u043E\u043A\u0430 \u0438\u043D\u044A\u0435\u043A\u0446\u0438\u0435\u0439 \u0443\n        \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043F\u0440\u0435\u0434\u043A\u0430 \u0441 `rtBlock`, \u0430 \u0443 \u0448\u0430\u0431\u043B\u043E\u043D\u0430, \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0441\u043D\u0430\u0440\u0443\u0436\u0438, \u0442\u0430\u043A\u043E\u0433\u043E \u043F\u0440\u0435\u0434\u043A\u0430 \u043D\u0435\u0442\n        \u0432\u043E\u0432\u0441\u0435 \u2014 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043D\u0435 \u043F\u043E\u0434\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0441\u043E\u0432\u0441\u0435\u043C, \u0441 \u043E\u0442\u043A\u0430\u0437\u043E\u043C \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u043C \u043F\u043E\u0441\u0442\u0430\u0432\u0449\u0438\u043A\u0435.\n\n        \u041B\u0438\u0446\u043E \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F: \u0437\u043D\u0430\u0447\u043E\u043A \u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u044C. \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u2014 \u0441\u043D\u0438\u043C\u0430\u0435\u0442 \u0435\u0451 \u043F\u0440\u0430\u0432\u0438\u043B\u043E\n        \u0441\u0442\u0438\u043B\u044F \u043F\u043E \u0433\u0440\u0443\u0431\u043E\u043C\u0443 \u0443\u043A\u0430\u0437\u0430\u0442\u0435\u043B\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u0443 \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043E\u043A \u0435\u0441\u0442\u044C.\n    -->\n    <ng-template #actionFace let-action>\n        @if (action.icon || action.glyph) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon ?? null\" [glyph]=\"action.glyph ?? null\" />\n        }\n\n        <span rtElem=\"action-label\">{{ action.label }}</span>\n    </ng-template>\n\n    <ng-template #menuTpl let-menu>\n        <div rtElem=\"menu\" qa-dataid=\"action-bar-menu\" role=\"menu\">\n            @for (item of menu; track item.label) {\n                <rt-menu-item\n                    qa-dataid=\"action-bar-menu-item\"\n                    [icon]=\"item.icon ?? null\"\n                    [glyph]=\"item.glyph ?? null\"\n                    [label]=\"item.label\"\n                    [danger]=\"item.look === 'danger'\"\n                    (selected)=\"onAction(item)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar{--rt-action-bar-radius-default: var(--rt-radius-lg);--rt-action-bar-shadow-default: var(--rt-shadow-card);--rt-action-bar-bg-default: var(--rt-color-bg-inverse);--rt-action-bar-color-default: var(--rt-color-text-inverse);--rt-action-bar-padding-default: var(--rt-space-2) var(--rt-space-4);--rt-action-bar-gap-default: var(--rt-space-4);--rt-action-bar-font-size-default: var(--rt-text-sm);--rt-action-bar-counter-weight-default: var(--rt-font-weight-medium);--rt-action-bar-counter-font-size-default: 1em;--rt-action-bar-action-radius-default: var(--rt-radius-md);--rt-action-bar-action-padding-block-default: var(--rt-space-1);--rt-action-bar-action-padding-inline-default: var(--rt-space-2);--rt-action-bar-action-weight-default: var(--rt-font-weight-medium);--rt-action-bar-action-height-default: auto;--rt-action-bar-action-font-size-default: 1em;--rt-action-bar-action-bg-hover-default: color-mix( in srgb, var(--rt-action-bar-color, var(--rt-action-bar-color-default)) 16%, transparent );--rt-action-bar-action-color-danger-default: var(--rt-color-action-danger-on-surface);--rt-action-bar-action-focus-shadow-default: var(--rt-shadow-focus-ring);--rt-action-bar-icon-size-default: var(--rt-size-4);--rt-action-bar-icon-gap-default: var(--rt-space-2);--rt-action-bar-close-size-default: var(--rt-control-height-sm);--rt-action-bar-close-icon-size-default: var(--rt-size-4);display:flex;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-padding, var(--rt-action-bar-padding-default));border-radius:var(--rt-action-bar-radius, var(--rt-action-bar-radius-default));background:var(--rt-action-bar-bg, var(--rt-action-bar-bg-default));box-shadow:var(--rt-action-bar-shadow, var(--rt-action-bar-shadow-default));color:var(--rt-action-bar-color, var(--rt-action-bar-color-default));font-size:var(--rt-action-bar-font-size, var(--rt-action-bar-font-size-default));gap:var(--rt-action-bar-gap, var(--rt-action-bar-gap-default))}.rt-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size, var(--rt-action-bar-counter-font-size-default));font-weight:var(--rt-action-bar-counter-weight, var(--rt-action-bar-counter-weight-default));white-space:nowrap}.rt-action-bar__actions{display:flex;min-width:0;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-action-bar__action{display:flex;min-height:var(--rt-action-bar-action-height, var(--rt-action-bar-action-height-default));box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-action-padding-block, var(--rt-action-bar-action-padding-block-default)) var(--rt-action-bar-action-padding-inline, var(--rt-action-bar-action-padding-inline-default));border:0;border-radius:var(--rt-action-bar-action-radius, var(--rt-action-bar-action-radius-default));background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-font-size, var(--rt-action-bar-action-font-size-default));font-weight:var(--rt-action-bar-action-weight, var(--rt-action-bar-action-weight-default));gap:var(--rt-action-bar-icon-gap, var(--rt-action-bar-icon-gap-default))}.rt-action-bar__action:hover{background:var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default))}.rt-action-bar__action:focus-visible{box-shadow:var(--rt-action-bar-action-focus-shadow, var(--rt-action-bar-action-focus-shadow-default));outline:none}.rt-action-bar__action--danger{color:var(--rt-action-bar-action-color-danger, var(--rt-action-bar-action-color-danger-default))}.rt-action-bar__action-icon{min-width:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));max-width:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));min-height:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));max-height:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));flex:none}.rt-action-bar__action-label{overflow-wrap:break-word;text-align:start}.rt-action-bar__close{--rt-icon-button-color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));--rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));flex:none;margin-left:auto}.rt-action-bar__close.rt-icon-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-action-bar-close-size, var(--rt-action-bar-close-size-default))}.rt-action-bar__close .rt-icon{min-width:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));max-width:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));min-height:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));max-height:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default))}.rt-action-bar__menu{--rt-action-bar-menu-radius-default: var(--rt-radius-md);--rt-action-bar-menu-shadow-default: var(--rt-shadow-card);--rt-action-bar-menu-padding-default: var(--rt-space-2);--rt-action-bar-menu-gap-default: 0;--rt-action-bar-menu-item-font-size-default: var(--rt-text-sm);display:flex;flex-direction:column;padding:var(--rt-action-bar-menu-padding, var(--rt-action-bar-menu-padding-default));border-radius:var(--rt-action-bar-menu-radius, var(--rt-action-bar-menu-radius-default));background:var(--rt-action-bar-menu-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-action-bar-menu-shadow, var(--rt-action-bar-menu-shadow-default));color:var(--rt-action-bar-menu-color, var(--rt-color-text-primary));gap:var(--rt-action-bar-menu-gap, var(--rt-action-bar-menu-gap-default))}.rt-action-bar__menu .rt-menu-item{font-size:var(--rt-action-bar-menu-item-font-size, var(--rt-action-bar-menu-item-font-size-default))}@media(pointer:coarse){.rt-action-bar .rt-action-bar__action--with-icon .rt-action-bar__action-label{display:none}}.rt-action-bar[data-rt-radius=none]{--rt-action-bar-radius: var(--rt-radius-none)}.rt-action-bar[data-rt-radius=xs]{--rt-action-bar-radius: var(--rt-radius-xs)}.rt-action-bar[data-rt-radius=sm]{--rt-action-bar-radius: var(--rt-radius-sm)}.rt-action-bar[data-rt-radius=ms]{--rt-action-bar-radius: var(--rt-radius-ms)}.rt-action-bar[data-rt-radius=md]{--rt-action-bar-radius: var(--rt-radius-md)}.rt-action-bar[data-rt-radius=lg]{--rt-action-bar-radius: var(--rt-radius-lg)}.rt-action-bar[data-rt-radius=xl]{--rt-action-bar-radius: var(--rt-radius-xl)}.rt-action-bar[data-rt-radius=\"2xl\"]{--rt-action-bar-radius: var(--rt-radius-2xl)}.rt-action-bar[data-rt-radius=full]{--rt-action-bar-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: 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: RtMenuItemComponent, selector: "rt-menu-item", inputs: ["icon", "label", "danger", "success", "glyph", "fill", "current", "disabled", "confirmMessage", "confirmTitle", "confirmLabel", "confirmCancelLabel", "confirmTone", "link"], outputs: ["selected"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        RtIconComponent,
+                        RtIconButtonComponent,
+                        RtMenuItemComponent,
+                        RtPopoverDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK$1,
+                        role: 'toolbar',
+                    }, template: "<ng-container rtBlock=\"rt-action-bar\">\n    <span rtElem=\"counter\" qa-dataid=\"action-bar-counter\">{{ countText() }}</span>\n\n    @if (actions().length) {\n        <div rtElem=\"actions\" qa-dataid=\"action-bar-actions\">\n            @for (view of actions(); track view.action.label) {\n                @if (view.action.menu) {\n                    <!--\n                        \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0432\u043B\u043E\u0436\u0435\u043D\u043D\u044B\u043C \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0441\u0430\u043C\u043E \u043D\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0435\u0442: \u043E\u043D\u043E \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B, \u0438\n                        \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u043E\u0439. \u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043B\u043E\u044E \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u043E\u043C \u2014 \u043E\u0434\u043D\u043E\u0433\u043E \u0448\u0430\u0431\u043B\u043E\u043D\u0430\n                        \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043D\u0430 \u0432\u0441\u0435 \u0442\u0430\u043A\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F.\n                    -->\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        [rtPopover]=\"menuTpl\"\n                        [rtPopoverContext]=\"view.action.menu\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                } @else {\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        (click)=\"onAction(view.action)\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"action-bar-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [icon]=\"closeIcon()\"\n        [ariaLabel]=\"closeLabel()\"\n        (clicked)=\"onClose()\" />\n\n    <!--\n        \u041E\u0431\u0430 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D\u044B \u0432\u043D\u0443\u0442\u0440\u0438 \u0431\u043B\u043E\u043A\u0430 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: `rtElem` \u0431\u0435\u0440\u0451\u0442 \u0438\u043C\u044F \u0431\u043B\u043E\u043A\u0430 \u0438\u043D\u044A\u0435\u043A\u0446\u0438\u0435\u0439 \u0443\n        \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043F\u0440\u0435\u0434\u043A\u0430 \u0441 `rtBlock`, \u0430 \u0443 \u0448\u0430\u0431\u043B\u043E\u043D\u0430, \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0441\u043D\u0430\u0440\u0443\u0436\u0438, \u0442\u0430\u043A\u043E\u0433\u043E \u043F\u0440\u0435\u0434\u043A\u0430 \u043D\u0435\u0442\n        \u0432\u043E\u0432\u0441\u0435 \u2014 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043D\u0435 \u043F\u043E\u0434\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0441\u043E\u0432\u0441\u0435\u043C, \u0441 \u043E\u0442\u043A\u0430\u0437\u043E\u043C \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u043C \u043F\u043E\u0441\u0442\u0430\u0432\u0449\u0438\u043A\u0435.\n\n        \u041B\u0438\u0446\u043E \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F: \u0437\u043D\u0430\u0447\u043E\u043A \u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u044C. \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u2014 \u0441\u043D\u0438\u043C\u0430\u0435\u0442 \u0435\u0451 \u043F\u0440\u0430\u0432\u0438\u043B\u043E\n        \u0441\u0442\u0438\u043B\u044F \u043F\u043E \u0433\u0440\u0443\u0431\u043E\u043C\u0443 \u0443\u043A\u0430\u0437\u0430\u0442\u0435\u043B\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u0443 \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043E\u043A \u0435\u0441\u0442\u044C.\n    -->\n    <ng-template #actionFace let-action>\n        @if (action.icon || action.glyph) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon ?? null\" [glyph]=\"action.glyph ?? null\" />\n        }\n\n        <span rtElem=\"action-label\">{{ action.label }}</span>\n    </ng-template>\n\n    <ng-template #menuTpl let-menu>\n        <div rtElem=\"menu\" qa-dataid=\"action-bar-menu\" role=\"menu\">\n            @for (item of menu; track item.label) {\n                <rt-menu-item\n                    qa-dataid=\"action-bar-menu-item\"\n                    [icon]=\"item.icon ?? null\"\n                    [glyph]=\"item.glyph ?? null\"\n                    [label]=\"item.label\"\n                    [danger]=\"item.look === 'danger'\"\n                    (selected)=\"onAction(item)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar{--rt-action-bar-radius-default: var(--rt-radius-lg);--rt-action-bar-shadow-default: var(--rt-shadow-card);--rt-action-bar-bg-default: var(--rt-color-bg-inverse);--rt-action-bar-color-default: var(--rt-color-text-inverse);--rt-action-bar-padding-default: var(--rt-space-2) var(--rt-space-4);--rt-action-bar-gap-default: var(--rt-space-4);--rt-action-bar-font-size-default: var(--rt-text-sm);--rt-action-bar-counter-weight-default: var(--rt-font-weight-medium);--rt-action-bar-counter-font-size-default: 1em;--rt-action-bar-action-radius-default: var(--rt-radius-md);--rt-action-bar-action-padding-block-default: var(--rt-space-1);--rt-action-bar-action-padding-inline-default: var(--rt-space-2);--rt-action-bar-action-weight-default: var(--rt-font-weight-medium);--rt-action-bar-action-height-default: auto;--rt-action-bar-action-font-size-default: 1em;--rt-action-bar-action-bg-hover-default: color-mix( in srgb, var(--rt-action-bar-color, var(--rt-action-bar-color-default)) 16%, transparent );--rt-action-bar-action-color-danger-default: var(--rt-color-action-danger-on-surface);--rt-action-bar-action-focus-shadow-default: var(--rt-shadow-focus-ring);--rt-action-bar-icon-size-default: var(--rt-size-4);--rt-action-bar-icon-gap-default: var(--rt-space-2);--rt-action-bar-close-size-default: var(--rt-control-height-sm);--rt-action-bar-close-icon-size-default: var(--rt-size-4);display:flex;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-padding, var(--rt-action-bar-padding-default));border-radius:var(--rt-action-bar-radius, var(--rt-action-bar-radius-default));background:var(--rt-action-bar-bg, var(--rt-action-bar-bg-default));box-shadow:var(--rt-action-bar-shadow, var(--rt-action-bar-shadow-default));color:var(--rt-action-bar-color, var(--rt-action-bar-color-default));font-size:var(--rt-action-bar-font-size, var(--rt-action-bar-font-size-default));gap:var(--rt-action-bar-gap, var(--rt-action-bar-gap-default))}.rt-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size, var(--rt-action-bar-counter-font-size-default));font-weight:var(--rt-action-bar-counter-weight, var(--rt-action-bar-counter-weight-default));white-space:nowrap}.rt-action-bar__actions{display:flex;min-width:0;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-action-bar__action{display:flex;min-height:var(--rt-action-bar-action-height, var(--rt-action-bar-action-height-default));box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-action-padding-block, var(--rt-action-bar-action-padding-block-default)) var(--rt-action-bar-action-padding-inline, var(--rt-action-bar-action-padding-inline-default));border:0;border-radius:var(--rt-action-bar-action-radius, var(--rt-action-bar-action-radius-default));background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-font-size, var(--rt-action-bar-action-font-size-default));font-weight:var(--rt-action-bar-action-weight, var(--rt-action-bar-action-weight-default));gap:var(--rt-action-bar-icon-gap, var(--rt-action-bar-icon-gap-default))}.rt-action-bar__action:hover{background:var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default))}.rt-action-bar__action:focus-visible{box-shadow:var(--rt-action-bar-action-focus-shadow, var(--rt-action-bar-action-focus-shadow-default));outline:none}.rt-action-bar__action--danger{color:var(--rt-action-bar-action-color-danger, var(--rt-action-bar-action-color-danger-default))}.rt-action-bar__action-icon{min-width:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));max-width:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));min-height:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));max-height:var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));flex:none}.rt-action-bar__action-label{overflow-wrap:break-word;text-align:start}.rt-action-bar__close{--rt-icon-button-color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));--rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));flex:none;margin-left:auto}.rt-action-bar__close.rt-icon-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-action-bar-close-size, var(--rt-action-bar-close-size-default))}.rt-action-bar__close .rt-icon{min-width:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));max-width:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));min-height:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));max-height:var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default))}.rt-action-bar__menu{--rt-action-bar-menu-radius-default: var(--rt-radius-md);--rt-action-bar-menu-shadow-default: var(--rt-shadow-card);--rt-action-bar-menu-padding-default: var(--rt-space-2);--rt-action-bar-menu-gap-default: 0;--rt-action-bar-menu-item-font-size-default: var(--rt-text-sm);display:flex;flex-direction:column;padding:var(--rt-action-bar-menu-padding, var(--rt-action-bar-menu-padding-default));border-radius:var(--rt-action-bar-menu-radius, var(--rt-action-bar-menu-radius-default));background:var(--rt-action-bar-menu-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-action-bar-menu-shadow, var(--rt-action-bar-menu-shadow-default));color:var(--rt-action-bar-menu-color, var(--rt-color-text-primary));gap:var(--rt-action-bar-menu-gap, var(--rt-action-bar-menu-gap-default))}.rt-action-bar__menu .rt-menu-item{font-size:var(--rt-action-bar-menu-item-font-size, var(--rt-action-bar-menu-item-font-size-default))}@media(pointer:coarse){.rt-action-bar .rt-action-bar__action--with-icon .rt-action-bar__action-label{display:none}}.rt-action-bar[data-rt-radius=none]{--rt-action-bar-radius: var(--rt-radius-none)}.rt-action-bar[data-rt-radius=xs]{--rt-action-bar-radius: var(--rt-radius-xs)}.rt-action-bar[data-rt-radius=sm]{--rt-action-bar-radius: var(--rt-radius-sm)}.rt-action-bar[data-rt-radius=ms]{--rt-action-bar-radius: var(--rt-radius-ms)}.rt-action-bar[data-rt-radius=md]{--rt-action-bar-radius: var(--rt-radius-md)}.rt-action-bar[data-rt-radius=lg]{--rt-action-bar-radius: var(--rt-radius-lg)}.rt-action-bar[data-rt-radius=xl]{--rt-action-bar-radius: var(--rt-radius-xl)}.rt-action-bar[data-rt-radius=\"2xl\"]{--rt-action-bar-radius: var(--rt-radius-2xl)}.rt-action-bar[data-rt-radius=full]{--rt-action-bar-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], actionRun: [{ type: i0.Output, args: ["actionRun"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Сколько полоса держится в разметке после закрытия — ровно длительность ухода
+ * из стилей.
+ *
+ * Число живёт здесь, а не только в правиле стиля: разметку снимает держатель, и,
+ * разойдясь с правилом, он обрывает уход на полпути. Держателю и стилям нужно
+ * одно и то же число, поэтому оно объявлено рядом с договором, а не в одном из них.
+ */
+const RT_ACTION_BAR_LEAVE_MS = 300;
+
+const EMPTY_CONFIG = { selected: 0, total: 0, actions: [] };
+/**
+ * Настройка полосы массовых действий: держатель её читает, список — пишет.
+ *
+ * Служба без корня намеренно. Тот, кто отмечает строки, и тот, кто рисует полосу,
+ * стоят на разной глубине одного экрана, и передавать настройку вниз через всё,
+ * что между ними, значит рассказать о полосе каждому из них. Потребитель
+ * объявляет службу на своём уровне — там, где у него живёт список.
+ */
+class RtActionBarService {
+    constructor() {
+        this.#config = signal(EMPTY_CONFIG, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#config" }] : /* istanbul ignore next */ []));
+        this.config = this.#config.asReadonly();
+    }
+    #config;
+    /** Список действий. Счёт не трогается: он приходит своим вызовом. */
+    setActions(actions) {
+        this.#config.update((config) => ({ ...config, actions }));
+    }
+    /** Счёт выбранного. Полоса открывается именно им. */
+    setCounts(selected, total) {
+        this.#config.update((config) => ({ ...config, selected, total }));
+    }
+    /** Отпустить выбранное: счёт обнуляется, список действий остаётся. */
+    clearSelection() {
+        this.#config.update((config) => ({ ...config, selected: 0, total: 0 }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService, decorators: [{
+            type: Injectable
+        }] });
+
+const BEM_BLOCK = 'rt-action-bar-holder';
+/**
+ * Держатель полосы массовых действий: решает, стоит ли она в разметке, и прикалывает
+ * её над страницей. Настройку читает у службы, которую потребитель объявил на своём
+ * уровне — там, где у него живёт список.
+ *
+ * Полоса открывается счётом выбранного, а не своим признаком: два источника одного
+ * признака расходятся молча, и признак, оставшийся поднятым над опустевшим выбором,
+ * держал бы полосу над страницей, где ничего не выбрано.
+ *
+ * После закрытия полоса остаётся в разметке ровно на длительность ухода — число одно
+ * и лежит в договоре рядом. Разойдясь с правилом стиля, держатель обрывал бы уход на
+ * полпути.
+ */
+class RtActionBarHolderComponent {
+    #service;
+    #destroyRef;
+    /** Уходит ли полоса прямо сейчас: разметка держит её, пока правило стиля не доиграет. */
+    #leaving;
+    #leaveTimer;
+    /**
+     * Была ли полоса открыта до этой перемены. Без этого признака уходу не с чего начаться:
+     * к минуте, когда выбранное обнулилось, и «открыта», и «стоит в разметке» уже ложь, так
+     * что условие по ним не срабатывает никогда. В первом ките оно написано именно так, и
+     * уход там не заводится вовсе — образец прочитан, а не перенесён.
+     */
+    #wasOpened;
+    constructor() {
+        this.#service = inject(RtActionBarService);
+        this.#destroyRef = inject(DestroyRef);
+        /** Уходит ли полоса прямо сейчас: разметка держит её, пока правило стиля не доиграет. */
+        this.#leaving = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#leaving" }] : /* istanbul ignore next */ []));
+        this.#leaveTimer = null;
+        /**
+         * Была ли полоса открыта до этой перемены. Без этого признака уходу не с чего начаться:
+         * к минуте, когда выбранное обнулилось, и «открыта», и «стоит в разметке» уже ложь, так
+         * что условие по ним не срабатывает никогда. В первом ките оно написано именно так, и
+         * уход там не заводится вовсе — образец прочитан, а не перенесён.
+         */
+        this.#wasOpened = false;
+        this.config = this.#service.config;
+        /** Выбрано ли что-нибудь: этим полоса и открывается. */
+        this.opened = computed(() => this.config().selected > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+        /** Стоит ли полоса в разметке: она остаётся в ней и на время ухода. */
+        this.shown = computed(() => this.opened() || this.#leaving(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+        this.leaving = this.#leaving.asReadonly();
+        /** Значок кнопки, закрывающей полосу, — уходит в саму полосу. */
+        this.closeIcon = input('close', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeIcon" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const opened = this.opened();
+            untracked(() => {
+                this.#clearLeaveTimer();
+                if (opened) {
+                    this.#wasOpened = true;
+                    this.#leaving.set(false);
+                    return;
+                }
+                if (this.#wasOpened) {
+                    this.#wasOpened = false;
+                    this.#startLeaving();
+                }
+            });
+        });
+        this.#destroyRef.onDestroy(() => this.#clearLeaveTimer());
+    }
+    /** Крестик сообщает наружу; выбранное отпускает служба, которой список и владеет. */
+    onClosed() {
+        this.#service.clearSelection();
+    }
+    /** Полоса остаётся в разметке на время ухода и снимается по его концу. */
+    #startLeaving() {
+        this.#leaving.set(true);
+        this.#leaveTimer = setTimeout(() => {
+            this.#leaving.set(false);
+            this.#leaveTimer = null;
+        }, RT_ACTION_BAR_LEAVE_MS);
+    }
+    #clearLeaveTimer() {
+        if (this.#leaveTimer !== null) {
+            clearTimeout(this.#leaveTimer);
+            this.#leaveTimer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarHolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtActionBarHolderComponent, isStandalone: true, selector: "rt-action-bar-holder", inputs: { closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-action-bar-holder" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-action-bar-holder\">\n    @if (shown()) {\n        <rt-action-bar\n            rtElem=\"bar\"\n            qa-dataid=\"action-bar-holder-bar\"\n            [rtMod]=\"{ leaving: leaving() }\"\n            [config]=\"config()\"\n            [closeIcon]=\"closeIcon()\"\n            (closed)=\"onClosed()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar-holder{--rt-action-bar-holder-bottom-default: var(--rt-space-6);--rt-action-bar-holder-inline-default: var(--rt-space-4);--rt-action-bar-holder-enter-duration-default: .3s;--rt-action-bar-holder-leave-duration-default: .3s;position:fixed;z-index:var(--rt-z-fixed);display:flex;justify-content:center;inset:auto var(--rt-action-bar-holder-inline, var(--rt-action-bar-holder-inline-default)) var(--rt-action-bar-holder-bottom, var(--rt-action-bar-holder-bottom-default));pointer-events:none}.rt-action-bar-holder__bar{max-width:100%;animation:rt-action-bar-enter var(--rt-action-bar-holder-enter-duration, var(--rt-action-bar-holder-enter-duration-default));pointer-events:auto}.rt-action-bar-holder__bar--leaving{animation:rt-action-bar-leave var(--rt-action-bar-holder-leave-duration, var(--rt-action-bar-holder-leave-duration-default)) forwards}@keyframes rt-action-bar-enter{0%{opacity:0;transform:translateY(100%)}30%{opacity:1;transform:translateY(calc(var(--rt-space-4) * -1))}to{opacity:1;transform:translateY(0)}}@keyframes rt-action-bar-leave{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(calc(var(--rt-space-4) * -1))}to{opacity:0;transform:translateY(100%)}}}\n"], dependencies: [{ kind: "component", type: RtActionBarComponent, selector: "rt-action-bar", inputs: ["config", "closeIcon"], outputs: ["actionRun", "closed"] }, { 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: RtActionBarHolderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-action-bar-holder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtActionBarComponent, BlockDirective, ElemDirective, ModDirective], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-action-bar-holder\">\n    @if (shown()) {\n        <rt-action-bar\n            rtElem=\"bar\"\n            qa-dataid=\"action-bar-holder-bar\"\n            [rtMod]=\"{ leaving: leaving() }\"\n            [config]=\"config()\"\n            [closeIcon]=\"closeIcon()\"\n            (closed)=\"onClosed()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar-holder{--rt-action-bar-holder-bottom-default: var(--rt-space-6);--rt-action-bar-holder-inline-default: var(--rt-space-4);--rt-action-bar-holder-enter-duration-default: .3s;--rt-action-bar-holder-leave-duration-default: .3s;position:fixed;z-index:var(--rt-z-fixed);display:flex;justify-content:center;inset:auto var(--rt-action-bar-holder-inline, var(--rt-action-bar-holder-inline-default)) var(--rt-action-bar-holder-bottom, var(--rt-action-bar-holder-bottom-default));pointer-events:none}.rt-action-bar-holder__bar{max-width:100%;animation:rt-action-bar-enter var(--rt-action-bar-holder-enter-duration, var(--rt-action-bar-holder-enter-duration-default));pointer-events:auto}.rt-action-bar-holder__bar--leaving{animation:rt-action-bar-leave var(--rt-action-bar-holder-leave-duration, var(--rt-action-bar-holder-leave-duration-default)) forwards}@keyframes rt-action-bar-enter{0%{opacity:0;transform:translateY(100%)}30%{opacity:1;transform:translateY(calc(var(--rt-space-4) * -1))}to{opacity:1;transform:translateY(0)}}@keyframes rt-action-bar-leave{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(calc(var(--rt-space-4) * -1))}to{opacity:0;transform:translateY(100%)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RT_ACTION_BAR_LEAVE_MS, RtActionBarComponent, RtActionBarHolderComponent, RtActionBarService };
+//# sourceMappingURL=rt-tools-ui-kit-v2-action-bar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-action-bar.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar.component.ts","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar.component.html","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar.model.ts","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar.service.ts","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar-holder.component.ts","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-action-bar-holder.component.html","../../../projects/ui-kit-v2/src/lib/components/action-bar/rt-tools-ui-kit-v2-action-bar.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    InputSignal,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n    computed,\n    input,\n    output,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtIcon, TRtKitLabelParams } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtMenuItemComponent } from '@rt-tools/ui-kit-v2/menu';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtActionBar } from './rt-action-bar.model';\n\nconst BEM_BLOCK: string = 'rt-action-bar';\n\n/** Действие вместе с готовой записью модификаторов: шаблон методов не зовёт. */\ninterface IActionView {\n    readonly action: IRtActionBar.Action;\n    readonly modifiers: Readonly<Record<string, boolean>>;\n    /**\n     * Имя кнопки для вспомогательных средств — у действия со значком. На грубом указателе подпись\n     * снята правилом стиля, а значок немой: без имени кнопка осталась бы безымянной.\n     */\n    readonly ariaLabel: string | null;\n}\n\n/**\n * Полоса массовых действий: счёт слева, действия рядом, крестик справа.\n *\n * Своего состояния не держит вовсе — ни выбранного, ни открытости. Ей дают\n * настройку входом, а наружу она сообщает две вещи: что нажали действие и что\n * нажали крестик. Держатель `rt-action-bar-holder` решает, стоит ли она в\n * разметке и где над страницей приколота.\n *\n * Действие с вложенным списком само не срабатывает: оно заголовок группы, и\n * список раскрывается всплывающим слоем кита. Нажатие пункта списка закрывает\n * полосу так же, как нажатие обычного действия: где человек нажал — в полосе\n * или на шаг глубже — о трате выбранного не говорит ничего.\n */\n@Component({\n    selector: 'rt-action-bar',\n    templateUrl: './rt-action-bar.component.html',\n    styleUrl: './rt-action-bar.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        NgTemplateOutlet,\n        RtIconComponent,\n        RtIconButtonComponent,\n        RtMenuItemComponent,\n        RtPopoverDirective,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        role: 'toolbar',\n    },\n})\nexport class RtActionBarComponent {\n    /** Подстановки счётчика: подпись собирает словарь, а не склейка слов в шаблоне. */\n    readonly #countParams: Signal<TRtKitLabelParams> = computed((): TRtKitLabelParams => ({\n        count: this.config().selected,\n        total: this.config().total,\n    }));\n\n    protected readonly countText: Signal<string> = rtKitLabel('uiSelectedOf', this.#countParams);\n\n    protected readonly closeLabel: Signal<string> = rtKitLabel('uiClose');\n\n    /**\n     * Действия с готовыми модификаторами. Признак значка стоит модификатором, а не\n     * условием в шаблоне: подпись у действия со значком снимает правило стиля по\n     * грубому указателю, и решать это условием значило бы увезти оформление в код.\n     */\n    protected readonly actions: Signal<readonly IActionView[]> = computed((): readonly IActionView[] =>\n        this.config().actions.map((action: IRtActionBar.Action): IActionView => ({\n            action,\n            modifiers: { danger: action.look === 'danger', withIcon: !!(action.icon || action.glyph) },\n            ariaLabel: action.icon || action.glyph ? action.label : null,\n        }))\n    );\n\n    public readonly config: InputSignal<IRtActionBar.Config> = input.required<IRtActionBar.Config>();\n    /** Значок кнопки, закрывающей полосу. */\n    public readonly closeIcon: InputSignal<IRtIcon.Name> = input<IRtIcon.Name>('close');\n\n    public readonly actionRun: OutputEmitterRef<IRtActionBar.Action> = output<IRtActionBar.Action>();\n\n    public readonly closed: OutputEmitterRef<void> = output<void>();\n\n    protected onAction(action: IRtActionBar.Action): void {\n        action.run?.();\n        this.actionRun.emit(action);\n        this.closed.emit();\n    }\n\n    protected onClose(): void {\n        this.closed.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-action-bar\">\n    <span rtElem=\"counter\" qa-dataid=\"action-bar-counter\">{{ countText() }}</span>\n\n    @if (actions().length) {\n        <div rtElem=\"actions\" qa-dataid=\"action-bar-actions\">\n            @for (view of actions(); track view.action.label) {\n                @if (view.action.menu) {\n                    <!--\n                        Действие с вложенным списком само не срабатывает: оно заголовок группы, и\n                        нажатие раскрывает слой. Список приходит слою контекстом — одного шаблона\n                        хватает на все такие действия.\n                    -->\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        [rtPopover]=\"menuTpl\"\n                        [rtPopoverContext]=\"view.action.menu\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                } @else {\n                    <button\n                        type=\"button\"\n                        rtElem=\"action\"\n                        qa-dataid=\"action-bar-action\"\n                        [rtMod]=\"view.modifiers\"\n                        [attr.aria-label]=\"view.ariaLabel\"\n                        (click)=\"onAction(view.action)\">\n                        <ng-container *ngTemplateOutlet=\"actionFace; context: { $implicit: view.action }\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"action-bar-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [icon]=\"closeIcon()\"\n        [ariaLabel]=\"closeLabel()\"\n        (clicked)=\"onClose()\" />\n\n    <!--\n        Оба шаблона объявлены внутри блока намеренно: `rtElem` берёт имя блока инъекцией у\n        ближайшего предка с `rtBlock`, а у шаблона, объявленного снаружи, такого предка нет\n        вовсе — компонент не поднимается совсем, с отказом об отсутствующем поставщике.\n\n        Лицо действия: значок и подпись. Подпись стоит в разметке всегда — снимает её правило\n        стиля по грубому указателю, и только у действия, у которого значок есть.\n    -->\n    <ng-template #actionFace let-action>\n        @if (action.icon || action.glyph) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon ?? null\" [glyph]=\"action.glyph ?? null\" />\n        }\n\n        <span rtElem=\"action-label\">{{ action.label }}</span>\n    </ng-template>\n\n    <ng-template #menuTpl let-menu>\n        <div rtElem=\"menu\" qa-dataid=\"action-bar-menu\" role=\"menu\">\n            @for (item of menu; track item.label) {\n                <rt-menu-item\n                    qa-dataid=\"action-bar-menu-item\"\n                    [icon]=\"item.icon ?? null\"\n                    [glyph]=\"item.glyph ?? null\"\n                    [label]=\"item.label\"\n                    [danger]=\"item.look === 'danger'\"\n                    (selected)=\"onAction(item)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n","import { IRtIcon } from '@rt-tools/ui-kit-v2/core';\n\n/**\n * Контракты полосы массовых действий. Один корневой неймспейс с префиксом `I`.\n *\n * Отличие от договора первого кита одно и оно намеренное: произвольного объекта\n * стилей на действии здесь нет. Вид кнопки называется именем из набора кита —\n * значение цвета в разметку не приходит вовсе.\n */\nexport namespace IRtActionBar {\n    /** Вид действия: тем же именем, каким его зовёт кнопка кита. */\n    export type Look = 'plain' | 'danger';\n\n    /**\n     * Одно нажатие в полосе. Либо `run` — то, что действие делает, — либо `menu`:\n     * вложенный список. Действие с вложенным списком само не срабатывает: оно\n     * заголовок группы, и запуск его наравне с раскрытием запустил бы то, чего\n     * человек не выбирал.\n     */\n    export interface Action {\n        readonly label: string;\n        readonly icon?: IRtIcon.Name;\n        /**\n         * Имя Material вместо значка кита: рисуется так же, как вход `glyph` у `rt-icon` — парой из\n         * перечня кита или лигатурой шрифта. Значок кита, заданный рядом, сильнее.\n         */\n        readonly glyph?: string;\n        readonly look?: IRtActionBar.Look;\n        readonly run?: () => void;\n        readonly menu?: readonly IRtActionBar.Action[];\n    }\n\n    /**\n     * Настройка полосы целиком. Счёт приходит парой: сколько выбрано и сколько\n     * всего. Полоса ничего из этого не считает — ей дают числа.\n     */\n    export interface Config {\n        readonly selected: number;\n        readonly total: number;\n        readonly actions: readonly IRtActionBar.Action[];\n    }\n}\n\n/**\n * Сколько полоса держится в разметке после закрытия — ровно длительность ухода\n * из стилей.\n *\n * Число живёт здесь, а не только в правиле стиля: разметку снимает держатель, и,\n * разойдясь с правилом, он обрывает уход на полпути. Держателю и стилям нужно\n * одно и то же число, поэтому оно объявлено рядом с договором, а не в одном из них.\n */\nexport const RT_ACTION_BAR_LEAVE_MS: number = 300;\n","import { Injectable, Signal, WritableSignal, signal } from '@angular/core';\n\nimport { IRtActionBar } from './rt-action-bar.model';\n\nconst EMPTY_CONFIG: IRtActionBar.Config = { selected: 0, total: 0, actions: [] };\n\n/**\n * Настройка полосы массовых действий: держатель её читает, список — пишет.\n *\n * Служба без корня намеренно. Тот, кто отмечает строки, и тот, кто рисует полосу,\n * стоят на разной глубине одного экрана, и передавать настройку вниз через всё,\n * что между ними, значит рассказать о полосе каждому из них. Потребитель\n * объявляет службу на своём уровне — там, где у него живёт список.\n */\n@Injectable()\nexport class RtActionBarService {\n    readonly #config: WritableSignal<IRtActionBar.Config> = signal<IRtActionBar.Config>(EMPTY_CONFIG);\n\n    public readonly config: Signal<IRtActionBar.Config> = this.#config.asReadonly();\n\n    /** Список действий. Счёт не трогается: он приходит своим вызовом. */\n    public setActions(actions: readonly IRtActionBar.Action[]): void {\n        this.#config.update((config: IRtActionBar.Config): IRtActionBar.Config => ({ ...config, actions }));\n    }\n\n    /** Счёт выбранного. Полоса открывается именно им. */\n    public setCounts(selected: number, total: number): void {\n        this.#config.update((config: IRtActionBar.Config): IRtActionBar.Config => ({ ...config, selected, total }));\n    }\n\n    /** Отпустить выбранное: счёт обнуляется, список действий остаётся. */\n    public clearSelection(): void {\n        this.#config.update((config: IRtActionBar.Config): IRtActionBar.Config => ({ ...config, selected: 0, total: 0 }));\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    InputSignal,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n    computed,\n    effect,\n    inject,\n    input,\n    signal,\n    untracked,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\n\nimport { RtActionBarComponent } from './rt-action-bar.component';\nimport { IRtActionBar, RT_ACTION_BAR_LEAVE_MS } from './rt-action-bar.model';\nimport { RtActionBarService } from './rt-action-bar.service';\n\nconst BEM_BLOCK: string = 'rt-action-bar-holder';\n\n/**\n * Держатель полосы массовых действий: решает, стоит ли она в разметке, и прикалывает\n * её над страницей. Настройку читает у службы, которую потребитель объявил на своём\n * уровне — там, где у него живёт список.\n *\n * Полоса открывается счётом выбранного, а не своим признаком: два источника одного\n * признака расходятся молча, и признак, оставшийся поднятым над опустевшим выбором,\n * держал бы полосу над страницей, где ничего не выбрано.\n *\n * После закрытия полоса остаётся в разметке ровно на длительность ухода — число одно\n * и лежит в договоре рядом. Разойдясь с правилом стиля, держатель обрывал бы уход на\n * полпути.\n */\n@Component({\n    selector: 'rt-action-bar-holder',\n    templateUrl: './rt-action-bar-holder.component.html',\n    styleUrl: './rt-action-bar-holder.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [RtActionBarComponent, BlockDirective, ElemDirective, ModDirective],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtActionBarHolderComponent {\n    readonly #service: RtActionBarService = inject(RtActionBarService);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** Уходит ли полоса прямо сейчас: разметка держит её, пока правило стиля не доиграет. */\n    readonly #leaving: WritableSignal<boolean> = signal<boolean>(false);\n\n    #leaveTimer: ReturnType<typeof setTimeout> | null = null;\n\n    /**\n     * Была ли полоса открыта до этой перемены. Без этого признака уходу не с чего начаться:\n     * к минуте, когда выбранное обнулилось, и «открыта», и «стоит в разметке» уже ложь, так\n     * что условие по ним не срабатывает никогда. В первом ките оно написано именно так, и\n     * уход там не заводится вовсе — образец прочитан, а не перенесён.\n     */\n    #wasOpened: boolean = false;\n\n    protected readonly config: Signal<IRtActionBar.Config> = this.#service.config;\n\n    /** Выбрано ли что-нибудь: этим полоса и открывается. */\n    protected readonly opened: Signal<boolean> = computed((): boolean => this.config().selected > 0);\n\n    /** Стоит ли полоса в разметке: она остаётся в ней и на время ухода. */\n    protected readonly shown: Signal<boolean> = computed((): boolean => this.opened() || this.#leaving());\n\n    protected readonly leaving: Signal<boolean> = this.#leaving.asReadonly();\n\n    /** Значок кнопки, закрывающей полосу, — уходит в саму полосу. */\n    public readonly closeIcon: InputSignal<IRtIcon.Name> = input<IRtIcon.Name>('close');\n\n    constructor() {\n        effect((): void => {\n            const opened: boolean = this.opened();\n\n            untracked((): void => {\n                this.#clearLeaveTimer();\n\n                if (opened) {\n                    this.#wasOpened = true;\n                    this.#leaving.set(false);\n\n                    return;\n                }\n\n                if (this.#wasOpened) {\n                    this.#wasOpened = false;\n                    this.#startLeaving();\n                }\n            });\n        });\n\n        this.#destroyRef.onDestroy((): void => this.#clearLeaveTimer());\n    }\n\n    /** Крестик сообщает наружу; выбранное отпускает служба, которой список и владеет. */\n    protected onClosed(): void {\n        this.#service.clearSelection();\n    }\n\n    /** Полоса остаётся в разметке на время ухода и снимается по его концу. */\n    #startLeaving(): void {\n        this.#leaving.set(true);\n        this.#leaveTimer = setTimeout((): void => {\n            this.#leaving.set(false);\n            this.#leaveTimer = null;\n        }, RT_ACTION_BAR_LEAVE_MS);\n    }\n\n    #clearLeaveTimer(): void {\n        if (this.#leaveTimer !== null) {\n            clearTimeout(this.#leaveTimer);\n            this.#leaveTimer = null;\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-action-bar-holder\">\n    @if (shown()) {\n        <rt-action-bar\n            rtElem=\"bar\"\n            qa-dataid=\"action-bar-holder-bar\"\n            [rtMod]=\"{ leaving: leaving() }\"\n            [config]=\"config()\"\n            [closeIcon]=\"closeIcon()\"\n            (closed)=\"onClosed()\" />\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["BEM_BLOCK"],"mappings":"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"}