@ds-mo/ui 8.2.0 → 8.3.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/dist/.build-stamp +1 -1
- package/dist/agent.json +112 -8
- package/dist/angular/ds-card-shell-data-viz.d.ts +12 -0
- package/dist/angular/ds-card-shell-data-viz.js +38 -0
- package/dist/angular/ds-chart-legend.d.ts +1 -1
- package/dist/angular/ds-chart-legend.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.d.ts +11 -0
- package/dist/components/ds-card-shell-data-viz.js +2 -0
- package/dist/components/ds-card-shell-data-viz.js.map +1 -0
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-field.js.map +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-radio.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-PP5602IN.js → p-BGcSrHKl.js} +2 -2
- package/dist/components/{p-CqsgiNwB.js → p-BKA6houZ.js} +2 -2
- package/dist/components/{p-KeMecQN9.js → p-C21sIElQ.js} +2 -2
- package/dist/components/{p-KeMecQN9.js.map → p-C21sIElQ.js.map} +1 -1
- package/dist/components/p-C7UFYvsO.js +2 -0
- package/dist/components/p-C7UFYvsO.js.map +1 -0
- package/dist/components/{p-DKVDYHxb.js → p-CKV6rOGa.js} +2 -2
- package/dist/components/{p-BU_gxTiw.js → p-CSTr2132.js} +2 -2
- package/dist/components/{p-Cj4vIqqx.js → p-CXF8yd-g.js} +2 -2
- package/dist/components/p-CysJosvS.js +2 -0
- package/dist/components/p-CysJosvS.js.map +1 -0
- package/dist/components/{p-CDu_LfhF.js → p-D6hvtWDk.js} +2 -2
- package/dist/components/{p-DHJZDpNk.js → p-DAuadHYu.js} +2 -2
- package/dist/components/{p-CSyIAX11.js → p-DV23KMU-.js} +2 -2
- package/dist/components/{p-kGSowBA8.js → p-DhxWfdX0.js} +2 -2
- package/dist/components/{p-C91iXoXj.js → p-DxQ4gzbA.js} +2 -2
- package/dist/components/{p-BjhTeU17.js → p-Pip-LNhl.js} +2 -2
- package/dist/components/{p-DRqbwDzo.js → p-_y99wWNU.js} +2 -2
- package/dist/docs/components.json +160 -12
- package/dist/lib/utils/format-percentage.d.ts +3 -0
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +12 -0
- package/dist/lib/utils/index.js.map +3 -3
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-card-shell-data-viz.d.ts +9 -0
- package/dist/react/ds-card-shell-data-viz.js +12 -0
- package/dist/types/components/Card/Card.d.ts +2 -1
- package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +3 -3
- package/dist/types/components/CardShellDataViz/CardShellDataViz.d.ts +13 -0
- package/dist/types/components/CardShellDataViz/index.d.ts +2 -0
- package/dist/types/components/ChartLegend/ChartLegend.d.ts +3 -0
- package/dist/types/components/ChartLegend/index.d.ts +1 -1
- package/dist/types/components/Field/Field.d.ts +1 -1
- package/dist/types/components.d.ts +80 -12
- package/dist/types/utils/format-percentage.d.ts +4 -0
- package/dist/types/utils/index.d.ts +2 -0
- package/package.json +2 -2
- package/dist/components/p-NwPqPArp.js +0 -2
- package/dist/components/p-NwPqPArp.js.map +0 -1
- /package/dist/components/{p-PP5602IN.js.map → p-BGcSrHKl.js.map} +0 -0
- /package/dist/components/{p-CqsgiNwB.js.map → p-BKA6houZ.js.map} +0 -0
- /package/dist/components/{p-DKVDYHxb.js.map → p-CKV6rOGa.js.map} +0 -0
- /package/dist/components/{p-BU_gxTiw.js.map → p-CSTr2132.js.map} +0 -0
- /package/dist/components/{p-Cj4vIqqx.js.map → p-CXF8yd-g.js.map} +0 -0
- /package/dist/components/{p-CDu_LfhF.js.map → p-D6hvtWDk.js.map} +0 -0
- /package/dist/components/{p-DHJZDpNk.js.map → p-DAuadHYu.js.map} +0 -0
- /package/dist/components/{p-CSyIAX11.js.map → p-DV23KMU-.js.map} +0 -0
- /package/dist/components/{p-kGSowBA8.js.map → p-DhxWfdX0.js.map} +0 -0
- /package/dist/components/{p-C91iXoXj.js.map → p-DxQ4gzbA.js.map} +0 -0
- /package/dist/components/{p-BjhTeU17.js.map → p-Pip-LNhl.js.map} +0 -0
- /package/dist/components/{p-DRqbwDzo.js.map → p-_y99wWNU.js.map} +0 -0
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1784316057333
|
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "8.
|
|
4
|
+
"packageVersion": "8.3.0",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -829,7 +829,7 @@
|
|
|
829
829
|
"tag": "ds-card",
|
|
830
830
|
"name": "card",
|
|
831
831
|
"title": "Card",
|
|
832
|
-
"summary": "
|
|
832
|
+
"summary": "General and settings-compatible card chrome — width + matching min-height tokens, header (title + actions slot), and a flex body that fills leftover space.",
|
|
833
833
|
"intentStatus": "migration-pending",
|
|
834
834
|
"intent": null,
|
|
835
835
|
"api": {
|
|
@@ -868,7 +868,7 @@
|
|
|
868
868
|
"tag": "ds-card-data-viz-donut",
|
|
869
869
|
"name": "card-data-viz-donut",
|
|
870
870
|
"title": "CardDataVizDonut",
|
|
871
|
-
"summary": "Donut data-viz card on
|
|
871
|
+
"summary": "Donut data-viz card on dedicated ds-card-shell-data-viz chrome — fill chart region, content-sized legend, header filter action, and chart↔legend hover sync.",
|
|
872
872
|
"intentStatus": "migration-pending",
|
|
873
873
|
"intent": null,
|
|
874
874
|
"api": {
|
|
@@ -905,7 +905,7 @@
|
|
|
905
905
|
],
|
|
906
906
|
"componentDependencies": [
|
|
907
907
|
"button-unfilled",
|
|
908
|
-
"card"
|
|
908
|
+
"card-shell-data-viz"
|
|
909
909
|
]
|
|
910
910
|
},
|
|
911
911
|
{
|
|
@@ -966,6 +966,106 @@
|
|
|
966
966
|
"card"
|
|
967
967
|
]
|
|
968
968
|
},
|
|
969
|
+
{
|
|
970
|
+
"id": "component:ds-card-shell-data-viz",
|
|
971
|
+
"tag": "ds-card-shell-data-viz",
|
|
972
|
+
"name": "card-shell-data-viz",
|
|
973
|
+
"title": "CardShellDataViz",
|
|
974
|
+
"summary": "Dedicated header, action, sizing, and body chrome for data-visualization cards whose layouts will evolve independently from general and settings cards.",
|
|
975
|
+
"intentStatus": "complete",
|
|
976
|
+
"intent": {
|
|
977
|
+
"audience": "specialized",
|
|
978
|
+
"status": "experimental",
|
|
979
|
+
"summary": "Dedicated header, action, sizing, and body chrome for data-visualization cards whose layouts will evolve independently from general and settings cards.",
|
|
980
|
+
"useWhen": [
|
|
981
|
+
"A card contains a chart, data-visualization legend, metric visualization, or a specialized data-viz composition.",
|
|
982
|
+
"A data-visualization card needs a heading and optional header actions while retaining a flexible body for its composing component.",
|
|
983
|
+
"Several chart-specific cards need one shell boundary that can evolve without changing general or settings cards."
|
|
984
|
+
],
|
|
985
|
+
"avoidWhen": [
|
|
986
|
+
"The card contains settings or editable form content; use the settings card composition.",
|
|
987
|
+
"The surface is ordinary content without data visualization; use the general card shell.",
|
|
988
|
+
"The shell would own chart-specific layout, hover synchronization, legends, or empty-state policy; keep those in the composing data-viz card."
|
|
989
|
+
],
|
|
990
|
+
"alternatives": [
|
|
991
|
+
{
|
|
992
|
+
"when": "The card contains general content rather than data visualization.",
|
|
993
|
+
"component": "component:ds-card",
|
|
994
|
+
"reason": "Card owns the existing general and settings-compatible chrome contract."
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
"when": "The composition is the standard donut chart plus synchronized legend.",
|
|
998
|
+
"component": "component:ds-card-data-viz-donut",
|
|
999
|
+
"reason": "CardDataVizDonut composes this shell with donut-specific regions and hover synchronization."
|
|
1000
|
+
}
|
|
1001
|
+
],
|
|
1002
|
+
"commonlyComposedWith": [
|
|
1003
|
+
"component:ds-chart-bar",
|
|
1004
|
+
"component:ds-chart-donut",
|
|
1005
|
+
"component:ds-chart-line",
|
|
1006
|
+
"component:ds-chart-legend",
|
|
1007
|
+
"component:ds-button-unfilled"
|
|
1008
|
+
],
|
|
1009
|
+
"accessibility": [
|
|
1010
|
+
"Provide a concise visible heading that identifies the visualization; the shell renders it as a section heading.",
|
|
1011
|
+
"Header actions must provide their own accessible names and communicate any controlled state or popup relationship.",
|
|
1012
|
+
"The shell does not add landmark or chart semantics; composing charts retain their own accessible names and descriptions.",
|
|
1013
|
+
"Do not duplicate chart data in the heading. Provide an accessible summary through the chart or adjacent composition when visual encoding alone is insufficient."
|
|
1014
|
+
],
|
|
1015
|
+
"states": [
|
|
1016
|
+
"The shell owns default data-visualization surface chrome only; loading, empty, error, selected, and interactive states belong to the composing card or chart.",
|
|
1017
|
+
"The actions slot collapses when empty so headings retain the available header width."
|
|
1018
|
+
],
|
|
1019
|
+
"responsiveBehavior": [
|
|
1020
|
+
"The selected sm, md, or lg width sets the matching token-based minimum height while max-width prevents overflow from a narrower parent.",
|
|
1021
|
+
"The parent layout chooses card width, wrapping, stacking, and breakpoint changes; the shell does not switch sizes automatically.",
|
|
1022
|
+
"The body is a flexible column so specialized data-viz cards can allocate remaining height between charts, legends, and supporting content."
|
|
1023
|
+
],
|
|
1024
|
+
"frameworkCaveats": {
|
|
1025
|
+
"customElements": [
|
|
1026
|
+
"Place header controls in the actions slot and data-visualization composition in the default slot."
|
|
1027
|
+
],
|
|
1028
|
+
"react": [
|
|
1029
|
+
"Pass header controls with slot=\"actions\" and keep chart state in the composing React component."
|
|
1030
|
+
],
|
|
1031
|
+
"angular": [
|
|
1032
|
+
"Project header controls with slot=\"actions\" and keep chart state in the composing Angular component."
|
|
1033
|
+
]
|
|
1034
|
+
},
|
|
1035
|
+
"references": [
|
|
1036
|
+
{
|
|
1037
|
+
"label": "Storybook examples",
|
|
1038
|
+
"path": "src/wc/components/CardShellDataViz/CardShellDataViz.stories.ts"
|
|
1039
|
+
}
|
|
1040
|
+
]
|
|
1041
|
+
},
|
|
1042
|
+
"api": {
|
|
1043
|
+
"props": {
|
|
1044
|
+
"cardWidth": {
|
|
1045
|
+
"type": "CardShellDataVizWidth",
|
|
1046
|
+
"required": false
|
|
1047
|
+
},
|
|
1048
|
+
"heading": {
|
|
1049
|
+
"type": "string",
|
|
1050
|
+
"required": true
|
|
1051
|
+
}
|
|
1052
|
+
},
|
|
1053
|
+
"events": [],
|
|
1054
|
+
"slots": []
|
|
1055
|
+
},
|
|
1056
|
+
"exports": {
|
|
1057
|
+
"customElement": "ds-card-shell-data-viz",
|
|
1058
|
+
"react": "DsCardShellDataViz",
|
|
1059
|
+
"angular": "DsCardShellDataViz"
|
|
1060
|
+
},
|
|
1061
|
+
"dependencies": [
|
|
1062
|
+
"@ds-mo/ui",
|
|
1063
|
+
"@ds-mo/tokens"
|
|
1064
|
+
],
|
|
1065
|
+
"componentDependencies": [
|
|
1066
|
+
"text"
|
|
1067
|
+
]
|
|
1068
|
+
},
|
|
969
1069
|
{
|
|
970
1070
|
"id": "component:ds-chart-bar",
|
|
971
1071
|
"tag": "ds-chart-bar",
|
|
@@ -1099,6 +1199,10 @@
|
|
|
1099
1199
|
"type": "string | undefined",
|
|
1100
1200
|
"required": false
|
|
1101
1201
|
},
|
|
1202
|
+
"percentageDecimals": {
|
|
1203
|
+
"type": "ChartLegendPercentageDecimals",
|
|
1204
|
+
"required": false
|
|
1205
|
+
},
|
|
1102
1206
|
"showPercentage": {
|
|
1103
1207
|
"type": "boolean",
|
|
1104
1208
|
"required": false
|
|
@@ -1715,14 +1819,14 @@
|
|
|
1715
1819
|
],
|
|
1716
1820
|
"accessibility": [
|
|
1717
1821
|
"Slot exactly one form control. Field assigns its stable control ID and connects the visible label automatically.",
|
|
1718
|
-
"
|
|
1822
|
+
"The visible description or error ID is merged with any authored aria-describedby references; a rendered error replaces the description.",
|
|
1719
1823
|
"The error prop forwards aria-invalid and supported design-system control error styling; put visible error text on Field, not again on the child control.",
|
|
1720
1824
|
"Clicking the label focuses the slotted design-system control without opening a Select popup.",
|
|
1721
1825
|
"Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
|
|
1722
1826
|
],
|
|
1723
1827
|
"states": [
|
|
1724
1828
|
"Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
|
|
1725
|
-
"
|
|
1829
|
+
"A rendered error replaces the description; preserve essential guidance in the error message so users retain what they need to correct the field.",
|
|
1726
1830
|
"Field owns validation presentation but not validation timing; the form decides when to set error and errorMessage.",
|
|
1727
1831
|
"The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text."
|
|
1728
1832
|
],
|
|
@@ -4106,7 +4210,7 @@
|
|
|
4106
4210
|
"Horizontal Slider fills the width supplied by its parent; the parent chooses an appropriate readable track length.",
|
|
4107
4211
|
"Vertical Slider owns a token-based default length that may be overridden with --ds-slider-vertical-length in layout-specific compositions.",
|
|
4108
4212
|
"Use md in ordinary forms and sm or xs only when the surrounding control density uses the same recipe.",
|
|
4109
|
-
"Track thickness scales with density: 8px at md, 6px at sm, and 4px at xs. The unfilled track is transparent with a tertiary-foreground inset outline, the filled range is brand, and the thumb uses a 1.5px brand inset ring.",
|
|
4213
|
+
"Track thickness scales with density: 8px at md, 6px at sm, and 4px at xs. The unfilled track is transparent with a tertiary-foreground inset outline, the filled range is brand, and the square thumb uses a 2px radius with a 1.5px brand inset ring.",
|
|
4110
4214
|
"Horizontal value direction is left-to-right; the design system does not author RTL-specific component behavior."
|
|
4111
4215
|
],
|
|
4112
4216
|
"frameworkCaveats": {
|
|
@@ -4326,7 +4430,7 @@
|
|
|
4326
4430
|
"Activation updates checked immediately and emits dsChange with the new boolean value.",
|
|
4327
4431
|
"The initial checked value is the form-reset baseline; unchecked switches submit nothing unless uncheckedValue is provided.",
|
|
4328
4432
|
"Sizes are md 32×20 with a 12px thumb and 4px body inset, sm 24×16 with a 10px thumb and 3px inset, and xs 20×12 with an 8px thumb and 2px inset.",
|
|
4329
|
-
"Unchecked
|
|
4433
|
+
"Unchecked uses a transparent track with a density-specific tertiary-foreground inset stroke and a solid tertiary-foreground thumb without a border. Checked uses a brand track and primary-background thumb with no strokes.",
|
|
4330
4434
|
"Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
|
|
4331
4435
|
],
|
|
4332
4436
|
"responsiveBehavior": [
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
|
|
2
|
+
import type { Components } from '@ds-mo/ui/components';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class DsCardShellDataViz {
|
|
5
|
+
protected z: NgZone;
|
|
6
|
+
protected el: HTMLDsCardShellDataVizElement;
|
|
7
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DsCardShellDataViz, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsCardShellDataViz, "ds-card-shell-data-viz", never, { "cardWidth": { "alias": "cardWidth"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; }, {}, never, ["*"], true, never>;
|
|
10
|
+
}
|
|
11
|
+
export declare interface DsCardShellDataViz extends Components.DsCardShellDataViz {
|
|
12
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
/* tslint:disable */
|
|
8
|
+
/* auto-generated angular directive proxies */
|
|
9
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
10
|
+
import { ProxyCmp } from './angular-component-lib/utils.js';
|
|
11
|
+
import { defineCustomElement as defineDsCardShellDataViz } from '@ds-mo/ui/components/ds-card-shell-data-viz.js';
|
|
12
|
+
import * as i0 from "@angular/core";
|
|
13
|
+
let DsCardShellDataViz = class DsCardShellDataViz {
|
|
14
|
+
constructor(c, r, z) {
|
|
15
|
+
this.z = z;
|
|
16
|
+
c.detach();
|
|
17
|
+
this.el = r.nativeElement;
|
|
18
|
+
}
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsCardShellDataViz, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsCardShellDataViz, isStandalone: true, selector: "ds-card-shell-data-viz", inputs: { cardWidth: "cardWidth", heading: "heading" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
|
+
};
|
|
22
|
+
DsCardShellDataViz = __decorate([
|
|
23
|
+
ProxyCmp({
|
|
24
|
+
defineCustomElementFn: defineDsCardShellDataViz,
|
|
25
|
+
inputs: ['cardWidth', 'heading']
|
|
26
|
+
})
|
|
27
|
+
], DsCardShellDataViz);
|
|
28
|
+
export { DsCardShellDataViz };
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsCardShellDataViz, decorators: [{
|
|
30
|
+
type: Component,
|
|
31
|
+
args: [{
|
|
32
|
+
selector: 'ds-card-shell-data-viz',
|
|
33
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
34
|
+
template: '<ng-content></ng-content>',
|
|
35
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
36
|
+
inputs: ['cardWidth', { name: 'heading', required: true }],
|
|
37
|
+
}]
|
|
38
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
@@ -13,7 +13,7 @@ export declare class DsChartLegend {
|
|
|
13
13
|
}>>;
|
|
14
14
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsChartLegend, never>;
|
|
16
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsChartLegend, "ds-chart-legend", never, { "activeLabel": { "alias": "activeLabel"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "items": { "alias": "items"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "showPercentage": { "alias": "showPercentage"; "required": false; }; }, { "dsItemHover": "dsItemHover"; "dsItemClick": "dsItemClick"; }, never, ["*"], true, never>;
|
|
16
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsChartLegend, "ds-chart-legend", never, { "activeLabel": { "alias": "activeLabel"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "items": { "alias": "items"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "percentageDecimals": { "alias": "percentageDecimals"; "required": false; }; "showPercentage": { "alias": "showPercentage"; "required": false; }; }, { "dsItemHover": "dsItemHover"; "dsItemClick": "dsItemClick"; }, never, ["*"], true, never>;
|
|
17
17
|
}
|
|
18
18
|
export declare interface DsChartLegend extends Components.DsChartLegend {
|
|
19
19
|
/**
|
|
@@ -19,12 +19,12 @@ let DsChartLegend = class DsChartLegend {
|
|
|
19
19
|
this.el = r.nativeElement;
|
|
20
20
|
}
|
|
21
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsChartLegend, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsChartLegend, isStandalone: true, selector: "ds-chart-legend", inputs: { activeLabel: "activeLabel", direction: "direction", items: "items", locale: "locale", showPercentage: "showPercentage" }, outputs: { dsItemHover: "dsItemHover", dsItemClick: "dsItemClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsChartLegend, isStandalone: true, selector: "ds-chart-legend", inputs: { activeLabel: "activeLabel", direction: "direction", items: "items", locale: "locale", percentageDecimals: "percentageDecimals", showPercentage: "showPercentage" }, outputs: { dsItemHover: "dsItemHover", dsItemClick: "dsItemClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
23
|
};
|
|
24
24
|
DsChartLegend = __decorate([
|
|
25
25
|
ProxyCmp({
|
|
26
26
|
defineCustomElementFn: defineDsChartLegend,
|
|
27
|
-
inputs: ['activeLabel', 'direction', 'items', 'locale', 'showPercentage']
|
|
27
|
+
inputs: ['activeLabel', 'direction', 'items', 'locale', 'percentageDecimals', 'showPercentage']
|
|
28
28
|
})
|
|
29
29
|
], DsChartLegend);
|
|
30
30
|
export { DsChartLegend };
|
|
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
35
35
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
36
36
|
template: '<ng-content></ng-content>',
|
|
37
37
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
38
|
-
inputs: ['activeLabel', 'direction', 'items', 'locale', 'showPercentage'],
|
|
38
|
+
inputs: ['activeLabel', 'direction', 'items', 'locale', 'percentageDecimals', 'showPercentage'],
|
|
39
39
|
outputs: ['dsItemHover', 'dsItemClick'],
|
|
40
40
|
}]
|
|
41
41
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsItemHover: [{
|
package/dist/angular/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import * as d from './proxies';
|
|
2
|
-
export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPagination | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsSelectMulti | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];
|
|
2
|
+
export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCardShellDataViz | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPagination | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsSelectMulti | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];
|
package/dist/angular/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export { DsButtonUnfilled } from './ds-button-unfilled';
|
|
|
11
11
|
export { DsCard } from './ds-card';
|
|
12
12
|
export { DsCardDataVizDonut } from './ds-card-data-viz-donut';
|
|
13
13
|
export { DsCardSetting } from './ds-card-setting';
|
|
14
|
+
export { DsCardShellDataViz } from './ds-card-shell-data-viz';
|
|
14
15
|
export { DsChartBar } from './ds-chart-bar';
|
|
15
16
|
export { DsChartDonut } from './ds-chart-donut';
|
|
16
17
|
export { DsChartLegend } from './ds-chart-legend';
|
package/dist/angular/proxies.js
CHANGED
|
@@ -12,6 +12,7 @@ export { DsButtonUnfilled } from './ds-button-unfilled.js';
|
|
|
12
12
|
export { DsCard } from './ds-card.js';
|
|
13
13
|
export { DsCardDataVizDonut } from './ds-card-data-viz-donut.js';
|
|
14
14
|
export { DsCardSetting } from './ds-card-setting.js';
|
|
15
|
+
export { DsCardShellDataViz } from './ds-card-shell-data-viz.js';
|
|
15
16
|
export { DsChartBar } from './ds-chart-bar.js';
|
|
16
17
|
export { DsChartDonut } from './ds-chart-donut.js';
|
|
17
18
|
export { DsChartLegend } from './ds-chart-legend.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,t,H as s,h as n,a as i}from"./index.js";import{D as a,c as o,n as l,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as d,a as p,b as f}from"./p-BKhG2xrW.js";const u={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const t=e;const s=t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(s)return true;const n=t.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(t.isContentEditable)}function m(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const t=m(e);if(t==="[")return"toggle-panel-nav";if(t==="]")return"close-panel-tools";const s=u[t];if(s)return`open-tool:${s}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return o(e)}function z(e){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const s=t.visualViewport;return{width:Math.round(s?.width??t.innerWidth),height:Math.round(s?.height??t.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,t){if(typeof document==="undefined")return 0;const s=document.createElement("div");s.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";e.appendChild(s);const n=s.getBoundingClientRect().width;e.removeChild(s);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const s=e?.collapsed;return s===true}function j(e,t){return t?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.enter();const t=z();this.cachedViewportWidth=t.width;this.cachedViewportHeight=t.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(t){t.setAttribute("nav-style",this.navStyle);t.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,t){const s=e.style;for(const[e,n]of Object.entries(t)){if(n===null)s.removeProperty(e);else s.setProperty(e,n)}}clearGradientPaintVars(e){const t=[y,_,k];for(const s of e){for(const e of t)s.style.removeProperty(e)}}syncChromeLayoutVars(e,t,s,n){if(e){e.style.setProperty(x,s)}if(t){t.style.setProperty(w,n)}}resolvePanelWidthPx(e){const t=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}const s=this.el.querySelector(".app-shell__panel");const n=s?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return l(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const t=v(e);if(!t)return;e.preventDefault();const s=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(t==="toggle-panel-nav"){void s?.toggleCollapsed();return}if(t==="close-panel-tools"){void n?.closeDrawer();return}if(t.startsWith("open-tool:")&&n){const e=t.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");const s=[this.el,e,t].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(t)t.style.removeProperty(w)};const i=l(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(s);n();return}const a=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(e);const h=C();const c=D(o);this.syncChromeLayoutVars(e,t,h,c);const d=P(i);const p=S({width:a.width,height:a.height});const f=r(i);for(const e of s){if(e===this.el){this.applyGradientVars(e,{[y]:d,[_]:p,[x]:h,[w]:c,[k]:f});continue}const t=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:d,[_]:p,[k]:f,[x]:t?null:h,[w]:t?c:null})}}render(){const e=this.chromeLayerActive();const t={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"eee43b0c92eabc6b1b0d49dfae5b5f6a1d545fd2",class:t},n("div",{key:"39cfcf8d5554229598e2dd2590b049ea5abe7a30",class:"app-shell__row"},n("div",{key:"912d21ad7a1dbd656be72fcfa553155db00cc0a5",class:"app-shell__chrome","aria-hidden":"true"}),n("div",{key:"14fca22ced024622891dc0854d77fdccec26ceee",class:"app-shell__panel"},n("slot",{key:"b22ae4a01e654777a4e5263535cadda4b3f9edfb",name:"panel"})),n("div",{key:"447d220769244fc2080bcf07467c3c9379515fa8",class:"app-shell__main"},n("div",{key:"b21a7dd2b2c84a068d008a71264ffb1408e2ae6a",class:"app-shell__bar"},n("slot",{key:"8c113f5a46d114cbd3cb5acf9678fe88729d95d4",name:"bar"})),n("div",{key:"b5488d2be46fa6323823b9da3ac50ee45d1495b6",class:"app-shell__tools"},n("slot",{key:"869559bebba130434e76b0ffc881868becb50776",name:"tools"})),n("div",{key:"c9166349f811d15e2a0e2fd39f377ce1635d7fe6",class:"app-shell__content"},n("slot",{key:"7427f9cef625fffbd4023be197e8cb21fc896cb6"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(t(e))){customElements.define(t(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
|
|
1
|
+
import{p as e,t,H as s,h as n,a as i}from"./index.js";import{D as a,c as o,n as l,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as p,a as d,b as f}from"./p-BKhG2xrW.js";const u={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const t=e;const s=t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(s)return true;const n=t.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(t.isContentEditable)}function m(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const t=m(e);if(t==="[")return"toggle-panel-nav";if(t==="]")return"close-panel-tools";const s=u[t];if(s)return`open-tool:${s}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return o(e)}function z(e){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const s=t.visualViewport;return{width:Math.round(s?.width??t.innerWidth),height:Math.round(s?.height??t.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,t){if(typeof document==="undefined")return 0;const s=document.createElement("div");s.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";e.appendChild(s);const n=s.getBoundingClientRect().width;e.removeChild(s);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const s=e?.collapsed;return s===true}function j(e,t){return t?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.enter();const t=z();this.cachedViewportWidth=t.width;this.cachedViewportHeight=t.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(d,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(d,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(t){t.setAttribute("nav-style",this.navStyle);t.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,t){const s=e.style;for(const[e,n]of Object.entries(t)){if(n===null)s.removeProperty(e);else s.setProperty(e,n)}}clearGradientPaintVars(e){const t=[y,_,k];for(const s of e){for(const e of t)s.style.removeProperty(e)}}syncChromeLayoutVars(e,t,s,n){if(e){e.style.setProperty(x,s)}if(t){t.style.setProperty(w,n)}}resolvePanelWidthPx(e){const t=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}const s=this.el.querySelector(".app-shell__panel");const n=s?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return l(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const t=v(e);if(!t)return;e.preventDefault();const s=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(t==="toggle-panel-nav"){void s?.toggleCollapsed();return}if(t==="close-panel-tools"){void n?.closeDrawer();return}if(t.startsWith("open-tool:")&&n){const e=t.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");const s=[this.el,e,t].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(t)t.style.removeProperty(w)};const i=l(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(s);n();return}const a=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(e);const h=C();const c=D(o);this.syncChromeLayoutVars(e,t,h,c);const p=P(i);const d=S({width:a.width,height:a.height});const f=r(i);for(const e of s){if(e===this.el){this.applyGradientVars(e,{[y]:p,[_]:d,[x]:h,[w]:c,[k]:f});continue}const t=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:p,[_]:d,[k]:f,[x]:t?null:h,[w]:t?c:null})}}render(){const e=this.chromeLayerActive();const t={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"1b601eb56c802874ce59ea72b91f7af97b3a0f7e",class:t},n("div",{key:"73a0e618849b129c2ffaab607e4f21139706d793",class:"app-shell__row"},n("div",{key:"3971fc6f813a9af9c100f764dcf9b934f0527f29",class:"app-shell__chrome","aria-hidden":"true"}),n("div",{key:"cbc26a0940946b5d433f74da7cf2e14de420b9cd",class:"app-shell__panel"},n("slot",{key:"53ac2844e76b33f4761a3429e5e439d616c398a0",name:"panel"})),n("div",{key:"c5540f87a9cd53c2db0dfae0a960e86e6f6da08e",class:"app-shell__main"},n("div",{key:"fad6adfea595a23ecf2905495238d461fed04bbb",class:"app-shell__bar"},n("slot",{key:"e9974b75c9fe7c10630c05a2369ad0af47a6f537",name:"bar"})),n("div",{key:"87602d9d2288973a3aca4e838a518074942caf09",class:"app-shell__tools"},n("slot",{key:"c0bb98a9d76208268652e77db35913f6e03a44c3",name:"tools"})),n("div",{key:"9cfd2ac5d356068af65bd7fa1c11dc4099954d5e",class:"app-shell__content"},n("slot",{key:"8ce8aa8a5a4201864f2c5f17bc119231580a32e8"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(t(e))){customElements.define(t(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-app-shell.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-DAuadHYu.js";const t=o;const a=s;export{t as DsBadge,a as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-badge.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as n,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-
|
|
1
|
+
import{p as s,H as e,c as n,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-BKA6houZ.js";import{r as o,a as d}from"./p-BHtg1fh3.js";import{T as l}from"./p-drBA73M_.js";const c=()=>`.banner-surface.sc-ds-banner{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dimension-radius-075)}.banner-header-surface.sc-ds-banner{width:100%;height:var(--dimension-space-100);flex-shrink:0;overflow:hidden;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.banner-header.sc-ds-banner{width:100%;height:100%;background:repeating-linear-gradient( -45deg, var(--banner-content), var(--banner-content) var(--dimension-size-100), transparent var(--dimension-size-100), transparent var(--dimension-size-200) )}.banner-body.sc-ds-banner{padding:var(--dimension-space-075);min-height:var(--dimension-size-400);display:flex;align-items:flex-start;gap:var(--dimension-space-075)}.banner-message.sc-ds-banner{color:var(--banner-content);flex:1;min-width:0}.banner-dismiss.sc-ds-banner{background:none;border:none;margin:0;padding:var(--dimension-space-025);color:var(--banner-content);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--dimension-radius-050);position:relative;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.banner-dismiss.sc-ds-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));pointer-events:none}.banner-dismiss.sc-ds-banner:hover::before{background-color:var(--color-interaction-hover)}.banner-dismiss.sc-ds-banner:active::before{background-color:var(--color-interaction-pressed)}.banner-dismiss.sc-ds-banner:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.floating-position.sc-ds-banner{position:fixed;top:var(--dimension-space-200);left:50%;transform:translateX(-50%);pointer-events:none}.floating-toast.sc-ds-banner{pointer-events:auto;animation:bannerFadeIn var(--effect-motion-short-2, 150ms) forwards}.floating-toast--closing.sc-ds-banner{animation:bannerFadeOut var(--effect-motion-short-3, 200ms) forwards}@keyframes bannerFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.floating-toast.sc-ds-banner{animation:none;opacity:1;transform:none}.floating-toast--closing.sc-ds-banner{opacity:0}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsDismiss=n(this,"dsDismiss");this.intent="neutral";this.contrast="medium";this.message="";this.header=false;this.floating=false;this.showDismiss=false;this.dismissLabel="Dismiss";this.closing=false;this.dismissTimer=null;this.closeTimer=null}get fadeOutMs(){return o(l.motionShort3,l.animationDurationShort3)}get autoDismissMs(){return d(l.animationDelayLong2,l.animationDelayLong2)}componentDidLoad(){if(this.floating&&this.message)this.scheduleDismiss()}onMessageChange(s){if(this.floating&&s){this.closing=false;this.scheduleDismiss()}}disconnectedCallback(){this.clearTimers()}clearTimers(){if(this.dismissTimer){clearTimeout(this.dismissTimer);this.dismissTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}scheduleDismiss(){this.clearTimers();this.dismissTimer=setTimeout((()=>{this.dismissTimer=null;this.beginClose()}),this.autoDismissMs)}beginClose(){this.clearTimers();if(this.floating){const s=this.fadeOutMs;if(s<=0){this.closing=false;this.dsDismiss.emit();return}this.closing=true;this.closeTimer=setTimeout((()=>{this.closing=false;this.closeTimer=null;this.dsDismiss.emit()}),s)}else{this.dsDismiss.emit()}}getContentColor(){if(this.contrast==="bold")return"var(--color-foreground-on-bold-background-primary)";const s=this.contrast==="faint"?"bold":this.contrast==="medium"?"strong":"medium";return`var(--color-foreground-${s}-${this.intent})`}getBg(){return`var(--color-background-${this.contrast}-${this.intent})`}getElevation(){return this.floating?"var(--effect-elevation-elevated-floating)":"var(--effect-elevation-elevated-sm)"}render(){const s=this.getContentColor();const e=this.intent==="negative";const n=t("div",{class:{"banner-wrapper":true},style:{"--banner-content":s},role:e?"alert":"status","aria-live":e?undefined:"polite"},t("div",{class:"banner-surface",style:{backgroundColor:this.getBg(),boxShadow:this.getElevation()}},this.header&&t("div",{class:"banner-header-surface"},t("div",{class:"banner-header"})),t("div",{class:"banner-body"},t("ds-text",{class:"banner-message",as:"div",variant:"text-body-medium",color:"inherit"},this.message),this.showDismiss&&t("button",{type:"button",class:"banner-dismiss",onClick:()=>this.beginClose(),"aria-label":this.dismissLabel},"×"))));if(this.floating){return t(i,{style:{display:"contents"}},t("div",{class:"floating-position",style:{zIndex:"9998"}},t("div",{class:{"floating-toast":true,"floating-toast--closing":this.closing}},n)))}return t(i,{style:{display:"contents"}},n)}static get watchers(){return{message:[{onMessageChange:0}]}}static get style(){return c()}},[2,"ds-banner",{intent:[1],contrast:[1],message:[1],header:[4],floating:[4],showDismiss:[4,"show-dismiss"],dismissLabel:[1,"dismiss-label"],closing:[32]},undefined,{message:[{onMessageChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-banner","ds-text"];s.forEach((s=>{switch(s){case"ds-banner":if(!customElements.get(r(s))){customElements.define(r(s),h)}break;case"ds-text":if(!customElements.get(r(s))){a()}break}}))}f();const m=h;const b=f;export{m as DsBanner,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-banner.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r,g as o}from"./p-BQq26pt9.js";import{s as h,p as d,d as c}from"./p-BOQnc-M4.js";import{C as l,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-DHJZDpNk.js";import{d as m}from"./p-CSyIAX11.js";import{d as _}from"./p-Cj4vIqqx.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-BU_gxTiw.js";import{d as k}from"./p-DKVDYHxb.js";import{d as C}from"./p-BjhTeU17.js";import{d as x}from"./p-NwPqPArp.js";import{d as T}from"./p-CqsgiNwB.js";function S(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function E(s,t){return S(j(s),t)}function F(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function O(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=D(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=D(s,t,e,n);if(i>r)break;o=t}return o}function P(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function j(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function D(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const M=()=>`.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const H=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new l;this.panelToolsTransition=new l;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(h(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=F(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=O(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=P(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?d(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=E(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=c(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let a;if(s.key==="ArrowRight"){a=this.findEnabledVisibleTab(n,1);if(a===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){a=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){a=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));a=s<0?null:t.length-1-s}else{return}if(a===null||a<0||a===n)return;s.preventDefault();this.focusVisibleTab(t[a].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(r(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"1d5b9ec69bb3fa340eefdb9dfb61efbcae7c6127"},e("header",{key:"6e6eb977c91e119bacf02971c0f3309b67286757",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"90884051b928459ff46cedb5298f2a5039e3fe94",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"5509110ceba10f5508422adf875d6f8231933904",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(a,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"01e0e319a087b7e96c8892ccdb9d10c5f06bfebe",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"b22e24e2e8ab2c0856fdf7fd284da2372dea10dd",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"3cf362ee6b9c3c4a4c6370c7d75755ac1833623a",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"1eeec0a94361ab34ee475814791a12973b39d373",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:E(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return M()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function L(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),H)}break;case"ds-badge":if(!customElements.get(a(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){m()}break;case"ds-icon":if(!customElements.get(a(s))){_()}break;case"ds-loader":if(!customElements.get(a(s))){y()}break;case"ds-menu":if(!customElements.get(a(s))){w()}break;case"ds-shell-gradient-picker":if(!customElements.get(a(s))){k()}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(s))){C()}break;case"ds-switch":if(!customElements.get(a(s))){x()}break;case"ds-text":if(!customElements.get(a(s))){T()}break}}))}L();const V=H;const z=L;export{V as DsBarNav,z as defineCustomElement};
|
|
1
|
+
import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r,g as o}from"./p-BQq26pt9.js";import{s as h,p as d,d as l}from"./p-BOQnc-M4.js";import{C as c,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-DAuadHYu.js";import{d as m}from"./p-DV23KMU-.js";import{d as _}from"./p-CXF8yd-g.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-CSTr2132.js";import{d as k}from"./p-CKV6rOGa.js";import{d as C}from"./p-Pip-LNhl.js";import{d as x}from"./p-C7UFYvsO.js";import{d as T}from"./p-BKA6houZ.js";function S(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return S(P(s),t)}function O(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function E(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=j(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=j(s,t,e,n);if(i>r)break;o=t}return o}function M(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function P(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function j(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const D=()=>`.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const H=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(h(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=O(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=E(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=M(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?d(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=F(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let a;if(s.key==="ArrowRight"){a=this.findEnabledVisibleTab(n,1);if(a===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){a=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){a=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));a=s<0?null:t.length-1-s}else{return}if(a===null||a<0||a===n)return;s.preventDefault();this.focusVisibleTab(t[a].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(r(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"4e04ea6a712fdce46b5c775a075da0d811a2f6e6"},e("header",{key:"f263b278579ce4c353222bded99960e5ee403409",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"991015926d596a48d25c8754e385f21d36538aab",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"c4b45d637e1d9f2cd330608ffa3264c8c744c374",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(a,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"b1e22f31bae6d3e509ae70a5f3799ce0b78547ae",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"852a5207a485d4e1881219bd1fbbf57048452941",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"b682b6daf3ea0d2b9e95d8aebc36ba366486bb7f",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"1bf793156c928ec49788784c549ad1d9506dbebc",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function L(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),H)}break;case"ds-badge":if(!customElements.get(a(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){m()}break;case"ds-icon":if(!customElements.get(a(s))){_()}break;case"ds-loader":if(!customElements.get(a(s))){y()}break;case"ds-menu":if(!customElements.get(a(s))){w()}break;case"ds-shell-gradient-picker":if(!customElements.get(a(s))){k()}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(s))){C()}break;case"ds-switch":if(!customElements.get(a(s))){x()}break;case"ds-text":if(!customElements.get(a(s))){T()}break}}))}L();const V=H;const z=L;export{V as DsBarNav,z as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-BGcSrHKl.js";const r=o;const t=s;export{r as DsButtonFilled,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-filled.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-DV23KMU-.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-unfilled.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,c as
|
|
1
|
+
import{p as t,H as e,c as d,h as a,a as s,t as i}from"./index.js";import{d as n}from"./p-DAuadHYu.js";import{d as o}from"./p-DV23KMU-.js";import{d as c}from"./p-CysJosvS.js";import{d as r}from"./p-CXF8yd-g.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-BKA6houZ.js";const f=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=d(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return a(s,{key:"d37e60bd66f019ba7a6fa848740f7216444b53f8",class:"card-data-viz-donut"},a("ds-card-shell-data-viz",{key:"ae296bb5990f27b87039f39dc91d447e8ccb3567",heading:this.heading,cardWidth:this.cardWidth},a("ds-button-unfilled",{key:"436cd53e5b1771803d65b6ebf88eb431034a13f9",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),a("div",{key:"a8155fb761844b3e06900eb4becd71c5acafcf91",class:"card-data-viz-donut__layout"},this.hasChartSlot&&a("div",{key:"76cda67583ec133ded0cae2d3c84f0dbe6433d4e",class:"card-data-viz-donut__chart-region"},a("slot",{key:"8a3352f7f39d4250680952e1fbbe3ffb74bfd7d9",name:"chart"})),this.hasLegendSlot&&a("div",{key:"70dee2c5dc52d3c24af72183f59aeb63ad11d33f",class:"card-data-viz-donut__legend-region"},a("slot",{key:"5ae5bc8d1b1973ea5303853d47118bd9fee5495e",name:"legend"})))))}get el(){return this}static get style(){return f()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function m(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),u)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}m();const b=u;const v=m;export{b as DsCardDataVizDonut,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-data-viz-donut.js.map
|