@cloudscape-design/chart-components 1.0.34 → 1.0.35
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/core/chart-api/chart-extra-context.d.ts +1 -0
- package/core/chart-api/chart-extra-context.js.map +1 -1
- package/core/chart-api/chart-extra-legend.d.ts +8 -1
- package/core/chart-api/chart-extra-legend.js +10 -6
- package/core/chart-api/chart-extra-legend.js.map +1 -1
- package/core/chart-api/index.d.ts +7 -1
- package/core/chart-core.d.ts +1 -1
- package/core/chart-core.js +2 -1
- package/core/chart-core.js.map +1 -1
- package/core/components/core-tooltip.js +25 -7
- package/core/components/core-tooltip.js.map +1 -1
- package/core/i18n-utils.d.ts +3 -8
- package/core/i18n-utils.js +9 -0
- package/core/i18n-utils.js.map +1 -1
- package/core/interfaces.d.ts +22 -2
- package/core/interfaces.js.map +1 -1
- package/core/utils.d.ts +8 -1
- package/core/utils.js +10 -3
- package/core/utils.js.map +1 -1
- package/internal/components/chart-legend/styles.css.js +17 -17
- package/internal/components/chart-legend/styles.scoped.css +25 -25
- package/internal/components/chart-legend/styles.selectors.js +17 -17
- package/internal/components/series-details/styles.css.js +18 -17
- package/internal/components/series-details/styles.scoped.css +32 -27
- package/internal/components/series-details/styles.selectors.js +18 -17
- package/internal/components/series-marker/index.d.ts +4 -1
- package/internal/components/series-marker/index.js +34 -21
- package/internal/components/series-marker/index.js.map +1 -1
- package/internal/components/series-marker/interfaces.d.ts +1 -0
- package/internal/components/series-marker/interfaces.js.map +1 -1
- package/internal/components/series-marker/styles.css.js +3 -2
- package/internal/components/series-marker/styles.scoped.css +9 -4
- package/internal/components/series-marker/styles.selectors.js +3 -2
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +2 -2
|
@@ -2,22 +2,22 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"focus-outline": "awsui_focus-
|
|
6
|
-
"item": "
|
|
7
|
-
"root": "
|
|
8
|
-
"list": "
|
|
9
|
-
"list-bottom": "awsui_list-
|
|
10
|
-
"list-bottom-start": "awsui_list-bottom-
|
|
11
|
-
"list-bottom-center": "awsui_list-bottom-
|
|
12
|
-
"list-bottom-end": "awsui_list-bottom-
|
|
13
|
-
"list-side": "awsui_list-
|
|
14
|
-
"item--inactive": "awsui_item--
|
|
15
|
-
"item--dimmed": "awsui_item--
|
|
16
|
-
"item-label": "awsui_item-
|
|
17
|
-
"actions": "
|
|
18
|
-
"actions-bottom": "awsui_actions-
|
|
19
|
-
"actions-side": "awsui_actions-
|
|
20
|
-
"actions-divider-bottom": "awsui_actions-divider-
|
|
21
|
-
"actions-divider-side": "awsui_actions-divider-
|
|
5
|
+
"focus-outline": "awsui_focus-outline_1kjc7_16cox_15",
|
|
6
|
+
"item": "awsui_item_1kjc7_16cox_27",
|
|
7
|
+
"root": "awsui_root_1kjc7_16cox_41",
|
|
8
|
+
"list": "awsui_list_1kjc7_16cox_85",
|
|
9
|
+
"list-bottom": "awsui_list-bottom_1kjc7_16cox_96",
|
|
10
|
+
"list-bottom-start": "awsui_list-bottom-start_1kjc7_16cox_100",
|
|
11
|
+
"list-bottom-center": "awsui_list-bottom-center_1kjc7_16cox_103",
|
|
12
|
+
"list-bottom-end": "awsui_list-bottom-end_1kjc7_16cox_106",
|
|
13
|
+
"list-side": "awsui_list-side_1kjc7_16cox_110",
|
|
14
|
+
"item--inactive": "awsui_item--inactive_1kjc7_16cox_180",
|
|
15
|
+
"item--dimmed": "awsui_item--dimmed_1kjc7_16cox_186",
|
|
16
|
+
"item-label": "awsui_item-label_1kjc7_16cox_190",
|
|
17
|
+
"actions": "awsui_actions_1kjc7_16cox_200",
|
|
18
|
+
"actions-bottom": "awsui_actions-bottom_1kjc7_16cox_205",
|
|
19
|
+
"actions-side": "awsui_actions-side_1kjc7_16cox_209",
|
|
20
|
+
"actions-divider-bottom": "awsui_actions-divider-bottom_1kjc7_16cox_214",
|
|
21
|
+
"actions-divider-side": "awsui_actions-divider-side_1kjc7_16cox_221"
|
|
22
22
|
};
|
|
23
23
|
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"focus-outline": "awsui_focus-
|
|
5
|
-
"marker": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
4
|
+
"focus-outline": "awsui_focus-outline_1no4y_iknky_15",
|
|
5
|
+
"marker": "awsui_marker_1no4y_iknky_27",
|
|
6
|
+
"visually-hidden": "awsui_visually-hidden_1no4y_iknky_64",
|
|
7
|
+
"value": "awsui_value_1no4y_iknky_70",
|
|
8
|
+
"expandable": "awsui_expandable_1no4y_iknky_74",
|
|
9
|
+
"list-item": "awsui_list-item_1no4y_iknky_78",
|
|
10
|
+
"inner-list-item": "awsui_inner-list-item_1no4y_iknky_79",
|
|
11
|
+
"key-value-pair": "awsui_key-value-pair_1no4y_iknky_85",
|
|
12
|
+
"expandable-section": "awsui_expandable-section_1no4y_iknky_86",
|
|
13
|
+
"key": "awsui_key_1no4y_iknky_85",
|
|
14
|
+
"sub-items": "awsui_sub-items_1no4y_iknky_101",
|
|
15
|
+
"list": "awsui_list_1no4y_iknky_78",
|
|
16
|
+
"dimmed": "awsui_dimmed_1no4y_iknky_120",
|
|
17
|
+
"compact": "awsui_compact_1no4y_iknky_124",
|
|
18
|
+
"with-sub-items": "awsui_with-sub-items_1no4y_iknky_129",
|
|
19
|
+
"description": "awsui_description_1no4y_iknky_134",
|
|
20
|
+
"full-width": "awsui_full-width_1no4y_iknky_143",
|
|
21
|
+
"highlight-indicator": "awsui_highlight-indicator_1no4y_iknky_147"
|
|
21
22
|
};
|
|
22
23
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
14
14
|
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
15
|
-
body[data-awsui-focus-visible=true] .awsui_focus-
|
|
15
|
+
body[data-awsui-focus-visible=true] .awsui_focus-outline_1no4y_iknky_15:not(#\9) {
|
|
16
16
|
stroke: var(--color-border-item-focused-uk47pl, #006ce0);
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -24,7 +24,7 @@ body[data-awsui-focus-visible=true] .awsui_focus-outline_1no4y_g0z0r_15:not(#\9)
|
|
|
24
24
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
25
25
|
SPDX-License-Identifier: Apache-2.0
|
|
26
26
|
*/
|
|
27
|
-
.
|
|
27
|
+
.awsui_marker_1no4y_iknky_27:not(#\9) {
|
|
28
28
|
border-collapse: separate;
|
|
29
29
|
border-spacing: 0;
|
|
30
30
|
box-sizing: border-box;
|
|
@@ -51,59 +51,64 @@ body[data-awsui-focus-visible=true] .awsui_focus-outline_1no4y_g0z0r_15:not(#\9)
|
|
|
51
51
|
white-space: normal;
|
|
52
52
|
word-spacing: normal;
|
|
53
53
|
margin-block-start: var(--space-static-xxxs-yidks1, 2px);
|
|
54
|
-
margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
|
|
55
54
|
border-start-start-radius: 2px;
|
|
56
55
|
border-start-end-radius: 2px;
|
|
57
56
|
border-end-start-radius: 2px;
|
|
58
57
|
border-end-end-radius: 2px;
|
|
59
|
-
inline-size:
|
|
58
|
+
inline-size: 25px;
|
|
60
59
|
block-size: 16px;
|
|
61
60
|
flex-shrink: 0;
|
|
62
61
|
cursor: inherit;
|
|
63
62
|
}
|
|
64
63
|
|
|
65
|
-
.
|
|
64
|
+
.awsui_visually-hidden_1no4y_iknky_64:not(#\9) {
|
|
65
|
+
position: absolute !important;
|
|
66
|
+
inset-block-start: -9999px !important;
|
|
67
|
+
inset-inline-start: -9999px !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.awsui_value_1no4y_iknky_70:not(#\9) {
|
|
66
71
|
text-align: end;
|
|
67
72
|
margin-inline-start: var(--space-static-xxl-ifa9j8, 32px);
|
|
68
73
|
}
|
|
69
|
-
.
|
|
74
|
+
.awsui_value_1no4y_iknky_70.awsui_expandable_1no4y_iknky_74:not(#\9) {
|
|
70
75
|
font-weight: var(--font-weight-heading-s-lcx0ai, 700);
|
|
71
76
|
}
|
|
72
77
|
|
|
73
|
-
.awsui_list-
|
|
74
|
-
.awsui_inner-list-
|
|
78
|
+
.awsui_list-item_1no4y_iknky_78:not(#\9),
|
|
79
|
+
.awsui_inner-list-item_1no4y_iknky_79:not(#\9) {
|
|
75
80
|
list-style: none;
|
|
76
81
|
position: relative;
|
|
77
82
|
}
|
|
78
83
|
|
|
79
|
-
.awsui_inner-list-
|
|
80
|
-
.awsui_list-
|
|
81
|
-
.awsui_list-
|
|
84
|
+
.awsui_inner-list-item_1no4y_iknky_79:not(#\9),
|
|
85
|
+
.awsui_list-item_1no4y_iknky_78 > .awsui_key-value-pair_1no4y_iknky_85:not(#\9),
|
|
86
|
+
.awsui_list-item_1no4y_iknky_78 > .awsui_expandable-section_1no4y_iknky_86:not(#\9) {
|
|
82
87
|
display: flex;
|
|
83
88
|
flex-direction: row;
|
|
84
89
|
justify-content: space-between;
|
|
85
90
|
inline-size: 100%;
|
|
86
91
|
}
|
|
87
|
-
.awsui_inner-list-
|
|
88
|
-
.awsui_list-
|
|
89
|
-
.awsui_list-
|
|
92
|
+
.awsui_inner-list-item_1no4y_iknky_79 > .awsui_key_1no4y_iknky_85:not(#\9),
|
|
93
|
+
.awsui_list-item_1no4y_iknky_78 > .awsui_key-value-pair_1no4y_iknky_85 > .awsui_key_1no4y_iknky_85:not(#\9),
|
|
94
|
+
.awsui_list-item_1no4y_iknky_78 > .awsui_expandable-section_1no4y_iknky_86 > .awsui_key_1no4y_iknky_85:not(#\9) {
|
|
90
95
|
min-inline-size: 0;
|
|
91
96
|
word-break: break-word;
|
|
92
97
|
display: inline-flex;
|
|
93
98
|
color: var(--color-text-group-label-a2qc05, #424650);
|
|
94
99
|
}
|
|
95
100
|
|
|
96
|
-
.awsui_sub-
|
|
101
|
+
.awsui_sub-items_1no4y_iknky_101:not(#\9):not(.awsui_expandable_1no4y_iknky_74) {
|
|
97
102
|
padding-inline-start: calc(16px + var(--space-static-xxs-ns94dp, 4px));
|
|
98
103
|
}
|
|
99
|
-
.awsui_sub-
|
|
104
|
+
.awsui_sub-items_1no4y_iknky_101.awsui_expandable_1no4y_iknky_74:not(#\9) {
|
|
100
105
|
padding-inline-start: 0;
|
|
101
106
|
}
|
|
102
|
-
.awsui_sub-
|
|
107
|
+
.awsui_sub-items_1no4y_iknky_101.awsui_expandable_1no4y_iknky_74 > .awsui_inner-list-item_1no4y_iknky_79 > .awsui_value_1no4y_iknky_70:not(#\9) {
|
|
103
108
|
white-space: nowrap;
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.
|
|
111
|
+
.awsui_list_1no4y_iknky_78:not(#\9) {
|
|
107
112
|
display: flex;
|
|
108
113
|
margin-block: 0;
|
|
109
114
|
margin-inline: 0;
|
|
@@ -112,34 +117,34 @@ body[data-awsui-focus-visible=true] .awsui_focus-outline_1no4y_g0z0r_15:not(#\9)
|
|
|
112
117
|
list-style: none;
|
|
113
118
|
flex-direction: column;
|
|
114
119
|
}
|
|
115
|
-
.
|
|
120
|
+
.awsui_list_1no4y_iknky_78 > .awsui_list-item_1no4y_iknky_78.awsui_dimmed_1no4y_iknky_120:not(#\9) {
|
|
116
121
|
opacity: 0.35;
|
|
117
122
|
}
|
|
118
123
|
|
|
119
|
-
.
|
|
120
|
-
.awsui_inner-list-
|
|
124
|
+
.awsui_list_1no4y_iknky_78:not(#\9):not(.awsui_compact_1no4y_iknky_124) > .awsui_list-item_1no4y_iknky_78:not(:first-child),
|
|
125
|
+
.awsui_inner-list-item_1no4y_iknky_79:not(#\9) {
|
|
121
126
|
margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
122
127
|
}
|
|
123
128
|
|
|
124
|
-
.awsui_list-
|
|
125
|
-
.awsui_list-
|
|
129
|
+
.awsui_list-item_1no4y_iknky_78.awsui_with-sub-items_1no4y_iknky_129:not(#\9):not(.awsui_expandable_1no4y_iknky_74) > .awsui_key-value-pair_1no4y_iknky_85 > .awsui_key_1no4y_iknky_85,
|
|
130
|
+
.awsui_list-item_1no4y_iknky_78.awsui_with-sub-items_1no4y_iknky_129:not(#\9):not(.awsui_expandable_1no4y_iknky_74) > .awsui_key-value-pair_1no4y_iknky_85 > .awsui_value_1no4y_iknky_70 {
|
|
126
131
|
font-weight: var(--font-weight-heading-s-lcx0ai, 700);
|
|
127
132
|
}
|
|
128
133
|
|
|
129
|
-
.awsui_list-
|
|
134
|
+
.awsui_list-item_1no4y_iknky_78 .awsui_description_1no4y_iknky_134:not(#\9) {
|
|
130
135
|
color: var(--color-text-body-secondary-yna5sb, #424650);
|
|
131
136
|
font-size: var(--font-size-body-s-smc8cv, 12px);
|
|
132
137
|
}
|
|
133
138
|
|
|
134
|
-
.awsui_list-
|
|
139
|
+
.awsui_list-item_1no4y_iknky_78.awsui_with-sub-items_1no4y_iknky_129 .awsui_description_1no4y_iknky_134:not(#\9) {
|
|
135
140
|
margin-top: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
136
141
|
}
|
|
137
142
|
|
|
138
|
-
.awsui_full-
|
|
143
|
+
.awsui_full-width_1no4y_iknky_143:not(#\9) {
|
|
139
144
|
inline-size: 100%;
|
|
140
145
|
}
|
|
141
146
|
|
|
142
|
-
.awsui_highlight-
|
|
147
|
+
.awsui_highlight-indicator_1no4y_iknky_147:not(#\9) {
|
|
143
148
|
position: absolute;
|
|
144
149
|
top: 3px;
|
|
145
150
|
left: -6px;
|
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"focus-outline": "awsui_focus-
|
|
6
|
-
"marker": "
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
5
|
+
"focus-outline": "awsui_focus-outline_1no4y_iknky_15",
|
|
6
|
+
"marker": "awsui_marker_1no4y_iknky_27",
|
|
7
|
+
"visually-hidden": "awsui_visually-hidden_1no4y_iknky_64",
|
|
8
|
+
"value": "awsui_value_1no4y_iknky_70",
|
|
9
|
+
"expandable": "awsui_expandable_1no4y_iknky_74",
|
|
10
|
+
"list-item": "awsui_list-item_1no4y_iknky_78",
|
|
11
|
+
"inner-list-item": "awsui_inner-list-item_1no4y_iknky_79",
|
|
12
|
+
"key-value-pair": "awsui_key-value-pair_1no4y_iknky_85",
|
|
13
|
+
"expandable-section": "awsui_expandable-section_1no4y_iknky_86",
|
|
14
|
+
"key": "awsui_key_1no4y_iknky_85",
|
|
15
|
+
"sub-items": "awsui_sub-items_1no4y_iknky_101",
|
|
16
|
+
"list": "awsui_list_1no4y_iknky_78",
|
|
17
|
+
"dimmed": "awsui_dimmed_1no4y_iknky_120",
|
|
18
|
+
"compact": "awsui_compact_1no4y_iknky_124",
|
|
19
|
+
"with-sub-items": "awsui_with-sub-items_1no4y_iknky_129",
|
|
20
|
+
"description": "awsui_description_1no4y_iknky_134",
|
|
21
|
+
"full-width": "awsui_full-width_1no4y_iknky_143",
|
|
22
|
+
"highlight-indicator": "awsui_highlight-indicator_1no4y_iknky_147"
|
|
22
23
|
};
|
|
23
24
|
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { BaseComponentProps } from "@cloudscape-design/components/internal/base-component";
|
|
2
|
+
import { ChartSeriesMarkerStatus } from "./interfaces";
|
|
2
3
|
export type ChartSeriesMarkerType = "line" | "dashed" | "square" | "large-square" | "hollow-square" | "diamond" | "triangle" | "triangle-down" | "circle";
|
|
3
4
|
export interface ChartSeriesMarkerProps extends BaseComponentProps {
|
|
4
5
|
type: ChartSeriesMarkerType;
|
|
5
6
|
color: string;
|
|
6
7
|
visible?: boolean;
|
|
8
|
+
status?: ChartSeriesMarkerStatus;
|
|
9
|
+
ariaLabel?: string;
|
|
7
10
|
}
|
|
8
|
-
export declare function ChartSeriesMarker({ type, color, visible }: ChartSeriesMarkerProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function ChartSeriesMarker({ type, color, visible, status, ariaLabel, }: ChartSeriesMarkerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,45 +1,58 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import { useUniqueId } from "@cloudscape-design/component-toolkit/internal";
|
|
5
|
+
import { colorBorderStatusWarning, colorTextInteractiveDisabled } from "@cloudscape-design/design-tokens";
|
|
3
6
|
import styles from "./styles.css.js";
|
|
4
7
|
function scale(size, value) {
|
|
5
8
|
return `translate(${size * ((1 - value) / 2)}, ${size * ((1 - value) / 2)}) scale(${value})`;
|
|
6
9
|
}
|
|
7
|
-
export function ChartSeriesMarker({ type = "line", color, visible = true }) {
|
|
10
|
+
export function ChartSeriesMarker({ type = "line", color, visible = true, status = "default", ariaLabel, }) {
|
|
8
11
|
color = visible ? color : colorTextInteractiveDisabled;
|
|
9
|
-
|
|
12
|
+
// As React re-renders the components, a new ID should be created for masks.
|
|
13
|
+
// Not doing so will not evaluate the mask.
|
|
14
|
+
const maskId = useUniqueId("chart-series-marker");
|
|
15
|
+
return (_jsxs("div", { className: styles.marker, children: [ariaLabel && _jsx("span", { className: styles["visually-hidden"], children: ariaLabel }), _jsxs("svg", { focusable: false, "aria-hidden": true, viewBox: "0 0 25 16", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("mask", { id: maskId, children: [_jsx("rect", { width: "100%", height: "100%", fill: "white" }), status === "warning" && _jsx(SVGWarningMask, {})] }) }), status === "warning" && _jsx(SVGWarning, {}), type === "line" && _jsx(SVGLine, { maskId: maskId, color: color }), type === "dashed" && _jsx(SVGLineDashed, { maskId: maskId, color: color }), type === "large-square" && _jsx(SVGLargeSquare, { maskId: maskId, color: color }), type === "hollow-square" && _jsx(SVGHollowSquare, { maskId: maskId, color: color }), type === "square" && _jsx(SVGSquare, { maskId: maskId, color: color }), type === "diamond" && _jsx(SVGDiamond, { maskId: maskId, color: color }), type === "triangle" && _jsx(SVGTriangle, { maskId: maskId, color: color }), type === "triangle-down" && _jsx(SVGTriangleDown, { maskId: maskId, color: color }), type === "circle" && _jsx(SVGCircle, { maskId: maskId, color: color })] })] }));
|
|
10
16
|
}
|
|
11
|
-
function SVGLine({ color }) {
|
|
12
|
-
return _jsx("rect", { x: 1, y: 7, height: 4, width: 14, strokeWidth: 0, rx: 2, fill: color });
|
|
17
|
+
function SVGLine({ color, maskId }) {
|
|
18
|
+
return _jsx("rect", { mask: `url(#${maskId})`, x: 1, y: 7, height: 4, width: 14, strokeWidth: 0, rx: 2, fill: color });
|
|
13
19
|
}
|
|
14
|
-
function SVGLineDashed({ color }) {
|
|
15
|
-
return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 1, y: 7, height: 4, width: 6, strokeWidth: 0, rx: 2, fill: color }), _jsx("rect", { x: 9, y: 7, height: 4, width: 6, strokeWidth: 0, rx: 2, fill: color })] }));
|
|
20
|
+
function SVGLineDashed({ color, maskId }) {
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx("rect", { mask: `url(#${maskId})`, x: 1, y: 7, height: 4, width: 6, strokeWidth: 0, rx: 2, fill: color }), _jsx("rect", { mask: `url(#${maskId})`, x: 9, y: 7, height: 4, width: 6, strokeWidth: 0, rx: 2, fill: color })] }));
|
|
16
22
|
}
|
|
17
|
-
function SVGLargeSquare({ color }) {
|
|
23
|
+
function SVGLargeSquare({ color, maskId }) {
|
|
18
24
|
const shape = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.85) };
|
|
19
|
-
return _jsx("rect", { ...shape, strokeWidth: 0, fill: color });
|
|
25
|
+
return _jsx("rect", { mask: `url(#${maskId})`, ...shape, strokeWidth: 0, fill: color });
|
|
20
26
|
}
|
|
21
|
-
function SVGHollowSquare({ color }) {
|
|
27
|
+
function SVGHollowSquare({ color, maskId }) {
|
|
22
28
|
const size = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.75) };
|
|
23
|
-
return _jsx("rect", { ...size, strokeWidth: 2, stroke: color, fill: color, fillOpacity: "0.40" });
|
|
29
|
+
return _jsx("rect", { mask: `url(#${maskId})`, ...size, strokeWidth: 2, stroke: color, fill: color, fillOpacity: "0.40" });
|
|
24
30
|
}
|
|
25
|
-
function SVGSquare({ color }) {
|
|
31
|
+
function SVGSquare({ color, maskId }) {
|
|
26
32
|
const size = { x: 3, y: 3, width: 10, height: 10, rx: 2 };
|
|
27
|
-
return _jsx("rect", { ...size, strokeWidth: 0, fill: color });
|
|
33
|
+
return _jsx("rect", { mask: `url(#${maskId})`, ...size, strokeWidth: 0, fill: color });
|
|
28
34
|
}
|
|
29
|
-
function SVGDiamond({ color }) {
|
|
35
|
+
function SVGDiamond({ color, maskId }) {
|
|
30
36
|
const shape = { points: "8,0 16,8 8,16 0,8", transform: scale(16, 0.65) };
|
|
31
|
-
return _jsx("polygon", { ...shape, strokeWidth: 0, fill: color });
|
|
37
|
+
return _jsx("polygon", { mask: `url(#${maskId})`, ...shape, strokeWidth: 0, fill: color });
|
|
32
38
|
}
|
|
33
|
-
function SVGTriangle({ color }) {
|
|
39
|
+
function SVGTriangle({ color, maskId }) {
|
|
34
40
|
const shape = { points: "8,0 16,16 0,16", transform: scale(16, 0.65) };
|
|
35
|
-
return _jsx("polygon", { ...shape, strokeWidth: 0, fill: color });
|
|
41
|
+
return _jsx("polygon", { mask: `url(#${maskId})`, ...shape, strokeWidth: 0, fill: color });
|
|
36
42
|
}
|
|
37
|
-
function SVGTriangleDown({ color }) {
|
|
43
|
+
function SVGTriangleDown({ color, maskId }) {
|
|
38
44
|
const shape = { points: "8,16 0,0 16,0", transform: scale(16, 0.65) };
|
|
39
|
-
return _jsx("polygon", { ...shape, strokeWidth: 0, fill: color });
|
|
45
|
+
return _jsx("polygon", { mask: `url(#${maskId})`, ...shape, strokeWidth: 0, fill: color });
|
|
40
46
|
}
|
|
41
|
-
function SVGCircle({ color }) {
|
|
47
|
+
function SVGCircle({ color, maskId }) {
|
|
42
48
|
const shape = { cx: 8, cy: 8, r: 5 };
|
|
43
|
-
return _jsx("circle", { ...shape, strokeWidth: 0, fill: color });
|
|
49
|
+
return _jsx("circle", { mask: `url(#${maskId})`, ...shape, strokeWidth: 0, fill: color });
|
|
50
|
+
}
|
|
51
|
+
const SVGWarningTranslate = `translate(10, 1)`;
|
|
52
|
+
function SVGWarning() {
|
|
53
|
+
return (_jsx("path", { "data-testid": "warning", transform: `${SVGWarningTranslate} ${scale(16, 0.8)}`, d: "M9.14157,12.3948v-1.713c0,-0.084,-0.028,-0.154,-0.085,-0.211c-0.056,-0.058,-0.123,-0.086,-0.2,-0.086h-1.713c-0.077,0,-0.144,0.028,-0.2,0.086c-0.057,0.057,-0.085,0.127,-0.085,0.211v1.713c0,0.084,0.028,0.155,0.085,0.212c0.056,0.057,0.123,0.085,0.2,0.085h1.713c0.077,0,0.144,-0.028,0.2,-0.085c0.057,-0.057,0.085,-0.128,0.085,-0.212zm-0.018,-3.371l0.161,-4.138c0,-0.072,-0.03,-0.129,-0.089,-0.171c-0.078,-0.066,-0.149,-0.099,-0.215,-0.099h-1.962c-0.065,0,-0.136,0.033,-0.214,0.099c-0.059,0.042,-0.089,0.105,-0.089,0.189l0.152,4.12c0,0.06,0.03,0.109,0.089,0.148c0.059,0.039,0.131,0.059,0.214,0.059h1.65c0.083,0,0.153,-0.02,0.21,-0.059c0.056,-0.039,0.087,-0.088,0.093,-0.148zm-0.125,-8.419l6.85,12.692c0.208,0.378,0.202,0.757,-0.018,1.136c-0.101,0.174,-0.24,0.312,-0.415,0.414c-0.175,0.102,-0.364,0.154,-0.566,0.154h-13.699c-0.202,0,-0.391,-0.052,-0.566,-0.154c-0.176,-0.102,-0.314,-0.24,-0.415,-0.414c-0.22,-0.379,-0.226,-0.758,-0.018,-1.136l6.849,-12.692c0.101,-0.187,0.241,-0.334,0.42,-0.442c0.178,-0.108,0.371,-0.162,0.579,-0.162c0.208,0,0.402,0.054,0.58,0.162c0.178,0.108,0.318,0.255,0.419,0.442z", fill: colorBorderStatusWarning }));
|
|
54
|
+
}
|
|
55
|
+
function SVGWarningMask() {
|
|
56
|
+
return (_jsx("path", { transform: `${SVGWarningTranslate} ${scale(16, 1.4)}`, d: "M8 0C8.2081 2.01716e-08 8.40171 0.0539363 8.58008 0.162109C8.75826 0.270216 8.898 0.417425 8.99902 0.603516L15.8486 13.2959C16.0567 13.6744 16.05 14.0531 15.8301 14.4316C15.7291 14.6058 15.5913 14.7445 15.416 14.8467C15.2407 14.9488 15.0517 15 14.8496 15H1.15039C0.94832 15 0.759318 14.9488 0.583984 14.8467C0.408709 14.7445 0.270949 14.6058 0.169922 14.4316C-0.0499612 14.0531 -0.0566966 13.6744 0.151367 13.2959L7.00098 0.603516C7.102 0.417424 7.24174 0.270216 7.41992 0.162109C7.59829 0.0539363 7.7919 0 8 0Z", fill: "black" }));
|
|
44
57
|
}
|
|
45
58
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-marker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from \"@cloudscape-design/components/internal/base-component\";\nimport { colorTextInteractiveDisabled } from \"@cloudscape-design/design-tokens\";\n\nimport styles from \"./styles.css.js\";\n\nexport type ChartSeriesMarkerType =\n | \"line\"\n | \"dashed\"\n | \"square\"\n | \"large-square\"\n | \"hollow-square\"\n | \"diamond\"\n | \"triangle\"\n | \"triangle-down\"\n | \"circle\";\n\nexport interface ChartSeriesMarkerProps extends BaseComponentProps {\n type: ChartSeriesMarkerType;\n color: string;\n visible?: boolean;\n}\n\nfunction scale(size: number, value: number) {\n return `translate(${size * ((1 - value) / 2)}, ${size * ((1 - value) / 2)}) scale(${value})`;\n}\n\nexport function ChartSeriesMarker({ type = \"line\", color, visible = true }: ChartSeriesMarkerProps) {\n color = visible ? color : colorTextInteractiveDisabled;\n return (\n <div className={styles.marker}>\n <svg focusable={false} aria-hidden={true} viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n {type === \"line\" && <SVGLine color={color} />}\n\n {type === \"dashed\" && <SVGLineDashed color={color} />}\n\n {type === \"large-square\" && <SVGLargeSquare color={color} />}\n\n {type === \"hollow-square\" && <SVGHollowSquare color={color} />}\n\n {type === \"square\" && <SVGSquare color={color} />}\n\n {type === \"diamond\" && <SVGDiamond color={color} />}\n\n {type === \"triangle\" && <SVGTriangle color={color} />}\n\n {type === \"triangle-down\" && <SVGTriangleDown color={color} />}\n\n {type === \"circle\" && <SVGCircle color={color} />}\n </svg>\n </div>\n );\n}\n\nfunction SVGLine({ color }: { color: string }) {\n return <rect x={1} y={7} height={4} width={14} strokeWidth={0} rx={2} fill={color} />;\n}\n\nfunction SVGLineDashed({ color }: { color: string }) {\n return (\n <>\n <rect x={1} y={7} height={4} width={6} strokeWidth={0} rx={2} fill={color} />\n <rect x={9} y={7} height={4} width={6} strokeWidth={0} rx={2} fill={color} />\n </>\n );\n}\n\nfunction SVGLargeSquare({ color }: { color: string }) {\n const shape = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.85) };\n return <rect {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGHollowSquare({ color }: { color: string }) {\n const size = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.75) };\n return <rect {...size} strokeWidth={2} stroke={color} fill={color} fillOpacity=\"0.40\" />;\n}\n\nfunction SVGSquare({ color }: { color: string }) {\n const size = { x: 3, y: 3, width: 10, height: 10, rx: 2 };\n return <rect {...size} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGDiamond({ color }: { color: string }) {\n const shape = { points: \"8,0 16,8 8,16 0,8\", transform: scale(16, 0.65) };\n return <polygon {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGTriangle({ color }: { color: string }) {\n const shape = { points: \"8,0 16,16 0,16\", transform: scale(16, 0.65) };\n return <polygon {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGTriangleDown({ color }: { color: string }) {\n const shape = { points: \"8,16 0,0 16,0\", transform: scale(16, 0.65) };\n return <polygon {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGCircle({ color }: { color: string }) {\n const shape = { cx: 8, cy: 8, r: 5 };\n return <circle {...shape} strokeWidth={0} fill={color} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-marker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useUniqueId } from \"@cloudscape-design/component-toolkit/internal\";\nimport { BaseComponentProps } from \"@cloudscape-design/components/internal/base-component\";\nimport { colorBorderStatusWarning, colorTextInteractiveDisabled } from \"@cloudscape-design/design-tokens\";\n\nimport { ChartSeriesMarkerStatus } from \"./interfaces\";\n\nimport styles from \"./styles.css.js\";\n\nexport type ChartSeriesMarkerType =\n | \"line\"\n | \"dashed\"\n | \"square\"\n | \"large-square\"\n | \"hollow-square\"\n | \"diamond\"\n | \"triangle\"\n | \"triangle-down\"\n | \"circle\";\n\nexport interface ChartSeriesMarkerProps extends BaseComponentProps {\n type: ChartSeriesMarkerType;\n color: string;\n visible?: boolean;\n status?: ChartSeriesMarkerStatus;\n ariaLabel?: string;\n}\n\nfunction scale(size: number, value: number) {\n return `translate(${size * ((1 - value) / 2)}, ${size * ((1 - value) / 2)}) scale(${value})`;\n}\n\nexport function ChartSeriesMarker({\n type = \"line\",\n color,\n visible = true,\n status = \"default\",\n ariaLabel,\n}: ChartSeriesMarkerProps) {\n color = visible ? color : colorTextInteractiveDisabled;\n\n // As React re-renders the components, a new ID should be created for masks.\n // Not doing so will not evaluate the mask.\n const maskId = useUniqueId(\"chart-series-marker\");\n\n return (\n <div className={styles.marker}>\n {ariaLabel && <span className={styles[\"visually-hidden\"]}>{ariaLabel}</span>}\n <svg focusable={false} aria-hidden={true} viewBox=\"0 0 25 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <mask id={maskId}>\n <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n\n {status === \"warning\" && <SVGWarningMask></SVGWarningMask>}\n </mask>\n </defs>\n\n {status === \"warning\" && <SVGWarning></SVGWarning>}\n\n {type === \"line\" && <SVGLine maskId={maskId} color={color} />}\n\n {type === \"dashed\" && <SVGLineDashed maskId={maskId} color={color} />}\n\n {type === \"large-square\" && <SVGLargeSquare maskId={maskId} color={color} />}\n\n {type === \"hollow-square\" && <SVGHollowSquare maskId={maskId} color={color} />}\n\n {type === \"square\" && <SVGSquare maskId={maskId} color={color} />}\n\n {type === \"diamond\" && <SVGDiamond maskId={maskId} color={color} />}\n\n {type === \"triangle\" && <SVGTriangle maskId={maskId} color={color} />}\n\n {type === \"triangle-down\" && <SVGTriangleDown maskId={maskId} color={color} />}\n\n {type === \"circle\" && <SVGCircle maskId={maskId} color={color} />}\n </svg>\n </div>\n );\n}\n\nfunction SVGLine({ color, maskId }: { color: string; maskId: string }) {\n return <rect mask={`url(#${maskId})`} x={1} y={7} height={4} width={14} strokeWidth={0} rx={2} fill={color} />;\n}\n\nfunction SVGLineDashed({ color, maskId }: { color: string; maskId: string }) {\n return (\n <>\n <rect mask={`url(#${maskId})`} x={1} y={7} height={4} width={6} strokeWidth={0} rx={2} fill={color} />\n <rect mask={`url(#${maskId})`} x={9} y={7} height={4} width={6} strokeWidth={0} rx={2} fill={color} />\n </>\n );\n}\n\nfunction SVGLargeSquare({ color, maskId }: { color: string; maskId: string }) {\n const shape = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.85) };\n return <rect mask={`url(#${maskId})`} {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGHollowSquare({ color, maskId }: { color: string; maskId: string }) {\n const size = { x: 0, y: 0, width: 16, height: 16, rx: 2, transform: scale(16, 0.75) };\n return <rect mask={`url(#${maskId})`} {...size} strokeWidth={2} stroke={color} fill={color} fillOpacity=\"0.40\" />;\n}\n\nfunction SVGSquare({ color, maskId }: { color: string; maskId: string }) {\n const size = { x: 3, y: 3, width: 10, height: 10, rx: 2 };\n return <rect mask={`url(#${maskId})`} {...size} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGDiamond({ color, maskId }: { color: string; maskId: string }) {\n const shape = { points: \"8,0 16,8 8,16 0,8\", transform: scale(16, 0.65) };\n return <polygon mask={`url(#${maskId})`} {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGTriangle({ color, maskId }: { color: string; maskId: string }) {\n const shape = { points: \"8,0 16,16 0,16\", transform: scale(16, 0.65) };\n return <polygon mask={`url(#${maskId})`} {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGTriangleDown({ color, maskId }: { color: string; maskId: string }) {\n const shape = { points: \"8,16 0,0 16,0\", transform: scale(16, 0.65) };\n return <polygon mask={`url(#${maskId})`} {...shape} strokeWidth={0} fill={color} />;\n}\n\nfunction SVGCircle({ color, maskId }: { color: string; maskId: string }) {\n const shape = { cx: 8, cy: 8, r: 5 };\n return <circle mask={`url(#${maskId})`} {...shape} strokeWidth={0} fill={color} />;\n}\n\nconst SVGWarningTranslate = `translate(10, 1)`;\n\nfunction SVGWarning() {\n return (\n <path\n data-testid=\"warning\"\n transform={`${SVGWarningTranslate} ${scale(16, 0.8)}`}\n d=\"M9.14157,12.3948v-1.713c0,-0.084,-0.028,-0.154,-0.085,-0.211c-0.056,-0.058,-0.123,-0.086,-0.2,-0.086h-1.713c-0.077,0,-0.144,0.028,-0.2,0.086c-0.057,0.057,-0.085,0.127,-0.085,0.211v1.713c0,0.084,0.028,0.155,0.085,0.212c0.056,0.057,0.123,0.085,0.2,0.085h1.713c0.077,0,0.144,-0.028,0.2,-0.085c0.057,-0.057,0.085,-0.128,0.085,-0.212zm-0.018,-3.371l0.161,-4.138c0,-0.072,-0.03,-0.129,-0.089,-0.171c-0.078,-0.066,-0.149,-0.099,-0.215,-0.099h-1.962c-0.065,0,-0.136,0.033,-0.214,0.099c-0.059,0.042,-0.089,0.105,-0.089,0.189l0.152,4.12c0,0.06,0.03,0.109,0.089,0.148c0.059,0.039,0.131,0.059,0.214,0.059h1.65c0.083,0,0.153,-0.02,0.21,-0.059c0.056,-0.039,0.087,-0.088,0.093,-0.148zm-0.125,-8.419l6.85,12.692c0.208,0.378,0.202,0.757,-0.018,1.136c-0.101,0.174,-0.24,0.312,-0.415,0.414c-0.175,0.102,-0.364,0.154,-0.566,0.154h-13.699c-0.202,0,-0.391,-0.052,-0.566,-0.154c-0.176,-0.102,-0.314,-0.24,-0.415,-0.414c-0.22,-0.379,-0.226,-0.758,-0.018,-1.136l6.849,-12.692c0.101,-0.187,0.241,-0.334,0.42,-0.442c0.178,-0.108,0.371,-0.162,0.579,-0.162c0.208,0,0.402,0.054,0.58,0.162c0.178,0.108,0.318,0.255,0.419,0.442z\"\n fill={colorBorderStatusWarning}\n />\n );\n}\n\nfunction SVGWarningMask() {\n return (\n <path\n transform={`${SVGWarningTranslate} ${scale(16, 1.4)}`}\n d=\"M8 0C8.2081 2.01716e-08 8.40171 0.0539363 8.58008 0.162109C8.75826 0.270216 8.898 0.417425 8.99902 0.603516L15.8486 13.2959C16.0567 13.6744 16.05 14.0531 15.8301 14.4316C15.7291 14.6058 15.5913 14.7445 15.416 14.8467C15.2407 14.9488 15.0517 15 14.8496 15H1.15039C0.94832 15 0.759318 14.9488 0.583984 14.8467C0.408709 14.7445 0.270949 14.6058 0.169922 14.4316C-0.0499612 14.0531 -0.0566966 13.6744 0.151367 13.2959L7.00098 0.603516C7.102 0.417424 7.24174 0.270216 7.41992 0.162109C7.59829 0.0539363 7.7919 0 8 0Z\"\n fill=\"black\"\n />\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-marker/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type ChartSeriesMarkerType =\n | \"line\"\n | \"dashed\"\n | \"square\"\n | \"large-square\"\n | \"hollow-square\"\n | \"diamond\"\n | \"triangle\"\n | \"triangle-down\"\n | \"circle\";\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-marker/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type ChartSeriesMarkerType =\n | \"line\"\n | \"dashed\"\n | \"square\"\n | \"large-square\"\n | \"hollow-square\"\n | \"diamond\"\n | \"triangle\"\n | \"triangle-down\"\n | \"circle\";\n\nexport type ChartSeriesMarkerStatus = \"warning\" | \"default\";\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"focus-outline": "awsui_focus-
|
|
5
|
-
"marker": "
|
|
4
|
+
"focus-outline": "awsui_focus-outline_kfsgg_1lrim_15",
|
|
5
|
+
"marker": "awsui_marker_kfsgg_1lrim_19",
|
|
6
|
+
"visually-hidden": "awsui_visually-hidden_kfsgg_1lrim_56"
|
|
6
7
|
};
|
|
7
8
|
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
*/
|
|
13
13
|
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
14
14
|
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
15
|
-
body[data-awsui-focus-visible=true] .awsui_focus-
|
|
15
|
+
body[data-awsui-focus-visible=true] .awsui_focus-outline_kfsgg_1lrim_15:not(#\9) {
|
|
16
16
|
stroke: var(--color-border-item-focused-uk47pl, #006ce0);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.awsui_marker_kfsgg_1lrim_19:not(#\9) {
|
|
20
20
|
border-collapse: separate;
|
|
21
21
|
border-spacing: 0;
|
|
22
22
|
box-sizing: border-box;
|
|
@@ -43,13 +43,18 @@ body[data-awsui-focus-visible=true] .awsui_focus-outline_kfsgg_13s31_15:not(#\9)
|
|
|
43
43
|
white-space: normal;
|
|
44
44
|
word-spacing: normal;
|
|
45
45
|
margin-block-start: var(--space-static-xxxs-yidks1, 2px);
|
|
46
|
-
margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
|
|
47
46
|
border-start-start-radius: 2px;
|
|
48
47
|
border-start-end-radius: 2px;
|
|
49
48
|
border-end-start-radius: 2px;
|
|
50
49
|
border-end-end-radius: 2px;
|
|
51
|
-
inline-size:
|
|
50
|
+
inline-size: 25px;
|
|
52
51
|
block-size: 16px;
|
|
53
52
|
flex-shrink: 0;
|
|
54
53
|
cursor: inherit;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.awsui_visually-hidden_kfsgg_1lrim_56:not(#\9) {
|
|
57
|
+
position: absolute !important;
|
|
58
|
+
inset-block-start: -9999px !important;
|
|
59
|
+
inset-inline-start: -9999px !important;
|
|
55
60
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"focus-outline": "awsui_focus-
|
|
6
|
-
"marker": "
|
|
5
|
+
"focus-outline": "awsui_focus-outline_kfsgg_1lrim_15",
|
|
6
|
+
"marker": "awsui_marker_kfsgg_1lrim_19",
|
|
7
|
+
"visually-hidden": "awsui_visually-hidden_kfsgg_1lrim_56"
|
|
7
8
|
};
|
|
8
9
|
|
package/internal/environment.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "chart-components";
|
|
2
|
-
export var PACKAGE_VERSION = "1.0.0 (
|
|
2
|
+
export var PACKAGE_VERSION = "1.0.0 (44814a86)";
|
|
3
3
|
export var THEME = "open-source-visual-refresh";
|
|
4
4
|
export var ALWAYS_VISUAL_REFRESH = true;
|
|
5
5
|
export var SYSTEM = "core";
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudscape-design/chart-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.35",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/cloudscape-design/chart-components.git"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@cloudscape-design/browser-test-tools": "^3.0.4",
|
|
34
|
-
"@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#
|
|
34
|
+
"@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#main",
|
|
35
35
|
"@cloudscape-design/code-view": "^3.0.45",
|
|
36
36
|
"@cloudscape-design/components": "^3",
|
|
37
37
|
"@cloudscape-design/design-tokens": "^3",
|