npm - @rt-tools/ui-kit-v2 - Versions diffs - 0.33.0 → 0.34.1 - Mend

@rt-tools/ui-kit-v2 0.33.0 → 0.34.1

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

Files changed (217) hide show

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

@@ -241,7 +241,7 @@ var RtSpeedMenuComponent = class RtSpeedMenuComponent {
 			}],
 			ngImport: i0,
 			template: "<ng-container rtBlock=\"rt-speed-menu\">\n    <!-- Панель висит на кнопке меню: по ней она встаёт и её нажатие не считает нажатием снаружи.\n         Открывает и закрывает её сама кнопка — триггер панели ручной. -->\n    <rt-icon-button\n        rtElem=\"trigger\"\n        qa-dataid=\"speed-menu-trigger\"\n        radius=\"full\"\n        rtPopoverTrigger=\"manual\"\n        rtPopoverPanelClass=\"rt-speed-menu-pane\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverPositions]=\"positions()\"\n        [glyph]=\"isOpen() ? 'close' : icon()\"\n        [ariaLabel]=\"triggerLabel()\"\n        [variant]=\"variant()\"\n        [size]=\"size()\"\n        [disabled]=\"disabled()\"\n        [expanded]=\"isOpen()\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\"\n        (clicked)=\"onTrigger($event)\" />\n\n    <ng-template #panelTpl>\n        <div\n            #panel\n            rtElem=\"panel\"\n            role=\"group\"\n            qa-dataid=\"speed-menu-panel\"\n            [rtMod]=\"direction()\"\n            [attr.aria-label]=\"triggerLabel()\"\n            (keydown)=\"onPanelKeydown($event)\">\n            @for (action of actions(); track action.value) {\n                <rt-icon-button\n                    rtElem=\"action\"\n                    qa-dataid=\"speed-menu-action\"\n                    radius=\"full\"\n                    variant=\"secondary\"\n                    [rtTooltip]=\"action.label\"\n                    [rtTooltipPlacement]=\"tooltipSide()\"\n                    [glyph]=\"action.icon\"\n                    [ariaLabel]=\"action.label\"\n                    [size]=\"actionSize()\"\n                    [disabled]=\"action.disabled ?? false\"\n                    [attr.data-value]=\"action.value\"\n                    (clicked)=\"onAction(action)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-speed-menu{--rt-speed-menu-shadow: var(--rt-shadow-md);display:inline-flex;vertical-align:middle}.rt-speed-menu__trigger .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-shadow)}.rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-space-sm);--rt-speed-menu-inset: var(--rt-speed-menu-gap);--rt-speed-menu-action-shadow: var(--rt-shadow-md);--rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);--rt-speed-menu-action-bg: var(--rt-color-bg-surface);--rt-speed-menu-action-color: var(--rt-color-text-primary);--rt-speed-menu-action-radius: var(--rt-radius-full);--rt-speed-menu-duration: var(--rt-duration-fast);--rt-speed-menu-stagger: var(--rt-duration-fast);display:flex;align-items:center;padding:var(--rt-speed-menu-inset);gap:var(--rt-speed-menu-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-size-4);--rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));--rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-neutral-25));--rt-speed-menu-action-color: var(--mat-sys-on-primary-container, var(--rt-color-text-primary));--rt-icon-step-md: var(--rt-size-6);--rt-speed-menu-action-shadow: var(--mat-sys-level3, var(--rt-mat-shadow-fab));--rt-speed-menu-action-shadow-hover: var(--mat-sys-level4, var(--rt-mat-shadow-fab-hover));--rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);--rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12)}.rt-speed-menu__panel--up,.rt-speed-menu__panel--down{flex-direction:column}.rt-speed-menu__panel--start,.rt-speed-menu__panel--end{flex-direction:row}.rt-speed-menu__action{--rt-speed-menu-step: 0;border-radius:var(--rt-speed-menu-action-radius);background-color:var(--rt-speed-menu-action-bg);opacity:1;transform:scale(1);transition:opacity var(--rt-speed-menu-duration) ease-out,transform var(--rt-speed-menu-duration) ease-out;transition-delay:calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger))}@starting-style{.rt-speed-menu__action{opacity:0;transform:scale(.5)}}.rt-speed-menu__action .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);color:var(--rt-speed-menu-action-color)}.rt-speed-menu__action .rt-icon-button:hover{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover)}:root[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-dark-20))}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(2),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(2){--rt-speed-menu-step: 1}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(3),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(3){--rt-speed-menu-step: 2}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(4),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(4){--rt-speed-menu-step: 3}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(5),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(5){--rt-speed-menu-step: 4}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(6),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(6){--rt-speed-menu-step: 5}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(7),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(7){--rt-speed-menu-step: 6}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(8),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(8){--rt-speed-menu-step: 7}@media(prefers-reduced-motion:reduce){.rt-speed-menu__action{transition:none}}}\n"],
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-speed-menu{--rt-speed-menu-shadow: var(--rt-shadow-md);display:inline-flex;vertical-align:middle}.rt-speed-menu__trigger .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-shadow)}.rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-space-sm);--rt-speed-menu-inset: var(--rt-speed-menu-gap);--rt-speed-menu-action-shadow: var(--rt-shadow-md);--rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);--rt-speed-menu-action-bg: var(--rt-color-bg-surface);--rt-speed-menu-action-color: var(--rt-color-text-primary);--rt-speed-menu-action-radius: var(--rt-radius-full);--rt-speed-menu-duration: var(--rt-duration-fast);--rt-speed-menu-stagger: var(--rt-duration-fast);display:flex;align-items:center;padding:var(--rt-speed-menu-inset);gap:var(--rt-speed-menu-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-size-4);--rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));--rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-neutral-25));--rt-speed-menu-action-color: var(--rt-sys-on-primary-container, var(--rt-color-text-primary));--rt-icon-step-md: var(--rt-size-6);--rt-speed-menu-action-shadow: var(--rt-sys-level3, var(--rt-mat-shadow-fab));--rt-speed-menu-action-shadow-hover: var(--rt-sys-level4, var(--rt-mat-shadow-fab-hover));--rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);--rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12)}.rt-speed-menu__panel--up,.rt-speed-menu__panel--down{flex-direction:column}.rt-speed-menu__panel--start,.rt-speed-menu__panel--end{flex-direction:row}.rt-speed-menu__action{--rt-speed-menu-step: 0;border-radius:var(--rt-speed-menu-action-radius);background-color:var(--rt-speed-menu-action-bg);opacity:1;transform:scale(1);transition:opacity var(--rt-speed-menu-duration) ease-out,transform var(--rt-speed-menu-duration) ease-out;transition-delay:calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger))}@starting-style{.rt-speed-menu__action{opacity:0;transform:scale(.5)}}.rt-speed-menu__action .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);color:var(--rt-speed-menu-action-color)}.rt-speed-menu__action .rt-icon-button:hover{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover)}:root[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-dark-20))}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(2),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(2){--rt-speed-menu-step: 1}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(3),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(3){--rt-speed-menu-step: 2}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(4),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(4){--rt-speed-menu-step: 3}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(5),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(5){--rt-speed-menu-step: 4}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(6),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(6){--rt-speed-menu-step: 5}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(7),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(7){--rt-speed-menu-step: 6}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(8),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(8){--rt-speed-menu-step: 7}@media(prefers-reduced-motion:reduce){.rt-speed-menu__action{transition:none}}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -312,6 +312,7 @@ var RtSpeedMenuComponent = class RtSpeedMenuComponent {
 					inputs: [
 						"rtTooltip",
 						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
 						"rtTooltipWhenTruncated",
 						"rtTooltipHideOnClick"
 					],
@@ -347,7 +348,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-speed-menu--open]": "isOpen()"
 			},
 			template: "<ng-container rtBlock=\"rt-speed-menu\">\n    <!-- Панель висит на кнопке меню: по ней она встаёт и её нажатие не считает нажатием снаружи.\n         Открывает и закрывает её сама кнопка — триггер панели ручной. -->\n    <rt-icon-button\n        rtElem=\"trigger\"\n        qa-dataid=\"speed-menu-trigger\"\n        radius=\"full\"\n        rtPopoverTrigger=\"manual\"\n        rtPopoverPanelClass=\"rt-speed-menu-pane\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverPositions]=\"positions()\"\n        [glyph]=\"isOpen() ? 'close' : icon()\"\n        [ariaLabel]=\"triggerLabel()\"\n        [variant]=\"variant()\"\n        [size]=\"size()\"\n        [disabled]=\"disabled()\"\n        [expanded]=\"isOpen()\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\"\n        (clicked)=\"onTrigger($event)\" />\n\n    <ng-template #panelTpl>\n        <div\n            #panel\n            rtElem=\"panel\"\n            role=\"group\"\n            qa-dataid=\"speed-menu-panel\"\n            [rtMod]=\"direction()\"\n            [attr.aria-label]=\"triggerLabel()\"\n            (keydown)=\"onPanelKeydown($event)\">\n            @for (action of actions(); track action.value) {\n                <rt-icon-button\n                    rtElem=\"action\"\n                    qa-dataid=\"speed-menu-action\"\n                    radius=\"full\"\n                    variant=\"secondary\"\n                    [rtTooltip]=\"action.label\"\n                    [rtTooltipPlacement]=\"tooltipSide()\"\n                    [glyph]=\"action.icon\"\n                    [ariaLabel]=\"action.label\"\n                    [size]=\"actionSize()\"\n                    [disabled]=\"action.disabled ?? false\"\n                    [attr.data-value]=\"action.value\"\n                    (clicked)=\"onAction(action)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-speed-menu{--rt-speed-menu-shadow: var(--rt-shadow-md);display:inline-flex;vertical-align:middle}.rt-speed-menu__trigger .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-shadow)}.rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-space-sm);--rt-speed-menu-inset: var(--rt-speed-menu-gap);--rt-speed-menu-action-shadow: var(--rt-shadow-md);--rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);--rt-speed-menu-action-bg: var(--rt-color-bg-surface);--rt-speed-menu-action-color: var(--rt-color-text-primary);--rt-speed-menu-action-radius: var(--rt-radius-full);--rt-speed-menu-duration: var(--rt-duration-fast);--rt-speed-menu-stagger: var(--rt-duration-fast);display:flex;align-items:center;padding:var(--rt-speed-menu-inset);gap:var(--rt-speed-menu-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-size-4);--rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));--rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-neutral-25));--rt-speed-menu-action-color: var(--mat-sys-on-primary-container, var(--rt-color-text-primary));--rt-icon-step-md: var(--rt-size-6);--rt-speed-menu-action-shadow: var(--mat-sys-level3, var(--rt-mat-shadow-fab));--rt-speed-menu-action-shadow-hover: var(--mat-sys-level4, var(--rt-mat-shadow-fab-hover));--rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);--rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12)}.rt-speed-menu__panel--up,.rt-speed-menu__panel--down{flex-direction:column}.rt-speed-menu__panel--start,.rt-speed-menu__panel--end{flex-direction:row}.rt-speed-menu__action{--rt-speed-menu-step: 0;border-radius:var(--rt-speed-menu-action-radius);background-color:var(--rt-speed-menu-action-bg);opacity:1;transform:scale(1);transition:opacity var(--rt-speed-menu-duration) ease-out,transform var(--rt-speed-menu-duration) ease-out;transition-delay:calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger))}@starting-style{.rt-speed-menu__action{opacity:0;transform:scale(.5)}}.rt-speed-menu__action .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);color:var(--rt-speed-menu-action-color)}.rt-speed-menu__action .rt-icon-button:hover{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover)}:root[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-dark-20))}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(2),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(2){--rt-speed-menu-step: 1}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(3),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(3){--rt-speed-menu-step: 2}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(4),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(4){--rt-speed-menu-step: 3}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(5),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(5){--rt-speed-menu-step: 4}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(6),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(6){--rt-speed-menu-step: 5}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(7),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(7){--rt-speed-menu-step: 6}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(8),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(8){--rt-speed-menu-step: 7}@media(prefers-reduced-motion:reduce){.rt-speed-menu__action{transition:none}}}\n"]
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-speed-menu{--rt-speed-menu-shadow: var(--rt-shadow-md);display:inline-flex;vertical-align:middle}.rt-speed-menu__trigger .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-shadow)}.rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-space-sm);--rt-speed-menu-inset: var(--rt-speed-menu-gap);--rt-speed-menu-action-shadow: var(--rt-shadow-md);--rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);--rt-speed-menu-action-bg: var(--rt-color-bg-surface);--rt-speed-menu-action-color: var(--rt-color-text-primary);--rt-speed-menu-action-radius: var(--rt-radius-full);--rt-speed-menu-duration: var(--rt-duration-fast);--rt-speed-menu-stagger: var(--rt-duration-fast);display:flex;align-items:center;padding:var(--rt-speed-menu-inset);gap:var(--rt-speed-menu-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-gap: var(--rt-size-4);--rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));--rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-neutral-25));--rt-speed-menu-action-color: var(--rt-sys-on-primary-container, var(--rt-color-text-primary));--rt-icon-step-md: var(--rt-size-6);--rt-speed-menu-action-shadow: var(--rt-sys-level3, var(--rt-mat-shadow-fab));--rt-speed-menu-action-shadow-hover: var(--rt-sys-level4, var(--rt-mat-shadow-fab-hover));--rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);--rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12)}.rt-speed-menu__panel--up,.rt-speed-menu__panel--down{flex-direction:column}.rt-speed-menu__panel--start,.rt-speed-menu__panel--end{flex-direction:row}.rt-speed-menu__action{--rt-speed-menu-step: 0;border-radius:var(--rt-speed-menu-action-radius);background-color:var(--rt-speed-menu-action-bg);opacity:1;transform:scale(1);transition:opacity var(--rt-speed-menu-duration) ease-out,transform var(--rt-speed-menu-duration) ease-out;transition-delay:calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger))}@starting-style{.rt-speed-menu__action{opacity:0;transform:scale(.5)}}.rt-speed-menu__action .rt-icon-button{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);color:var(--rt-speed-menu-action-color)}.rt-speed-menu__action .rt-icon-button:hover{--rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover)}:root[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-speed-menu__panel{--rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-dark-20))}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(2),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(2),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(2){--rt-speed-menu-step: 1}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(3),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(3),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(3){--rt-speed-menu-step: 2}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(4),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(4),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(4){--rt-speed-menu-step: 3}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(5),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(5),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(5){--rt-speed-menu-step: 4}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(6),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(6),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(6){--rt-speed-menu-step: 5}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(7),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(7),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(7){--rt-speed-menu-step: 6}.rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(8),.rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(8),.rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(8){--rt-speed-menu-step: 7}@media(prefers-reduced-motion:reduce){.rt-speed-menu__action{transition:none}}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"rt-tools-ui-kit-v2-speed-menu.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.logic.ts","../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.component.ts","../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.component.html"],"sourcesContent":["import { ConnectedPosition } from '@angular/cdk/overlay';\n\nimport { IRtIconButton } from '@rt-tools/ui-kit-v2/icon-button';\nimport { IRtTooltip } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtSpeedMenu } from './rt-speed-menu.model';\n\nconst UP: ConnectedPosition = { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' };\nconst DOWN: ConnectedPosition = { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' };\nconst START: ConnectedPosition = { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' };\nconst END: ConnectedPosition = { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' };\n\nconst POSITIONS: Record<IRtSpeedMenu.Direction, readonly ConnectedPosition[]> = {\n up: [UP, DOWN],\n down: [DOWN, UP],\n start: [START, END],\n end: [END, START],\n};\n\nconst ACTION_SIZE: Record<IRtSpeedMenu.Size, IRtIconButton.Size> = {\n sm: 'xs',\n md: 'sm',\n lg: 'md',\n xl: 'lg',\n};\n\n/** Места панели вокруг кнопки: сторона направления, а у края экрана — противоположная. /\nexport function speedMenuPositions(direction: IRtSpeedMenu.Direction): readonly ConnectedPosition[] {\n return POSITIONS[direction];\n}\n\n/* Размер кнопок действий — на шаг меньше кнопки меню. /\nexport function speedMenuActionSize(size: IRtSpeedMenu.Size): IRtIconButton.Size {\n return ACTION_SIZE[size];\n}\n\n/* Подсказка столбца действий встаёт сбоку, подсказка ряда — сверху: иначе она закрывает соседа. /\nexport function speedMenuTooltipSide(direction: IRtSpeedMenu.Direction): IRtTooltip.Placement {\n return direction === 'up' \|\| direction === 'down' ? 'left' : 'top';\n}\n\n/\n Куда клавиша переводит фокус среди доступных действий: стрелки идут по кругу, Home и End берут\n * крайние. `null` — клавиша не про переход.\n /\nexport function speedMenuNextIndex(key: string, current: number, count: number): number \| null {\n if (count === 0) {\n return null;\n }\n\n switch (key) {\n case 'ArrowDown':\n case 'ArrowRight':\n return (current + 1) % count;\n case 'ArrowUp':\n case 'ArrowLeft':\n return (current - 1 + count) % count;\n case 'Home':\n return 0;\n case 'End':\n return count - 1;\n default:\n return null;\n }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n Injector,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n Signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtIconButton, RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { IRtTooltip, RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { speedMenuActionSize, speedMenuNextIndex, speedMenuPositions, speedMenuTooltipSide } from './rt-speed-menu.logic';\nimport { IRtSpeedMenu } from './rt-speed-menu.model';\n\nconst BEM_BLOCK: string = 'rt-speed-menu';\n\n/* Кнопки действий, которые можно нажать: недоступная кнопка кита несёт нативный `disabled`. /\nconst AVAILABLE_ACTION: string = '.rt-speed-menu__action .rt-icon-button:not(:disabled)';\n\n/\n Быстрое меню: круглая кнопка, которая раскрывает рядом несколько круглых кнопок действий. Действия\n * лежат в плавающей панели кита (`rtPopover`) на стороне направления, у края экрана — на\n * противоположной; Escape и нажатие снаружи закрывают меню.\n \n Выбор отдаётся выходом `actionSelect`, и меню остаётся открытым: приложение нажимает действие\n * несколько раз подряд. Закрытие на выборе — вход `closeOnSelect`.\n /\n@Component({\n selector: 'rt-speed-menu',\n templateUrl: './rt-speed-menu.component.html',\n styleUrl: './rt-speed-menu.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [BlockDirective, ElemDirective, ModDirective, RtIconButtonComponent, RtPopoverDirective, RtTooltipDirective],\n host: {\n class: BEM_BLOCK,\n '[class.rt-speed-menu--open]': 'isOpen()',\n },\n})\nexport class RtSpeedMenuComponent {\n readonly #host: ElementRef<HTMLElement> = inject(ElementRef);\n readonly #injector: Injector = inject(Injector);\n\n readonly #t_uiActions: Signal<string> = rtKitLabel('uiActions');\n\n protected readonly popover: Signal<RtPopoverDirective \| undefined> = viewChild(RtPopoverDirective);\n\n protected readonly panel: Signal<ElementRef<HTMLElement> \| undefined> = viewChild<ElementRef<HTMLElement>>('panel');\n\n protected readonly isOpen: Signal<boolean> = computed((): boolean => this.popover()?.isOpen() ?? false);\n\n /* Своё имя кнопки важнее умолчания: приложение знает, что за действия в меню. /\n protected readonly triggerLabel: Signal<string> = computed((): string => this.label() \|\| this.#t_uiActions());\n\n protected readonly positions: Signal<readonly ConnectedPosition[]> = computed((): readonly ConnectedPosition[] =>\n speedMenuPositions(this.direction())\n );\n\n protected readonly actionSize: Signal<IRtIconButton.Size> = computed((): IRtIconButton.Size => speedMenuActionSize(this.size()));\n\n protected readonly tooltipSide: Signal<IRtTooltip.Placement> = computed((): IRtTooltip.Placement =>\n speedMenuTooltipSide(this.direction())\n );\n\n /* Действия меню в порядке чтения: сверху вниз в столбце, от начала к концу в ряду. /\n public readonly actions: InputSignal<readonly IRtSpeedMenu.Action[]> = input.required<readonly IRtSpeedMenu.Action[]>();\n\n /* Значок кнопки меню: имя кита или Material. Открытая кнопка показывает крест. /\n public readonly icon: InputSignal<string> = input<string>('menu');\n\n /* Доступное имя кнопки меню. Пусто — подпись кита «Действия». /\n public readonly label: InputSignal<string> = input<string>('');\n\n /* Сторона, на которую раскрываются действия. /\n public readonly direction: InputSignal<IRtSpeedMenu.Direction> = input<IRtSpeedMenu.Direction>('up');\n\n /* Размер кнопки меню; действия на шаг меньше. /\n public readonly size: InputSignal<IRtSpeedMenu.Size> = input<IRtSpeedMenu.Size>('lg');\n\n /* Палитра кнопки меню. /\n public readonly variant: InputSignal<IRtSpeedMenu.Variant> = input<IRtSpeedMenu.Variant>('primary');\n\n /* Закрывать меню после выбора действия; фокус возвращается на кнопку меню. /\n public readonly closeOnSelect: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Недоступное меню не открывается, а открытое закрывается. /\n public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Выбор действия — его `value`. /\n public readonly actionSelect: OutputEmitterRef<string> = output<string>();\n\n /* Меню открылось (`true`) или закрылось (`false`). */\n public readonly openChange: OutputEmitterRef<boolean> = output<boolean>();\n\n constructor() {\n effect((): void => {\n if (this.disabled()) {\n this.popover()?.close();\n }\n });\n }\n\n protected onTrigger(event: MouseEvent): void {\n if (this.isOpen()) {\n this.popover()?.close();\n return;\n }\n if (this.actions().length === 0) {\n return;\n }\n this.popover()?.open();\n // Нажатие с клавиатуры приходит без счёта щелчков: такого человека панель встречает фокусом\n // на первом действии — она лежит в конце страницы, и Tab до неё не дошёл бы.\n if (event.detail === 0) {\n afterNextRender((): void => this.#focusAction(0), { injector: this.#injector });\n }\n }\n\n protected onAction(action: IRtSpeedMenu.Action): void {\n if (action.disabled) {\n return;\n }\n this.actionSelect.emit(action.value);\n if (this.closeOnSelect()) {\n this.#closeToTrigger();\n }\n }\n\n protected onPanelKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape' \|\| event.key === 'Tab') {\n event.preventDefault();\n this.#closeToTrigger();\n return;\n }\n const buttons: HTMLElement[] = this.#availableActions();\n // Клавишу ловит кнопка в фокусе, и место в ряду меряется по ней\n const current: number = buttons.findIndex((button: HTMLElement): boolean => button === event.target);\n const next: number \| null = speedMenuNextIndex(event.key, current, buttons.length);\n if (next === null) {\n return;\n }\n event.preventDefault();\n buttons[next]?.focus();\n }\n\n protected onOpened(): void {\n this.openChange.emit(true);\n }\n\n protected onClosed(): void {\n this.openChange.emit(false);\n }\n\n #closeToTrigger(): void {\n this.popover()?.close();\n this.#host.nativeElement.querySelector<HTMLElement>('.rt-speed-menu__trigger .rt-icon-button')?.focus();\n }\n\n #focusAction(index: number): void {\n this.#availableActions()[index]?.focus();\n }\n\n #availableActions(): HTMLElement[] {\n const panel: HTMLElement \| undefined = this.panel()?.nativeElement;\n return panel ? Array.from(panel.querySelectorAll<HTMLElement>(AVAILABLE_ACTION)) : [];\n }\n}\n","<ng-container rtBlock=\"rt-speed-menu\">\n <!-- Панель висит на кнопке меню: по ней она встаёт и её нажатие не считает нажатием снаружи.\n Открывает и закрывает её сама кнопка — триггер панели ручной. -->\n <rt-icon-button\n rtElem=\"trigger\"\n qa-dataid=\"speed-menu-trigger\"\n radius=\"full\"\n rtPopoverTrigger=\"manual\"\n rtPopoverPanelClass=\"rt-speed-menu-pane\"\n [rtPopover]=\"panelTpl\"\n [rtPopoverPositions]=\"positions()\"\n [glyph]=\"isOpen() ? 'close' : icon()\"\n [ariaLabel]=\"triggerLabel()\"\n [variant]=\"variant()\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [expanded]=\"isOpen()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (clicked)=\"onTrigger($event)\" />\n\n <ng-template #panelTpl>\n <div\n #panel\n rtElem=\"panel\"\n role=\"group\"\n qa-dataid=\"speed-menu-panel\"\n [rtMod]=\"direction()\"\n [attr.aria-label]=\"triggerLabel()\"\n (keydown)=\"onPanelKeydown($event)\">\n @for (action of actions(); track action.value) {\n <rt-icon-button\n rtElem=\"action\"\n qa-dataid=\"speed-menu-action\"\n radius=\"full\"\n variant=\"secondary\"\n [rtTooltip]=\"action.label\"\n [rtTooltipPlacement]=\"tooltipSide()\"\n [glyph]=\"action.icon\"\n [ariaLabel]=\"action.label\"\n [size]=\"actionSize()\"\n [disabled]=\"action.disabled ?? false\"\n [attr.data-value]=\"action.value\"\n (clicked)=\"onAction(action)\" />\n }\n </div>\n </ng-template>\n</ng-container>\n"],"mappings":"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"}
1	+ {"version":3,"file":"rt-tools-ui-kit-v2-speed-menu.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.logic.ts","../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.component.ts","../../../projects/ui-kit-v2/src/lib/components/speed-menu/rt-speed-menu.component.html"],"sourcesContent":["import { ConnectedPosition } from '@angular/cdk/overlay';\n\nimport { IRtIconButton } from '@rt-tools/ui-kit-v2/icon-button';\nimport { IRtTooltip } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtSpeedMenu } from './rt-speed-menu.model';\n\nconst UP: ConnectedPosition = { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' };\nconst DOWN: ConnectedPosition = { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' };\nconst START: ConnectedPosition = { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' };\nconst END: ConnectedPosition = { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' };\n\nconst POSITIONS: Record<IRtSpeedMenu.Direction, readonly ConnectedPosition[]> = {\n up: [UP, DOWN],\n down: [DOWN, UP],\n start: [START, END],\n end: [END, START],\n};\n\nconst ACTION_SIZE: Record<IRtSpeedMenu.Size, IRtIconButton.Size> = {\n sm: 'xs',\n md: 'sm',\n lg: 'md',\n xl: 'lg',\n};\n\n/** Места панели вокруг кнопки: сторона направления, а у края экрана — противоположная. /\nexport function speedMenuPositions(direction: IRtSpeedMenu.Direction): readonly ConnectedPosition[] {\n return POSITIONS[direction];\n}\n\n/* Размер кнопок действий — на шаг меньше кнопки меню. /\nexport function speedMenuActionSize(size: IRtSpeedMenu.Size): IRtIconButton.Size {\n return ACTION_SIZE[size];\n}\n\n/* Подсказка столбца действий встаёт сбоку, подсказка ряда — сверху: иначе она закрывает соседа. /\nexport function speedMenuTooltipSide(direction: IRtSpeedMenu.Direction): IRtTooltip.Placement {\n return direction === 'up' \|\| direction === 'down' ? 'left' : 'top';\n}\n\n/\n Куда клавиша переводит фокус среди доступных действий: стрелки идут по кругу, Home и End берут\n * крайние. `null` — клавиша не про переход.\n /\nexport function speedMenuNextIndex(key: string, current: number, count: number): number \| null {\n if (count === 0) {\n return null;\n }\n\n switch (key) {\n case 'ArrowDown':\n case 'ArrowRight':\n return (current + 1) % count;\n case 'ArrowUp':\n case 'ArrowLeft':\n return (current - 1 + count) % count;\n case 'Home':\n return 0;\n case 'End':\n return count - 1;\n default:\n return null;\n }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n Injector,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n Signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtIconButton, RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { IRtTooltip, RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { speedMenuActionSize, speedMenuNextIndex, speedMenuPositions, speedMenuTooltipSide } from './rt-speed-menu.logic';\nimport { IRtSpeedMenu } from './rt-speed-menu.model';\n\nconst BEM_BLOCK: string = 'rt-speed-menu';\n\n/* Кнопки действий, которые можно нажать: недоступная кнопка кита несёт нативный `disabled`. /\nconst AVAILABLE_ACTION: string = '.rt-speed-menu__action .rt-icon-button:not(:disabled)';\n\n/\n Быстрое меню: круглая кнопка, которая раскрывает рядом несколько круглых кнопок действий. Действия\n * лежат в плавающей панели кита (`rtPopover`) на стороне направления, у края экрана — на\n * противоположной; Escape и нажатие снаружи закрывают меню.\n \n Выбор отдаётся выходом `actionSelect`, и меню остаётся открытым: приложение нажимает действие\n * несколько раз подряд. Закрытие на выборе — вход `closeOnSelect`.\n /\n@Component({\n selector: 'rt-speed-menu',\n templateUrl: './rt-speed-menu.component.html',\n styleUrl: './rt-speed-menu.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [BlockDirective, ElemDirective, ModDirective, RtIconButtonComponent, RtPopoverDirective, RtTooltipDirective],\n host: {\n class: BEM_BLOCK,\n '[class.rt-speed-menu--open]': 'isOpen()',\n },\n})\nexport class RtSpeedMenuComponent {\n readonly #host: ElementRef<HTMLElement> = inject(ElementRef);\n readonly #injector: Injector = inject(Injector);\n\n readonly #t_uiActions: Signal<string> = rtKitLabel('uiActions');\n\n protected readonly popover: Signal<RtPopoverDirective \| undefined> = viewChild(RtPopoverDirective);\n\n protected readonly panel: Signal<ElementRef<HTMLElement> \| undefined> = viewChild<ElementRef<HTMLElement>>('panel');\n\n protected readonly isOpen: Signal<boolean> = computed((): boolean => this.popover()?.isOpen() ?? false);\n\n /* Своё имя кнопки важнее умолчания: приложение знает, что за действия в меню. /\n protected readonly triggerLabel: Signal<string> = computed((): string => this.label() \|\| this.#t_uiActions());\n\n protected readonly positions: Signal<readonly ConnectedPosition[]> = computed((): readonly ConnectedPosition[] =>\n speedMenuPositions(this.direction())\n );\n\n protected readonly actionSize: Signal<IRtIconButton.Size> = computed((): IRtIconButton.Size => speedMenuActionSize(this.size()));\n\n protected readonly tooltipSide: Signal<IRtTooltip.Placement> = computed((): IRtTooltip.Placement =>\n speedMenuTooltipSide(this.direction())\n );\n\n /* Действия меню в порядке чтения: сверху вниз в столбце, от начала к концу в ряду. /\n public readonly actions: InputSignal<readonly IRtSpeedMenu.Action[]> = input.required<readonly IRtSpeedMenu.Action[]>();\n\n /* Значок кнопки меню: имя кита или Material. Открытая кнопка показывает крест. /\n public readonly icon: InputSignal<string> = input<string>('menu');\n\n /* Доступное имя кнопки меню. Пусто — подпись кита «Действия». /\n public readonly label: InputSignal<string> = input<string>('');\n\n /* Сторона, на которую раскрываются действия. /\n public readonly direction: InputSignal<IRtSpeedMenu.Direction> = input<IRtSpeedMenu.Direction>('up');\n\n /* Размер кнопки меню; действия на шаг меньше. /\n public readonly size: InputSignal<IRtSpeedMenu.Size> = input<IRtSpeedMenu.Size>('lg');\n\n /* Палитра кнопки меню. /\n public readonly variant: InputSignal<IRtSpeedMenu.Variant> = input<IRtSpeedMenu.Variant>('primary');\n\n /* Закрывать меню после выбора действия; фокус возвращается на кнопку меню. /\n public readonly closeOnSelect: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Недоступное меню не открывается, а открытое закрывается. /\n public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Выбор действия — его `value`. /\n public readonly actionSelect: OutputEmitterRef<string> = output<string>();\n\n /* Меню открылось (`true`) или закрылось (`false`). */\n public readonly openChange: OutputEmitterRef<boolean> = output<boolean>();\n\n constructor() {\n effect((): void => {\n if (this.disabled()) {\n this.popover()?.close();\n }\n });\n }\n\n protected onTrigger(event: MouseEvent): void {\n if (this.isOpen()) {\n this.popover()?.close();\n return;\n }\n if (this.actions().length === 0) {\n return;\n }\n this.popover()?.open();\n // Нажатие с клавиатуры приходит без счёта щелчков: такого человека панель встречает фокусом\n // на первом действии — она лежит в конце страницы, и Tab до неё не дошёл бы.\n if (event.detail === 0) {\n afterNextRender((): void => this.#focusAction(0), { injector: this.#injector });\n }\n }\n\n protected onAction(action: IRtSpeedMenu.Action): void {\n if (action.disabled) {\n return;\n }\n this.actionSelect.emit(action.value);\n if (this.closeOnSelect()) {\n this.#closeToTrigger();\n }\n }\n\n protected onPanelKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape' \|\| event.key === 'Tab') {\n event.preventDefault();\n this.#closeToTrigger();\n return;\n }\n const buttons: HTMLElement[] = this.#availableActions();\n // Клавишу ловит кнопка в фокусе, и место в ряду меряется по ней\n const current: number = buttons.findIndex((button: HTMLElement): boolean => button === event.target);\n const next: number \| null = speedMenuNextIndex(event.key, current, buttons.length);\n if (next === null) {\n return;\n }\n event.preventDefault();\n buttons[next]?.focus();\n }\n\n protected onOpened(): void {\n this.openChange.emit(true);\n }\n\n protected onClosed(): void {\n this.openChange.emit(false);\n }\n\n #closeToTrigger(): void {\n this.popover()?.close();\n this.#host.nativeElement.querySelector<HTMLElement>('.rt-speed-menu__trigger .rt-icon-button')?.focus();\n }\n\n #focusAction(index: number): void {\n this.#availableActions()[index]?.focus();\n }\n\n #availableActions(): HTMLElement[] {\n const panel: HTMLElement \| undefined = this.panel()?.nativeElement;\n return panel ? Array.from(panel.querySelectorAll<HTMLElement>(AVAILABLE_ACTION)) : [];\n }\n}\n","<ng-container rtBlock=\"rt-speed-menu\">\n <!-- Панель висит на кнопке меню: по ней она встаёт и её нажатие не считает нажатием снаружи.\n Открывает и закрывает её сама кнопка — триггер панели ручной. -->\n <rt-icon-button\n rtElem=\"trigger\"\n qa-dataid=\"speed-menu-trigger\"\n radius=\"full\"\n rtPopoverTrigger=\"manual\"\n rtPopoverPanelClass=\"rt-speed-menu-pane\"\n [rtPopover]=\"panelTpl\"\n [rtPopoverPositions]=\"positions()\"\n [glyph]=\"isOpen() ? 'close' : icon()\"\n [ariaLabel]=\"triggerLabel()\"\n [variant]=\"variant()\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [expanded]=\"isOpen()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (clicked)=\"onTrigger($event)\" />\n\n <ng-template #panelTpl>\n <div\n #panel\n rtElem=\"panel\"\n role=\"group\"\n qa-dataid=\"speed-menu-panel\"\n [rtMod]=\"direction()\"\n [attr.aria-label]=\"triggerLabel()\"\n (keydown)=\"onPanelKeydown($event)\">\n @for (action of actions(); track action.value) {\n <rt-icon-button\n rtElem=\"action\"\n qa-dataid=\"speed-menu-action\"\n radius=\"full\"\n variant=\"secondary\"\n [rtTooltip]=\"action.label\"\n [rtTooltipPlacement]=\"tooltipSide()\"\n [glyph]=\"action.icon\"\n [ariaLabel]=\"action.label\"\n [size]=\"actionSize()\"\n [disabled]=\"action.disabled ?? false\"\n [attr.data-value]=\"action.value\"\n (clicked)=\"onAction(action)\" />\n }\n </div>\n </ng-template>\n</ng-container>\n"],"mappings":"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"}

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

@@ -1,9 +1,53 @@
+import { NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, numberAttribute } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, computed, contentChild, inject, input, numberAttribute } from "@angular/core";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+var RtStepLabelDirective = class RtStepLabelDirective {
+	constructor() {
+		this.template = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtStepLabelDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtStepLabelDirective,
+			isStandalone: true,
+			selector: "ng-template[rtStepLabel]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtStepLabelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtStepLabel]" }]
+	}]
+});
 const BEM_BLOCK = "rt-stepper";
+function stepState(index, current) {
+	if (current < 0) return "neutral";
+	if (index < current) return "complete";
+	return index === current ? "current" : "upcoming";
+}
 var RtStepperComponent = class RtStepperComponent {
 	constructor() {
 		this.#safeIndex = computed(() => {
@@ -18,6 +62,15 @@ var RtStepperComponent = class RtStepperComponent {
 			return this.#safeIndex() / (total - 1) * 100;
 		}, ...ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []);
 		this.totalSteps = computed(() => this.steps().length, ...ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []);
+		this.labelTemplate = contentChild(RtStepLabelDirective, ...ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []);
+		this.items = computed(() => {
+			const current = this.currentIndex();
+			return this.steps().map((step, index) => ({
+				step,
+				index,
+				state: stepState(index, current)
+			}));
+		}, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.labelAnchor = computed(() => {
 			const total = this.steps().length;
 			const idx = this.#safeIndex();
@@ -31,6 +84,7 @@ var RtStepperComponent = class RtStepperComponent {
 			return text.split("\n\n");
 		}, ...ngDevMode ? [{ debugName: "descriptionParagraphs" }] : /* istanbul ignore next */ []);
 		this.steps = input([], ...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+		this.orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
 		this.currentIndex = input(0, {
 			...ngDevMode ? { debugName: "currentIndex" } : /* istanbul ignore next */ {},
 			transform: numberAttribute
@@ -62,6 +116,13 @@ var RtStepperComponent = class RtStepperComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				orientation: {
+					classPropertyName: "orientation",
+					publicName: "orientation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				currentIndex: {
 					classPropertyName: "currentIndex",
 					publicName: "currentIndex",
@@ -70,15 +131,35 @@ var RtStepperComponent = class RtStepperComponent {
 					transformFunction: null
 				}
 			},
-			host: { classAttribute: "rt-stepper" },
+			host: {
+				properties: { "class.rt-stepper--vertical": "orientation() === 'vertical'" },
+				classAttribute: "rt-stepper"
+			},
+			queries: [{
+				propertyName: "labelTemplate",
+				first: true,
+				predicate: RtStepLabelDirective,
+				descendants: true,
+				isSignal: true
+			}],
 			hostDirectives: [{
 				directive: i1.RtRadiusDirective,
 				inputs: ["radius", "radius"]
 			}],
 			ngImport: i0,
-			template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"],
+			template: "@let current = currentStep();\n@if (orientation() === 'vertical') {\n    <!--\n        Вертикальный список: шаги — пункты нумерованного списка, номер рисует метка, а не список.\n        role=\"list\" явно: Safari снимает смысл списка с <ol> без маркеров.\n    -->\n    <ol rtBlock=\"rt-stepper\" qa-dataid=\"stepper-list\" role=\"list\">\n        @for (item of items(); track item.index) {\n            <li\n                rtElem=\"item\"\n                qa-dataid=\"stepper-item\"\n                [rtMod]=\"{ state: item.state }\"\n                [attr.aria-current]=\"item.state === 'current' ? 'step' : null\">\n                <span rtElem=\"mark\" qa-dataid=\"stepper-mark\" aria-hidden=\"true\">{{ item.index + 1 }}</span>\n                <div rtElem=\"body\">\n                    <div rtElem=\"step-label\" qa-dataid=\"stepper-step-label\">\n                        @if (labelTemplate(); as label) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"label.template\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item.step, index: item.index }\" />\n                        } @else {\n                            {{ item.step.label }}\n                        }\n                    </div>\n                    @if (item.step.description) {\n                        <p rtElem=\"step-description\" qa-dataid=\"stepper-step-description\">{{ item.step.description }}</p>\n                    }\n                </div>\n            </li>\n        }\n    </ol>\n} @else {\n    <div\n        rtBlock=\"rt-stepper\"\n        qa-dataid=\"stepper\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"totalSteps()\"\n        [attr.aria-valuenow]=\"currentStepNumber()\"\n        [attr.aria-valuetext]=\"current?.label ?? null\">\n        <div rtElem=\"rail\">\n            @if (current) {\n                <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                    {{ current.label }}\n                </p>\n            }\n            <div rtElem=\"track-band\">\n                <span rtElem=\"track\" aria-hidden=\"true\"></span>\n                <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n                <ul rtElem=\"points\">\n                    @for (step of steps(); track $index; let i = $index) {\n                        <li\n                            rtElem=\"point\"\n                            qa-dataid=\"stepper-point\"\n                            aria-hidden=\"true\"\n                            [rtMod]=\"{\n                                current: i === currentIndex(),\n                                complete: i < currentIndex(),\n                            }\"></li>\n                    }\n                </ul>\n            </div>\n        </div>\n        @for (paragraph of descriptionParagraphs(); track $index) {\n            <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n        }\n    </div>\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper.rt-stepper--vertical>.rt-stepper{--rt-stepper-mark-size: var(--rt-size-6);--rt-stepper-mark-font-size: var(--rt-text-xs);--rt-stepper-mark-bg: var(--rt-color-text-muted);--rt-stepper-mark-color: var(--rt-color-text-inverse);--rt-stepper-line-width: var(--rt-border-width-thin);--rt-stepper-line-color: var(--rt-color-border-default);--rt-stepper-item-gap: var(--rt-space-6);padding:0;margin:0;gap:0;list-style:none}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item{position:relative;display:flex;align-items:flex-start;gap:var(--rt-space-4);padding-block-end:var(--rt-stepper-item-gap)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item:last-child{padding-block-end:0}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item:not(:last-child):after{position:absolute;background:var(--rt-stepper-line-color);content:\"\";inline-size:var(--rt-stepper-line-width);inset-block:calc(var(--rt-stepper-mark-size) + var(--rt-space-1)) var(--rt-space-1);inset-inline-start:calc((var(--rt-stepper-mark-size) - var(--rt-stepper-line-width)) / 2)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--complete{--rt-stepper-mark-bg: var(--rt-color-stepper-progress);--rt-stepper-mark-color: var(--rt-color-text-inverse)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--current{--rt-stepper-mark-bg: var(--rt-color-stepper-current);--rt-stepper-mark-color: var(--rt-neutral-950)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--upcoming{--rt-stepper-mark-bg: var(--rt-color-stepper-track);--rt-stepper-mark-color: var(--rt-color-text-primary)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__mark{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:var(--rt-stepper-radius);background:var(--rt-stepper-mark-bg);block-size:var(--rt-stepper-mark-size);color:var(--rt-stepper-mark-color);font-size:var(--rt-stepper-mark-font-size);font-weight:var(--rt-font-weight-medium);inline-size:var(--rt-stepper-mark-size);line-height:1}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__body{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1);padding-block-start:var(--rt-space-1)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__step-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug);overflow-wrap:anywhere}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__step-description{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"],
 			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
 				{
 					kind: "directive",
 					type: BlockDirective,
@@ -114,6 +195,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			imports: [
+				NgTemplateOutlet,
 				BlockDirective,
 				ElemDirective,
 				ModDirective
@@ -122,12 +204,19 @@ i0.ɵɵngDeclareClassMetadata({
 				directive: RtRadiusDirective,
 				inputs: ["radius"]
 			}],
-			host: { class: BEM_BLOCK },
-			template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"]
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-stepper--vertical]": "orientation() === 'vertical'"
+			},
+			template: "@let current = currentStep();\n@if (orientation() === 'vertical') {\n    <!--\n        Вертикальный список: шаги — пункты нумерованного списка, номер рисует метка, а не список.\n        role=\"list\" явно: Safari снимает смысл списка с <ol> без маркеров.\n    -->\n    <ol rtBlock=\"rt-stepper\" qa-dataid=\"stepper-list\" role=\"list\">\n        @for (item of items(); track item.index) {\n            <li\n                rtElem=\"item\"\n                qa-dataid=\"stepper-item\"\n                [rtMod]=\"{ state: item.state }\"\n                [attr.aria-current]=\"item.state === 'current' ? 'step' : null\">\n                <span rtElem=\"mark\" qa-dataid=\"stepper-mark\" aria-hidden=\"true\">{{ item.index + 1 }}</span>\n                <div rtElem=\"body\">\n                    <div rtElem=\"step-label\" qa-dataid=\"stepper-step-label\">\n                        @if (labelTemplate(); as label) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"label.template\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item.step, index: item.index }\" />\n                        } @else {\n                            {{ item.step.label }}\n                        }\n                    </div>\n                    @if (item.step.description) {\n                        <p rtElem=\"step-description\" qa-dataid=\"stepper-step-description\">{{ item.step.description }}</p>\n                    }\n                </div>\n            </li>\n        }\n    </ol>\n} @else {\n    <div\n        rtBlock=\"rt-stepper\"\n        qa-dataid=\"stepper\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"totalSteps()\"\n        [attr.aria-valuenow]=\"currentStepNumber()\"\n        [attr.aria-valuetext]=\"current?.label ?? null\">\n        <div rtElem=\"rail\">\n            @if (current) {\n                <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                    {{ current.label }}\n                </p>\n            }\n            <div rtElem=\"track-band\">\n                <span rtElem=\"track\" aria-hidden=\"true\"></span>\n                <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n                <ul rtElem=\"points\">\n                    @for (step of steps(); track $index; let i = $index) {\n                        <li\n                            rtElem=\"point\"\n                            qa-dataid=\"stepper-point\"\n                            aria-hidden=\"true\"\n                            [rtMod]=\"{\n                                current: i === currentIndex(),\n                                complete: i < currentIndex(),\n                            }\"></li>\n                    }\n                </ul>\n            </div>\n        </div>\n        @for (paragraph of descriptionParagraphs(); track $index) {\n            <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n        }\n    </div>\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper.rt-stepper--vertical>.rt-stepper{--rt-stepper-mark-size: var(--rt-size-6);--rt-stepper-mark-font-size: var(--rt-text-xs);--rt-stepper-mark-bg: var(--rt-color-text-muted);--rt-stepper-mark-color: var(--rt-color-text-inverse);--rt-stepper-line-width: var(--rt-border-width-thin);--rt-stepper-line-color: var(--rt-color-border-default);--rt-stepper-item-gap: var(--rt-space-6);padding:0;margin:0;gap:0;list-style:none}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item{position:relative;display:flex;align-items:flex-start;gap:var(--rt-space-4);padding-block-end:var(--rt-stepper-item-gap)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item:last-child{padding-block-end:0}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item:not(:last-child):after{position:absolute;background:var(--rt-stepper-line-color);content:\"\";inline-size:var(--rt-stepper-line-width);inset-block:calc(var(--rt-stepper-mark-size) + var(--rt-space-1)) var(--rt-space-1);inset-inline-start:calc((var(--rt-stepper-mark-size) - var(--rt-stepper-line-width)) / 2)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--complete{--rt-stepper-mark-bg: var(--rt-color-stepper-progress);--rt-stepper-mark-color: var(--rt-color-text-inverse)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--current{--rt-stepper-mark-bg: var(--rt-color-stepper-current);--rt-stepper-mark-color: var(--rt-neutral-950)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__item--state--upcoming{--rt-stepper-mark-bg: var(--rt-color-stepper-track);--rt-stepper-mark-color: var(--rt-color-text-primary)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__mark{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:var(--rt-stepper-radius);background:var(--rt-stepper-mark-bg);block-size:var(--rt-stepper-mark-size);color:var(--rt-stepper-mark-color);font-size:var(--rt-stepper-mark-font-size);font-weight:var(--rt-font-weight-medium);inline-size:var(--rt-stepper-mark-size);line-height:1}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__body{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1);padding-block-start:var(--rt-space-1)}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__step-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug);overflow-wrap:anywhere}rt-stepper.rt-stepper--vertical>.rt-stepper .rt-stepper__step-description{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"]
 		}]
 	}],
 	propDecorators: {
+		labelTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtStepLabelDirective), { isSignal: true }]
+		}],
 		steps: [{
 			type: i0.Input,
 			args: [{
@@ -136,6 +225,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
 		currentIndex: [{
 			type: i0.Input,
 			args: [{
@@ -146,6 +243,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { RtStepperComponent };
+export { RtStepLabelDirective, RtStepperComponent };
 //# sourceMappingURL=rt-tools-ui-kit-v2-stepper.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"rt-tools-ui-kit-v2-stepper.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.ts","../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n InputSignal,\n InputSignalWithTransform,\n numberAttribute,\n Signal,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtStepper } from './rt-stepper.model';\n\nconst BEM_BLOCK: string = 'rt-stepper';\n\n/*\n Линейный прогресс-степпер: тонкая полоса, набор точек и подпись\n * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`\n * со связкой label + description), активный шаг — через `currentIndex`.\n \n Активная точка увеличена и подсвечивается янтарным; над ней висит подпись\n * текущего шага (тоже янтарная, выравнивается по краю на крайних шагах).\n * Пройденные точки и заполненная часть полосы — progress-цвет; будущие точки\n * и трек — приглушённый цвет (в dark-теме оба ухода от яркого синего). Под\n * полосой — описание текущего шага, многоабзацное (`\\n\\n`). Сам список названий\n * шагов на ui не выводится — публичен только текущий, остальные читаются\n * скринридером через aria.\n /\n@Component({\n selector: 'rt-stepper',\n templateUrl: './rt-stepper.component.html',\n styleUrl: './rt-stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n },\n})\nexport class RtStepperComponent {\n /\n Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за\n * границы; полоса и якорь подписи это уже переживали, а вот объявление для\n * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре\n * оказывалось `aria-valuenow=\"100\"` при `aria-valuemax=\"3\"`, а подпись шага\n * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не\n * могли разойтись.\n /\n readonly #safeIndex: Signal<number> = computed((): number => {\n const total: number = this.steps().length;\n return Math.max(0, Math.min(this.currentIndex(), total - 1));\n });\n\n protected readonly currentStep: Signal<IRtStepper.Step \| null> = computed(\n (): IRtStepper.Step \| null => this.steps()[this.#safeIndex()] ?? null\n );\n\n /* Номер текущего шага для скринридера: `0`, когда шагов нет вовсе. /\n protected readonly currentStepNumber: Signal<number> = computed((): number => (this.steps().length === 0 ? 0 : this.#safeIndex() + 1));\n\n /\n Доля заполненной полосы от 0 до 100. На один шаг и меньше — 0%, иначе\n * `idx / (total - 1)`. Без clamp в шаблоне получаем переполнение если\n * передадут `currentIndex > total`.\n /\n protected readonly progressPercent: Signal<number> = computed((): number => {\n const total: number = this.steps().length;\n if (total <= 1) {\n return 0;\n }\n return (this.#safeIndex() / (total - 1)) 100;\n });\n\n protected readonly totalSteps: Signal<number> = computed((): number => this.steps().length);\n\n /*\n Якорь подписи текущего шага: подпись висит над активной точкой и не должна\n * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,\n * последний — по правому, остальные центрируются над точкой.\n /\n protected readonly labelAnchor: Signal<'start' \| 'center' \| 'end'> = computed((): 'start' \| 'center' \| 'end' => {\n const total: number = this.steps().length;\n const idx: number = this.#safeIndex();\n if (idx <= 0) {\n return 'start';\n }\n if (idx >= total - 1) {\n return 'end';\n }\n return 'center';\n });\n\n /* Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\\n\\n`. */\n protected readonly descriptionParagraphs: Signal<readonly string[]> = computed((): readonly string[] => {\n const text: string = this.currentStep()?.description ?? '';\n if (text.length === 0) {\n return [];\n }\n return text.split('\\n\\n');\n });\n\n public readonly steps: InputSignal<readonly IRtStepper.Step[]> = input<readonly IRtStepper.Step[]>([]);\n\n public readonly currentIndex: InputSignalWithTransform<number, number \| string> = input<number, number \| string>(0, {\n transform: numberAttribute,\n });\n}\n","@let current = currentStep();\n<div\n rtBlock=\"rt-stepper\"\n qa-dataid=\"stepper\"\n role=\"progressbar\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"totalSteps()\"\n [attr.aria-valuenow]=\"currentStepNumber()\"\n [attr.aria-valuetext]=\"current?.label ?? null\">\n <div rtElem=\"rail\">\n @if (current) {\n <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n {{ current.label }}\n </p>\n }\n <div rtElem=\"track-band\">\n <span rtElem=\"track\" aria-hidden=\"true\"></span>\n <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n <ul rtElem=\"points\">\n @for (step of steps(); track $index; let i = $index) {\n <li\n rtElem=\"point\"\n qa-dataid=\"stepper-point\"\n aria-hidden=\"true\"\n [rtMod]=\"{\n current: i === currentIndex(),\n complete: i < currentIndex(),\n }\"></li>\n }\n </ul>\n </div>\n </div>\n @for (paragraph of descriptionParagraphs(); track $index) {\n <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n }\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"rt-tools-ui-kit-v2-stepper.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/stepper/rt-step-label.directive.ts","../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.ts","../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { IRtStepper } from './rt-stepper.model';\n\n/*\n Шаблон подписи шага в вертикальном списке: разметка вместо строки `label`, например выделенное\n * слово. Обстановка — сам шаг и его номер с нуля.\n \n @example\n * ```html\n * <rt-stepper orientation=\"vertical\" [steps]=\"steps\" [currentIndex]=\"-1\">\n * <ng-template rtStepLabel let-step let-index=\"index\">\n * @if (index === 3) { Войдите под логином <strong>LOGIN</strong> } @else { {{ step.label }} }\n * </ng-template>\n * </rt-stepper>\n * ```\n /\n@Directive({\n selector: 'ng-template[rtStepLabel]',\n})\nexport class RtStepLabelDirective {\n public readonly template: TemplateRef<IRtStepper.LabelContext> = inject<TemplateRef<IRtStepper.LabelContext>>(TemplateRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n public static ngTemplateContextGuard(_directive: RtStepLabelDirective, context: unknown): context is IRtStepper.LabelContext {\n return true;\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n InputSignal,\n InputSignalWithTransform,\n numberAttribute,\n Signal,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtStepLabelDirective } from './rt-step-label.directive';\nimport { IRtStepper } from './rt-stepper.model';\n\nconst BEM_BLOCK: string = 'rt-stepper';\n\n/* Шаг вертикального списка, собранный для шаблона: номер для метки и состояние. /\ninterface IStepItem {\n readonly step: IRtStepper.Step;\n readonly index: number;\n readonly state: IRtStepper.StepState;\n}\n\n/* Состояние шага по номеру текущего; номер меньше нуля — текущего нет. /\nfunction stepState(index: number, current: number): IRtStepper.StepState {\n if (current < 0) {\n return 'neutral';\n }\n if (index < current) {\n return 'complete';\n }\n return index === current ? 'current' : 'upcoming';\n}\n\n/\n Линейный прогресс-степпер: тонкая полоса, набор точек и подпись\n * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`\n * со связкой label + description), активный шаг — через `currentIndex`.\n \n Активная точка увеличена и подсвечивается янтарным; над ней висит подпись\n * текущего шага (тоже янтарная, выравнивается по краю на крайних шагах).\n * Пройденные точки и заполненная часть полосы — progress-цвет; будущие точки\n * и трек — приглушённый цвет (в dark-теме оба ухода от яркого синего). Под\n * полосой — описание текущего шага, многоабзацное (`\\n\\n`). Сам список названий\n * шагов на ui не выводится — публичен только текущий, остальные читаются\n * скринридером через aria.\n \n `orientation=\"vertical\"` показывает все шаги списком: у каждого круглая метка с номером и\n * подпись справа, метки соединены линией. Подпись — строка `label` или шаблон `rtStepLabel`.\n * `currentIndex` меньше нуля значит «текущего шага нет»: список — статичная инструкция, все метки\n * нейтральные. Шаги в списке не нажимаются и фокуса не принимают.\n /\n@Component({\n selector: 'rt-stepper',\n templateUrl: './rt-stepper.component.html',\n styleUrl: './rt-stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // angular\n NgTemplateOutlet,\n\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n '[class.rt-stepper--vertical]': \"orientation() === 'vertical'\",\n },\n})\nexport class RtStepperComponent {\n /\n Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за\n * границы; полоса и якорь подписи это уже переживали, а вот объявление для\n * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре\n * оказывалось `aria-valuenow=\"100\"` при `aria-valuemax=\"3\"`, а подпись шага\n * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не\n * могли разойтись.\n /\n readonly #safeIndex: Signal<number> = computed((): number => {\n const total: number = this.steps().length;\n return Math.max(0, Math.min(this.currentIndex(), total - 1));\n });\n\n protected readonly currentStep: Signal<IRtStepper.Step \| null> = computed(\n (): IRtStepper.Step \| null => this.steps()[this.#safeIndex()] ?? null\n );\n\n /* Номер текущего шага для скринридера: `0`, когда шагов нет вовсе. /\n protected readonly currentStepNumber: Signal<number> = computed((): number => (this.steps().length === 0 ? 0 : this.#safeIndex() + 1));\n\n /\n Доля заполненной полосы от 0 до 100. На один шаг и меньше — 0%, иначе\n * `idx / (total - 1)`. Без clamp в шаблоне получаем переполнение если\n * передадут `currentIndex > total`.\n /\n protected readonly progressPercent: Signal<number> = computed((): number => {\n const total: number = this.steps().length;\n if (total <= 1) {\n return 0;\n }\n return (this.#safeIndex() / (total - 1)) 100;\n });\n\n protected readonly totalSteps: Signal<number> = computed((): number => this.steps().length);\n\n protected readonly labelTemplate: Signal<RtStepLabelDirective \| undefined> = contentChild(RtStepLabelDirective);\n\n /*\n Шаги вертикального списка с состоянием. Номер текущего здесь не зажимается: меньше нуля —\n * текущего нет, и все шаги нейтральные; больше последнего — пройдены все.\n /\n protected readonly items: Signal<readonly IStepItem[]> = computed((): readonly IStepItem[] => {\n const current: number = this.currentIndex();\n\n return this.steps().map((step: IRtStepper.Step, index: number): IStepItem => ({ step, index, state: stepState(index, current) }));\n });\n\n /\n Якорь подписи текущего шага: подпись висит над активной точкой и не должна\n * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,\n * последний — по правому, остальные центрируются над точкой.\n /\n protected readonly labelAnchor: Signal<'start' \| 'center' \| 'end'> = computed((): 'start' \| 'center' \| 'end' => {\n const total: number = this.steps().length;\n const idx: number = this.#safeIndex();\n if (idx <= 0) {\n return 'start';\n }\n if (idx >= total - 1) {\n return 'end';\n }\n return 'center';\n });\n\n /* Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\\n\\n`. */\n protected readonly descriptionParagraphs: Signal<readonly string[]> = computed((): readonly string[] => {\n const text: string = this.currentStep()?.description ?? '';\n if (text.length === 0) {\n return [];\n }\n return text.split('\\n\\n');\n });\n\n public readonly steps: InputSignal<readonly IRtStepper.Step[]> = input<readonly IRtStepper.Step[]>([]);\n\n public readonly orientation: InputSignal<IRtStepper.Orientation> = input<IRtStepper.Orientation>('horizontal');\n\n public readonly currentIndex: InputSignalWithTransform<number, number \| string> = input<number, number \| string>(0, {\n transform: numberAttribute,\n });\n}\n","@let current = currentStep();\n@if (orientation() === 'vertical') {\n <!--\n Вертикальный список: шаги — пункты нумерованного списка, номер рисует метка, а не список.\n role=\"list\" явно: Safari снимает смысл списка с <ol> без маркеров.\n -->\n <ol rtBlock=\"rt-stepper\" qa-dataid=\"stepper-list\" role=\"list\">\n @for (item of items(); track item.index) {\n <li\n rtElem=\"item\"\n qa-dataid=\"stepper-item\"\n [rtMod]=\"{ state: item.state }\"\n [attr.aria-current]=\"item.state === 'current' ? 'step' : null\">\n <span rtElem=\"mark\" qa-dataid=\"stepper-mark\" aria-hidden=\"true\">{{ item.index + 1 }}</span>\n <div rtElem=\"body\">\n <div rtElem=\"step-label\" qa-dataid=\"stepper-step-label\">\n @if (labelTemplate(); as label) {\n <ng-container\n [ngTemplateOutlet]=\"label.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item.step, index: item.index }\" />\n } @else {\n {{ item.step.label }}\n }\n </div>\n @if (item.step.description) {\n <p rtElem=\"step-description\" qa-dataid=\"stepper-step-description\">{{ item.step.description }}</p>\n }\n </div>\n </li>\n }\n </ol>\n} @else {\n <div\n rtBlock=\"rt-stepper\"\n qa-dataid=\"stepper\"\n role=\"progressbar\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"totalSteps()\"\n [attr.aria-valuenow]=\"currentStepNumber()\"\n [attr.aria-valuetext]=\"current?.label ?? null\">\n <div rtElem=\"rail\">\n @if (current) {\n <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n {{ current.label }}\n </p>\n }\n <div rtElem=\"track-band\">\n <span rtElem=\"track\" aria-hidden=\"true\"></span>\n <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n <ul rtElem=\"points\">\n @for (step of steps(); track $index; let i = $index) {\n <li\n rtElem=\"point\"\n qa-dataid=\"stepper-point\"\n aria-hidden=\"true\"\n [rtMod]=\"{\n current: i === currentIndex(),\n complete: i < currentIndex(),\n }\"></li>\n }\n </ul>\n </div>\n </div>\n @for (paragraph of descriptionParagraphs(); track $index) {\n <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n }\n </div>\n}\n"],"mappings":"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"}

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

@@ -183,6 +183,7 @@ var RtCopyCellComponent = class RtCopyCellComponent {
 					inputs: [
 						"rtTooltip",
 						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
 						"rtTooltipWhenTruncated",
 						"rtTooltipHideOnClick"
 					],
@@ -590,8 +591,17 @@ var RtTableFilterHeaderComponent = class RtTableFilterHeaderComponent {
 						"iconLeft",
 						"iconRight",
 						"passwordToggle",
-						"autocomplete"
-					]
+						"autocomplete",
+						"maxlength",
+						"floatingLabel",
+						"iconLeftAction",
+						"iconRightAction",
+						"iconLeftDisabled",
+						"iconRightDisabled",
+						"iconLeftTooltip",
+						"iconRightTooltip"
+					],
+					outputs: ["iconLeftClick", "iconRightClick"]
 				},
 				{
 					kind: "component",
@@ -660,6 +670,7 @@ var RtTableFilterHeaderComponent = class RtTableFilterHeaderComponent {
 						"options",
 						"placeholder",
 						"iconLeft",
+						"floatingLabel",
 						"filter",
 						"filterPlaceholder",
 						"panelWidth",