@redvars/peacock 3.3.3 → 3.5.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/assets/styles.css +1 -1
- package/dist/assets/styles.css.map +1 -1
- package/dist/banner.js +202 -0
- package/dist/banner.js.map +1 -0
- package/dist/bottom-sheet.js +238 -0
- package/dist/bottom-sheet.js.map +1 -0
- package/dist/{button-ClzS8JLq.js → button-DMN1dPAg.js} +358 -218
- package/dist/button-DMN1dPAg.js.map +1 -0
- package/dist/button-group-CX9CUUXk.js +435 -0
- package/dist/button-group-CX9CUUXk.js.map +1 -0
- package/dist/button-group.js +11 -6
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +10 -5
- 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 +428 -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 +5 -4
- 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 +5 -4
- package/dist/chart-stacked-bar.js.map +1 -1
- package/dist/{class-map-59YGWLnx.js → class-map-YU7g0o3B.js} +4 -10
- package/dist/class-map-YU7g0o3B.js.map +1 -0
- package/dist/clock.js +2 -1
- package/dist/clock.js.map +1 -1
- package/dist/code-editor.js +8 -6
- package/dist/code-editor.js.map +1 -1
- package/dist/code-highlighter.js +6 -4
- package/dist/code-highlighter.js.map +1 -1
- package/dist/custom-elements-jsdocs.json +6270 -5026
- package/dist/custom-elements.json +5763 -2049
- package/dist/directive-ZPhl09Yt.js +9 -0
- package/dist/directive-ZPhl09Yt.js.map +1 -0
- package/dist/dispatch-event-utils-CuEqjlPT.js +127 -0
- package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -0
- package/dist/fab-C5Nzxk0E.js +497 -0
- package/dist/fab-C5Nzxk0E.js.map +1 -0
- package/dist/fab.js +11 -0
- package/dist/fab.js.map +1 -0
- package/dist/index.js +24 -12
- package/dist/index.js.map +1 -1
- package/dist/{observe-theme-change-pALI5fmV.js → is-dark-mode-DicqGkCJ.js} +8 -3
- package/dist/is-dark-mode-DicqGkCJ.js.map +1 -0
- package/dist/notification.js +417 -0
- package/dist/notification.js.map +1 -0
- package/dist/number-counter.js +4 -3
- package/dist/number-counter.js.map +1 -1
- package/dist/observe-slot-change-BGJfgg2E.js +31 -0
- package/dist/observe-slot-change-BGJfgg2E.js.map +1 -0
- package/dist/peacock-loader.js +59 -10
- 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/search.js +452 -0
- package/dist/search.js.map +1 -0
- package/dist/{radio-b70_Ie9n.js → select-4pl4XBj7.js} +2439 -521
- package/dist/select-4pl4XBj7.js.map +1 -0
- package/dist/side-sheet.js +186 -0
- package/dist/side-sheet.js.map +1 -0
- package/dist/spread-B5cgadZl.js +32 -0
- package/dist/spread-B5cgadZl.js.map +1 -0
- package/dist/src/__base_element/BaseHyperlink.d.ts +20 -0
- package/dist/src/__utils/cache-fetch.d.ts +1 -0
- package/dist/src/__utils/is-dark-mode.d.ts +1 -0
- package/dist/src/__utils/is-in-viewport.d.ts +1 -0
- package/dist/src/__utils/observe-slot-change.d.ts +1 -0
- package/dist/src/__utils/sanitize-svg.d.ts +1 -0
- package/dist/src/__utils/throttle.d.ts +4 -0
- package/dist/src/accordion/accordion-item.d.ts +33 -9
- package/dist/src/accordion/accordion.d.ts +21 -5
- package/dist/src/banner/banner.d.ts +47 -0
- package/dist/src/banner/index.d.ts +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 +7 -13
- 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/fab/fab.d.ts +111 -0
- package/dist/src/fab/index.d.ts +1 -0
- package/dist/src/focus-ring/focus-ring.d.ts +4 -1
- package/dist/src/index.d.ts +11 -1
- package/dist/src/link/link.d.ts +3 -10
- package/dist/src/menu/menu/menu.d.ts +4 -2
- package/dist/src/menu/menu-item/menu-item.d.ts +0 -1
- package/dist/src/menu/sub-menu/sub-menu.d.ts +1 -0
- package/dist/src/notification/index.d.ts +1 -0
- package/dist/src/notification/notification.d.ts +69 -0
- package/dist/src/pagination/pagination.d.ts +8 -1
- package/dist/src/ripple/ripple.d.ts +19 -3
- package/dist/src/search/index.d.ts +1 -0
- package/dist/src/search/search.d.ts +76 -0
- 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 +114 -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/slider/slider.d.ts +4 -0
- package/dist/src/snackbar/snackbar.d.ts +14 -1
- 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/src/toolbar/index.d.ts +1 -0
- package/dist/src/toolbar/toolbar.d.ts +86 -0
- package/dist/state-DwbEjqVk.js +10 -0
- package/dist/state-DwbEjqVk.js.map +1 -0
- package/dist/{style-map-DcB52w-l.js → style-map-DVmWOuYy.js} +3 -3
- package/dist/{style-map-DcB52w-l.js.map → style-map-DVmWOuYy.js.map} +1 -1
- package/dist/test/search.test.d.ts +1 -0
- package/dist/test/toolbar.test.d.ts +1 -0
- package/dist/throttle-C7ZAPqtu.js +24 -0
- package/dist/throttle-C7ZAPqtu.js.map +1 -0
- package/dist/toolbar.js +306 -0
- package/dist/toolbar.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{unsafe-html-C2r3PyzF.js → unsafe-html-BsGUjx94.js} +3 -3
- package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-BsGUjx94.js.map} +1 -1
- package/package.json +1 -1
- package/readme.md +2 -2
- package/scss/styles.scss +4 -0
- package/src/__base_element/BaseHyperlink.ts +42 -0
- package/src/__base_element/README.md +19 -0
- package/src/__utils/cache-fetch.ts +65 -0
- package/src/{utils → __utils}/dispatch-event-utils.ts +1 -0
- package/src/__utils/is-dark-mode.ts +3 -0
- package/src/__utils/is-in-viewport.ts +6 -0
- package/src/__utils/observe-slot-change.ts +38 -0
- package/src/__utils/sanitize-svg.ts +27 -0
- package/src/__utils/throttle.ts +27 -0
- package/src/accordion/accordion-item.scss +136 -65
- package/src/accordion/accordion-item.ts +117 -44
- package/src/accordion/accordion.scss +24 -5
- package/src/accordion/accordion.ts +29 -23
- package/src/accordion/demo/index.html +74 -35
- package/src/banner/banner.scss +87 -0
- package/src/banner/banner.ts +107 -0
- package/src/banner/index.ts +1 -0
- 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 +26 -30
- package/src/button/button/button-colors.scss +90 -19
- package/src/button/button/button-sizes.scss +39 -19
- package/src/button/button/button.scss +117 -116
- package/src/button/button/button.ts +29 -6
- package/src/button/button-group/button-group.scss +25 -22
- package/src/button/button-group/button-group.ts +122 -5
- package/src/button/icon-button/icon-button-sizes.scss +35 -15
- package/src/button/icon-button/icon-button.ts +25 -12
- 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 +251 -8
- package/src/card/index.ts +1 -0
- package/src/chart-bar/chart-bar.ts +1 -1
- package/src/chart-bar/chart-stacked-bar.ts +3 -1
- package/src/chart-doughnut/chart-doughnut.ts +1 -1
- package/src/chart-pie/chart-pie.ts +1 -1
- package/src/checkbox/checkbox.ts +1 -1
- package/src/clock/clock.ts +1 -1
- package/src/code-editor/code-editor.ts +5 -5
- package/src/code-highlighter/code-highlighter.ts +2 -2
- package/src/container/container.ts +1 -1
- package/src/date-picker/date-picker.ts +5 -2
- package/src/divider/divider.ts +3 -1
- package/src/empty-state/empty-state.scss +9 -3
- package/src/empty-state/empty-state.ts +2 -2
- package/src/fab/fab-colors.scss +49 -0
- package/src/fab/fab-sizes.scss +47 -0
- package/src/fab/fab.scss +137 -0
- package/src/fab/fab.ts +285 -0
- package/src/fab/index.ts +1 -0
- package/src/field/field.ts +3 -1
- package/src/focus-ring/focus-ring.ts +37 -19
- package/src/icon/datasource.ts +1 -1
- package/src/icon/icon.ts +3 -1
- package/src/image/image.ts +3 -2
- package/src/index.ts +12 -1
- package/src/input/input.ts +5 -2
- package/src/link/link.ts +2 -15
- package/src/menu/menu/menu.scss +31 -3
- package/src/menu/menu/menu.ts +30 -6
- package/src/menu/menu-item/menu-item.scss +1 -0
- package/src/menu/menu-item/menu-item.ts +1 -9
- package/src/menu/sub-menu/sub-menu.ts +1 -0
- package/src/notification/index.ts +1 -0
- package/src/notification/notification.scss +201 -0
- package/src/notification/notification.ts +206 -0
- package/src/number-counter/number-counter.ts +3 -1
- package/src/number-field/number-field.ts +4 -2
- package/src/pagination/pagination.scss +33 -24
- package/src/pagination/pagination.ts +113 -60
- package/src/peacock-loader.ts +48 -0
- package/src/radio/radio.ts +3 -1
- package/src/ripple/ripple.ts +19 -3
- package/src/search/index.ts +1 -0
- package/src/search/search-colors.scss +14 -0
- package/src/search/search.scss +204 -0
- package/src/search/search.ts +240 -0
- 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 +125 -0
- package/src/select/select.ts +520 -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 +19 -1
- package/src/slider/slider.ts +30 -19
- package/src/snackbar/snackbar.scss +62 -31
- package/src/snackbar/snackbar.ts +92 -12
- package/src/switch/switch.ts +3 -1
- package/src/table/table.ts +3 -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 +91 -14
- package/src/tabs/tabs.scss +37 -3
- package/src/tabs/tabs.ts +118 -2
- package/src/textarea/textarea.ts +4 -2
- package/src/time-picker/time-picker.ts +4 -2
- package/src/toolbar/index.ts +1 -0
- package/src/toolbar/toolbar-colors.scss +16 -0
- package/src/toolbar/toolbar.scss +165 -0
- package/src/toolbar/toolbar.ts +137 -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/directive-Cuw6h7YA.js +0 -9
- package/dist/directive-Cuw6h7YA.js.map +0 -1
- package/dist/dispatch-event-utils-B4odODQf.js +0 -277
- package/dist/dispatch-event-utils-B4odODQf.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/src/styleMixins.css.d.ts +0 -9
- package/dist/src/utils.d.ts +0 -9
- 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
- package/src/styleMixins.css.ts +0 -55
- package/src/utils.ts +0 -193
- /package/dist/src/{spread.d.ts → __directive/spread.d.ts} +0 -0
- /package/dist/src/{utils → __utils}/copy-to-clipboard.d.ts +0 -0
- /package/dist/src/{utils → __utils}/dispatch-event-utils.d.ts +0 -0
- /package/dist/src/{utils → __utils}/observe-theme-change.d.ts +0 -0
- /package/dist/test/{card.test.d.ts → banner.test.d.ts} +0 -0
- /package/src/{spread.ts → __directive/spread.ts} +0 -0
- /package/src/{utils → __utils}/copy-to-clipboard.ts +0 -0
- /package/src/{utils → __utils}/observe-theme-change.ts +0 -0
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]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2017 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/
|
|
6
|
-
const t={ATTRIBUTE:1,CHILD:2,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
7
|
-
|
|
8
|
-
export { e, i, t };
|
|
9
|
-
//# sourceMappingURL=directive-Cuw6h7YA.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"directive-Cuw6h7YA.js","sources":["../node_modules/lit-html/directive.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACK,MAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAwC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
|
|
@@ -1,277 +0,0 @@
|
|
|
1
|
-
async function createCacheFetch(name) {
|
|
2
|
-
let cache = null;
|
|
3
|
-
// This map tracks requests currently being processed
|
|
4
|
-
const inFlightRequests = new Map();
|
|
5
|
-
try {
|
|
6
|
-
cache = await window.caches.open(name);
|
|
7
|
-
}
|
|
8
|
-
catch (e) {
|
|
9
|
-
console.warn('window.caches access not allowed');
|
|
10
|
-
}
|
|
11
|
-
return async (url) => {
|
|
12
|
-
// 1. Check if we are already fetching this URL
|
|
13
|
-
if (inFlightRequests.has(url)) {
|
|
14
|
-
// Return the existing promise instead of starting a new one
|
|
15
|
-
return inFlightRequests.get(url);
|
|
16
|
-
}
|
|
17
|
-
// 2. Create the main logic as a promise
|
|
18
|
-
const fetchPromise = (async () => {
|
|
19
|
-
const request = new Request(url);
|
|
20
|
-
// Check Cache first
|
|
21
|
-
if (cache) {
|
|
22
|
-
const cachedResponse = await cache.match(request);
|
|
23
|
-
if (cachedResponse) {
|
|
24
|
-
return cachedResponse.text();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
// Prepare network request
|
|
28
|
-
const urlObj = new URL(request.url);
|
|
29
|
-
const isSameOrigin = urlObj.origin === window.location.origin;
|
|
30
|
-
const response = await fetch(request.url, {
|
|
31
|
-
method: 'GET',
|
|
32
|
-
mode: isSameOrigin ? 'no-cors' : 'cors',
|
|
33
|
-
credentials: isSameOrigin ? 'same-origin' : 'omit',
|
|
34
|
-
});
|
|
35
|
-
// --- Handle 404 ---
|
|
36
|
-
if (response.status === 404) {
|
|
37
|
-
console.error(`[Fetch Error] Resource not found (404): ${url}`);
|
|
38
|
-
return ''; // Return empty string as requested
|
|
39
|
-
}
|
|
40
|
-
const result = await response.text();
|
|
41
|
-
// Update Cache if applicable
|
|
42
|
-
if (cache && response.status === 200) {
|
|
43
|
-
// We clone the response logic by creating a new Response with the text body
|
|
44
|
-
await cache.put(request, new Response(result, {
|
|
45
|
-
status: response.status,
|
|
46
|
-
statusText: response.statusText,
|
|
47
|
-
headers: response.headers,
|
|
48
|
-
}));
|
|
49
|
-
}
|
|
50
|
-
return result;
|
|
51
|
-
})();
|
|
52
|
-
// 3. Store the promise in the map
|
|
53
|
-
inFlightRequests.set(url, fetchPromise);
|
|
54
|
-
try {
|
|
55
|
-
// 4. Wait for the result
|
|
56
|
-
return await fetchPromise;
|
|
57
|
-
}
|
|
58
|
-
finally {
|
|
59
|
-
// 5. Clean up: Remove the promise from the map when done
|
|
60
|
-
// This ensures subsequent calls (after this one finishes) can start fresh
|
|
61
|
-
inFlightRequests.delete(url);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
|
|
66
|
-
function sanitizeSvg(rawSvg) {
|
|
67
|
-
try {
|
|
68
|
-
const parser = new DOMParser();
|
|
69
|
-
const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
|
|
70
|
-
// remove script tags
|
|
71
|
-
const scripts = Array.from(doc.querySelectorAll('script'));
|
|
72
|
-
scripts.forEach(n => n.remove());
|
|
73
|
-
// remove foreignObject and iframe-like elements
|
|
74
|
-
const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
|
|
75
|
-
foreigns.forEach(n => n.remove());
|
|
76
|
-
// remove event handler attributes like onload, onclick, etc.
|
|
77
|
-
const all = Array.from(doc.querySelectorAll('*'));
|
|
78
|
-
all.forEach(el => {
|
|
79
|
-
const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
|
|
80
|
-
attrs.forEach(a => el.removeAttribute(a.name));
|
|
81
|
-
});
|
|
82
|
-
const el = doc.documentElement;
|
|
83
|
-
if (!el)
|
|
84
|
-
return '';
|
|
85
|
-
// serialize back to string
|
|
86
|
-
const serializer = new XMLSerializer();
|
|
87
|
-
return serializer.serializeToString(el);
|
|
88
|
-
}
|
|
89
|
-
catch (e) {
|
|
90
|
-
// parsing failed; fall back to empty content to avoid injecting unsafe content
|
|
91
|
-
return '';
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
function __hasMeaningfulContent(slotElement) {
|
|
95
|
-
const nodes = slotElement.assignedNodes({ flatten: true });
|
|
96
|
-
for (const node of nodes) {
|
|
97
|
-
// If it's an element node, it has content
|
|
98
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
99
|
-
return true;
|
|
100
|
-
}
|
|
101
|
-
// If it's a text node and contains non-whitespace characters, it has content
|
|
102
|
-
if (node.nodeType === Node.TEXT_NODE &&
|
|
103
|
-
node.textContent.trim().length > 0) {
|
|
104
|
-
return true;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
// No meaningful content found
|
|
108
|
-
return false;
|
|
109
|
-
}
|
|
110
|
-
function observerSlotChangesWithCallback(slot, callback) {
|
|
111
|
-
const observer = new MutationObserver(() => {
|
|
112
|
-
callback(__hasMeaningfulContent(slot));
|
|
113
|
-
});
|
|
114
|
-
// Observe the elements currently assigned to the slot
|
|
115
|
-
const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
116
|
-
assignedNodes.forEach(node => {
|
|
117
|
-
observer.observe(node, {
|
|
118
|
-
attributes: true,
|
|
119
|
-
childList: true,
|
|
120
|
-
characterData: true,
|
|
121
|
-
subtree: true,
|
|
122
|
-
});
|
|
123
|
-
});
|
|
124
|
-
callback(__hasMeaningfulContent(slot));
|
|
125
|
-
}
|
|
126
|
-
function throttle(func, delay, options = { leading: true, trailing: true }) {
|
|
127
|
-
let timerId;
|
|
128
|
-
let lastExec = 0;
|
|
129
|
-
return function (...args) {
|
|
130
|
-
// @ts-ignore
|
|
131
|
-
const context = this;
|
|
132
|
-
const now = Date.now();
|
|
133
|
-
const shouldCallNow = options.leading && now - lastExec >= delay;
|
|
134
|
-
if (shouldCallNow) {
|
|
135
|
-
func.apply(context, args);
|
|
136
|
-
lastExec = now;
|
|
137
|
-
}
|
|
138
|
-
else if (options.trailing && !timerId) {
|
|
139
|
-
timerId = setTimeout(() => {
|
|
140
|
-
func.apply(context, args);
|
|
141
|
-
lastExec = Date.now();
|
|
142
|
-
timerId = null;
|
|
143
|
-
}, delay);
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
function isDarkMode() {
|
|
148
|
-
return document.documentElement.dataset.theme === 'dark';
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Dispatches a click event to the given element that triggers a native action,
|
|
153
|
-
* but is not composed and therefore is not seen outside the element.
|
|
154
|
-
*
|
|
155
|
-
* This is useful for responding to an external click event on the host element
|
|
156
|
-
* that should trigger an internal action like a button click.
|
|
157
|
-
*
|
|
158
|
-
* Note, a helper is provided because setting this up correctly is a bit tricky.
|
|
159
|
-
* In particular, calling `click` on an element creates a composed event, which
|
|
160
|
-
* is not desirable, and a manually dispatched event must specifically be a
|
|
161
|
-
* `MouseEvent` to trigger a native action.
|
|
162
|
-
*
|
|
163
|
-
* @example
|
|
164
|
-
* hostClickListener = (event: MouseEvent) {
|
|
165
|
-
* if (isActivationClick(event)) {
|
|
166
|
-
* this.dispatchActivationClick(this.buttonElement);
|
|
167
|
-
* }
|
|
168
|
-
* }
|
|
169
|
-
*
|
|
170
|
-
*/
|
|
171
|
-
function dispatchActivationClick(element) {
|
|
172
|
-
const event = new MouseEvent('click', { bubbles: true });
|
|
173
|
-
element.dispatchEvent(event);
|
|
174
|
-
return event;
|
|
175
|
-
}
|
|
176
|
-
// Ignore events for one microtask only.
|
|
177
|
-
let isSquelchingEvents = false;
|
|
178
|
-
async function __squelchEventsForMicrotask() {
|
|
179
|
-
isSquelchingEvents = true;
|
|
180
|
-
// Need to pause for just one microtask.
|
|
181
|
-
// tslint:disable-next-line
|
|
182
|
-
await null;
|
|
183
|
-
isSquelchingEvents = false;
|
|
184
|
-
}
|
|
185
|
-
// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
|
|
186
|
-
// Remove when Firefox bug is addressed.
|
|
187
|
-
function __squelchEvent(event) {
|
|
188
|
-
const squelched = isSquelchingEvents;
|
|
189
|
-
if (squelched) {
|
|
190
|
-
event.preventDefault();
|
|
191
|
-
event.stopImmediatePropagation();
|
|
192
|
-
}
|
|
193
|
-
__squelchEventsForMicrotask();
|
|
194
|
-
return squelched;
|
|
195
|
-
}
|
|
196
|
-
/**
|
|
197
|
-
* Returns true if the click event should trigger an activation behavior. The
|
|
198
|
-
* behavior is defined by the element and is whatever it should do when
|
|
199
|
-
* clicked.
|
|
200
|
-
*
|
|
201
|
-
* Typically when an element needs to handle a click, the click is generated
|
|
202
|
-
* from within the element and an event listener within the element implements
|
|
203
|
-
* the needed behavior; however, it's possible to fire a click directly
|
|
204
|
-
* at the element that the element should handle. This method helps
|
|
205
|
-
* distinguish these "external" clicks.
|
|
206
|
-
*
|
|
207
|
-
* An "external" click can be triggered in a number of ways: via a click
|
|
208
|
-
* on an associated label for a form associated element, calling
|
|
209
|
-
* `element.click()`, or calling
|
|
210
|
-
* `element.dispatchEvent(new MouseEvent('click', ...))`.
|
|
211
|
-
*
|
|
212
|
-
* Also works around Firefox issue
|
|
213
|
-
* https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
|
|
214
|
-
* events for a microtask after called.
|
|
215
|
-
*
|
|
216
|
-
* @example
|
|
217
|
-
* hostClickListener = (event: MouseEvent) {
|
|
218
|
-
* if (isActivationClick(event)) {
|
|
219
|
-
* this.dispatchActivationClick(this.buttonElement);
|
|
220
|
-
* }
|
|
221
|
-
* }
|
|
222
|
-
*
|
|
223
|
-
*/
|
|
224
|
-
function isActivationClick(event) {
|
|
225
|
-
// Event must start at the event target.
|
|
226
|
-
if (event.currentTarget !== event.target) {
|
|
227
|
-
return false;
|
|
228
|
-
}
|
|
229
|
-
// Event must not be retargeted from shadowRoot.
|
|
230
|
-
if (event.composedPath()[0] !== event.target) {
|
|
231
|
-
return false;
|
|
232
|
-
}
|
|
233
|
-
// Target must not be disabled; this should only occur for a synthetically
|
|
234
|
-
// dispatched click.
|
|
235
|
-
if (event.target.disabled) {
|
|
236
|
-
return false;
|
|
237
|
-
}
|
|
238
|
-
// This is an activation if the event should not be squelched.
|
|
239
|
-
return !__squelchEvent(event);
|
|
240
|
-
}
|
|
241
|
-
/**
|
|
242
|
-
* Re-dispatches an event from the provided element.
|
|
243
|
-
*
|
|
244
|
-
* This function is useful for forwarding non-composed events, such as `change`
|
|
245
|
-
* events.
|
|
246
|
-
*
|
|
247
|
-
* @example
|
|
248
|
-
* class MyInput extends LitElement {
|
|
249
|
-
* render() {
|
|
250
|
-
* return html`<input @change=${this.redispatchEvent}>`;
|
|
251
|
-
* }
|
|
252
|
-
*
|
|
253
|
-
* protected redispatchEvent(event: Event) {
|
|
254
|
-
* redispatchEvent(this, event);
|
|
255
|
-
* }
|
|
256
|
-
* }
|
|
257
|
-
*
|
|
258
|
-
* @param element The element to dispatch the event from.
|
|
259
|
-
* @param event The event to re-dispatch.
|
|
260
|
-
* @return Whether or not the event was dispatched (if cancelable).
|
|
261
|
-
*/
|
|
262
|
-
function redispatchEvent(element, event) {
|
|
263
|
-
// For bubbling events in SSR light DOM (or composed), stop their propagation
|
|
264
|
-
// and dispatch the copy.
|
|
265
|
-
if (event.bubbles && (!element.shadowRoot || event.composed)) {
|
|
266
|
-
event.stopPropagation();
|
|
267
|
-
}
|
|
268
|
-
const copy = Reflect.construct(event.constructor, [event.type, event]);
|
|
269
|
-
const dispatched = element.dispatchEvent(copy);
|
|
270
|
-
if (!dispatched) {
|
|
271
|
-
event.preventDefault();
|
|
272
|
-
}
|
|
273
|
-
return dispatched;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
export { isDarkMode as a, createCacheFetch as c, dispatchActivationClick as d, isActivationClick as i, observerSlotChangesWithCallback as o, redispatchEvent as r, sanitizeSvg as s, throttle as t };
|
|
277
|
-
//# sourceMappingURL=dispatch-event-utils-B4odODQf.js.map
|