@ds-mo/ui 8.2.1 → 8.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/Select/Select.d.ts +5 -0
- package/dist/types/components/SelectMulti/SelectMulti.d.ts +5 -0
- 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
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type CardShellDataVizWidth = 'sm' | 'md' | 'lg';
|
|
2
|
+
/**
|
|
3
|
+
* Dedicated shell chrome for data-visualization cards. Chart-specific layout,
|
|
4
|
+
* legends, hover synchronization, and empty states belong to composing cards.
|
|
5
|
+
*/
|
|
6
|
+
export declare class CardShellDataViz {
|
|
7
|
+
/** Data-visualization heading shown in the shell header. */
|
|
8
|
+
heading: string;
|
|
9
|
+
/** Width token with the matching data-visualization shell min-height. */
|
|
10
|
+
cardWidth: CardShellDataVizWidth;
|
|
11
|
+
render(): any;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=CardShellDataViz.d.ts.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
import type { ChartLegendItem } from '../../utils/chart-types';
|
|
3
3
|
export type ChartLegendDirection = 'vertical' | 'horizontal';
|
|
4
|
+
export type ChartLegendPercentageDecimals = 1 | 2;
|
|
4
5
|
/**
|
|
5
6
|
* Base legend for `ds-chart-*` components. Webapp's Overview widgets each style
|
|
6
7
|
* legends differently (list w/ values, compact chips, bare swatches, external
|
|
@@ -15,6 +16,8 @@ export declare class ChartLegend {
|
|
|
15
16
|
direction: ChartLegendDirection;
|
|
16
17
|
/** Show each item's share of the total (of items with a `value`) alongside its count. */
|
|
17
18
|
showPercentage: boolean;
|
|
19
|
+
/** Fixed number of decimal places shown for percentages. */
|
|
20
|
+
percentageDecimals: ChartLegendPercentageDecimals;
|
|
18
21
|
/**
|
|
19
22
|
* Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
|
|
20
23
|
* chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other
|
|
@@ -4,7 +4,7 @@ export declare class Field {
|
|
|
4
4
|
label: string;
|
|
5
5
|
/** Explicit ID for the slotted control; generated when omitted. */
|
|
6
6
|
fieldId: string | undefined;
|
|
7
|
-
/** Optional guidance associated with the slotted control. */
|
|
7
|
+
/** Optional guidance associated with the slotted control while no visible error is shown. */
|
|
8
8
|
description: string | undefined;
|
|
9
9
|
/** Invalid visual and accessible state forwarded to supported ds controls. */
|
|
10
10
|
error: boolean;
|
|
@@ -90,6 +90,7 @@ export declare class Select {
|
|
|
90
90
|
private typeaheadTimer;
|
|
91
91
|
private outsideHandler;
|
|
92
92
|
private repositionHandler;
|
|
93
|
+
private positionRetryRaf;
|
|
93
94
|
componentWillLoad(): void;
|
|
94
95
|
componentDidLoad(): void;
|
|
95
96
|
disconnectedCallback(): void;
|
|
@@ -113,6 +114,10 @@ export declare class Select {
|
|
|
113
114
|
private scrollActiveOptionIntoView;
|
|
114
115
|
private bindPopupListeners;
|
|
115
116
|
private unbindPopupListeners;
|
|
117
|
+
private cancelPositionRetry;
|
|
118
|
+
/** Retry until the conditionally rendered popup is mounted and measurable. */
|
|
119
|
+
private schedulePositionUpdate;
|
|
120
|
+
/** @returns `true` when the current popup was found and positioned. */
|
|
116
121
|
private updatePosition;
|
|
117
122
|
private openPopup;
|
|
118
123
|
private closePopup;
|
|
@@ -94,6 +94,7 @@ export declare class SelectMulti {
|
|
|
94
94
|
private typeaheadTimer;
|
|
95
95
|
private outsideHandler;
|
|
96
96
|
private repositionHandler;
|
|
97
|
+
private positionRetryRaf;
|
|
97
98
|
componentWillLoad(): void;
|
|
98
99
|
componentDidLoad(): void;
|
|
99
100
|
disconnectedCallback(): void;
|
|
@@ -117,6 +118,10 @@ export declare class SelectMulti {
|
|
|
117
118
|
private scrollActiveOptionIntoView;
|
|
118
119
|
private bindPopupListeners;
|
|
119
120
|
private unbindPopupListeners;
|
|
121
|
+
private cancelPositionRetry;
|
|
122
|
+
/** Retry until the conditionally rendered popup is mounted and measurable. */
|
|
123
|
+
private schedulePositionUpdate;
|
|
124
|
+
/** @returns `true` when the current popup was found and positioned. */
|
|
120
125
|
private updatePosition;
|
|
121
126
|
private openPopup;
|
|
122
127
|
private closePopup;
|
|
@@ -15,8 +15,9 @@ import { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, Butt
|
|
|
15
15
|
import { CardAppearance, CardWidth } from "./components/Card/Card";
|
|
16
16
|
import { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
|
|
17
17
|
import { CardSettingWidth } from "./components/CardSetting/CardSetting";
|
|
18
|
+
import { CardShellDataVizWidth } from "./components/CardShellDataViz/CardShellDataViz";
|
|
18
19
|
import { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
|
|
19
|
-
import { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
|
|
20
|
+
import { ChartLegendDirection, ChartLegendPercentageDecimals } from "./components/ChartLegend/ChartLegend";
|
|
20
21
|
import { CheckboxSize } from "./components/Checkbox/Checkbox";
|
|
21
22
|
import { ChipSize, ChipState } from "./components/Chip/Chip";
|
|
22
23
|
import { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
|
|
@@ -56,8 +57,9 @@ export { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, Butt
|
|
|
56
57
|
export { CardAppearance, CardWidth } from "./components/Card/Card";
|
|
57
58
|
export { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
|
|
58
59
|
export { CardSettingWidth } from "./components/CardSetting/CardSetting";
|
|
60
|
+
export { CardShellDataVizWidth } from "./components/CardShellDataViz/CardShellDataViz";
|
|
59
61
|
export { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
|
|
60
|
-
export { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
|
|
62
|
+
export { ChartLegendDirection, ChartLegendPercentageDecimals } from "./components/ChartLegend/ChartLegend";
|
|
61
63
|
export { CheckboxSize } from "./components/Checkbox/Checkbox";
|
|
62
64
|
export { ChipSize, ChipState } from "./components/Chip/Chip";
|
|
63
65
|
export { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
|
|
@@ -367,7 +369,8 @@ export namespace Components {
|
|
|
367
369
|
}
|
|
368
370
|
/**
|
|
369
371
|
* Shared card chrome — width + matching min-height tokens, header (title + actions),
|
|
370
|
-
* and a flex body that fills leftover space.
|
|
372
|
+
* and a flex body that fills leftover space. Data-visualization cards use their
|
|
373
|
+
* dedicated `ds-card-shell-data-viz` boundary instead.
|
|
371
374
|
*/
|
|
372
375
|
interface DsCard {
|
|
373
376
|
/**
|
|
@@ -386,7 +389,7 @@ export namespace Components {
|
|
|
386
389
|
"heading": string;
|
|
387
390
|
}
|
|
388
391
|
/**
|
|
389
|
-
* Donut data-viz card —
|
|
392
|
+
* Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and
|
|
390
393
|
* content-sized legend. Hover sync between chart and legend stays here.
|
|
391
394
|
*/
|
|
392
395
|
interface DsCardDataVizDonut {
|
|
@@ -432,6 +435,21 @@ export namespace Components {
|
|
|
432
435
|
*/
|
|
433
436
|
"saveLabel": string;
|
|
434
437
|
}
|
|
438
|
+
/**
|
|
439
|
+
* Dedicated shell chrome for data-visualization cards. Chart-specific layout,
|
|
440
|
+
* legends, hover synchronization, and empty states belong to composing cards.
|
|
441
|
+
*/
|
|
442
|
+
interface DsCardShellDataViz {
|
|
443
|
+
/**
|
|
444
|
+
* Width token with the matching data-visualization shell min-height.
|
|
445
|
+
* @default 'md'
|
|
446
|
+
*/
|
|
447
|
+
"cardWidth": CardShellDataVizWidth;
|
|
448
|
+
/**
|
|
449
|
+
* Data-visualization heading shown in the shell header.
|
|
450
|
+
*/
|
|
451
|
+
"heading": string;
|
|
452
|
+
}
|
|
435
453
|
interface DsChartBar {
|
|
436
454
|
/**
|
|
437
455
|
* Bars to render. Set as a JS property (not an HTML attribute).
|
|
@@ -514,6 +532,11 @@ export namespace Components {
|
|
|
514
532
|
*/
|
|
515
533
|
"items": ChartLegendItem[];
|
|
516
534
|
"locale": string | undefined;
|
|
535
|
+
/**
|
|
536
|
+
* Fixed number of decimal places shown for percentages.
|
|
537
|
+
* @default 1
|
|
538
|
+
*/
|
|
539
|
+
"percentageDecimals": ChartLegendPercentageDecimals;
|
|
517
540
|
/**
|
|
518
541
|
* Show each item's share of the total (of items with a `value`) alongside its count.
|
|
519
542
|
* @default true
|
|
@@ -673,7 +696,7 @@ export namespace Components {
|
|
|
673
696
|
}
|
|
674
697
|
interface DsField {
|
|
675
698
|
/**
|
|
676
|
-
* Optional guidance associated with the slotted control.
|
|
699
|
+
* Optional guidance associated with the slotted control while no visible error is shown.
|
|
677
700
|
*/
|
|
678
701
|
"description": string | undefined;
|
|
679
702
|
/**
|
|
@@ -2094,7 +2117,8 @@ declare global {
|
|
|
2094
2117
|
};
|
|
2095
2118
|
/**
|
|
2096
2119
|
* Shared card chrome — width + matching min-height tokens, header (title + actions),
|
|
2097
|
-
* and a flex body that fills leftover space.
|
|
2120
|
+
* and a flex body that fills leftover space. Data-visualization cards use their
|
|
2121
|
+
* dedicated `ds-card-shell-data-viz` boundary instead.
|
|
2098
2122
|
*/
|
|
2099
2123
|
interface HTMLDsCardElement extends Components.DsCard, HTMLStencilElement {
|
|
2100
2124
|
}
|
|
@@ -2106,7 +2130,7 @@ declare global {
|
|
|
2106
2130
|
"dsFilterClick": void;
|
|
2107
2131
|
}
|
|
2108
2132
|
/**
|
|
2109
|
-
* Donut data-viz card —
|
|
2133
|
+
* Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and
|
|
2110
2134
|
* content-sized legend. Hover sync between chart and legend stays here.
|
|
2111
2135
|
*/
|
|
2112
2136
|
interface HTMLDsCardDataVizDonutElement extends Components.DsCardDataVizDonut, HTMLStencilElement {
|
|
@@ -2140,6 +2164,16 @@ declare global {
|
|
|
2140
2164
|
prototype: HTMLDsCardSettingElement;
|
|
2141
2165
|
new (): HTMLDsCardSettingElement;
|
|
2142
2166
|
};
|
|
2167
|
+
/**
|
|
2168
|
+
* Dedicated shell chrome for data-visualization cards. Chart-specific layout,
|
|
2169
|
+
* legends, hover synchronization, and empty states belong to composing cards.
|
|
2170
|
+
*/
|
|
2171
|
+
interface HTMLDsCardShellDataVizElement extends Components.DsCardShellDataViz, HTMLStencilElement {
|
|
2172
|
+
}
|
|
2173
|
+
var HTMLDsCardShellDataVizElement: {
|
|
2174
|
+
prototype: HTMLDsCardShellDataVizElement;
|
|
2175
|
+
new (): HTMLDsCardShellDataVizElement;
|
|
2176
|
+
};
|
|
2143
2177
|
interface HTMLDsChartBarElement extends Components.DsChartBar, HTMLStencilElement {
|
|
2144
2178
|
}
|
|
2145
2179
|
var HTMLDsChartBarElement: {
|
|
@@ -2625,6 +2659,7 @@ declare global {
|
|
|
2625
2659
|
"ds-card": HTMLDsCardElement;
|
|
2626
2660
|
"ds-card-data-viz-donut": HTMLDsCardDataVizDonutElement;
|
|
2627
2661
|
"ds-card-setting": HTMLDsCardSettingElement;
|
|
2662
|
+
"ds-card-shell-data-viz": HTMLDsCardShellDataVizElement;
|
|
2628
2663
|
"ds-chart-bar": HTMLDsChartBarElement;
|
|
2629
2664
|
"ds-chart-donut": HTMLDsChartDonutElement;
|
|
2630
2665
|
"ds-chart-legend": HTMLDsChartLegendElement;
|
|
@@ -2947,7 +2982,8 @@ declare namespace LocalJSX {
|
|
|
2947
2982
|
}
|
|
2948
2983
|
/**
|
|
2949
2984
|
* Shared card chrome — width + matching min-height tokens, header (title + actions),
|
|
2950
|
-
* and a flex body that fills leftover space.
|
|
2985
|
+
* and a flex body that fills leftover space. Data-visualization cards use their
|
|
2986
|
+
* dedicated `ds-card-shell-data-viz` boundary instead.
|
|
2951
2987
|
*/
|
|
2952
2988
|
interface DsCard {
|
|
2953
2989
|
/**
|
|
@@ -2966,7 +3002,7 @@ declare namespace LocalJSX {
|
|
|
2966
3002
|
"heading": string;
|
|
2967
3003
|
}
|
|
2968
3004
|
/**
|
|
2969
|
-
* Donut data-viz card —
|
|
3005
|
+
* Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and
|
|
2970
3006
|
* content-sized legend. Hover sync between chart and legend stays here.
|
|
2971
3007
|
*/
|
|
2972
3008
|
interface DsCardDataVizDonut {
|
|
@@ -3020,6 +3056,21 @@ declare namespace LocalJSX {
|
|
|
3020
3056
|
*/
|
|
3021
3057
|
"saveLabel"?: string;
|
|
3022
3058
|
}
|
|
3059
|
+
/**
|
|
3060
|
+
* Dedicated shell chrome for data-visualization cards. Chart-specific layout,
|
|
3061
|
+
* legends, hover synchronization, and empty states belong to composing cards.
|
|
3062
|
+
*/
|
|
3063
|
+
interface DsCardShellDataViz {
|
|
3064
|
+
/**
|
|
3065
|
+
* Width token with the matching data-visualization shell min-height.
|
|
3066
|
+
* @default 'md'
|
|
3067
|
+
*/
|
|
3068
|
+
"cardWidth"?: CardShellDataVizWidth;
|
|
3069
|
+
/**
|
|
3070
|
+
* Data-visualization heading shown in the shell header.
|
|
3071
|
+
*/
|
|
3072
|
+
"heading": string;
|
|
3073
|
+
}
|
|
3023
3074
|
interface DsChartBar {
|
|
3024
3075
|
/**
|
|
3025
3076
|
* Bars to render. Set as a JS property (not an HTML attribute).
|
|
@@ -3114,6 +3165,11 @@ declare namespace LocalJSX {
|
|
|
3114
3165
|
* Fires on row hover/focus with the item, or `null` on leave/blur.
|
|
3115
3166
|
*/
|
|
3116
3167
|
"onDsItemHover"?: (event: DsChartLegendCustomEvent<ChartLegendItem | null>) => void;
|
|
3168
|
+
/**
|
|
3169
|
+
* Fixed number of decimal places shown for percentages.
|
|
3170
|
+
* @default 1
|
|
3171
|
+
*/
|
|
3172
|
+
"percentageDecimals"?: ChartLegendPercentageDecimals;
|
|
3117
3173
|
/**
|
|
3118
3174
|
* Show each item's share of the total (of items with a `value`) alongside its count.
|
|
3119
3175
|
* @default true
|
|
@@ -3285,7 +3341,7 @@ declare namespace LocalJSX {
|
|
|
3285
3341
|
}
|
|
3286
3342
|
interface DsField {
|
|
3287
3343
|
/**
|
|
3288
|
-
* Optional guidance associated with the slotted control.
|
|
3344
|
+
* Optional guidance associated with the slotted control while no visible error is shown.
|
|
3289
3345
|
*/
|
|
3290
3346
|
"description"?: string | undefined;
|
|
3291
3347
|
/**
|
|
@@ -4684,6 +4740,10 @@ declare namespace LocalJSX {
|
|
|
4684
4740
|
"cancelLabel": string;
|
|
4685
4741
|
"saveLabel": string;
|
|
4686
4742
|
}
|
|
4743
|
+
interface DsCardShellDataVizAttributes {
|
|
4744
|
+
"heading": string;
|
|
4745
|
+
"cardWidth": CardShellDataVizWidth;
|
|
4746
|
+
}
|
|
4687
4747
|
interface DsChartBarAttributes {
|
|
4688
4748
|
"width": number;
|
|
4689
4749
|
"height": number;
|
|
@@ -4703,6 +4763,7 @@ declare namespace LocalJSX {
|
|
|
4703
4763
|
"locale": string | undefined;
|
|
4704
4764
|
"direction": ChartLegendDirection;
|
|
4705
4765
|
"showPercentage": boolean;
|
|
4766
|
+
"percentageDecimals": ChartLegendPercentageDecimals;
|
|
4706
4767
|
"activeLabel": string | null;
|
|
4707
4768
|
}
|
|
4708
4769
|
interface DsChartLineAttributes {
|
|
@@ -5059,6 +5120,7 @@ declare namespace LocalJSX {
|
|
|
5059
5120
|
"ds-card": Omit<DsCard, keyof DsCardAttributes> & { [K in keyof DsCard & keyof DsCardAttributes]?: DsCard[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `attr:${K}`]?: DsCardAttributes[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `prop:${K}`]?: DsCard[K] } & OneOf<"heading", DsCard["heading"], DsCardAttributes["heading"]>;
|
|
5060
5121
|
"ds-card-data-viz-donut": Omit<DsCardDataVizDonut, keyof DsCardDataVizDonutAttributes> & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes]?: DsCardDataVizDonut[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `attr:${K}`]?: DsCardDataVizDonutAttributes[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `prop:${K}`]?: DsCardDataVizDonut[K] } & OneOf<"heading", DsCardDataVizDonut["heading"], DsCardDataVizDonutAttributes["heading"]>;
|
|
5061
5122
|
"ds-card-setting": Omit<DsCardSetting, keyof DsCardSettingAttributes> & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes]?: DsCardSetting[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `attr:${K}`]?: DsCardSettingAttributes[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `prop:${K}`]?: DsCardSetting[K] } & OneOf<"heading", DsCardSetting["heading"], DsCardSettingAttributes["heading"]>;
|
|
5123
|
+
"ds-card-shell-data-viz": Omit<DsCardShellDataViz, keyof DsCardShellDataVizAttributes> & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes]?: DsCardShellDataViz[K] } & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes as `attr:${K}`]?: DsCardShellDataVizAttributes[K] } & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes as `prop:${K}`]?: DsCardShellDataViz[K] } & OneOf<"heading", DsCardShellDataViz["heading"], DsCardShellDataVizAttributes["heading"]>;
|
|
5062
5124
|
"ds-chart-bar": Omit<DsChartBar, keyof DsChartBarAttributes> & { [K in keyof DsChartBar & keyof DsChartBarAttributes]?: DsChartBar[K] } & { [K in keyof DsChartBar & keyof DsChartBarAttributes as `attr:${K}`]?: DsChartBarAttributes[K] } & { [K in keyof DsChartBar & keyof DsChartBarAttributes as `prop:${K}`]?: DsChartBar[K] };
|
|
5063
5125
|
"ds-chart-donut": Omit<DsChartDonut, keyof DsChartDonutAttributes> & { [K in keyof DsChartDonut & keyof DsChartDonutAttributes]?: DsChartDonut[K] } & { [K in keyof DsChartDonut & keyof DsChartDonutAttributes as `attr:${K}`]?: DsChartDonutAttributes[K] } & { [K in keyof DsChartDonut & keyof DsChartDonutAttributes as `prop:${K}`]?: DsChartDonut[K] };
|
|
5064
5126
|
"ds-chart-legend": Omit<DsChartLegend, keyof DsChartLegendAttributes> & { [K in keyof DsChartLegend & keyof DsChartLegendAttributes]?: DsChartLegend[K] } & { [K in keyof DsChartLegend & keyof DsChartLegendAttributes as `attr:${K}`]?: DsChartLegendAttributes[K] } & { [K in keyof DsChartLegend & keyof DsChartLegendAttributes as `prop:${K}`]?: DsChartLegend[K] };
|
|
@@ -5105,15 +5167,21 @@ declare module "@stencil/core" {
|
|
|
5105
5167
|
"ds-button-unfilled": LocalJSX.IntrinsicElements["ds-button-unfilled"] & JSXBase.HTMLAttributes<HTMLDsButtonUnfilledElement>;
|
|
5106
5168
|
/**
|
|
5107
5169
|
* Shared card chrome — width + matching min-height tokens, header (title + actions),
|
|
5108
|
-
* and a flex body that fills leftover space.
|
|
5170
|
+
* and a flex body that fills leftover space. Data-visualization cards use their
|
|
5171
|
+
* dedicated `ds-card-shell-data-viz` boundary instead.
|
|
5109
5172
|
*/
|
|
5110
5173
|
"ds-card": LocalJSX.IntrinsicElements["ds-card"] & JSXBase.HTMLAttributes<HTMLDsCardElement>;
|
|
5111
5174
|
/**
|
|
5112
|
-
* Donut data-viz card —
|
|
5175
|
+
* Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and
|
|
5113
5176
|
* content-sized legend. Hover sync between chart and legend stays here.
|
|
5114
5177
|
*/
|
|
5115
5178
|
"ds-card-data-viz-donut": LocalJSX.IntrinsicElements["ds-card-data-viz-donut"] & JSXBase.HTMLAttributes<HTMLDsCardDataVizDonutElement>;
|
|
5116
5179
|
"ds-card-setting": LocalJSX.IntrinsicElements["ds-card-setting"] & JSXBase.HTMLAttributes<HTMLDsCardSettingElement>;
|
|
5180
|
+
/**
|
|
5181
|
+
* Dedicated shell chrome for data-visualization cards. Chart-specific layout,
|
|
5182
|
+
* legends, hover synchronization, and empty states belong to composing cards.
|
|
5183
|
+
*/
|
|
5184
|
+
"ds-card-shell-data-viz": LocalJSX.IntrinsicElements["ds-card-shell-data-viz"] & JSXBase.HTMLAttributes<HTMLDsCardShellDataVizElement>;
|
|
5117
5185
|
"ds-chart-bar": LocalJSX.IntrinsicElements["ds-chart-bar"] & JSXBase.HTMLAttributes<HTMLDsChartBarElement>;
|
|
5118
5186
|
"ds-chart-donut": LocalJSX.IntrinsicElements["ds-chart-donut"] & JSXBase.HTMLAttributes<HTMLDsChartDonutElement>;
|
|
5119
5187
|
/**
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type PercentageDecimals = 1 | 2;
|
|
2
|
+
/** Format a ratio as a locale-aware percentage with an exact, supported precision. */
|
|
3
|
+
export declare function formatPercentage(ratio: number, decimals?: PercentageDecimals, locale?: string): string;
|
|
4
|
+
//# sourceMappingURL=format-percentage.d.ts.map
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export { registerIcons } from '../components/Icon/icon-cache';
|
|
2
2
|
export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
|
|
3
3
|
export { formatCompactNumber } from './format-compact-number';
|
|
4
|
+
export { formatPercentage } from './format-percentage';
|
|
5
|
+
export type { PercentageDecimals } from './format-percentage';
|
|
4
6
|
export { truncateSvgTextToWidth } from './truncate-svg-text';
|
|
5
7
|
export { parseCssTimeMs, prefersReducedMotion, resolveCssTimeMs, resolveMotionTimeMs, } from './resolve-css-time-ms';
|
|
6
8
|
export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdge, resolveScrollEdgeFadeSize, scrollEdgeFadeClassMap, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, scrollEdgeFadeSizeStyle, } from './scroll-edge-fade';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.1",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"pretest": "node scripts/generate-icon-catalog.mjs",
|
|
71
71
|
"build": "stencil build && node scripts/verify-framework-proxies.mjs && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs && node scripts/build-framework-exports.mjs && node scripts/build-registry.mjs && node scripts/build-agent-manifest.mjs && node scripts/verify-framework-proxies.mjs",
|
|
72
72
|
"verify:pack": "node scripts/verify-framework-proxies.mjs && node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
|
|
73
|
-
"test": "node --import tsx/esm --test tests
|
|
73
|
+
"test": "node --import tsx/esm --test tests/*.test.ts",
|
|
74
74
|
"test:e2e": "npm run build && playwright test",
|
|
75
75
|
"test:e2e:install": "playwright install chromium firefox webkit",
|
|
76
76
|
"prebuild:docs": "npm run clean:framework-proxies",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as s,H as i,c as t,h as e,a as n,t as o}from"./index.js";const r=()=>`:host{--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)}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{--ds-switch-width:var(--dimension-size-400);--ds-switch-height:var(--dimension-size-250);--ds-switch-thumb-size:var(--dimension-size-150);--ds-switch-gap:var(--dimension-space-050);--ds-switch-stroke:var(--dimension-stroke-width-015);--ds-switch-inset:var(--ds-switch-gap);--ds-switch-thumb-hover:var(--color-interaction-hover);--ds-switch-thumb-pressed:var(--color-interaction-pressed);--ds-switch-travel:calc( var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) - var(--ds-switch-inset) );position:relative;display:inline-flex;width:var(--ds-switch-width);height:var(--ds-switch-height);padding:0;border:none;border-radius:var(--dimension-radius-half);box-sizing:border-box;flex-shrink:0;overflow:visible;cursor:pointer;user-select:none;outline:none;background-color:transparent;box-shadow:inset 0 0 0 var(--ds-switch-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-3), box-shadow var(--effect-motion-short-3)}:host(.switch--sm){--ds-switch-width:var(--dimension-size-300);--ds-switch-height:var(--dimension-size-200);--ds-switch-thumb-size:calc(var(--dimension-size-base) * 5 / 4);--ds-switch-gap:calc(var(--dimension-space-025) + var(--dimension-space-012));--ds-switch-stroke:var(--dimension-stroke-width-012)}:host(.switch--xs){--ds-switch-width:var(--dimension-size-250);--ds-switch-height:var(--dimension-size-150);--ds-switch-thumb-size:var(--dimension-size-100);--ds-switch-gap:var(--dimension-space-025);--ds-switch-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}:host(.checked){background-color:var(--color-background-bold-brand);box-shadow:none}:host(.switch--readonly),:host(.switch--presentation){cursor:default}:host(.switch--presentation){pointer-events:none}.thumb{position:absolute;top:50%;left:var(--ds-switch-inset);width:var(--ds-switch-thumb-size);height:var(--ds-switch-thumb-size);border-radius:var(--dimension-radius-half);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-switch-stroke) var(--color-foreground-tertiary);transform:translateY(-50%);transition:background-color var(--effect-motion-short-3), box-shadow var(--effect-motion-short-3), transform var(--effect-motion-short-3);pointer-events:none}.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none}:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-hover)}:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-pressed)}:host(.checked) .thumb{background-color:var(--color-background-primary);box-shadow:none;transform:translate3d(var(--ds-switch-travel), -50%, 0)}@media (prefers-reduced-motion: reduce){:host{transition:none}.thumb{transition:none}}`;let a=0;const d=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsChange=t(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.isInactive=false;this.size="md";this.presentation=false;this.initialChecked=false;this.formDisabled=false;this.focused=false;this.touched=false;this.handleClick=()=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=s=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;if(s.key===" "||s.key==="Enter"){s.preventDefault();this.handleClick()}};this.handleFocus=()=>{if(!this.presentation)this.focused=true};this.handleBlur=()=>{if(this.presentation)return;this.focused=false;this.touched=true}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.presentation||this.isInactive||this.disabled||this.formDisabled;const i=this.checked?this.value:this.uncheckedValue??null;const t=this.checked?"checked":"unchecked";this.internals.setFormValue(s?null:i,t);const e=this.required&&!s&&!this.checked;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.focused=false;this.touched=false}formStateRestoreCallback(s){this.checked=s==="checked"}syncNativeLabels(){if(this.presentation)return;if(this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby"))return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-switch-label-${++a}`;return s.id}));if(s.length)this.el.setAttribute("aria-labelledby",s.join(" "))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!s&&!this.checked;const t=this.checked!==this.initialChecked;return e(n,{key:"a5767b5479da295aa140cff21ae89d14e8e32033",role:this.presentation?undefined:"switch","aria-checked":this.presentation?undefined:String(this.checked),"aria-disabled":!this.presentation&&s?"true":undefined,"aria-readonly":!this.presentation&&this.readOnly?"true":undefined,"aria-required":!this.presentation&&this.required?"true":undefined,"aria-invalid":!this.presentation&&i?"true":undefined,"aria-hidden":this.presentation?"true":undefined,"data-checked":this.checked?"":undefined,"data-unchecked":!this.checked?"":undefined,"data-disabled":s?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-focused":!this.presentation&&this.focused?"":undefined,"data-filled":!this.presentation&&this.checked?"":undefined,"data-dirty":!this.presentation&&t?"":undefined,"data-touched":!this.presentation&&this.touched?"":undefined,"data-valid":!this.presentation&&!s&&!i?"":undefined,"data-invalid":!this.presentation&&i?"":undefined,tabIndex:this.presentation||s?-1:0,class:{switch:true,checked:this.checked,"switch--md":this.size==="md","switch--sm":this.size==="sm","switch--xs":this.size==="xs","switch--readonly":this.readOnly,"switch--presentation":this.presentation,"ds-focus-ring":true,"ds-control-inactive":s},onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur},e("span",{key:"8170d9b505dd5d4335e75c979137eee0ee881089",class:"thumb"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return r()}},[65,"ds-switch",{checked:[1028],name:[513],value:[1],uncheckedValue:[1,"unchecked-value"],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],isInactive:[4,"is-inactive"],size:[1],presentation:[4],formDisabled:[32],focused:[32],touched:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const s=["ds-switch"];s.forEach((s=>{switch(s){case"ds-switch":if(!customElements.get(o(s))){customElements.define(o(s),d)}break}}))}h();export{d as S,h as d};
|
|
2
|
-
//# sourceMappingURL=p-NwPqPArp.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["switchCss","generatedLabelId","Switch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","readOnly","required","requiredMessage","isInactive","size","presentation","initialChecked","formDisabled","focused","touched","handleClick","dsChange","emit","handleKeyDown","event","key","preventDefault","handleFocus","handleBlur","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","inactive","submissionValue","uncheckedValue","state","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","el","hasAttribute","labelIds","Array","from","labels","map","label","id","length","setAttribute","join","render","invalid","dirty","h","Host","role","undefined","String","tabIndex","class","switch","onClick","onKeyDown","onFocus","onBlur"],"sources":["src/wc/components/Switch/Switch.css?tag=ds-switch&encapsulation=shadow","src/wc/components/Switch/Switch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n --ds-switch-width: var(--dimension-size-400);\n --ds-switch-height: var(--dimension-size-250);\n --ds-switch-thumb-size: var(--dimension-size-150);\n --ds-switch-gap: var(--dimension-space-050);\n --ds-switch-stroke: var(--dimension-stroke-width-015);\n --ds-switch-inset: var(--ds-switch-gap);\n --ds-switch-thumb-hover: var(--color-interaction-hover);\n --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n --ds-switch-travel: calc(\n var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n var(--ds-switch-inset)\n );\n position: relative;\n display: inline-flex;\n width: var(--ds-switch-width);\n height: var(--ds-switch-height);\n padding: 0;\n border: none;\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n flex-shrink: 0;\n overflow: visible;\n cursor: pointer;\n user-select: none;\n outline: none;\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-foreground-tertiary);\n transition:\n background-color var(--effect-motion-short-3),\n box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--sm) {\n --ds-switch-width: var(--dimension-size-300);\n --ds-switch-height: var(--dimension-size-200);\n --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n --ds-switch-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.switch--xs) {\n --ds-switch-width: var(--dimension-size-250);\n --ds-switch-height: var(--dimension-size-150);\n --ds-switch-thumb-size: var(--dimension-size-100);\n --ds-switch-gap: var(--dimension-space-025);\n --ds-switch-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n:host(.checked) {\n background-color: var(--color-background-bold-brand);\n box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n cursor: default;\n}\n\n:host(.switch--presentation) {\n pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.thumb {\n position: absolute;\n top: 50%;\n left: var(--ds-switch-inset);\n width: var(--ds-switch-thumb-size);\n height: var(--ds-switch-thumb-size);\n border-radius: var(--dimension-radius-half);\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-foreground-tertiary);\n transform: translateY(-50%);\n transition:\n background-color var(--effect-motion-short-3),\n box-shadow var(--effect-motion-short-3),\n transform var(--effect-motion-short-3);\n pointer-events: none;\n}\n\n.thumb::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: transparent;\n pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n .thumb::after {\n background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n .thumb::after {\n background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n background-color: var(--color-background-primary);\n box-shadow: none;\n transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition: none;\n }\n\n .thumb {\n transition: none;\n }\n}\n","import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n tag: 'ds-switch',\n styleUrl: 'Switch.css',\n shadow: true,\n formAssociated: true,\n})\nexport class Switch {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current on/off state. The initial value is restored when the owning form resets. */\n @Prop({ mutable: true }) checked: boolean = false;\n\n @Prop({ reflect: true }) name: string | undefined;\n @Prop() value: string = 'on';\n\n /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n @Prop() uncheckedValue: string | undefined;\n\n /** Associates the switch with a form by id when it is rendered outside that form. */\n @Prop({ reflect: true }) form: string | undefined;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = 'This field is required.';\n @Prop() isInactive: boolean = false;\n\n /** Compact track size for placement inside controls, menus, and form rows. */\n @Prop() size: SwitchSize = 'md';\n\n /**\n * Removes standalone control semantics so a composite owner such as a\n * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n */\n @Prop() presentation: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private initialChecked = false;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('checked')\n @Watch('value')\n @Watch('uncheckedValue')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('presentation')\n @Watch('required')\n syncFormValue() {\n const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n const state = this.checked ? 'checked' : 'unchecked';\n this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n const missing = this.required && !inactive && !this.checked;\n this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.checked = this.initialChecked;\n this.focused = false;\n this.touched = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.checked = state === 'checked';\n }\n\n private syncNativeLabels() {\n if (this.presentation) return;\n if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n return label.id;\n });\n if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n }\n\n private handleClick = () => {\n if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n private handleFocus = () => {\n if (!this.presentation) this.focused = true;\n };\n\n private handleBlur = () => {\n if (this.presentation) return;\n this.focused = false;\n this.touched = true;\n };\n\n render() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const invalid = this.required && !inactive && !this.checked;\n const dirty = this.checked !== this.initialChecked;\n // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n return (\n <Host\n role={this.presentation ? undefined : 'switch'}\n aria-checked={this.presentation ? undefined : String(this.checked)}\n aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n aria-required={!this.presentation && this.required ? 'true' : undefined}\n aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n aria-hidden={this.presentation ? 'true' : undefined}\n data-checked={this.checked ? '' : undefined}\n data-unchecked={!this.checked ? '' : undefined}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-focused={!this.presentation && this.focused ? '' : undefined}\n data-filled={!this.presentation && this.checked ? '' : undefined}\n data-dirty={!this.presentation && dirty ? '' : undefined}\n data-touched={!this.presentation && this.touched ? '' : undefined}\n data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n data-invalid={!this.presentation && invalid ? '' : undefined}\n tabIndex={this.presentation || inactive ? -1 : 0}\n class={{\n switch: true,\n checked: this.checked,\n 'switch--md': this.size === 'md',\n 'switch--sm': this.size === 'sm',\n 'switch--xs': this.size === 'xs',\n 'switch--readonly': this.readOnly,\n 'switch--presentation': this.presentation,\n 'ds-focus-ring': true,\n 'ds-control-inactive': inactive,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"thumb\" />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|