@redvars/peacock 3.3.3 → 3.4.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/IndividualComponent-DUINtMGK.js +67 -0
- package/dist/IndividualComponent-DUINtMGK.js.map +1 -0
- package/dist/assets/images/empty-state/no-document.svg +11 -12
- package/dist/assets/images/empty-state/page.svg +15 -9
- package/dist/bottom-sheet.js +238 -0
- package/dist/bottom-sheet.js.map +1 -0
- package/dist/{button-ClzS8JLq.js → button-COYCtuA8.js} +306 -149
- package/dist/button-COYCtuA8.js.map +1 -0
- package/dist/button-group-DsXquZQn.js +440 -0
- package/dist/button-group-DsXquZQn.js.map +1 -0
- package/dist/button-group.js +6 -4
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +5 -3
- package/dist/button.js.map +1 -1
- package/dist/card-content.js +29 -0
- package/dist/card-content.js.map +1 -0
- package/dist/card.js +418 -44
- package/dist/card.js.map +1 -1
- package/dist/{chart-bar-DbnXQgvS.js → chart-bar-cn6rrna-.js} +2 -2
- package/dist/{chart-bar-DbnXQgvS.js.map → chart-bar-cn6rrna-.js.map} +1 -1
- package/dist/chart-bar.js +4 -3
- package/dist/chart-bar.js.map +1 -1
- package/dist/chart-doughnut.js +2 -1
- package/dist/chart-doughnut.js.map +1 -1
- package/dist/chart-pie.js +2 -1
- package/dist/chart-pie.js.map +1 -1
- package/dist/chart-stacked-bar.js +4 -3
- package/dist/chart-stacked-bar.js.map +1 -1
- package/dist/{class-map-59YGWLnx.js → class-map-3TAnCMAX.js} +3 -9
- package/dist/class-map-3TAnCMAX.js.map +1 -0
- package/dist/clock.js +2 -1
- package/dist/clock.js.map +1 -1
- package/dist/code-editor.js +6 -4
- package/dist/code-editor.js.map +1 -1
- package/dist/code-highlighter.js +5 -3
- package/dist/code-highlighter.js.map +1 -1
- package/dist/custom-elements-jsdocs.json +2458 -2753
- package/dist/custom-elements.json +2742 -757
- package/dist/dispatch-event-utils-B4odODQf.js.map +1 -1
- package/dist/index.js +14 -10
- package/dist/index.js.map +1 -1
- package/dist/number-counter.js +3 -2
- package/dist/number-counter.js.map +1 -1
- package/dist/{observe-theme-change-pALI5fmV.js → observe-theme-change-DKAIv5BB.js} +3 -2
- package/dist/observe-theme-change-DKAIv5BB.js.map +1 -0
- package/dist/peacock-loader.js +34 -8
- package/dist/peacock-loader.js.map +1 -1
- package/dist/property-1psGvXOq.js +10 -0
- package/dist/property-1psGvXOq.js.map +1 -0
- package/dist/{radio-b70_Ie9n.js → select-C3XAzenC.js} +1706 -192
- package/dist/select-C3XAzenC.js.map +1 -0
- package/dist/side-sheet.js +186 -0
- package/dist/side-sheet.js.map +1 -0
- package/dist/src/bottom-sheet/bottom-sheet.d.ts +42 -0
- package/dist/src/bottom-sheet/index.d.ts +1 -0
- package/dist/src/button/BaseButton.d.ts +4 -3
- package/dist/src/button/button/button.d.ts +4 -0
- package/dist/src/button/button-group/button-group.d.ts +32 -3
- package/dist/src/button/icon-button/icon-button.d.ts +4 -0
- package/dist/src/card/card-content.d.ts +15 -0
- package/dist/src/card/card.d.ts +37 -3
- package/dist/src/card/index.d.ts +1 -0
- package/dist/src/container/container.d.ts +1 -1
- package/dist/src/empty-state/empty-state.d.ts +1 -1
- package/dist/src/focus-ring/focus-ring.d.ts +4 -1
- package/dist/src/index.d.ts +6 -1
- package/dist/src/menu/menu/menu.d.ts +1 -0
- package/dist/src/menu/menu-item/menu-item.d.ts +0 -1
- package/dist/src/ripple/ripple.d.ts +19 -3
- package/dist/src/segmented-button/index.d.ts +2 -0
- package/dist/src/segmented-button/segmented-button-group.d.ts +46 -0
- package/dist/src/segmented-button/segmented-button.d.ts +65 -0
- package/dist/src/select/index.d.ts +3 -0
- package/dist/src/select/option.d.ts +55 -0
- package/dist/src/select/select.d.ts +116 -0
- package/dist/src/side-sheet/index.d.ts +1 -0
- package/dist/src/side-sheet/side-sheet.d.ts +41 -0
- package/dist/src/tabs/tab-group.d.ts +0 -1
- package/dist/src/tabs/tab.d.ts +8 -2
- package/dist/src/tabs/tabs.d.ts +13 -1
- package/dist/state-DwbEjqVk.js +10 -0
- package/dist/state-DwbEjqVk.js.map +1 -0
- package/dist/{style-map-DcB52w-l.js → style-map-CRFEoCEg.js} +2 -2
- package/dist/{style-map-DcB52w-l.js.map → style-map-CRFEoCEg.js.map} +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{unsafe-html-C2r3PyzF.js → unsafe-html-D3GHRaGQ.js} +2 -2
- package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-D3GHRaGQ.js.map} +1 -1
- package/package.json +1 -1
- package/readme.md +2 -2
- package/src/bottom-sheet/bottom-sheet.scss +88 -0
- package/src/bottom-sheet/bottom-sheet.ts +135 -0
- package/src/bottom-sheet/index.ts +1 -0
- package/src/button/BaseButton.ts +16 -7
- package/src/button/button/button-colors.scss +76 -5
- package/src/button/button/button-sizes.scss +39 -19
- package/src/button/button/button.scss +117 -116
- package/src/button/button/button.ts +23 -1
- package/src/button/button-group/button-group.scss +25 -22
- package/src/button/button-group/button-group.ts +121 -4
- package/src/button/icon-button/icon-button-sizes.scss +35 -15
- package/src/button/icon-button/icon-button.ts +21 -1
- package/src/card/card-colors.scss +10 -0
- package/src/card/card-content.ts +26 -0
- package/src/card/card.scss +221 -41
- package/src/card/card.ts +240 -7
- package/src/card/index.ts +1 -0
- package/src/code-editor/code-editor.ts +1 -1
- package/src/container/container.ts +1 -1
- package/src/empty-state/empty-state.scss +8 -0
- package/src/empty-state/empty-state.ts +2 -2
- package/src/focus-ring/focus-ring.ts +37 -19
- package/src/index.ts +7 -1
- package/src/menu/menu/menu.scss +24 -3
- package/src/menu/menu/menu.ts +23 -2
- package/src/menu/menu-item/menu-item.scss +1 -0
- package/src/menu/menu-item/menu-item.ts +1 -9
- package/src/peacock-loader.ts +28 -0
- package/src/ripple/ripple.ts +19 -3
- package/src/segmented-button/index.ts +2 -0
- package/src/segmented-button/segmented-button-group.scss +21 -0
- package/src/segmented-button/segmented-button-group.ts +110 -0
- package/src/segmented-button/segmented-button.scss +115 -0
- package/src/segmented-button/segmented-button.ts +175 -0
- package/src/select/index.ts +3 -0
- package/src/select/option.ts +109 -0
- package/src/select/select.scss +120 -0
- package/src/select/select.ts +486 -0
- package/src/side-sheet/index.ts +1 -0
- package/src/side-sheet/side-sheet.scss +79 -0
- package/src/side-sheet/side-sheet.ts +100 -0
- package/src/slider/slider.scss +0 -1
- package/src/tabs/demo/index.html +90 -0
- package/src/tabs/tab-group.ts +0 -3
- package/src/tabs/tab.scss +237 -25
- package/src/tabs/tab.ts +85 -11
- package/src/tabs/tabs.scss +37 -3
- package/src/tabs/tabs.ts +118 -2
- package/src/utils/dispatch-event-utils.ts +1 -0
- package/dist/IndividualComponent-Dt5xirYG.js +0 -73
- package/dist/IndividualComponent-Dt5xirYG.js.map +0 -1
- package/dist/button-ClzS8JLq.js.map +0 -1
- package/dist/button-group-BMS5WvaF.js +0 -292
- package/dist/button-group-BMS5WvaF.js.map +0 -1
- package/dist/chart-donut.js +0 -309
- package/dist/chart-donut.js.map +0 -1
- package/dist/class-map-59YGWLnx.js.map +0 -1
- package/dist/observe-theme-change-pALI5fmV.js.map +0 -1
- package/dist/radio-b70_Ie9n.js.map +0 -1
- package/dist/src/chart-donut/chart-donut.d.ts +0 -53
- package/dist/src/chart-donut/index.d.ts +0 -1
- package/dist/test/card.test.d.ts +0 -1
- package/src/chart-donut/chart-donut.scss +0 -37
- package/src/chart-donut/chart-donut.ts +0 -287
- package/src/chart-donut/demo/index.html +0 -51
- package/src/chart-donut/index.ts +0 -1
|
@@ -1,292 +0,0 @@
|
|
|
1
|
-
import { a as i, _ as __decorate, n, c as __classPrivateFieldGet, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-Dt5xirYG.js';
|
|
2
|
-
import { e } from './class-map-59YGWLnx.js';
|
|
3
|
-
import { c as css_248z$2, a as css_248z$3, b as BaseButton, s as spread, B as Button } from './button-ClzS8JLq.js';
|
|
4
|
-
import { t as throttle } from './dispatch-event-utils-B4odODQf.js';
|
|
5
|
-
|
|
6
|
-
var css_248z$1 = i`* {
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.screen-reader-only {
|
|
11
|
-
display: none !important;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.button-group {
|
|
15
|
-
display: flex;
|
|
16
|
-
gap: var(--_button-group-gap);
|
|
17
|
-
}
|
|
18
|
-
.button-group slot::slotted(:first-child) {
|
|
19
|
-
--button-container-shape-start-start: 50%;
|
|
20
|
-
--button-container-shape-end-start: 50%;
|
|
21
|
-
--button-container-shape-start-end: var(--shape-corner-medium);
|
|
22
|
-
--button-container-shape-end-end: var(--shape-corner-medium);
|
|
23
|
-
--button-container-shape-variant: unset;
|
|
24
|
-
}
|
|
25
|
-
.button-group slot::slotted(:last-child) {
|
|
26
|
-
--button-container-shape-end-end: 50%;
|
|
27
|
-
--button-container-shape-start-end: 50%;
|
|
28
|
-
--button-container-shape-end-start: var(--shape-corner-medium);
|
|
29
|
-
--button-container-shape-start-start: var(--shape-corner-medium);
|
|
30
|
-
--button-container-shape-variant: unset;
|
|
31
|
-
}
|
|
32
|
-
.button-group slot::slotted(:only-child) {
|
|
33
|
-
--button-container-shape: 50%;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.button-group.size-xs,
|
|
37
|
-
.button-group.size-extra-small {
|
|
38
|
-
--_button-group-gap: 0.125rem;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.button-group.size-sm,
|
|
42
|
-
.button-group.size-small {
|
|
43
|
-
--_button-group-gap: 0.125rem;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.button-group.size-md,
|
|
47
|
-
.button-group.size-medium {
|
|
48
|
-
--_button-group-gap: 0.125rem;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.button-group.size-lg,
|
|
52
|
-
.button-group.size-large {
|
|
53
|
-
--_button-group-gap: 0.125rem;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.button-group.size-xl {
|
|
57
|
-
--_button-group-gap: 0.125rem;
|
|
58
|
-
}`;
|
|
59
|
-
|
|
60
|
-
var css_248z = i`.button {
|
|
61
|
-
--_container-padding: 0.75rem;
|
|
62
|
-
width: var(--_button-height);
|
|
63
|
-
--_container-padding: 0;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.button.size-xs,
|
|
67
|
-
.button.size-extra-small {
|
|
68
|
-
--_button-height: 2rem;
|
|
69
|
-
--_button-icon-size: 1rem;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.button.size-sm,
|
|
73
|
-
.button.size-small {
|
|
74
|
-
--_button-height: 2.5rem;
|
|
75
|
-
--_button-icon-size: 1.25rem;
|
|
76
|
-
--_button-icon-label-spacing: 0.5rem;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.button.size-md,
|
|
80
|
-
.button.size-medium {
|
|
81
|
-
--_button-height: 3.5rem;
|
|
82
|
-
--_button-icon-size: 1.5rem;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.button.size-lg,
|
|
86
|
-
.button.size-large {
|
|
87
|
-
--_button-height: 6rem;
|
|
88
|
-
--_button-icon-size: 2rem;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.button.size-xl {
|
|
92
|
-
--_button-height: 8.5rem;
|
|
93
|
-
--_button-icon-size: 2.5rem;
|
|
94
|
-
}`;
|
|
95
|
-
|
|
96
|
-
var _IconButton_id, _IconButton_tabindex;
|
|
97
|
-
/**
|
|
98
|
-
* @label Icon Button
|
|
99
|
-
* @tag wc-icon-button
|
|
100
|
-
* @rawTag icon-button
|
|
101
|
-
*
|
|
102
|
-
* @summary Icon buttons allow users to take actions, and make choices, with a single tap.
|
|
103
|
-
*
|
|
104
|
-
* @overview
|
|
105
|
-
* <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>
|
|
106
|
-
*
|
|
107
|
-
* @cssprop --button-container-shape: Defines the border radius of the button container shape.
|
|
108
|
-
*
|
|
109
|
-
* @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
|
|
110
|
-
* @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
|
|
111
|
-
* @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
|
|
112
|
-
* @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
|
|
113
|
-
*
|
|
114
|
-
*
|
|
115
|
-
* @cssprop --filled-button-container-color: Color of the filled button container.
|
|
116
|
-
* @cssprop --filled-button-label-text-color: Text color of the filled button label.
|
|
117
|
-
*
|
|
118
|
-
* @cssprop --outlined-button-container-color: Color of the outlined button container.
|
|
119
|
-
* @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
|
|
120
|
-
*
|
|
121
|
-
* @cssprop --text-button-label-text-color: Text color of the text button label.
|
|
122
|
-
*
|
|
123
|
-
* @cssprop --tonal-button-container-color: Color of the tonal button container.
|
|
124
|
-
* @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
|
|
125
|
-
*
|
|
126
|
-
* @cssprop --elevated-button-container-color: Color of the elevated button container.
|
|
127
|
-
* @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
|
|
128
|
-
*
|
|
129
|
-
* @cssprop --neo-button-container-color: Color of the neo button container.
|
|
130
|
-
* @cssprop --neo-button-label-text-color: Text color of the neo button label.
|
|
131
|
-
*
|
|
132
|
-
* @fires {CustomEvent} button:click - Dispatched when the button is clicked.
|
|
133
|
-
*
|
|
134
|
-
* @example
|
|
135
|
-
* ```html
|
|
136
|
-
* <wc-icon-button name="home"></wc-icon-button>
|
|
137
|
-
* ```
|
|
138
|
-
* @tags display
|
|
139
|
-
*/
|
|
140
|
-
class IconButton extends BaseButton {
|
|
141
|
-
constructor() {
|
|
142
|
-
super(...arguments);
|
|
143
|
-
_IconButton_id.set(this, crypto.randomUUID());
|
|
144
|
-
_IconButton_tabindex.set(this, 0);
|
|
145
|
-
this.provider = 'material-symbols';
|
|
146
|
-
}
|
|
147
|
-
firstUpdated() {
|
|
148
|
-
this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
|
|
149
|
-
this.__convertTypeToVariantAndColor();
|
|
150
|
-
}
|
|
151
|
-
render() {
|
|
152
|
-
const isLink = this.__isLink();
|
|
153
|
-
const cssClasses = {
|
|
154
|
-
button: true,
|
|
155
|
-
'button-element': true,
|
|
156
|
-
[`size-${this.size}`]: true,
|
|
157
|
-
[`variant-${this.variant}`]: true,
|
|
158
|
-
[`color-${this.color}`]: true,
|
|
159
|
-
disabled: this.disabled || this.softDisabled,
|
|
160
|
-
pressed: this.isPressed,
|
|
161
|
-
skeleton: this.skeleton,
|
|
162
|
-
};
|
|
163
|
-
if (!isLink) {
|
|
164
|
-
return b `<button
|
|
165
|
-
class=${e(cssClasses)}
|
|
166
|
-
id="button"
|
|
167
|
-
tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
|
|
168
|
-
type=${this.htmlType}
|
|
169
|
-
@click=${this.__dispatchClickWithThrottle}
|
|
170
|
-
@mousedown=${this.__handlePress}
|
|
171
|
-
@keydown=${this.__handlePress}
|
|
172
|
-
@keyup=${this.__handlePress}
|
|
173
|
-
?aria-describedby=${(this.disabled || this.softDisabled) &&
|
|
174
|
-
this.disabledReason
|
|
175
|
-
? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
|
|
176
|
-
: null}
|
|
177
|
-
aria-disabled=${`${this.disabled || this.softDisabled}`}
|
|
178
|
-
?disabled=${this.disabled}
|
|
179
|
-
${spread(this.configAria)}
|
|
180
|
-
>
|
|
181
|
-
${this.renderButtonContent()}
|
|
182
|
-
</button>
|
|
183
|
-
${this.__renderTooltip()}`;
|
|
184
|
-
}
|
|
185
|
-
return b `<a
|
|
186
|
-
class=${e(cssClasses)}
|
|
187
|
-
id="button"
|
|
188
|
-
tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
|
|
189
|
-
href=${this.href}
|
|
190
|
-
target=${this.target}
|
|
191
|
-
@click=${this.__dispatchClickWithThrottle}
|
|
192
|
-
@mousedown=${this.__handlePress}
|
|
193
|
-
@keydown=${this.__handlePress}
|
|
194
|
-
@keyup=${this.__handlePress}
|
|
195
|
-
role="button"
|
|
196
|
-
aria-describedby=${this.disabled && this.disabledReason
|
|
197
|
-
? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
|
|
198
|
-
: null}
|
|
199
|
-
aria-disabled=${`${this.disabled}`}
|
|
200
|
-
${spread(this.configAria)}
|
|
201
|
-
>
|
|
202
|
-
${this.renderButtonContent()}
|
|
203
|
-
</a>
|
|
204
|
-
${this.__renderTooltip()}`;
|
|
205
|
-
}
|
|
206
|
-
renderButtonContent() {
|
|
207
|
-
return b `
|
|
208
|
-
<wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
|
|
209
|
-
<wc-elevation class="elevation"></wc-elevation>
|
|
210
|
-
<div class="neo-background"></div>
|
|
211
|
-
<div class="background"></div>
|
|
212
|
-
<div class="outline"></div>
|
|
213
|
-
<wc-ripple class="ripple"></wc-ripple>
|
|
214
|
-
<wc-skeleton class="skeleton"></wc-skeleton>
|
|
215
|
-
|
|
216
|
-
<div class="button-content">
|
|
217
|
-
<wc-icon
|
|
218
|
-
name=${this.name}
|
|
219
|
-
src=${this.src}
|
|
220
|
-
provider=${this.provider}
|
|
221
|
-
></wc-icon>
|
|
222
|
-
</div>
|
|
223
|
-
|
|
224
|
-
${this.__renderDisabledReason()}
|
|
225
|
-
`;
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
_IconButton_id = new WeakMap(), _IconButton_tabindex = new WeakMap();
|
|
229
|
-
IconButton.styles = [css_248z$2, css_248z$3, css_248z];
|
|
230
|
-
__decorate([
|
|
231
|
-
n({ type: String, reflect: true })
|
|
232
|
-
], IconButton.prototype, "name", void 0);
|
|
233
|
-
__decorate([
|
|
234
|
-
n({ type: String, reflect: true })
|
|
235
|
-
], IconButton.prototype, "src", void 0);
|
|
236
|
-
__decorate([
|
|
237
|
-
n({ type: String })
|
|
238
|
-
], IconButton.prototype, "provider", void 0);
|
|
239
|
-
|
|
240
|
-
/**
|
|
241
|
-
* @label Button Group
|
|
242
|
-
* @tag wc-button-group
|
|
243
|
-
* @rawTag button-group
|
|
244
|
-
*
|
|
245
|
-
* @summary Group a series of buttons together on a single line with the button group, and super-power.
|
|
246
|
-
|
|
247
|
-
* @example
|
|
248
|
-
* ```html
|
|
249
|
-
* <wc-button-group>
|
|
250
|
-
* <wc-icon-button name="home"></wc-icon-button>
|
|
251
|
-
* <wc-icon-button name="alarm"></wc-icon-button>
|
|
252
|
-
* </wc-button-group>
|
|
253
|
-
* ```
|
|
254
|
-
*
|
|
255
|
-
* @tags controls
|
|
256
|
-
*/
|
|
257
|
-
let ButtonGroup = class ButtonGroup extends i$1 {
|
|
258
|
-
constructor() {
|
|
259
|
-
super(...arguments);
|
|
260
|
-
/**
|
|
261
|
-
* Button size.
|
|
262
|
-
* Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
|
|
263
|
-
*/
|
|
264
|
-
this.size = 'sm';
|
|
265
|
-
}
|
|
266
|
-
render() {
|
|
267
|
-
const cssClasses = {
|
|
268
|
-
'button-group': true,
|
|
269
|
-
[`size-${this.size}`]: true,
|
|
270
|
-
};
|
|
271
|
-
return b `
|
|
272
|
-
<div class=${e(cssClasses)}>
|
|
273
|
-
<slot></slot>
|
|
274
|
-
</div>
|
|
275
|
-
`;
|
|
276
|
-
}
|
|
277
|
-
};
|
|
278
|
-
// Lit prefers CSS-in-JS for better performance and scoping.
|
|
279
|
-
// If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)
|
|
280
|
-
// that can import .scss files as lit-css.
|
|
281
|
-
ButtonGroup.styles = [css_248z$1];
|
|
282
|
-
ButtonGroup.Button = Button;
|
|
283
|
-
ButtonGroup.IconButton = IconButton;
|
|
284
|
-
__decorate([
|
|
285
|
-
n()
|
|
286
|
-
], ButtonGroup.prototype, "size", void 0);
|
|
287
|
-
ButtonGroup = __decorate([
|
|
288
|
-
IndividualComponent
|
|
289
|
-
], ButtonGroup);
|
|
290
|
-
|
|
291
|
-
export { ButtonGroup as B, IconButton as I };
|
|
292
|
-
//# sourceMappingURL=button-group-BMS5WvaF.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-group-BMS5WvaF.js","sources":["../../src/button/icon-button/icon-button.ts","../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '../../spread.js';\nimport { BaseButton } from '../BaseButton.js';\nimport { IconProvider } from '../../icon/icon.js';\nimport { throttle } from '../../utils.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button name=\"home\"></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n static override styles = [styles, colorStyles, sizeStyles];\n\n #id = crypto.randomUUID();\n\n #tabindex?: number = 0;\n\n @property({ type: String, reflect: true }) name?: string;\n\n @property({ type: String, reflect: true }) src?: string;\n\n @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n this.__convertTypeToVariantAndColor();\n }\n\n override render() {\n const isLink = this.__isLink();\n\n const cssClasses = {\n button: true,\n 'button-element': true,\n [`size-${this.size}`]: true,\n [`variant-${this.variant}`]: true,\n [`color-${this.color}`]: true,\n disabled: this.disabled || this.softDisabled,\n pressed: this.isPressed,\n skeleton: this.skeleton,\n };\n\n if (!isLink) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n tabindex=${this.#tabindex}\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n ?aria-describedby=${(this.disabled || this.softDisabled) &&\n this.disabledReason\n ? `disabled-reason-${this.#id}`\n : null}\n aria-disabled=${`${this.disabled || this.softDisabled}`}\n ?disabled=${this.disabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.__renderTooltip()}`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"button\"\n tabindex=${this.#tabindex}\n href=${this.href}\n target=${this.target}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n aria-describedby=${this.disabled && this.disabledReason\n ? `disabled-reason-${this.#id}`\n : null}\n aria-disabled=${`${this.disabled}`}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </a>\n ${this.__renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html`\n <wc-focus-ring class=\"focus-ring\" .control=${this} element=\"buttonElement\"></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n <div class=\"neo-background\"></div>\n <div class=\"background\"></div>\n <div class=\"outline\"></div>\n <wc-ripple class=\"ripple\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n <div class=\"button-content\">\n <wc-icon\n name=${this.name}\n src=${this.src}\n provider=${this.provider}\n ></wc-icon>\n </div>\n\n ${this.__renderDisabledReason()}\n `;\n }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.js';\n\n/**\n * @label Button Group\n * @tag wc-button-group\n * @rawTag button-group\n *\n * @summary Group a series of buttons together on a single line with the button group, and super-power.\n\n * @example\n * ```html\n * <wc-button-group>\n * <wc-icon-button name=\"home\"></wc-icon-button>\n * <wc-icon-button name=\"alarm\"></wc-icon-button>\n * </wc-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class ButtonGroup extends LitElement {\n // Lit prefers CSS-in-JS for better performance and scoping.\n // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)\n // that can import .scss files as lit-css.\n static styles = [styles];\n\n static Button = Button;\n\n static IconButton = IconButton;\n\n /**\n * Button size.\n * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n render() {\n const cssClasses = {\n 'button-group': true,\n [`size-${this.size}`]: true,\n };\n return html`\n <div class=${classMap(cssClasses)}>\n <slot></slot>\n </div>\n `;\n }\n}\n"],"names":["html","classMap","styles","colorStyles","sizeStyles","property","LitElement"],"mappings":"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"}
|
package/dist/chart-donut.js
DELETED
|
@@ -1,309 +0,0 @@
|
|
|
1
|
-
import { a as i, _ as __decorate, n, I as IndividualComponent, i as i$1, b } from './IndividualComponent-Dt5xirYG.js';
|
|
2
|
-
import { e } from './query-QBcUV-L_.js';
|
|
3
|
-
import { o as ordinal, s as select, c as cubicInOut, i as interpolateNumber } from './transform-DSwFSqzD.js';
|
|
4
|
-
import { p as pie, a as arc } from './pie-Dz0IDiPt.js';
|
|
5
|
-
import './array-D5vjT2Xm.js';
|
|
6
|
-
|
|
7
|
-
var css_248z = i`* {
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.screen-reader-only {
|
|
12
|
-
display: none !important;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:host {
|
|
16
|
-
display: inline-block;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.title {
|
|
20
|
-
font-family: var(--typography-title-large-emphasized-font-family) !important;
|
|
21
|
-
font-size: var(--typography-title-large-emphasized-font-size) !important;
|
|
22
|
-
font-weight: var(--typography-title-large-emphasized-font-weight) !important;
|
|
23
|
-
line-height: var(--typography-title-large-emphasized-line-height) !important;
|
|
24
|
-
letter-spacing: var(--typography-title-large-emphasized-letter-spacing) !important;
|
|
25
|
-
fill: var(--color-on-surface);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.label {
|
|
29
|
-
font-family: var(--typography-title-medium-font-family) !important;
|
|
30
|
-
font-size: var(--typography-title-medium-font-size) !important;
|
|
31
|
-
font-weight: var(--typography-title-medium-font-weight) !important;
|
|
32
|
-
line-height: var(--typography-title-medium-line-height) !important;
|
|
33
|
-
letter-spacing: var(--typography-title-medium-letter-spacing) !important;
|
|
34
|
-
fill: var(--color-on-surface);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.arc {
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
transition: filter 150ms ease;
|
|
40
|
-
}
|
|
41
|
-
.arc:hover {
|
|
42
|
-
filter: brightness(1.2);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.item-polyline {
|
|
46
|
-
fill: none;
|
|
47
|
-
stroke-width: 1;
|
|
48
|
-
stroke: var(--color-on-surface);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.item-label {
|
|
52
|
-
fill: var(--color-on-surface);
|
|
53
|
-
font-family: var(--typography-label-medium-font-family) !important;
|
|
54
|
-
font-size: var(--typography-label-medium-font-size) !important;
|
|
55
|
-
font-weight: var(--typography-label-medium-font-weight) !important;
|
|
56
|
-
line-height: var(--typography-label-medium-line-height) !important;
|
|
57
|
-
letter-spacing: var(--typography-label-medium-letter-spacing) !important;
|
|
58
|
-
}`;
|
|
59
|
-
|
|
60
|
-
const chartColors = [];
|
|
61
|
-
['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
|
|
62
|
-
chartColors.push({
|
|
63
|
-
color: `var(--color-${colorName})`,
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
function debounce(fn, wait) {
|
|
67
|
-
let timer;
|
|
68
|
-
return ((...args) => {
|
|
69
|
-
clearTimeout(timer);
|
|
70
|
-
timer = setTimeout(() => fn(...args), wait);
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* @label Chart Donut
|
|
75
|
-
* @tag wc-chart-donut
|
|
76
|
-
* @rawTag chart-donut
|
|
77
|
-
* @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.
|
|
78
|
-
* @tags charts
|
|
79
|
-
*
|
|
80
|
-
* @example
|
|
81
|
-
* ```html
|
|
82
|
-
* <wc-chart-donut width="400" label="Total"></wc-chart-donut>
|
|
83
|
-
* <script>
|
|
84
|
-
* document.querySelector('wc-chart-donut').data = [
|
|
85
|
-
* { name: 'A', value: 30, label: 'Category A' },
|
|
86
|
-
* { name: 'B', value: 50, label: 'Category B' },
|
|
87
|
-
* { name: 'C', value: 20, label: 'Category C' },
|
|
88
|
-
* ];
|
|
89
|
-
* </script>
|
|
90
|
-
* ```
|
|
91
|
-
*/
|
|
92
|
-
let ChartDonut = class ChartDonut extends i$1 {
|
|
93
|
-
constructor() {
|
|
94
|
-
super(...arguments);
|
|
95
|
-
/** Width (and height) of the chart in pixels. */
|
|
96
|
-
this.width = 0;
|
|
97
|
-
/** Margin around the chart. */
|
|
98
|
-
this.margin = 10;
|
|
99
|
-
/** Whether to show labels outside the chart. */
|
|
100
|
-
this.showLabels = true;
|
|
101
|
-
/** Chart data array. Each item should have name, value, and optional label and color. */
|
|
102
|
-
this.data = [];
|
|
103
|
-
this._initialized = false;
|
|
104
|
-
this._debouncedRenderChart = debounce(() => {
|
|
105
|
-
this._renderChart(true);
|
|
106
|
-
}, 300);
|
|
107
|
-
}
|
|
108
|
-
firstUpdated() {
|
|
109
|
-
this._renderChart(false);
|
|
110
|
-
}
|
|
111
|
-
updated(changedProperties) {
|
|
112
|
-
if (!this._initialized) {
|
|
113
|
-
this._initialized = true;
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
const watchedProps = ['width', 'margin', 'showLabels', 'data'];
|
|
117
|
-
const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
|
|
118
|
-
if (hasChanged) {
|
|
119
|
-
this._debouncedRenderChart();
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
_getRadius() {
|
|
123
|
-
return this.width / 2 - this.margin - 100;
|
|
124
|
-
}
|
|
125
|
-
_getTotal() {
|
|
126
|
-
return this.data.reduce((total, d) => total + d.value, 0);
|
|
127
|
-
}
|
|
128
|
-
_getPieData() {
|
|
129
|
-
const pie$1 = pie()
|
|
130
|
-
.sort(null)
|
|
131
|
-
.value(d => d.value);
|
|
132
|
-
return pie$1(this.data);
|
|
133
|
-
}
|
|
134
|
-
_getColorScale() {
|
|
135
|
-
return ordinal()
|
|
136
|
-
.domain(this.data.map(d => d.name))
|
|
137
|
-
.range(chartColors);
|
|
138
|
-
}
|
|
139
|
-
_renderChart(animate) {
|
|
140
|
-
if (!this.svgElement)
|
|
141
|
-
return;
|
|
142
|
-
const DURATION = 500;
|
|
143
|
-
const radius = this._getRadius();
|
|
144
|
-
const pieData = this._getPieData();
|
|
145
|
-
const colorScale = this._getColorScale();
|
|
146
|
-
const total = this._getTotal();
|
|
147
|
-
const svg = select(this.svgElement);
|
|
148
|
-
const doughnutArc = arc()
|
|
149
|
-
.innerRadius(radius * 0.72)
|
|
150
|
-
.outerRadius(radius);
|
|
151
|
-
const labelsArc = arc()
|
|
152
|
-
.innerRadius(radius + 10)
|
|
153
|
-
.outerRadius(radius + 10);
|
|
154
|
-
// Update SVG dimensions and center transform
|
|
155
|
-
svg.attr('width', this.width).attr('height', this.width);
|
|
156
|
-
svg
|
|
157
|
-
.select('.chart-container')
|
|
158
|
-
.attr('transform', `translate(${this.width / 2},${this.width / 2})`);
|
|
159
|
-
// Arc paths — keyed by name so D3 matches elements across updates
|
|
160
|
-
const $paths = svg
|
|
161
|
-
.select('.arc-container')
|
|
162
|
-
.selectAll('.arc')
|
|
163
|
-
.data(pieData, d => d.data.name)
|
|
164
|
-
.join('path')
|
|
165
|
-
.attr('class', 'arc')
|
|
166
|
-
.style('fill', d => d.data.color || colorScale(d.data.name).color);
|
|
167
|
-
if (animate) {
|
|
168
|
-
$paths
|
|
169
|
-
.transition()
|
|
170
|
-
.duration(DURATION)
|
|
171
|
-
.ease(cubicInOut)
|
|
172
|
-
.attrTween('d', function (d) {
|
|
173
|
-
const self = this;
|
|
174
|
-
// Interpolate from the last rendered angles to the new ones.
|
|
175
|
-
// New (entering) arcs start collapsed at their startAngle.
|
|
176
|
-
const prev = self._prevDatum ?? {
|
|
177
|
-
startAngle: d.startAngle,
|
|
178
|
-
endAngle: d.startAngle,
|
|
179
|
-
};
|
|
180
|
-
self._prevDatum = d;
|
|
181
|
-
const iStart = interpolateNumber(prev.startAngle, d.startAngle);
|
|
182
|
-
const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
|
|
183
|
-
return (t) => doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??
|
|
184
|
-
'';
|
|
185
|
-
});
|
|
186
|
-
}
|
|
187
|
-
else {
|
|
188
|
-
// Initial render: draw immediately and seed previous-datum for later tweens
|
|
189
|
-
$paths
|
|
190
|
-
.each(function (d) {
|
|
191
|
-
this._prevDatum = d;
|
|
192
|
-
})
|
|
193
|
-
.attr('d', d => doughnutArc(d) ?? '');
|
|
194
|
-
}
|
|
195
|
-
// Animate the central total counter
|
|
196
|
-
const $title = svg.select('.title');
|
|
197
|
-
if (animate) {
|
|
198
|
-
$title
|
|
199
|
-
.transition()
|
|
200
|
-
.duration(DURATION)
|
|
201
|
-
.ease(cubicInOut)
|
|
202
|
-
.tween('text', function () {
|
|
203
|
-
const sel = select(this);
|
|
204
|
-
const start = parseFloat(sel.text()) || 0;
|
|
205
|
-
const interp = interpolateNumber(start, total);
|
|
206
|
-
return function (t) {
|
|
207
|
-
sel.text(Math.round(interp(t)));
|
|
208
|
-
};
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
$title.text(total);
|
|
213
|
-
}
|
|
214
|
-
// Label polylines and text
|
|
215
|
-
const $chartContainer = svg.select('.chart-container');
|
|
216
|
-
if (this.showLabels) {
|
|
217
|
-
const pointsFn = (d) => {
|
|
218
|
-
const posA = doughnutArc.centroid(d);
|
|
219
|
-
const posB = labelsArc.centroid(d);
|
|
220
|
-
const posC = posB.slice();
|
|
221
|
-
const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
|
222
|
-
posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
|
|
223
|
-
return [posA, posB, posC].map(p => p.join(',')).join(' ');
|
|
224
|
-
};
|
|
225
|
-
const transformFn = (d) => {
|
|
226
|
-
const pos = labelsArc.centroid(d);
|
|
227
|
-
const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
|
228
|
-
pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
|
|
229
|
-
return `translate(${pos})`;
|
|
230
|
-
};
|
|
231
|
-
const anchorFn = (d) => {
|
|
232
|
-
const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
|
233
|
-
return midAngle < Math.PI ? 'start' : 'end';
|
|
234
|
-
};
|
|
235
|
-
const $polylines = $chartContainer
|
|
236
|
-
.selectAll('.item-polyline')
|
|
237
|
-
.data(pieData, d => d.data.name)
|
|
238
|
-
.join('polyline')
|
|
239
|
-
.attr('class', 'item-polyline');
|
|
240
|
-
const $labels = $chartContainer
|
|
241
|
-
.selectAll('.item-label')
|
|
242
|
-
.data(pieData, d => d.data.name)
|
|
243
|
-
.join('text')
|
|
244
|
-
.attr('class', 'item-label')
|
|
245
|
-
.text(d => d.data.label ?? '');
|
|
246
|
-
if (animate) {
|
|
247
|
-
$polylines
|
|
248
|
-
.transition()
|
|
249
|
-
.duration(DURATION)
|
|
250
|
-
.ease(cubicInOut)
|
|
251
|
-
.attr('points', pointsFn);
|
|
252
|
-
$labels
|
|
253
|
-
.transition()
|
|
254
|
-
.duration(DURATION)
|
|
255
|
-
.ease(cubicInOut)
|
|
256
|
-
.attr('transform', transformFn)
|
|
257
|
-
.style('text-anchor', anchorFn);
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
260
|
-
$polylines.attr('points', pointsFn);
|
|
261
|
-
$labels.attr('transform', transformFn).style('text-anchor', anchorFn);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
else {
|
|
265
|
-
$chartContainer.selectAll('.item-polyline').remove();
|
|
266
|
-
$chartContainer.selectAll('.item-label').remove();
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
render() {
|
|
270
|
-
return b `
|
|
271
|
-
<div class="chart">
|
|
272
|
-
<svg>
|
|
273
|
-
<g class="chart-container">
|
|
274
|
-
<g class="arc-container"></g>
|
|
275
|
-
<text class="title" text-anchor="middle"></text>
|
|
276
|
-
<text class="label" text-anchor="middle" y="16">
|
|
277
|
-
${this.label}
|
|
278
|
-
</text>
|
|
279
|
-
</g>
|
|
280
|
-
</svg>
|
|
281
|
-
</div>
|
|
282
|
-
`;
|
|
283
|
-
}
|
|
284
|
-
};
|
|
285
|
-
ChartDonut.styles = [css_248z];
|
|
286
|
-
__decorate([
|
|
287
|
-
e('svg')
|
|
288
|
-
], ChartDonut.prototype, "svgElement", void 0);
|
|
289
|
-
__decorate([
|
|
290
|
-
n({ type: Number, reflect: true })
|
|
291
|
-
], ChartDonut.prototype, "width", void 0);
|
|
292
|
-
__decorate([
|
|
293
|
-
n({ type: Number, reflect: true })
|
|
294
|
-
], ChartDonut.prototype, "margin", void 0);
|
|
295
|
-
__decorate([
|
|
296
|
-
n({ type: Boolean, reflect: true, attribute: 'show-labels' })
|
|
297
|
-
], ChartDonut.prototype, "showLabels", void 0);
|
|
298
|
-
__decorate([
|
|
299
|
-
n({ type: Array })
|
|
300
|
-
], ChartDonut.prototype, "data", void 0);
|
|
301
|
-
__decorate([
|
|
302
|
-
n({ type: String })
|
|
303
|
-
], ChartDonut.prototype, "label", void 0);
|
|
304
|
-
ChartDonut = __decorate([
|
|
305
|
-
IndividualComponent
|
|
306
|
-
], ChartDonut);
|
|
307
|
-
|
|
308
|
-
export { ChartDonut };
|
|
309
|
-
//# sourceMappingURL=chart-donut.js.map
|
package/dist/chart-donut.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-donut.js","sources":["../../src/chart-donut/chart-donut.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-donut.scss';\n\nexport type ChartDonutColor = {\n color: string;\n};\n\nexport type ChartDonutItem = {\n name: string;\n value: number;\n label?: string;\n color?: string;\n};\n\nconst chartColors: ChartDonutColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n chartColors.push({\n color: `var(--color-${colorName})`,\n });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n _prevDatum?: d3.PieArcDatum<ChartDonutItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n let timer: ReturnType<typeof setTimeout>;\n return ((...args: any[]) => {\n clearTimeout(timer);\n timer = setTimeout(() => fn(...args), wait);\n }) as T;\n}\n\n/**\n * @label Chart Donut\n * @tag wc-chart-donut\n * @rawTag chart-donut\n * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-donut width=\"400\" label=\"Total\"></wc-chart-donut>\n * <script>\n * document.querySelector('wc-chart-donut').data = [\n * { name: 'A', value: 30, label: 'Category A' },\n * { name: 'B', value: 50, label: 'Category B' },\n * { name: 'C', value: 20, label: 'Category C' },\n * ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartDonut extends LitElement {\n static styles = [styles];\n\n @query('svg')\n private svgElement?: SVGElement;\n\n /** Width (and height) of the chart in pixels. */\n @property({ type: Number, reflect: true }) width: number = 0;\n\n /** Margin around the chart. */\n @property({ type: Number, reflect: true }) margin: number = 10;\n\n /** Whether to show labels outside the chart. */\n @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n showLabels: boolean = true;\n\n /** Chart data array. Each item should have name, value, and optional label and color. */\n @property({ type: Array }) data: ChartDonutItem[] = [];\n\n /** Label displayed in the center of the donut. */\n @property({ type: String }) label?: string;\n\n private _initialized = false;\n\n private _debouncedRenderChart = debounce(() => {\n this._renderChart(true);\n }, 300);\n\n firstUpdated() {\n this._renderChart(false);\n }\n\n updated(changedProperties: PropertyValues) {\n if (!this._initialized) {\n this._initialized = true;\n return;\n }\n const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n if (hasChanged) {\n this._debouncedRenderChart();\n }\n }\n\n private _getRadius(): number {\n return this.width / 2 - this.margin - 100;\n }\n\n private _getTotal(): number {\n return this.data.reduce((total, d) => total + d.value, 0);\n }\n\n private _getPieData() {\n const pie = d3\n .pie<ChartDonutItem>()\n .sort(null)\n .value(d => d.value);\n return pie(this.data);\n }\n\n private _getColorScale() {\n return d3\n .scaleOrdinal<string, ChartDonutColor>()\n .domain(this.data.map(d => d.name))\n .range(chartColors);\n }\n\n private _renderChart(animate: boolean) {\n if (!this.svgElement) return;\n\n const DURATION = 500;\n const radius = this._getRadius();\n const pieData = this._getPieData();\n const colorScale = this._getColorScale();\n const total = this._getTotal();\n\n const svg = d3.select(this.svgElement);\n\n const doughnutArc = d3\n .arc<d3.PieArcDatum<ChartDonutItem>>()\n .innerRadius(radius * 0.72)\n .outerRadius(radius);\n\n const labelsArc = d3\n .arc<d3.PieArcDatum<ChartDonutItem>>()\n .innerRadius(radius + 10)\n .outerRadius(radius + 10);\n\n // Update SVG dimensions and center transform\n svg.attr('width', this.width).attr('height', this.width);\n svg\n .select('.chart-container')\n .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n // Arc paths — keyed by name so D3 matches elements across updates\n const $paths = svg\n .select('.arc-container')\n .selectAll<SVGPathElement, d3.PieArcDatum<ChartDonutItem>>('.arc')\n .data(pieData, d => d.data.name)\n .join('path')\n .attr('class', 'arc')\n .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n if (animate) {\n $paths\n .transition()\n .duration(DURATION)\n .ease(d3.easeCubicInOut)\n .attrTween('d', function (this: SVGPathElement, d) {\n const self = this as ArcPathElement;\n // Interpolate from the last rendered angles to the new ones.\n // New (entering) arcs start collapsed at their startAngle.\n const prev: { startAngle: number; endAngle: number } =\n self._prevDatum ?? {\n startAngle: d.startAngle,\n endAngle: d.startAngle,\n };\n self._prevDatum = d;\n const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);\n const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);\n return (t: number) =>\n doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??\n '';\n });\n } else {\n // Initial render: draw immediately and seed previous-datum for later tweens\n $paths\n .each(function (this: SVGPathElement, d) {\n (this as ArcPathElement)._prevDatum = d;\n })\n .attr('d', d => doughnutArc(d) ?? '');\n }\n\n // Animate the central total counter\n const $title = svg.select('.title');\n if (animate) {\n $title\n .transition()\n .duration(DURATION)\n .ease(d3.easeCubicInOut)\n .tween('text', function (this: d3.BaseType) {\n const sel = d3.select(this as SVGTextElement);\n const start = parseFloat(sel.text()) || 0;\n const interp = d3.interpolateNumber(start, total);\n return function (t: number) {\n sel.text(Math.round(interp(t)));\n };\n });\n } else {\n $title.text(total);\n }\n\n // Label polylines and text\n const $chartContainer = svg.select('.chart-container');\n\n if (this.showLabels) {\n const pointsFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n const posA = doughnutArc.centroid(d);\n const posB = labelsArc.centroid(d);\n const posC = posB.slice() as [number, number];\n const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n return [posA, posB, posC].map(p => p.join(',')).join(' ');\n };\n\n const transformFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n const pos = labelsArc.centroid(d);\n const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n return `translate(${pos})`;\n };\n\n const anchorFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n return midAngle < Math.PI ? 'start' : 'end';\n };\n\n const $polylines = $chartContainer\n .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDonutItem>>(\n '.item-polyline',\n )\n .data(pieData, d => d.data.name)\n .join('polyline')\n .attr('class', 'item-polyline');\n\n const $labels = $chartContainer\n .selectAll<SVGTextElement, d3.PieArcDatum<ChartDonutItem>>('.item-label')\n .data(pieData, d => d.data.name)\n .join('text')\n .attr('class', 'item-label')\n .text(d => d.data.label ?? '');\n\n if (animate) {\n $polylines\n .transition()\n .duration(DURATION)\n .ease(d3.easeCubicInOut)\n .attr('points', pointsFn);\n $labels\n .transition()\n .duration(DURATION)\n .ease(d3.easeCubicInOut)\n .attr('transform', transformFn)\n .style('text-anchor', anchorFn);\n } else {\n $polylines.attr('points', pointsFn);\n $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n }\n } else {\n $chartContainer.selectAll('.item-polyline').remove();\n $chartContainer.selectAll('.item-label').remove();\n }\n }\n\n render() {\n return html`\n <div class=\"chart\">\n <svg>\n <g class=\"chart-container\">\n <g class=\"arc-container\"></g>\n <text class=\"title\" text-anchor=\"middle\"></text>\n <text class=\"label\" text-anchor=\"middle\" y=\"16\">\n ${this.label}\n </text>\n </g>\n </svg>\n </div>\n `;\n }\n}\n"],"names":["LitElement","pie","d3\n .pie","d3\n .scaleOrdinal","d3.select","d3\n .arc","d3.easeCubicInOut","d3.interpolateNumber","html","styles","query","property"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"class-map-59YGWLnx.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js","../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n","import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["t","s","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAE,CAAC,SAAS,CAAC,KAAE,CAAC,CAAC;;ACJvD;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACC,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACD,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGE,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGF,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0,1]}
|