@rt-tools/ui-kit-v2 0.36.0 → 0.37.0
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.
- package/fesm2022/rt-tools-ui-kit-v2-ai-prompt-input.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-ai-prompt-input.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-detail-list.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-detail-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +147 -21
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-tabs.mjs +23 -2
- package/fesm2022/rt-tools-ui-kit-v2-tabs.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs +31 -6
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-workspace-details.mjs +29 -4
- package/fesm2022/rt-tools-ui-kit-v2-workspace-details.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs +23 -2
- package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/ai-prompt-input/rt-ai-prompt-input.component.scss +2 -1
- package/src/lib/components/detail-list/rt-detail-row.component.scss +2 -0
- package/src/lib/components/tabs/rt-tabs.component.scss +19 -2
- package/src/lib/components/thread-list/rt-thread-list-messenger.scss +45 -0
- package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss +9 -0
- package/src/lib/components/workspace/rt-workspace.component.scss +40 -0
- package/src/lib/components/workspace-details/rt-workspace-details.component.scss +26 -1
- package/src/rich-editor/lib/components/chat/rt-chat-messenger.scss +146 -0
- package/src/rich-editor/lib/components/message-composer/rt-message-composer.component.scss +7 -2
- package/types/rt-tools-ui-kit-v2-ai-prompt-input.d.ts +14 -1
- package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +40 -21
- package/types/rt-tools-ui-kit-v2-tabs.d.ts +7 -0
- package/types/rt-tools-ui-kit-v2-thread-list.d.ts +7 -0
- package/types/rt-tools-ui-kit-v2-workspace-details.d.ts +14 -0
- package/types/rt-tools-ui-kit-v2-workspace.d.ts +7 -0
|
@@ -830,6 +830,10 @@ var RtTabsComponent = class RtTabsComponent {
|
|
|
830
830
|
...ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {},
|
|
831
831
|
transform: booleanAttribute
|
|
832
832
|
});
|
|
833
|
+
this.dense = input(false, {
|
|
834
|
+
...ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {},
|
|
835
|
+
transform: booleanAttribute
|
|
836
|
+
});
|
|
833
837
|
this.contentScrollable = input(true, {
|
|
834
838
|
...ngDevMode ? { debugName: "contentScrollable" } : /* istanbul ignore next */ {},
|
|
835
839
|
transform: booleanAttribute
|
|
@@ -1016,6 +1020,13 @@ var RtTabsComponent = class RtTabsComponent {
|
|
|
1016
1020
|
isRequired: false,
|
|
1017
1021
|
transformFunction: null
|
|
1018
1022
|
},
|
|
1023
|
+
dense: {
|
|
1024
|
+
classPropertyName: "dense",
|
|
1025
|
+
publicName: "dense",
|
|
1026
|
+
isSignal: true,
|
|
1027
|
+
isRequired: false,
|
|
1028
|
+
transformFunction: null
|
|
1029
|
+
},
|
|
1019
1030
|
contentScrollable: {
|
|
1020
1031
|
classPropertyName: "contentScrollable",
|
|
1021
1032
|
publicName: "contentScrollable",
|
|
@@ -1082,6 +1093,7 @@ var RtTabsComponent = class RtTabsComponent {
|
|
|
1082
1093
|
"class.rt-tabs--direction--horizontal": "direction() === 'horizontal'",
|
|
1083
1094
|
"class.rt-tabs--direction--vertical": "direction() === 'vertical'",
|
|
1084
1095
|
"class.rt-tabs--animating": "panels.shift() !== null",
|
|
1096
|
+
"class.rt-tabs--dense": "dense()",
|
|
1085
1097
|
"style": "panels.durations()"
|
|
1086
1098
|
},
|
|
1087
1099
|
classAttribute: "rt-tabs"
|
|
@@ -1104,7 +1116,7 @@ var RtTabsComponent = class RtTabsComponent {
|
|
|
1104
1116
|
}],
|
|
1105
1117
|
ngImport: i0,
|
|
1106
1118
|
template: "<ng-container rtBlock=\"rt-tabs\">\n <div rtElem=\"header\">\n @if (leftControls().length) {\n <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n @for (control of leftControls(); track $index) {\n <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n }\n </div>\n }\n\n <div rtElem=\"tab-list-wrapper\" [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing() }\">\n <div\n rtElem=\"rest\"\n qa-dataid=\"tabs-scroll-prev\"\n [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n (mousedown)=\"onRestPointerDown('before', $event)\"\n (mouseup)=\"onRestPointerUp()\"\n (mouseleave)=\"onRestPointerLeave()\">\n <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n </div>\n\n <div\n #tabList\n rtElem=\"tab-list\"\n qa-dataid=\"tabs-tab-list\"\n role=\"tablist\"\n [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null }\"\n [attr.aria-orientation]=\"direction()\"\n (scroll)=\"onTabListScroll()\">\n @for (tab of visibleTabs(); track tab.id()) {\n @let focusable = tab.id() === focusId();\n <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n вкладку; крестик своё нажатие дальше не пускает. -->\n <div\n rtBlock=\"rt-tab-item\"\n role=\"presentation\"\n [rtMod]=\"{\n selected: tab.id() === selectedId(),\n disabled: tab.disabled(),\n invalid: tab.invalid(),\n stretch: stretch(),\n }\"\n [attr.data-tabitem]=\"tab.id()\"\n (click)=\"selectTab(tab.id())\">\n <button\n rtElem=\"trigger\"\n qa-dataid=\"tabs-tab\"\n type=\"button\"\n role=\"tab\"\n [rtMod]=\"{ closable: tab.showClose() }\"\n [id]=\"'rt-tab-' + tab.id()\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-keyshortcuts]=\"tab.showClose() ? 'Delete' : null\"\n [attr.data-tabid]=\"tab.id()\"\n [attr.aria-selected]=\"tab.id() === selectedId()\"\n [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [rtTooltip]=\"tab.buttonTooltip()\"\n (keydown)=\"onTabKeydown($event, tab)\">\n @if (tab.icon() || tab.glyph()) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"tab.icon()\" [glyph]=\"tab.glyph()\" [color]=\"tab.iconColor()\" />\n }\n\n @if (tab.titleTemplate(); as titleTpl) {\n <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n } @else {\n <span rtElem=\"title\">{{ tab.label() }}</span>\n }\n\n @if (tab.badge() !== null) {\n <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n <!-- prettier-ignore -->\n <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n }\n </button>\n\n @if (tab.showClose()) {\n <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n <button\n rtElem=\"close\"\n qa-dataid=\"tabs-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"tab.closeLabel()\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [rtTooltip]=\"tab.closeTooltip()\"\n [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n (mouseenter)=\"tab.closeHovered.set(true)\"\n (mouseleave)=\"tab.closeHovered.set(false)\"\n (click)=\"onCloseClick($event, tab)\">\n <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n </button>\n }\n </div>\n }\n\n <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n <span\n rtElem=\"ink\"\n aria-hidden=\"true\"\n [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n [style.width.px]=\"ink.box()?.width\"\n [style.translate]=\"ink.translate()\"></span>\n </div>\n\n <div\n rtElem=\"rest\"\n qa-dataid=\"tabs-scroll-next\"\n [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n (mousedown)=\"onRestPointerDown('after', $event)\"\n (mouseup)=\"onRestPointerUp()\"\n (mouseleave)=\"onRestPointerLeave()\">\n <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n </div>\n </div>\n\n @if (rightControls().length) {\n <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n @for (control of rightControls(); track $index) {\n <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n }\n </div>\n }\n </div>\n\n <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n тела посещённых вкладок скрыты и вне таб-порядка. -->\n @for (panel of panels.list(); track panel.tab.id()) {\n @let current = panel.leaving === null && !panel.idle;\n <div\n rtElem=\"content\"\n role=\"tabpanel\"\n [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n [attr.aria-hidden]=\"current ? null : 'true'\"\n [attr.inert]=\"current ? null : ''\"\n [hidden]=\"panel.idle\"\n [rtMod]=\"{\n scrollable: contentScrollable(),\n idle: panel.idle,\n leaving: panel.leaving !== null,\n entering: current && panels.shift() !== null,\n shift: panels.shift(),\n }\"\n [style.top.px]=\"panel.leaving?.top\"\n [style.left.px]=\"panel.leaving?.left\"\n [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n (animationend)=\"panels.animationEnd($event)\"\n (animationcancel)=\"panels.animationEnd($event)\">\n <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n </div>\n }\n</ng-container>\n",
|
|
1107
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"],
|
|
1119
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align, stretch);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color, var(--rt-color-border-default));margin:0;min-block-size:var(--rt-tabs-list-min-height, auto);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline, 0);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top, var(--rt-space-md));gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"],
|
|
1108
1120
|
dependencies: [
|
|
1109
1121
|
{
|
|
1110
1122
|
kind: "directive",
|
|
@@ -1192,10 +1204,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1192
1204
|
"[class.rt-tabs--direction--horizontal]": "direction() === 'horizontal'",
|
|
1193
1205
|
"[class.rt-tabs--direction--vertical]": "direction() === 'vertical'",
|
|
1194
1206
|
"[class.rt-tabs--animating]": "panels.shift() !== null",
|
|
1207
|
+
"[class.rt-tabs--dense]": "dense()",
|
|
1195
1208
|
"[style]": "panels.durations()"
|
|
1196
1209
|
},
|
|
1197
1210
|
template: "<ng-container rtBlock=\"rt-tabs\">\n <div rtElem=\"header\">\n @if (leftControls().length) {\n <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n @for (control of leftControls(); track $index) {\n <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n }\n </div>\n }\n\n <div rtElem=\"tab-list-wrapper\" [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing() }\">\n <div\n rtElem=\"rest\"\n qa-dataid=\"tabs-scroll-prev\"\n [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n (mousedown)=\"onRestPointerDown('before', $event)\"\n (mouseup)=\"onRestPointerUp()\"\n (mouseleave)=\"onRestPointerLeave()\">\n <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n </div>\n\n <div\n #tabList\n rtElem=\"tab-list\"\n qa-dataid=\"tabs-tab-list\"\n role=\"tablist\"\n [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null }\"\n [attr.aria-orientation]=\"direction()\"\n (scroll)=\"onTabListScroll()\">\n @for (tab of visibleTabs(); track tab.id()) {\n @let focusable = tab.id() === focusId();\n <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n вкладку; крестик своё нажатие дальше не пускает. -->\n <div\n rtBlock=\"rt-tab-item\"\n role=\"presentation\"\n [rtMod]=\"{\n selected: tab.id() === selectedId(),\n disabled: tab.disabled(),\n invalid: tab.invalid(),\n stretch: stretch(),\n }\"\n [attr.data-tabitem]=\"tab.id()\"\n (click)=\"selectTab(tab.id())\">\n <button\n rtElem=\"trigger\"\n qa-dataid=\"tabs-tab\"\n type=\"button\"\n role=\"tab\"\n [rtMod]=\"{ closable: tab.showClose() }\"\n [id]=\"'rt-tab-' + tab.id()\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-keyshortcuts]=\"tab.showClose() ? 'Delete' : null\"\n [attr.data-tabid]=\"tab.id()\"\n [attr.aria-selected]=\"tab.id() === selectedId()\"\n [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [rtTooltip]=\"tab.buttonTooltip()\"\n (keydown)=\"onTabKeydown($event, tab)\">\n @if (tab.icon() || tab.glyph()) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"tab.icon()\" [glyph]=\"tab.glyph()\" [color]=\"tab.iconColor()\" />\n }\n\n @if (tab.titleTemplate(); as titleTpl) {\n <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n } @else {\n <span rtElem=\"title\">{{ tab.label() }}</span>\n }\n\n @if (tab.badge() !== null) {\n <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n <!-- prettier-ignore -->\n <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n }\n </button>\n\n @if (tab.showClose()) {\n <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n <button\n rtElem=\"close\"\n qa-dataid=\"tabs-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"tab.closeLabel()\"\n [attr.tabindex]=\"focusable ? 0 : -1\"\n [rtTooltip]=\"tab.closeTooltip()\"\n [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n (mouseenter)=\"tab.closeHovered.set(true)\"\n (mouseleave)=\"tab.closeHovered.set(false)\"\n (click)=\"onCloseClick($event, tab)\">\n <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n </button>\n }\n </div>\n }\n\n <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n <span\n rtElem=\"ink\"\n aria-hidden=\"true\"\n [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n [style.width.px]=\"ink.box()?.width\"\n [style.translate]=\"ink.translate()\"></span>\n </div>\n\n <div\n rtElem=\"rest\"\n qa-dataid=\"tabs-scroll-next\"\n [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n (mousedown)=\"onRestPointerDown('after', $event)\"\n (mouseup)=\"onRestPointerUp()\"\n (mouseleave)=\"onRestPointerLeave()\">\n <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n </div>\n </div>\n\n @if (rightControls().length) {\n <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n @for (control of rightControls(); track $index) {\n <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n }\n </div>\n }\n </div>\n\n <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n тела посещённых вкладок скрыты и вне таб-порядка. -->\n @for (panel of panels.list(); track panel.tab.id()) {\n @let current = panel.leaving === null && !panel.idle;\n <div\n rtElem=\"content\"\n role=\"tabpanel\"\n [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n [attr.aria-hidden]=\"current ? null : 'true'\"\n [attr.inert]=\"current ? null : ''\"\n [hidden]=\"panel.idle\"\n [rtMod]=\"{\n scrollable: contentScrollable(),\n idle: panel.idle,\n leaving: panel.leaving !== null,\n entering: current && panels.shift() !== null,\n shift: panels.shift(),\n }\"\n [style.top.px]=\"panel.leaving?.top\"\n [style.left.px]=\"panel.leaving?.left\"\n [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n (animationend)=\"panels.animationEnd($event)\"\n (animationcancel)=\"panels.animationEnd($event)\">\n <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n </div>\n }\n</ng-container>\n",
|
|
1198
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"]
|
|
1211
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align, stretch);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color, var(--rt-color-border-default));margin:0;min-block-size:var(--rt-tabs-list-min-height, auto);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline, 0);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top, var(--rt-space-md));gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"]
|
|
1199
1212
|
}]
|
|
1200
1213
|
}],
|
|
1201
1214
|
ctorParameters: () => [],
|
|
@@ -1236,6 +1249,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1236
1249
|
required: false
|
|
1237
1250
|
}]
|
|
1238
1251
|
}],
|
|
1252
|
+
dense: [{
|
|
1253
|
+
type: i0.Input,
|
|
1254
|
+
args: [{
|
|
1255
|
+
isSignal: true,
|
|
1256
|
+
alias: "dense",
|
|
1257
|
+
required: false
|
|
1258
|
+
}]
|
|
1259
|
+
}],
|
|
1239
1260
|
contentScrollable: [{
|
|
1240
1261
|
type: i0.Input,
|
|
1241
1262
|
args: [{
|