@rt-tools/ui-kit-v2 0.34.3 → 0.34.5

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

@@ -135,6 +135,8 @@ var RtActionBarComponent = class RtActionBarComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-action-bar.mjs","names":["BEM_BLOCK"],"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"],"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"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-action-bar.mjs","names":["BEM_BLOCK"],"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"],"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"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { FocusTrapFactory } from "@angular/cdk/a11y";
 import { DOCUMENT } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Injectable, InjectionToken, Injector, RendererFactory2, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, Injector, RendererFactory2, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, contentChildren, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RtSpinnerComponent } from "@rt-tools/ui-kit-v2/spinner";
 import { Clipboard } from "@angular/cdk/clipboard";
-import { RT_KIT_LABELS, carryThemeScopeOfFocus, materialPresetClassesOfFocus, rtKitDefault, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { BreakpointsService, RT_KIT_LABELS, carryThemeScopeOfFocus, materialPresetClassesOfFocus, rtKitDefault, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
 import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
 import { Overlay } from "@angular/cdk/overlay";
 import { ComponentPortal } from "@angular/cdk/portal";
@@ -682,6 +682,8 @@ var RtAsideHeaderComponent = class RtAsideHeaderComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]
@@ -813,7 +815,43 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const BEM_BLOCK$1 = "rt-aside-footer";
+const PRIMARY_LOOK = {
+	appearance: "filled",
+	theme: "primary",
+	icon: null
+};
+function slotLook(host, dismissLook) {
+	if (host?.closest("[asideDismiss]")) return dismissLook;
+	if (host?.closest("[asidePrimary]")) return PRIMARY_LOOK;
+	return null;
+}
 var RtAsideFooterComponent = class RtAsideFooterComponent {
+	#phone;
+	#closeLabel;
+	constructor() {
+		this.#phone = inject(BreakpointsService).phone;
+		this.#closeLabel = rtKitLabel("uiClose");
+		this.buttons = contentChildren(RtButtonDirective, {
+			...ngDevMode ? { debugName: "buttons" } : /* istanbul ignore next */ {},
+			descendants: true
+		});
+		this.hosts = contentChildren(RtButtonDirective, {
+			...ngDevMode ? { debugName: "hosts" } : /* istanbul ignore next */ {},
+			descendants: true,
+			read: ElementRef
+		});
+		effect(() => {
+			const hosts = this.hosts();
+			const dismissLook = {
+				appearance: "outlined",
+				theme: "secondary",
+				...this.#phone() ? { label: this.#closeLabel() } : {}
+			};
+			this.buttons().forEach((button, index) => {
+				button.placeLook.set(slotLook(hosts[index]?.nativeElement, dismissLook));
+			});
+		});
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -826,15 +864,27 @@ var RtAsideFooterComponent = class RtAsideFooterComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "14.0.0",
+			minVersion: "17.2.0",
 			version: "22.2.2",
 			type: RtAsideFooterComponent,
 			isStandalone: true,
 			selector: "rt-aside-footer",
 			host: { classAttribute: "rt-aside-footer" },
+			queries: [{
+				propertyName: "buttons",
+				predicate: RtButtonDirective,
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "hosts",
+				predicate: RtButtonDirective,
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}],
 			ngImport: i0,
 			template: "<ng-container rtBlock=\"rt-aside-footer\">\n    <footer rtElem=\"content\" qa-dataid=\"aside-footer\">\n        <ng-content select=\"[asideDismiss]\" />\n        <ng-content select=\"[asidePrimary]\" />\n    </footer>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:wrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"],
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:nowrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: BlockDirective,
@@ -865,9 +915,27 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [BlockDirective, ElemDirective],
 			host: { class: BEM_BLOCK$1 },
 			template: "<ng-container rtBlock=\"rt-aside-footer\">\n    <footer rtElem=\"content\" qa-dataid=\"aside-footer\">\n        <ng-content select=\"[asideDismiss]\" />\n        <ng-content select=\"[asidePrimary]\" />\n    </footer>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:wrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"]
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:nowrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"]
 		}]
-	}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		buttons: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtButtonDirective), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		hosts: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtButtonDirective), {
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
 });
 var ERtAsideCloseIntent;
 (function(ERtAsideCloseIntent) {
@@ -920,8 +988,8 @@ var RtAsideUnsavedDialogComponent = class RtAsideUnsavedDialogComponent {
 			selector: "rt-aside-unsaved-dialog",
 			host: { classAttribute: "rt-aside-unsaved-dialog" },
 			ngImport: i0,
-			template: "<rt-dialog width=\"440px\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"text\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--rt-space-sm)}}\n"],
+			template: "<rt-dialog size=\"md\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:var(--rt-space-sm)}@media(width<=480px){.rt-aside-unsaved-dialog__footer{flex-direction:column;align-items:stretch}}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -986,8 +1054,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ElemDirective
 			],
 			host: { class: BEM_BLOCK },
-			template: "<rt-dialog width=\"440px\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"text\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--rt-space-sm)}}\n"]
+			template: "<rt-dialog size=\"md\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:var(--rt-space-sm)}@media(width<=480px){.rt-aside-unsaved-dialog__footer{flex-direction:column;align-items:stretch}}}\n"]
 		}]
 	}]
 });