@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.
Files changed (155) hide show
  1. package/dist/IndividualComponent-DUINtMGK.js +67 -0
  2. package/dist/IndividualComponent-DUINtMGK.js.map +1 -0
  3. package/dist/assets/images/empty-state/no-document.svg +11 -12
  4. package/dist/assets/images/empty-state/page.svg +15 -9
  5. package/dist/bottom-sheet.js +238 -0
  6. package/dist/bottom-sheet.js.map +1 -0
  7. package/dist/{button-ClzS8JLq.js → button-COYCtuA8.js} +306 -149
  8. package/dist/button-COYCtuA8.js.map +1 -0
  9. package/dist/button-group-DsXquZQn.js +440 -0
  10. package/dist/button-group-DsXquZQn.js.map +1 -0
  11. package/dist/button-group.js +6 -4
  12. package/dist/button-group.js.map +1 -1
  13. package/dist/button.js +5 -3
  14. package/dist/button.js.map +1 -1
  15. package/dist/card-content.js +29 -0
  16. package/dist/card-content.js.map +1 -0
  17. package/dist/card.js +418 -44
  18. package/dist/card.js.map +1 -1
  19. package/dist/{chart-bar-DbnXQgvS.js → chart-bar-cn6rrna-.js} +2 -2
  20. package/dist/{chart-bar-DbnXQgvS.js.map → chart-bar-cn6rrna-.js.map} +1 -1
  21. package/dist/chart-bar.js +4 -3
  22. package/dist/chart-bar.js.map +1 -1
  23. package/dist/chart-doughnut.js +2 -1
  24. package/dist/chart-doughnut.js.map +1 -1
  25. package/dist/chart-pie.js +2 -1
  26. package/dist/chart-pie.js.map +1 -1
  27. package/dist/chart-stacked-bar.js +4 -3
  28. package/dist/chart-stacked-bar.js.map +1 -1
  29. package/dist/{class-map-59YGWLnx.js → class-map-3TAnCMAX.js} +3 -9
  30. package/dist/class-map-3TAnCMAX.js.map +1 -0
  31. package/dist/clock.js +2 -1
  32. package/dist/clock.js.map +1 -1
  33. package/dist/code-editor.js +6 -4
  34. package/dist/code-editor.js.map +1 -1
  35. package/dist/code-highlighter.js +5 -3
  36. package/dist/code-highlighter.js.map +1 -1
  37. package/dist/custom-elements-jsdocs.json +2458 -2753
  38. package/dist/custom-elements.json +2742 -757
  39. package/dist/dispatch-event-utils-B4odODQf.js.map +1 -1
  40. package/dist/index.js +14 -10
  41. package/dist/index.js.map +1 -1
  42. package/dist/number-counter.js +3 -2
  43. package/dist/number-counter.js.map +1 -1
  44. package/dist/{observe-theme-change-pALI5fmV.js → observe-theme-change-DKAIv5BB.js} +3 -2
  45. package/dist/observe-theme-change-DKAIv5BB.js.map +1 -0
  46. package/dist/peacock-loader.js +34 -8
  47. package/dist/peacock-loader.js.map +1 -1
  48. package/dist/property-1psGvXOq.js +10 -0
  49. package/dist/property-1psGvXOq.js.map +1 -0
  50. package/dist/{radio-b70_Ie9n.js → select-C3XAzenC.js} +1706 -192
  51. package/dist/select-C3XAzenC.js.map +1 -0
  52. package/dist/side-sheet.js +186 -0
  53. package/dist/side-sheet.js.map +1 -0
  54. package/dist/src/bottom-sheet/bottom-sheet.d.ts +42 -0
  55. package/dist/src/bottom-sheet/index.d.ts +1 -0
  56. package/dist/src/button/BaseButton.d.ts +4 -3
  57. package/dist/src/button/button/button.d.ts +4 -0
  58. package/dist/src/button/button-group/button-group.d.ts +32 -3
  59. package/dist/src/button/icon-button/icon-button.d.ts +4 -0
  60. package/dist/src/card/card-content.d.ts +15 -0
  61. package/dist/src/card/card.d.ts +37 -3
  62. package/dist/src/card/index.d.ts +1 -0
  63. package/dist/src/container/container.d.ts +1 -1
  64. package/dist/src/empty-state/empty-state.d.ts +1 -1
  65. package/dist/src/focus-ring/focus-ring.d.ts +4 -1
  66. package/dist/src/index.d.ts +6 -1
  67. package/dist/src/menu/menu/menu.d.ts +1 -0
  68. package/dist/src/menu/menu-item/menu-item.d.ts +0 -1
  69. package/dist/src/ripple/ripple.d.ts +19 -3
  70. package/dist/src/segmented-button/index.d.ts +2 -0
  71. package/dist/src/segmented-button/segmented-button-group.d.ts +46 -0
  72. package/dist/src/segmented-button/segmented-button.d.ts +65 -0
  73. package/dist/src/select/index.d.ts +3 -0
  74. package/dist/src/select/option.d.ts +55 -0
  75. package/dist/src/select/select.d.ts +116 -0
  76. package/dist/src/side-sheet/index.d.ts +1 -0
  77. package/dist/src/side-sheet/side-sheet.d.ts +41 -0
  78. package/dist/src/tabs/tab-group.d.ts +0 -1
  79. package/dist/src/tabs/tab.d.ts +8 -2
  80. package/dist/src/tabs/tabs.d.ts +13 -1
  81. package/dist/state-DwbEjqVk.js +10 -0
  82. package/dist/state-DwbEjqVk.js.map +1 -0
  83. package/dist/{style-map-DcB52w-l.js → style-map-CRFEoCEg.js} +2 -2
  84. package/dist/{style-map-DcB52w-l.js.map → style-map-CRFEoCEg.js.map} +1 -1
  85. package/dist/tsconfig.tsbuildinfo +1 -1
  86. package/dist/{unsafe-html-C2r3PyzF.js → unsafe-html-D3GHRaGQ.js} +2 -2
  87. package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-D3GHRaGQ.js.map} +1 -1
  88. package/package.json +1 -1
  89. package/readme.md +2 -2
  90. package/src/bottom-sheet/bottom-sheet.scss +88 -0
  91. package/src/bottom-sheet/bottom-sheet.ts +135 -0
  92. package/src/bottom-sheet/index.ts +1 -0
  93. package/src/button/BaseButton.ts +16 -7
  94. package/src/button/button/button-colors.scss +76 -5
  95. package/src/button/button/button-sizes.scss +39 -19
  96. package/src/button/button/button.scss +117 -116
  97. package/src/button/button/button.ts +23 -1
  98. package/src/button/button-group/button-group.scss +25 -22
  99. package/src/button/button-group/button-group.ts +121 -4
  100. package/src/button/icon-button/icon-button-sizes.scss +35 -15
  101. package/src/button/icon-button/icon-button.ts +21 -1
  102. package/src/card/card-colors.scss +10 -0
  103. package/src/card/card-content.ts +26 -0
  104. package/src/card/card.scss +221 -41
  105. package/src/card/card.ts +240 -7
  106. package/src/card/index.ts +1 -0
  107. package/src/code-editor/code-editor.ts +1 -1
  108. package/src/container/container.ts +1 -1
  109. package/src/empty-state/empty-state.scss +8 -0
  110. package/src/empty-state/empty-state.ts +2 -2
  111. package/src/focus-ring/focus-ring.ts +37 -19
  112. package/src/index.ts +7 -1
  113. package/src/menu/menu/menu.scss +24 -3
  114. package/src/menu/menu/menu.ts +23 -2
  115. package/src/menu/menu-item/menu-item.scss +1 -0
  116. package/src/menu/menu-item/menu-item.ts +1 -9
  117. package/src/peacock-loader.ts +28 -0
  118. package/src/ripple/ripple.ts +19 -3
  119. package/src/segmented-button/index.ts +2 -0
  120. package/src/segmented-button/segmented-button-group.scss +21 -0
  121. package/src/segmented-button/segmented-button-group.ts +110 -0
  122. package/src/segmented-button/segmented-button.scss +115 -0
  123. package/src/segmented-button/segmented-button.ts +175 -0
  124. package/src/select/index.ts +3 -0
  125. package/src/select/option.ts +109 -0
  126. package/src/select/select.scss +120 -0
  127. package/src/select/select.ts +486 -0
  128. package/src/side-sheet/index.ts +1 -0
  129. package/src/side-sheet/side-sheet.scss +79 -0
  130. package/src/side-sheet/side-sheet.ts +100 -0
  131. package/src/slider/slider.scss +0 -1
  132. package/src/tabs/demo/index.html +90 -0
  133. package/src/tabs/tab-group.ts +0 -3
  134. package/src/tabs/tab.scss +237 -25
  135. package/src/tabs/tab.ts +85 -11
  136. package/src/tabs/tabs.scss +37 -3
  137. package/src/tabs/tabs.ts +118 -2
  138. package/src/utils/dispatch-event-utils.ts +1 -0
  139. package/dist/IndividualComponent-Dt5xirYG.js +0 -73
  140. package/dist/IndividualComponent-Dt5xirYG.js.map +0 -1
  141. package/dist/button-ClzS8JLq.js.map +0 -1
  142. package/dist/button-group-BMS5WvaF.js +0 -292
  143. package/dist/button-group-BMS5WvaF.js.map +0 -1
  144. package/dist/chart-donut.js +0 -309
  145. package/dist/chart-donut.js.map +0 -1
  146. package/dist/class-map-59YGWLnx.js.map +0 -1
  147. package/dist/observe-theme-change-pALI5fmV.js.map +0 -1
  148. package/dist/radio-b70_Ie9n.js.map +0 -1
  149. package/dist/src/chart-donut/chart-donut.d.ts +0 -53
  150. package/dist/src/chart-donut/index.d.ts +0 -1
  151. package/dist/test/card.test.d.ts +0 -1
  152. package/src/chart-donut/chart-donut.scss +0 -37
  153. package/src/chart-donut/chart-donut.ts +0 -287
  154. package/src/chart-donut/demo/index.html +0 -51
  155. 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;AACG,MAAO,UAAW,SAAQ,UAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;AAGE,QAAA,cAAA,CAAA,GAAA,CAAA,IAAA,EAAM,MAAM,CAAC,UAAU,EAAE,CAAA;AAEzB,QAAA,oBAAA,CAAA,GAAA,CAAA,IAAA,EAAqB,CAAC,CAAA;QAMM,IAAA,CAAA,QAAQ,GAAiB,kBAAkB;IAyFzE;IAvFW,YAAY,GAAA;AACnB,QAAA,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CACzC,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,aAAa,CACnB;QACD,IAAI,CAAC,8BAA8B,EAAE;IACvC;IAES,MAAM,GAAA;AACb,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE9B,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AAC3B,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;YAC5C,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAOA,CAAI,CAAA,CAAA;kBACCC,CAAQ,CAAC,UAAU,CAAC;;AAEjB,mBAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAU;AAClB,eAAA,EAAA,IAAI,CAAC,QAAQ;AACX,iBAAA,EAAA,IAAI,CAAC,2BAA2B;AAC5B,qBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACP,4BAAA,EAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;AACvD,gBAAA,IAAI,CAAC;AACH,kBAAE,CAAA,gBAAA,EAAmB,sBAAA,CAAA,IAAI,sBAAI,CAAA;AAC7B,kBAAE,IAAI;AACQ,wBAAA,EAAA,CAAA,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAA,CAAE;AAC3C,oBAAA,EAAA,IAAI,CAAC,QAAQ;AACvB,UAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,QAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;QAC9B;AACA,QAAA,OAAOD,CAAI,CAAA,CAAA;gBACCC,CAAQ,CAAC,UAAU,CAAC;;AAEjB,iBAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAU;AAClB,aAAA,EAAA,IAAI,CAAC,IAAI;AACP,eAAA,EAAA,IAAI,CAAC,MAAM;AACX,eAAA,EAAA,IAAI,CAAC,2BAA2B;AAC5B,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,eAAA,EAAA,IAAI,CAAC,aAAa;;AAER,yBAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;AACvC,cAAE,CAAA,gBAAA,EAAmB,sBAAA,CAAA,IAAI,sBAAI,CAAA;AAC7B,cAAE,IAAI;wBACQ,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,CAAE;AAChC,QAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;UAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,MAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;IAC9B;IAEA,mBAAmB,GAAA;AACjB,QAAA,OAAOD,CAAI,CAAA;mDACoC,IAAI,CAAA;;;;;;;;;;AAUtC,eAAA,EAAA,IAAI,CAAC,IAAI;AACV,cAAA,EAAA,IAAI,CAAC,GAAG;AACH,mBAAA,EAAA,IAAI,CAAC,QAAQ;;;;QAI1B,IAAI,CAAC,sBAAsB,EAAE;KAChC;IACH;;;AAlGgB,UAAA,CAAA,MAAM,GAAG,CAACE,UAAM,EAAEC,UAAW,EAAEC,QAAU,CAAnC;AAMqB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAEd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAE5B,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA8C,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;ACzD1E;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQC,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;AAUL;;;AAGG;QACS,IAAA,CAAA,IAAI,GAAqC,IAAI;IAa3D;IAXE,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AACD,QAAA,OAAON,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;KAGlC;IACH;;AAzBA;AACA;AACA;AACO,WAAA,CAAA,MAAM,GAAG,CAACC,UAAM,CAAC;AAEjB,WAAA,CAAA,MAAM,GAAG,MAAH;AAEN,WAAA,CAAA,UAAU,GAAG,UAAH;AAML,UAAA,CAAA;AAAX,IAAAG,CAAQ;AAAiD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAd/C,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CA2BvB;;;;"}
@@ -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
@@ -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]}