@rt-tools/ui-kit-v2 0.23.2 → 0.23.4

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

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