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

package/README.md

@@ -226,8 +226,9 @@ export const appConfig: ApplicationConfig = {
 переживает перезагрузку), `RtThemeScopeDirective` (метка `rtTheme`: своя тема у узла),
 `BreakpointsService` (сигналы совпадения по ширине), `NotificationBus` (шина тостов).
 
-**Умолчания кита** — `provideRtKit`: приложение одной раздачей задаёт тему старта и вид кнопки и
-шторы. Раздача необязательна, а вход, написанный в разметке, её перебивает.
+**Умолчания кита** — `provideRtKit`: приложение одной раздачей задаёт тему старта, вид кнопки,
+шторы, таблицы, списка и полей выбора. Раздача необязательна, а вход, написанный в разметке, её
+перебивает.
 
 **Подписи** — 131 ключ: кнопки диалогов, тексты ошибок поля, расшифровки иконок для
 скринридера. Своего языка у кита нет и быть не может — его знает приложение.

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

@@ -56,7 +56,7 @@ class RtAccordionComponent {
     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", "size", "color", "fill", "spin", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                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,

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

@@ -1 +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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"}
+{"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":";;;;;AAAA;;;;AAIG;AACG,SAAU,mBAAmB,CAAC,IAAyB,EAAE,KAAa,EAAA;AACxE,IAAA,MAAM,IAAI,GAAgB,IAAI,GAAG,CAAC,IAAI,CAAC;AAEvC,IAAA,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACtB;SAAO;AACH,QAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IACnB;AAEA,IAAA,OAAO,IAAI;AACf;AAEA;AACM,SAAU,oBAAoB,CAAC,SAAwB,EAAE,KAAa,EAAA;AACxE,IAAA,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,GAAG,CAAC,IAAI,SAAS,IAAI,KAAK,EAAE;QAC3D,OAAO,IAAI,GAAG,EAAE;IACpB;AAEA,IAAA,OAAO,IAAI,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;AAC/B;;AChBA,MAAM,SAAS,GAAW,cAAc;AAExC,IAAI,eAAe,GAAW,CAAC;AAE/B,SAAS,eAAe,GAAA;IACpB,eAAe,IAAI,CAAC;AACpB,IAAA,OAAO,eAAe;AAC1B;AAEA;;;;AAIG;MAkBU,oBAAoB,CAAA;AAjBjC,IAAA,WAAA,GAAA;;AAmBuB,QAAA,IAAA,CAAA,MAAM,GAAW,CAAA,aAAA,EAAgB,eAAe,EAAE,EAAE;;AAGpD,QAAA,IAAA,CAAA,IAAI,GAAwC,YAAY,CAAsB,MAC7F,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC;iFAC9D;QAEe,IAAA,CAAA,KAAK,GAA8C,KAAK,CAAC,QAAQ;kFAAgC;;QAGjG,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAgB,CAAC;sFAAC;AAKlF,IAAA;AAHa,IAAA,MAAM,CAAC,KAAa,EAAA;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAyB,KAA0B,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1G;8GAhBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,yXCvCjC,uuCA4BA,EAAA,MAAA,EAAA,CAAA,yuCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADEQ,gBAAA,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,oDACZ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMV,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAjBhC,SAAS;+BACI,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;wBACb,YAAY;wBACZ,eAAe;qBAClB,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,uuCAAA,EAAA,MAAA,EAAA,CAAA,yuCAAA,CAAA,EAAA;;;AErCL;;AAEG;;;;"}

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

@@ -41,12 +41,15 @@ class RtActionBarComponent {
          */
         this.actions = computed(() => this.config().actions.map((action) => ({
             action,
-            modifiers: { danger: action.look === 'danger', withIcon: !!action.icon },
-            ariaLabel: action.icon ? action.label : null,
+            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();
     }
@@ -61,7 +64,7 @@ class RtActionBarComponent {
         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 } }, 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        icon=\"close\"\n        size=\"sm\"\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) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon\" />\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                    [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: var(--rt-radius-lg);--rt-action-bar-shadow: var(--rt-shadow-card);--rt-action-bar-bg: var(--rt-color-bg-inverse);--rt-action-bar-color: var(--rt-color-text-inverse);--rt-action-bar-padding: var(--rt-space-2) var(--rt-space-4);--rt-action-bar-gap: var(--rt-space-4);--rt-action-bar-font-size: var(--rt-text-sm);--rt-action-bar-counter-weight: var(--rt-font-weight-medium);--rt-action-bar-action-radius: var(--rt-radius-md);--rt-action-bar-action-padding-block: var(--rt-space-1);--rt-action-bar-action-padding-inline: var(--rt-space-2);--rt-action-bar-action-weight: var(--rt-font-weight-medium);--rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-action-bar-color) 16%, transparent);--rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);--rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);display:flex;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-padding);border-radius:var(--rt-action-bar-radius);background:var(--rt-action-bar-bg);box-shadow:var(--rt-action-bar-shadow);color:var(--rt-action-bar-color);font-size:var(--rt-action-bar-font-size);gap:var(--rt-action-bar-gap)}.rt-action-bar__counter{font-weight:var(--rt-action-bar-counter-weight);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;align-items:center;padding:var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);border:0;border-radius:var(--rt-action-bar-action-radius);background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--rt-action-bar-action-weight);gap:var(--rt-space-2)}.rt-action-bar__action:hover{background:var(--rt-action-bar-action-bg-hover)}.rt-action-bar__action:focus-visible{box-shadow:var(--rt-action-bar-action-focus-shadow);outline:none}.rt-action-bar__action--danger{color:var(--rt-action-bar-action-color-danger)}.rt-action-bar__action-icon{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);--rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);flex:none;margin-left:auto}.rt-action-bar__menu{--rt-action-bar-menu-radius-default: var(--rt-radius-md);--rt-action-bar-menu-shadow-default: var(--rt-shadow-card);display:flex;flex-direction:column;padding:var(--rt-space-2);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))}@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", "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 }); }
+    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,
@@ -77,8 +80,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], 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        icon=\"close\"\n        size=\"sm\"\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) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon\" />\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                    [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: var(--rt-radius-lg);--rt-action-bar-shadow: var(--rt-shadow-card);--rt-action-bar-bg: var(--rt-color-bg-inverse);--rt-action-bar-color: var(--rt-color-text-inverse);--rt-action-bar-padding: var(--rt-space-2) var(--rt-space-4);--rt-action-bar-gap: var(--rt-space-4);--rt-action-bar-font-size: var(--rt-text-sm);--rt-action-bar-counter-weight: var(--rt-font-weight-medium);--rt-action-bar-action-radius: var(--rt-radius-md);--rt-action-bar-action-padding-block: var(--rt-space-1);--rt-action-bar-action-padding-inline: var(--rt-space-2);--rt-action-bar-action-weight: var(--rt-font-weight-medium);--rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-action-bar-color) 16%, transparent);--rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);--rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);display:flex;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-action-bar-padding);border-radius:var(--rt-action-bar-radius);background:var(--rt-action-bar-bg);box-shadow:var(--rt-action-bar-shadow);color:var(--rt-action-bar-color);font-size:var(--rt-action-bar-font-size);gap:var(--rt-action-bar-gap)}.rt-action-bar__counter{font-weight:var(--rt-action-bar-counter-weight);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;align-items:center;padding:var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);border:0;border-radius:var(--rt-action-bar-action-radius);background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--rt-action-bar-action-weight);gap:var(--rt-space-2)}.rt-action-bar__action:hover{background:var(--rt-action-bar-action-bg-hover)}.rt-action-bar__action:focus-visible{box-shadow:var(--rt-action-bar-action-focus-shadow);outline:none}.rt-action-bar__action--danger{color:var(--rt-action-bar-action-color-danger)}.rt-action-bar__action-icon{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);--rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);flex:none;margin-left:auto}.rt-action-bar__menu{--rt-action-bar-menu-radius-default: var(--rt-radius-md);--rt-action-bar-menu-shadow-default: var(--rt-shadow-card);display:flex;flex-direction:column;padding:var(--rt-space-2);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))}@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 }] }], actionRun: [{ type: i0.Output, args: ["actionRun"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+                    }, 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"] }] } });
 
 /**
  * Сколько полоса держится в разметке после закрытия — ровно длительность ухода
@@ -174,6 +177,9 @@ class RtActionBarHolderComponent {
         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(() => {
@@ -210,14 +216,14 @@ class RtActionBarHolderComponent {
         }
     }
     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", 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            (closed)=\"onClosed()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar-holder{--rt-action-bar-holder-bottom: var(--rt-space-6);--rt-action-bar-holder-inline: var(--rt-space-4);--rt-action-bar-holder-enter-duration: .3s;--rt-action-bar-holder-leave-duration: .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-bottom);pointer-events:none}.rt-action-bar-holder__bar{max-width:100%;animation:rt-action-bar-enter var(--rt-action-bar-holder-enter-duration);pointer-events:auto}.rt-action-bar-holder__bar--leaving{animation:rt-action-bar-leave var(--rt-action-bar-holder-leave-duration) 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"], 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 }); }
+    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            (closed)=\"onClosed()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-action-bar-holder{--rt-action-bar-holder-bottom: var(--rt-space-6);--rt-action-bar-holder-inline: var(--rt-space-4);--rt-action-bar-holder-enter-duration: .3s;--rt-action-bar-holder-leave-duration: .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-bottom);pointer-events:none}.rt-action-bar-holder__bar{max-width:100%;animation:rt-action-bar-enter var(--rt-action-bar-holder-enter-duration);pointer-events:auto}.rt-action-bar-holder__bar--leaving{animation:rt-action-bar-leave var(--rt-action-bar-holder-leave-duration) 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: () => [] });
+                    }, 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.

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

@@ -1 +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 { 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 },\n            ariaLabel: action.icon ? action.label : null,\n        }))\n    );\n\n    public readonly config: InputSignal<IRtActionBar.Config> = input.required<IRtActionBar.Config>();\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        icon=\"close\"\n        size=\"sm\"\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) {\n            <rt-icon rtElem=\"action-icon\" size=\"sm\" [name]=\"action.icon\" />\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                    [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        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    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n    computed,\n    effect,\n    inject,\n    signal,\n    untracked,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/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    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            (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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"}
+{"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":";;;;;;;;;;;;AAwBA,MAAMA,WAAS,GAAW,eAAe;AAazC;;;;;;;;;;;;AAYG;MAuBU,oBAAoB,CAAA;AAtBjC,IAAA,WAAA,GAAA;;AAwBa,QAAA,IAAA,CAAA,YAAY,GAA8B,QAAQ,CAAC,OAA0B;AAClF,YAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK;SAC7B,CAAC;yFAAC;QAEgB,IAAA,CAAA,SAAS,GAAmB,UAAU,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC;AAEzE,QAAA,IAAA,CAAA,UAAU,GAAmB,UAAU,CAAC,SAAS,CAAC;AAErE;;;;AAIG;QACgB,IAAA,CAAA,OAAO,GAAmC,QAAQ,CAAC,MAClE,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAA2B,MAAmB;YACrE,MAAM;YACN,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;AAC1F,YAAA,SAAS,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,IAAI;AAC/D,SAAA,CAAC,CAAC;oFACN;QAEe,IAAA,CAAA,MAAM,GAAqC,KAAK,CAAC,QAAQ;mFAAuB;;QAEhF,IAAA,CAAA,SAAS,GAA8B,KAAK,CAAe,OAAO;sFAAC;QAEnE,IAAA,CAAA,SAAS,GAA0C,MAAM,EAAuB;QAEhF,IAAA,CAAA,MAAM,GAA2B,MAAM,EAAQ;AAWlE,IAAA;;AAvCY,IAAA,YAAY;AA8BX,IAAA,QAAQ,CAAC,MAA2B,EAAA;AAC1C,QAAA,MAAM,CAAC,GAAG,IAAI;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACtB;IAEU,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACtB;8GAxCS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,6iBCxEjC,2jLA4EA,EAAA,MAAA,EAAA,CAAA,y6MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnBQ,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACrB,mBAAmB,uQACnB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAQP,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAtBhC,SAAS;+BACI,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;wBACL,gBAAgB;wBAChB,eAAe;wBACf,qBAAqB;wBACrB,mBAAmB;wBACnB,kBAAkB;wBAClB,cAAc;wBACd,aAAa;wBACb,YAAY;AACf,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAEA,WAAS;AAChB,wBAAA,IAAI,EAAE,SAAS;AAClB,qBAAA,EAAA,QAAA,EAAA,2jLAAA,EAAA,MAAA,EAAA,CAAA,y6MAAA,CAAA,EAAA;;;AE3BL;;;;;;;AAOG;AACI,MAAM,sBAAsB,GAAW;;AC/C9C,MAAM,YAAY,GAAwB,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;AAEhF;;;;;;;AAOG;MAEU,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;QAEa,IAAA,CAAA,OAAO,GAAwC,MAAM,CAAsB,YAAY;oFAAC;AAEjF,QAAA,IAAA,CAAA,MAAM,GAAgC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAgBlF,IAAA;AAlBY,IAAA,OAAO;;AAKT,IAAA,UAAU,CAAC,OAAuC,EAAA;AACrD,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAA2B,MAA2B,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;IACvG;;IAGO,SAAS,CAAC,QAAgB,EAAE,KAAa,EAAA;QAC5C,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAA2B,MAA2B,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/G;;IAGO,cAAc,GAAA;QACjB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAA2B,MAA2B,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACrH;8GAlBS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;kHAAlB,kBAAkB,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B;;;ACUD,MAAM,SAAS,GAAW,sBAAsB;AAEhD;;;;;;;;;;;;AAYG;MAYU,0BAA0B,CAAA;AAC1B,IAAA,QAAQ;AACR,IAAA,WAAW;;AAGX,IAAA,QAAQ;AAEjB,IAAA,WAAW;AAEX;;;;;AAKG;AACH,IAAA,UAAU;AAeV,IAAA,WAAA,GAAA;AA7BS,QAAA,IAAA,CAAA,QAAQ,GAAuB,MAAM,CAAC,kBAAkB,CAAC;AACzD,QAAA,IAAA,CAAA,WAAW,GAAe,MAAM,CAAC,UAAU,CAAC;;QAG5C,IAAA,CAAA,QAAQ,GAA4B,MAAM,CAAU,KAAK;qFAAC;QAEnE,IAAA,CAAA,WAAW,GAAyC,IAAI;AAExD;;;;;AAKG;QACH,IAAA,CAAA,UAAU,GAAY,KAAK;AAER,QAAA,IAAA,CAAA,MAAM,GAAgC,IAAI,CAAC,QAAQ,CAAC,MAAM;;AAG1D,QAAA,IAAA,CAAA,MAAM,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,GAAG,CAAC;mFAAC;;AAG7E,QAAA,IAAA,CAAA,KAAK,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;kFAAC;AAElF,QAAA,IAAA,CAAA,OAAO,GAAoB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;QAGxD,IAAA,CAAA,SAAS,GAA8B,KAAK,CAAe,OAAO;sFAAC;QAG/E,MAAM,CAAC,MAAW;AACd,YAAA,MAAM,MAAM,GAAY,IAAI,CAAC,MAAM,EAAE;YAErC,SAAS,CAAC,MAAW;gBACjB,IAAI,CAAC,gBAAgB,EAAE;gBAEvB,IAAI,MAAM,EAAE;AACR,oBAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,oBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;oBAExB;gBACJ;AAEA,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,oBAAA,IAAI,CAAC,UAAU,GAAG,KAAK;oBACvB,IAAI,CAAC,aAAa,EAAE;gBACxB;AACJ,YAAA,CAAC,CAAC;AACN,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAY,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACnE;;IAGU,QAAQ,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE;IAClC;;IAGA,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAW;AACrC,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QAC3B,CAAC,EAAE,sBAAsB,CAAC;IAC9B;IAEA,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;AAC3B,YAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QAC3B;IACJ;8GAzES,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClDvC,yWAWA,EAAA,MAAA,EAAA,CAAA,0uCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDkCc,oBAAoB,6HAAE,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAKlE,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAXtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,mBAGf,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,oBAAoB,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,CAAC,EAAA,IAAA,EACtE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,yWAAA,EAAA,MAAA,EAAA,CAAA,0uCAAA,CAAA,EAAA;;;AEhDL;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs

@@ -0,0 +1,97 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
+import { RtTimelineComponent } from '@rt-tools/ui-kit-v2/timeline';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+
+const BEM_BLOCK = 'rt-ai-run-status';
+/** Значок и его цвет по состоянию; у `running` значка нет — на его месте крутилка. */
+const MARKS = {
+    done: { name: 'check-circle', color: 'success' },
+    stopped: { name: 'times-circle', color: 'muted' },
+    failed: { name: 'exclamation-circle', color: 'danger' },
+};
+let runStatusIdSeed = 0;
+function nextRunStatusId() {
+    runStatusIdSeed += 1;
+    return runStatusIdSeed;
+}
+/**
+ * Строка хода работы ИИ-ассистента: значок состояния, подпись текущего шага или итога, мета
+ * (время, число шагов) и раскрытие списка пройденных шагов. Пока модель работает, по подписи
+ * бежит блик; при `prefers-reduced-motion` подпись стоит ровным цветом.
+ *
+ * Компонент презентационный: состояние, подпись и шаги приходят готовыми, разбор потока
+ * событий модели остаётся в приложении.
+ */
+class RtAiRunStatusComponent {
+    constructor() {
+        this.#t_aiShowSteps = rtKitLabel('aiShowSteps');
+        this.#t_aiHideSteps = rtKitLabel('aiHideSteps');
+        this.stepsId = `rt-ai-run-status-steps-${nextRunStatusId()}`;
+        this.hasSteps = computed(() => this.steps().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSteps" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.hasSteps() && this.expanded(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.mark = computed(() => {
+            const state = this.state();
+            return state === 'running' ? null : MARKS[state];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+        this.toggleLabel = computed(() => this.isOpen() ? this.#t_aiHideSteps() : this.#t_aiShowSteps(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+        this.state = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        /** Подпись: текущий шаг, пока модель работает, или итог — «Worked for 31s». */
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Вторичная строка справа от подписи: время шага или число шагов. Пусто — не рисуется. */
+        this.meta = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+        /** Пройденные шаги. Пустой список — строку нельзя раскрыть. */
+        this.steps = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        /** Раскрыт ли список шагов. */
+        this.expanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    }
+    #t_aiShowSteps;
+    #t_aiHideSteps;
+    onToggle() {
+        this.expanded.set(!this.expanded());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAiRunStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtAiRunStatusComponent, isStandalone: true, selector: "rt-ai-run-status", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "rt-ai-run-status" }, ngImport: i0, template: "<div rtBlock=\"rt-ai-run-status\" qa-dataid=\"ai-run-status\" [attr.data-state]=\"state()\" [rtMod]=\"{ state: state(), open: isOpen() }\">\n    <ng-template #head>\n        <span rtElem=\"mark\" aria-hidden=\"true\">\n            @if (mark(); as m) {\n                <rt-icon size=\"sm\" [name]=\"m.name\" [color]=\"m.color\" />\n            } @else {\n                <rt-spinner appearance=\"arc\" [diameter]=\"16\" />\n            }\n        </span>\n        <span rtElem=\"label\" qa-dataid=\"ai-run-status-label\" [rtMod]=\"{ state: state() }\">{{ label() }}</span>\n        @if (meta()) {\n            <span rtElem=\"meta\" qa-dataid=\"ai-run-status-meta\">{{ meta() }}</span>\n        }\n    </ng-template>\n\n    @if (hasSteps()) {\n        <button\n            rtElem=\"row\"\n            type=\"button\"\n            qa-dataid=\"ai-run-status-toggle\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-controls]=\"stepsId\"\n            [rtTooltip]=\"toggleLabel()\"\n            (click)=\"onToggle()\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n            <rt-icon rtElem=\"chevron\" size=\"sm\" color=\"muted\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </button>\n    } @else {\n        <div rtElem=\"row\" role=\"status\" qa-dataid=\"ai-run-status-row\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n        </div>\n    }\n\n    @if (isOpen()) {\n        <rt-timeline rtElem=\"steps\" qa-dataid=\"ai-run-status-steps\" [id]=\"stepsId\" [steps]=\"steps()\" />\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-ai-run-status{display:block}rt-ai-run-status .rt-ai-run-status{--rt-ai-run-status-radius: var(--rt-radius-sm);--rt-ai-run-status-focus-shadow: var(--rt-shadow-focus-ring);--rt-ai-run-status-shimmer-duration: var(--rt-duration-slower);--rt-ai-run-status-shimmer-from: var(--rt-color-text-muted);--rt-ai-run-status-shimmer-to: var(--rt-color-action-primary-on-surface);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}rt-ai-run-status .rt-ai-run-status__row{display:inline-flex;align-items:center;align-self:flex-start;padding:var(--rt-space-2xs) 0;border:0;border-radius:var(--rt-ai-run-status-radius);margin:0;background:transparent;color:inherit;font:inherit;gap:var(--rt-space-sm);text-align:start}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row{cursor:pointer}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row:focus-visible{box-shadow:var(--rt-ai-run-status-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row:hover .rt-ai-run-status__chevron{color:var(--rt-color-text-primary)}rt-ai-run-status .rt-ai-run-status__mark{display:inline-flex;flex:none;align-items:center;justify-content:center;block-size:16px;inline-size:16px}rt-ai-run-status .rt-ai-run-status__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-ai-run-status .rt-ai-run-status__label--state--running{animation:rt-ai-run-status-shimmer var(--rt-ai-run-status-shimmer-duration) linear infinite;background:linear-gradient(90deg,var(--rt-ai-run-status-shimmer-from) 0%,var(--rt-ai-run-status-shimmer-to) 50%,var(--rt-ai-run-status-shimmer-from) 100%);background-clip:text;background-size:200% 100%;color:transparent}rt-ai-run-status .rt-ai-run-status__label--state--stopped{color:var(--rt-color-text-muted)}rt-ai-run-status .rt-ai-run-status__label--state--failed{color:var(--rt-color-action-danger-on-surface)}rt-ai-run-status .rt-ai-run-status__meta{flex:none;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}rt-ai-run-status .rt-ai-run-status__chevron{flex:none;color:var(--rt-color-text-muted)}rt-ai-run-status .rt-ai-run-status__steps{padding-inline-start:var(--rt-space-2xs)}@keyframes rt-ai-run-status-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.rt-ai-run-status__label--state--running{animation:none;background:none;color:var(--rt-ai-run-status-shimmer-from)}}}\n"], dependencies: [{ kind: "directive", type: 
+                // angular
+                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { kind: "component", type: RtTimelineComponent, selector: "rt-timeline", inputs: ["steps"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAiRunStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-ai-run-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // angular
+                        NgTemplateOutlet,
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        RtIconComponent,
+                        RtSpinnerComponent,
+                        RtTimelineComponent,
+                        RtTooltipDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<div rtBlock=\"rt-ai-run-status\" qa-dataid=\"ai-run-status\" [attr.data-state]=\"state()\" [rtMod]=\"{ state: state(), open: isOpen() }\">\n    <ng-template #head>\n        <span rtElem=\"mark\" aria-hidden=\"true\">\n            @if (mark(); as m) {\n                <rt-icon size=\"sm\" [name]=\"m.name\" [color]=\"m.color\" />\n            } @else {\n                <rt-spinner appearance=\"arc\" [diameter]=\"16\" />\n            }\n        </span>\n        <span rtElem=\"label\" qa-dataid=\"ai-run-status-label\" [rtMod]=\"{ state: state() }\">{{ label() }}</span>\n        @if (meta()) {\n            <span rtElem=\"meta\" qa-dataid=\"ai-run-status-meta\">{{ meta() }}</span>\n        }\n    </ng-template>\n\n    @if (hasSteps()) {\n        <button\n            rtElem=\"row\"\n            type=\"button\"\n            qa-dataid=\"ai-run-status-toggle\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-controls]=\"stepsId\"\n            [rtTooltip]=\"toggleLabel()\"\n            (click)=\"onToggle()\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n            <rt-icon rtElem=\"chevron\" size=\"sm\" color=\"muted\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </button>\n    } @else {\n        <div rtElem=\"row\" role=\"status\" qa-dataid=\"ai-run-status-row\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n        </div>\n    }\n\n    @if (isOpen()) {\n        <rt-timeline rtElem=\"steps\" qa-dataid=\"ai-run-status-steps\" [id]=\"stepsId\" [steps]=\"steps()\" />\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-ai-run-status{display:block}rt-ai-run-status .rt-ai-run-status{--rt-ai-run-status-radius: var(--rt-radius-sm);--rt-ai-run-status-focus-shadow: var(--rt-shadow-focus-ring);--rt-ai-run-status-shimmer-duration: var(--rt-duration-slower);--rt-ai-run-status-shimmer-from: var(--rt-color-text-muted);--rt-ai-run-status-shimmer-to: var(--rt-color-action-primary-on-surface);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}rt-ai-run-status .rt-ai-run-status__row{display:inline-flex;align-items:center;align-self:flex-start;padding:var(--rt-space-2xs) 0;border:0;border-radius:var(--rt-ai-run-status-radius);margin:0;background:transparent;color:inherit;font:inherit;gap:var(--rt-space-sm);text-align:start}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row{cursor:pointer}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row:focus-visible{box-shadow:var(--rt-ai-run-status-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-ai-run-status .rt-ai-run-status button.rt-ai-run-status__row:hover .rt-ai-run-status__chevron{color:var(--rt-color-text-primary)}rt-ai-run-status .rt-ai-run-status__mark{display:inline-flex;flex:none;align-items:center;justify-content:center;block-size:16px;inline-size:16px}rt-ai-run-status .rt-ai-run-status__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-ai-run-status .rt-ai-run-status__label--state--running{animation:rt-ai-run-status-shimmer var(--rt-ai-run-status-shimmer-duration) linear infinite;background:linear-gradient(90deg,var(--rt-ai-run-status-shimmer-from) 0%,var(--rt-ai-run-status-shimmer-to) 50%,var(--rt-ai-run-status-shimmer-from) 100%);background-clip:text;background-size:200% 100%;color:transparent}rt-ai-run-status .rt-ai-run-status__label--state--stopped{color:var(--rt-color-text-muted)}rt-ai-run-status .rt-ai-run-status__label--state--failed{color:var(--rt-color-action-danger-on-surface)}rt-ai-run-status .rt-ai-run-status__meta{flex:none;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}rt-ai-run-status .rt-ai-run-status__chevron{flex:none;color:var(--rt-color-text-muted)}rt-ai-run-status .rt-ai-run-status__steps{padding-inline-start:var(--rt-space-2xs)}@keyframes rt-ai-run-status-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.rt-ai-run-status__label--state--running{animation:none;background:none;color:var(--rt-ai-run-status-shimmer-from)}}}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtAiRunStatusComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-ai-run-status.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-ai-run-status.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/ai-run-status/rt-ai-run-status.component.ts","../../../projects/ui-kit-v2/src/lib/components/ai-run-status/rt-ai-run-status.component.html","../../../projects/ui-kit-v2/src/lib/components/ai-run-status/rt-tools-ui-kit-v2-ai-run-status.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    model,\n    ModelSignal,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { IRtIcon, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';\nimport { IRtTimeline, RtTimelineComponent } from '@rt-tools/ui-kit-v2/timeline';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\n\nimport { IRtAiRunStatus } from './rt-ai-run-status.model';\n\nconst BEM_BLOCK: string = 'rt-ai-run-status';\n\n/** Значок и его цвет по состоянию; у `running` значка нет — на его месте крутилка. */\nconst MARKS: Readonly<Record<Exclude<IRtAiRunStatus.State, 'running'>, { name: IRtIcon.Name; color: IRtIcon.Color }>> = {\n    done: { name: 'check-circle', color: 'success' },\n    stopped: { name: 'times-circle', color: 'muted' },\n    failed: { name: 'exclamation-circle', color: 'danger' },\n};\n\nlet runStatusIdSeed: number = 0;\n\nfunction nextRunStatusId(): number {\n    runStatusIdSeed += 1;\n    return runStatusIdSeed;\n}\n\n/**\n * Строка хода работы ИИ-ассистента: значок состояния, подпись текущего шага или итога, мета\n * (время, число шагов) и раскрытие списка пройденных шагов. Пока модель работает, по подписи\n * бежит блик; при `prefers-reduced-motion` подпись стоит ровным цветом.\n *\n * Компонент презентационный: состояние, подпись и шаги приходят готовыми, разбор потока\n * событий модели остаётся в приложении.\n */\n@Component({\n    selector: 'rt-ai-run-status',\n    templateUrl: './rt-ai-run-status.component.html',\n    styleUrl: './rt-ai-run-status.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        RtIconComponent,\n        RtSpinnerComponent,\n        RtTimelineComponent,\n        RtTooltipDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtAiRunStatusComponent {\n    readonly #t_aiShowSteps: Signal<string> = rtKitLabel('aiShowSteps');\n    readonly #t_aiHideSteps: Signal<string> = rtKitLabel('aiHideSteps');\n\n    protected readonly stepsId: string = `rt-ai-run-status-steps-${nextRunStatusId()}`;\n\n    protected readonly hasSteps: Signal<boolean> = computed((): boolean => this.steps().length > 0);\n\n    protected readonly isOpen: Signal<boolean> = computed((): boolean => this.hasSteps() && this.expanded());\n\n    protected readonly mark: Signal<{ name: IRtIcon.Name; color: IRtIcon.Color } | null> = computed(\n        (): { name: IRtIcon.Name; color: IRtIcon.Color } | null => {\n            const state: IRtAiRunStatus.State = this.state();\n            return state === 'running' ? null : MARKS[state];\n        }\n    );\n\n    protected readonly toggleLabel: Signal<string> = computed((): string =>\n        this.isOpen() ? this.#t_aiHideSteps() : this.#t_aiShowSteps()\n    );\n\n    public readonly state: InputSignal<IRtAiRunStatus.State> = input.required<IRtAiRunStatus.State>();\n\n    /** Подпись: текущий шаг, пока модель работает, или итог — «Worked for 31s». */\n    public readonly label: InputSignal<string> = input.required<string>();\n\n    /** Вторичная строка справа от подписи: время шага или число шагов. Пусто — не рисуется. */\n    public readonly meta: InputSignal<string> = input<string>('');\n\n    /** Пройденные шаги. Пустой список — строку нельзя раскрыть. */\n    public readonly steps: InputSignal<readonly IRtTimeline.Step[]> = input<readonly IRtTimeline.Step[]>([]);\n\n    /** Раскрыт ли список шагов. */\n    public readonly expanded: ModelSignal<boolean> = model<boolean>(false);\n\n    protected onToggle(): void {\n        this.expanded.set(!this.expanded());\n    }\n}\n","<div rtBlock=\"rt-ai-run-status\" qa-dataid=\"ai-run-status\" [attr.data-state]=\"state()\" [rtMod]=\"{ state: state(), open: isOpen() }\">\n    <ng-template #head>\n        <span rtElem=\"mark\" aria-hidden=\"true\">\n            @if (mark(); as m) {\n                <rt-icon size=\"sm\" [name]=\"m.name\" [color]=\"m.color\" />\n            } @else {\n                <rt-spinner appearance=\"arc\" [diameter]=\"16\" />\n            }\n        </span>\n        <span rtElem=\"label\" qa-dataid=\"ai-run-status-label\" [rtMod]=\"{ state: state() }\">{{ label() }}</span>\n        @if (meta()) {\n            <span rtElem=\"meta\" qa-dataid=\"ai-run-status-meta\">{{ meta() }}</span>\n        }\n    </ng-template>\n\n    @if (hasSteps()) {\n        <button\n            rtElem=\"row\"\n            type=\"button\"\n            qa-dataid=\"ai-run-status-toggle\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-controls]=\"stepsId\"\n            [rtTooltip]=\"toggleLabel()\"\n            (click)=\"onToggle()\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n            <rt-icon rtElem=\"chevron\" size=\"sm\" color=\"muted\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </button>\n    } @else {\n        <div rtElem=\"row\" role=\"status\" qa-dataid=\"ai-run-status-row\">\n            <ng-container [ngTemplateOutlet]=\"head\" />\n        </div>\n    }\n\n    @if (isOpen()) {\n        <rt-timeline rtElem=\"steps\" qa-dataid=\"ai-run-status-steps\" [id]=\"stepsId\" [steps]=\"steps()\" />\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,MAAM,SAAS,GAAW,kBAAkB;AAE5C;AACA,MAAM,KAAK,GAA6G;IACpH,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;IAChD,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE;IACjD,MAAM,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,QAAQ,EAAE;CAC1D;AAED,IAAI,eAAe,GAAW,CAAC;AAE/B,SAAS,eAAe,GAAA;IACpB,eAAe,IAAI,CAAC;AACpB,IAAA,OAAO,eAAe;AAC1B;AAEA;;;;;;;AAOG;MAwBU,sBAAsB,CAAA;AAvBnC,IAAA,WAAA,GAAA;AAwBa,QAAA,IAAA,CAAA,cAAc,GAAmB,UAAU,CAAC,aAAa,CAAC;AAC1D,QAAA,IAAA,CAAA,cAAc,GAAmB,UAAU,CAAC,aAAa,CAAC;AAEhD,QAAA,IAAA,CAAA,OAAO,GAAW,CAAA,uBAAA,EAA0B,eAAe,EAAE,EAAE;AAE/D,QAAA,IAAA,CAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC;qFAAC;AAE5E,QAAA,IAAA,CAAA,MAAM,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;mFAAC;AAErF,QAAA,IAAA,CAAA,IAAI,GAAgE,QAAQ,CAC3F,MAA0D;AACtD,YAAA,MAAM,KAAK,GAAyB,IAAI,CAAC,KAAK,EAAE;AAChD,YAAA,OAAO,KAAK,KAAK,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;QACpD,CAAC;iFACJ;QAEkB,IAAA,CAAA,WAAW,GAAmB,QAAQ,CAAC,MACtD,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE;wFAChE;QAEe,IAAA,CAAA,KAAK,GAAsC,KAAK,CAAC,QAAQ;kFAAwB;;QAGjF,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAC,QAAQ;kFAAU;;QAGrD,IAAA,CAAA,IAAI,GAAwB,KAAK,CAAS,EAAE;iFAAC;;QAG7C,IAAA,CAAA,KAAK,GAA6C,KAAK,CAA8B,EAAE;kFAAC;;QAGxF,IAAA,CAAA,QAAQ,GAAyB,KAAK,CAAU,KAAK;qFAAC;AAKzE,IAAA;AArCY,IAAA,cAAc;AACd,IAAA,cAAc;IAiCb,QAAQ,GAAA;QACd,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IACvC;8GArCS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,2wBCtEnC,+hDAqCA,EAAA,MAAA,EAAA,CAAA,wgFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBDkBQ,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBAGhB,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,YAAA,EAAA,SAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,mBAAmB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,wBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMb,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;+BACI,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,gBAAgB;;wBAGhB,cAAc;wBACd,aAAa;wBACb,YAAY;wBACZ,eAAe;wBACf,kBAAkB;wBAClB,mBAAmB;wBACnB,kBAAkB;qBACrB,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,+hDAAA,EAAA,MAAA,EAAA,CAAA,wgFAAA,CAAA,EAAA;;;AEpEL;;AAEG;;;;"}