@redvars/peacock 3.2.10 → 3.3.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 (197) hide show
  1. package/dist/{PeacockComponent-CxJc63xj.js → IndividualComponent-tDnXrOLV.js} +3 -3
  2. package/dist/IndividualComponent-tDnXrOLV.js.map +1 -0
  3. package/dist/{button-DaL4va7Q.js → button-BGFJfbT2.js} +22 -35
  4. package/dist/button-BGFJfbT2.js.map +1 -0
  5. package/dist/button-group.js +8 -8
  6. package/dist/button-group.js.map +1 -1
  7. package/dist/button.js +6 -5
  8. package/dist/button.js.map +1 -1
  9. package/dist/chart-donut.js +307 -0
  10. package/dist/chart-donut.js.map +1 -0
  11. package/dist/chart-doughnut.js +307 -0
  12. package/dist/chart-doughnut.js.map +1 -0
  13. package/dist/chart-pie.js +259 -0
  14. package/dist/chart-pie.js.map +1 -0
  15. package/dist/{class-map-BvQRv7eW.js → class-map-DpeNtqCn.js} +2 -2
  16. package/dist/{class-map-BvQRv7eW.js.map → class-map-DpeNtqCn.js.map} +1 -1
  17. package/dist/clock.js +5 -6
  18. package/dist/clock.js.map +1 -1
  19. package/dist/code-editor.js +37 -24
  20. package/dist/code-editor.js.map +1 -1
  21. package/dist/code-highlighter.js +21 -7
  22. package/dist/code-highlighter.js.map +1 -1
  23. package/dist/custom-elements-jsdocs.json +5377 -3122
  24. package/dist/custom-elements.json +5527 -3940
  25. package/dist/{dispatch-event-utils-vbdiOSeC.js → dispatch-event-utils-B4odODQf.js} +2 -15
  26. package/dist/dispatch-event-utils-B4odODQf.js.map +1 -0
  27. package/dist/index.js +13 -9
  28. package/dist/index.js.map +1 -1
  29. package/dist/number-counter.js +12 -10
  30. package/dist/number-counter.js.map +1 -1
  31. package/dist/{observe-theme-change-NneLARW8.js → observe-theme-change-BISF-Gl5.js} +2 -2
  32. package/dist/{observe-theme-change-NneLARW8.js.map → observe-theme-change-BISF-Gl5.js.map} +1 -1
  33. package/dist/peacock-loader.js +124 -62
  34. package/dist/peacock-loader.js.map +1 -1
  35. package/dist/query-QBcUV-L_.js +15 -0
  36. package/dist/query-QBcUV-L_.js.map +1 -0
  37. package/dist/{image-v3BujlY5.js → slider-Dk9CFWTG.js} +1606 -327
  38. package/dist/slider-Dk9CFWTG.js.map +1 -0
  39. package/dist/src/IndividualComponent.d.ts +1 -0
  40. package/dist/src/accordion/{accordion-item/accordion-item.d.ts → accordion-item.d.ts} +4 -4
  41. package/dist/src/accordion/{accordion/accordion.d.ts → accordion.d.ts} +6 -6
  42. package/dist/src/accordion/{accordion-item/index.d.ts → index.d.ts} +1 -0
  43. package/dist/src/avatar/avatar.d.ts +2 -2
  44. package/dist/src/badge/badge.d.ts +2 -2
  45. package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts +7 -8
  46. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +3 -3
  47. package/dist/src/button/button/button.d.ts +2 -2
  48. package/dist/src/button/button-group/button-group.d.ts +5 -5
  49. package/dist/src/button/icon-button/icon-button.d.ts +2 -2
  50. package/dist/src/chart-donut/chart-donut.d.ts +53 -0
  51. package/dist/src/chart-donut/index.d.ts +1 -0
  52. package/dist/src/chart-doughnut/chart-doughnut.d.ts +53 -0
  53. package/dist/src/chart-doughnut/index.d.ts +1 -0
  54. package/dist/src/chart-pie/chart-pie.d.ts +50 -0
  55. package/dist/src/chart-pie/index.d.ts +1 -0
  56. package/dist/src/checkbox/checkbox.d.ts +3 -6
  57. package/dist/src/chip/chip/chip.d.ts +4 -4
  58. package/dist/src/chip/tag/tag.d.ts +3 -3
  59. package/dist/src/clock/clock.d.ts +3 -4
  60. package/dist/src/code-editor/code-editor.d.ts +11 -9
  61. package/dist/src/container/container.d.ts +6 -11
  62. package/dist/src/date-picker/date-picker.d.ts +3 -3
  63. package/dist/src/divider/divider.d.ts +2 -2
  64. package/dist/src/elevation/elevation.d.ts +2 -2
  65. package/dist/src/empty-state/empty-state.d.ts +9 -2
  66. package/dist/src/field/field.d.ts +17 -0
  67. package/dist/src/focus-ring/focus-ring.d.ts +1 -1
  68. package/dist/src/icon/icon.d.ts +2 -2
  69. package/dist/src/image/image.d.ts +4 -12
  70. package/dist/src/index.d.ts +5 -1
  71. package/dist/src/input/input.d.ts +2 -2
  72. package/dist/src/link/link.d.ts +4 -5
  73. package/dist/src/menu/menu/menu.d.ts +16 -0
  74. package/dist/src/menu/menu-item/menu-item.d.ts +12 -0
  75. package/dist/src/menu/menu-list/menu-list.d.ts +15 -0
  76. package/dist/src/number-counter/number-counter.d.ts +9 -7
  77. package/dist/src/number-field/number-field.d.ts +1 -1
  78. package/dist/src/popover/index.d.ts +1 -1
  79. package/dist/src/progress/circular-progress/circular-progress.d.ts +3 -3
  80. package/dist/src/progress/linear-progress/linear-progress.d.ts +3 -3
  81. package/dist/src/ripple/ripple.d.ts +60 -4
  82. package/dist/src/skeleton/skeleton.d.ts +6 -5
  83. package/dist/src/slider/index.d.ts +1 -0
  84. package/dist/src/slider/slider.d.ts +52 -0
  85. package/dist/src/spinner/spinner.d.ts +2 -2
  86. package/dist/src/switch/switch.d.ts +2 -2
  87. package/dist/src/tabs/index.d.ts +4 -0
  88. package/dist/src/tabs/tab-group.d.ts +41 -0
  89. package/dist/src/tabs/tab-panel.d.ts +21 -0
  90. package/dist/src/tabs/tab.d.ts +58 -0
  91. package/dist/src/tabs/tabs.d.ts +27 -0
  92. package/dist/src/textarea/textarea.d.ts +3 -3
  93. package/dist/src/time-picker/time-picker.d.ts +3 -3
  94. package/dist/src/{popover/tooltip → tooltip}/tooltip.d.ts +6 -3
  95. package/dist/{state-B09bP3XH.js → state-8v48Exzh.js} +2 -2
  96. package/dist/{state-B09bP3XH.js.map → state-8v48Exzh.js.map} +1 -1
  97. package/dist/{style-map-B8xgVEc9.js → style-map-CfNHEkQp.js} +2 -2
  98. package/dist/{style-map-B8xgVEc9.js.map → style-map-CfNHEkQp.js.map} +1 -1
  99. package/dist/transform-DRuHEvar.js +3312 -0
  100. package/dist/transform-DRuHEvar.js.map +1 -0
  101. package/dist/tsconfig.tsbuildinfo +1 -1
  102. package/dist/{unsafe-html-B-dV3Jps.js → unsafe-html-CV6Je6HL.js} +2 -2
  103. package/dist/{unsafe-html-B-dV3Jps.js.map → unsafe-html-CV6Je6HL.js.map} +1 -1
  104. package/package.json +3 -1
  105. package/readme.md +2 -2
  106. package/src/{PeacockComponent.ts → IndividualComponent.ts} +1 -1
  107. package/src/accordion/{accordion-item/accordion-item.scss → accordion-item.scss} +1 -1
  108. package/src/accordion/{accordion-item/accordion-item.ts → accordion-item.ts} +5 -5
  109. package/src/accordion/{accordion/accordion.scss → accordion.scss} +2 -1
  110. package/src/accordion/{accordion/accordion.ts → accordion.ts} +6 -6
  111. package/src/accordion/{accordion-item/index.ts → index.ts} +2 -0
  112. package/src/avatar/avatar.ts +2 -2
  113. package/src/badge/badge.ts +2 -2
  114. package/src/breadcrumb/breadcrumb/breadcrumb.ts +7 -8
  115. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +3 -3
  116. package/src/button/BaseButton.ts +1 -1
  117. package/src/button/button/button.scss +9 -23
  118. package/src/button/button/button.ts +8 -8
  119. package/src/button/button-group/button-group.ts +7 -7
  120. package/src/button/icon-button/icon-button.ts +8 -8
  121. package/src/chart-donut/chart-donut.scss +37 -0
  122. package/src/chart-donut/chart-donut.ts +287 -0
  123. package/src/chart-donut/demo/index.html +51 -0
  124. package/src/chart-donut/index.ts +1 -0
  125. package/src/chart-doughnut/chart-donut.scss +37 -0
  126. package/src/chart-doughnut/chart-doughnut.ts +287 -0
  127. package/src/chart-doughnut/demo/index.html +51 -0
  128. package/src/chart-doughnut/index.ts +1 -0
  129. package/src/chart-pie/chart-pie.scss +27 -0
  130. package/src/chart-pie/chart-pie.ts +256 -0
  131. package/src/chart-pie/demo/index.html +51 -0
  132. package/src/chart-pie/index.ts +1 -0
  133. package/src/checkbox/checkbox.ts +3 -6
  134. package/src/chip/chip/chip.ts +6 -6
  135. package/src/chip/tag/tag.ts +6 -6
  136. package/src/clock/clock.ts +5 -6
  137. package/src/code-editor/code-editor.scss +3 -5
  138. package/src/code-editor/code-editor.ts +30 -15
  139. package/src/code-highlighter/code-highlighter.ts +19 -4
  140. package/src/container/container.ts +6 -11
  141. package/src/date-picker/date-picker.ts +7 -7
  142. package/src/divider/divider.ts +2 -2
  143. package/src/elevation/elevation.ts +2 -2
  144. package/src/empty-state/empty-state.ts +10 -3
  145. package/src/field/field.scss +4 -4
  146. package/src/field/field.ts +19 -2
  147. package/src/focus-ring/focus-ring.scss +2 -1
  148. package/src/focus-ring/focus-ring.ts +1 -1
  149. package/src/icon/icon.ts +2 -2
  150. package/src/icon/p-icon.ts +1 -1
  151. package/src/image/image.ts +4 -12
  152. package/src/index.ts +6 -2
  153. package/src/input/input.ts +6 -6
  154. package/src/link/link.ts +4 -5
  155. package/src/menu/menu/menu.ts +16 -0
  156. package/src/menu/menu-item/menu-item-colors.scss +2 -2
  157. package/src/menu/menu-item/menu-item.ts +14 -2
  158. package/src/menu/menu-list/menu-list.ts +16 -1
  159. package/src/number-counter/demo/index.html +1 -1
  160. package/src/number-counter/number-counter.ts +11 -9
  161. package/src/number-field/number-field.ts +7 -7
  162. package/src/peacock-loader.ts +71 -44
  163. package/src/popover/index.ts +1 -1
  164. package/src/progress/circular-progress/circular-progress.scss +1 -1
  165. package/src/progress/circular-progress/circular-progress.ts +3 -3
  166. package/src/progress/linear-progress/linear-progress.ts +3 -3
  167. package/src/ripple/ripple.ts +478 -94
  168. package/src/skeleton/skeleton.ts +6 -5
  169. package/src/slider/index.ts +1 -0
  170. package/src/slider/slider.scss +130 -0
  171. package/src/slider/slider.ts +178 -0
  172. package/src/spinner/spinner.ts +2 -2
  173. package/src/switch/switch.ts +4 -4
  174. package/src/tabs/index.ts +4 -0
  175. package/src/tabs/tab-group.scss +10 -0
  176. package/src/tabs/tab-group.ts +137 -0
  177. package/src/tabs/tab-panel.scss +12 -0
  178. package/src/tabs/tab-panel.ts +28 -0
  179. package/src/tabs/tab.scss +157 -0
  180. package/src/tabs/tab.ts +242 -0
  181. package/src/tabs/tabs.scss +18 -0
  182. package/src/tabs/tabs.ts +64 -0
  183. package/src/textarea/textarea.ts +5 -5
  184. package/src/time-picker/time-picker.ts +7 -7
  185. package/src/{popover/tooltip → tooltip}/tooltip.scss +1 -1
  186. package/src/{popover/tooltip → tooltip}/tooltip.ts +10 -6
  187. package/dist/PeacockComponent-CxJc63xj.js.map +0 -1
  188. package/dist/button-DaL4va7Q.js.map +0 -1
  189. package/dist/dispatch-event-utils-vbdiOSeC.js.map +0 -1
  190. package/dist/image-v3BujlY5.js.map +0 -1
  191. package/dist/src/PeacockComponent.d.ts +0 -1
  192. package/dist/src/accordion/accordion/index.d.ts +0 -1
  193. package/dist/src/avatar/p-avatar.d.ts +0 -3
  194. package/dist/src/badge/p-badge.d.ts +0 -3
  195. package/src/accordion/accordion/index.ts +0 -1
  196. package/src/avatar/p-avatar.ts +0 -5
  197. package/src/badge/p-badge.ts +0 -5
package/src/chart-doughnut/demo/index.html ADDED
@@ -0,0 +1,51 @@
1
+ <!doctype html>
2
+ <html lang='en-GB'>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
+ <link rel='stylesheet' href='/dist/assets/styles.css' />
7
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
8
+
9
+ <style>
10
+ body {
11
+ background: #fafafa;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+
17
+ <wc-button id="randomize">Randomize</wc-button>
18
+ <br />
19
+
20
+ <wc-chart-doughnut width="400" margin="20"></wc-chart-doughnut>
21
+
22
+ <script>
23
+ const chart = document.querySelector('wc-chart-doughnut');
24
+ chart.label = "Browsers";
25
+ chart.data = [
26
+ { label: 'Firefox', value: 10, color: '--color-red', hoverColor: '--color-red-40' },
27
+ { label: 'Chrome', value: 20, color: '--color-green', hoverColor: '--color-green-50' },
28
+ { label: 'Microsoft Edge', value: 30 },
29
+ { label: 'Internet Explorer', value: 40 },
30
+ { label: 'MC Browser', value: 50 },
31
+ ];
32
+
33
+ function randomNumber(min, max) {
34
+ return parseInt(Math.random() * (max - min) + min);
35
+ }
36
+
37
+ let count = 1;
38
+ document.querySelector('#randomize').addEventListener('click', () => {
39
+ chart.data = chart.data.map(d => ({ ...d, value: parseInt(Math.random() * 100) }));
40
+ chart.width = randomNumber(400, 600);
41
+ });
42
+ </script>
43
+
44
+
45
+ <script type='module'>
46
+ import { Button, ChartDonut } from '/dist/index.js';
47
+ window.customElements.define('wc-chart-doughnut', ChartDonut);
48
+ window.customElements.define('wc-button', Button);
49
+ </script>
50
+ </body>
51
+ </html>
package/src/chart-doughnut/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { ChartDoughnut } from './chart-doughnut.js';
package/src/chart-pie/chart-pie.scss ADDED
@@ -0,0 +1,27 @@
1
+ @use '../../scss/mixin';
2
+
3
+ @include mixin.base-styles;
4
+
5
+ :host {
6
+ display: inline-block;
7
+ }
8
+
9
+ .arc {
10
+ cursor: pointer;
11
+ transition: filter 150ms ease;
12
+
13
+ &:hover {
14
+ filter: brightness(1.2);
15
+ }
16
+ }
17
+
18
+ .item-polyline {
19
+ fill: none;
20
+ stroke-width: 1;
21
+ stroke: var(--color-on-surface);
22
+ }
23
+
24
+ .item-label {
25
+ fill: var(--color-on-surface);
26
+ @include mixin.get-typography('label-medium');
27
+ }
package/src/chart-pie/chart-pie.ts ADDED
@@ -0,0 +1,256 @@
1
+ import { html, LitElement, PropertyValues } from 'lit';
2
+ import { property, query } from 'lit/decorators.js';
3
+ import IndividualComponent from 'src/IndividualComponent.js';
4
+ import * as d3 from 'd3';
5
+ import styles from './chart-pie.scss';
6
+
7
+ export type ChartPieColor = {
8
+ color: string;
9
+ };
10
+
11
+ export type ChartPieItem = {
12
+ name: string;
13
+ value: number;
14
+ label?: string;
15
+ color?: string;
16
+ };
17
+
18
+ const chartColors: ChartPieColor[] = [];
19
+ ['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
20
+ chartColors.push({
21
+ color: `var(--color-${colorName})`,
22
+ });
23
+ });
24
+
25
+ /** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */
26
+ interface ArcPathElement extends SVGPathElement {
27
+ _prevDatum?: d3.PieArcDatum<ChartPieItem>;
28
+ }
29
+
30
+ function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
31
+ let timer: ReturnType<typeof setTimeout>;
32
+ return ((...args: any[]) => {
33
+ clearTimeout(timer);
34
+ timer = setTimeout(() => fn(...args), wait);
35
+ }) as T;
36
+ }
37
+
38
+ /**
39
+ * @label Chart Pie
40
+ * @tag wc-chart-pie
41
+ * @rawTag chart-pie
42
+ * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.
43
+ * @tags charts
44
+ *
45
+ * @example
46
+ * ```html
47
+ * <wc-chart-pie width="400"></wc-chart-pie>
48
+ * <script>
49
+ * document.querySelector('wc-chart-pie').data = [
50
+ * { name: 'A', value: 30, label: 'Category A' },
51
+ * { name: 'B', value: 50, label: 'Category B' },
52
+ * { name: 'C', value: 20, label: 'Category C' },
53
+ * ];
54
+ * </script>
55
+ * ```
56
+ */
57
+ @IndividualComponent
58
+ export class ChartPie extends LitElement {
59
+ static styles = [styles];
60
+
61
+ @query('svg')
62
+ private svgElement?: SVGElement;
63
+
64
+ /** Width (and height) of the chart in pixels. */
65
+ @property({ type: Number, reflect: true }) width: number = 0;
66
+
67
+ /** Margin around the chart. */
68
+ @property({ type: Number, reflect: true }) margin: number = 10;
69
+
70
+ /** Whether to show labels outside the chart. */
71
+ @property({ type: Boolean, reflect: true, attribute: 'show-labels' })
72
+ showLabels: boolean = true;
73
+
74
+ /** Chart data array. Each item should have name, value, and optional label and color. */
75
+ @property({ type: Array }) data: ChartPieItem[] = [];
76
+
77
+ private _initialized = false;
78
+
79
+ private _debouncedRenderChart = debounce(() => {
80
+ this._renderChart(true);
81
+ }, 300);
82
+
83
+ firstUpdated() {
84
+ this._renderChart(false);
85
+ }
86
+
87
+ updated(changedProperties: PropertyValues) {
88
+ if (!this._initialized) {
89
+ this._initialized = true;
90
+ return;
91
+ }
92
+ const watchedProps = ['width', 'margin', 'showLabels', 'data'];
93
+ const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
94
+ if (hasChanged) {
95
+ this._debouncedRenderChart();
96
+ }
97
+ }
98
+
99
+ private _getRadius(): number {
100
+ // Reserve 100px on each side for labels and padding
101
+ return this.width / 2 - this.margin - 100;
102
+ }
103
+
104
+ private _getPieData() {
105
+ const pie = d3
106
+ .pie<ChartPieItem>()
107
+ .sort(null)
108
+ .value(d => d.value);
109
+ return pie(this.data);
110
+ }
111
+
112
+ private _getColorScale() {
113
+ return d3
114
+ .scaleOrdinal<string, ChartPieColor>()
115
+ .domain(this.data.map(d => d.name))
116
+ .range(chartColors);
117
+ }
118
+
119
+ private _renderChart(animate: boolean) {
120
+ if (!this.svgElement) return;
121
+
122
+ const DURATION = 500;
123
+ const radius = this._getRadius();
124
+ const pieData = this._getPieData();
125
+ const colorScale = this._getColorScale();
126
+
127
+ const svg = d3.select(this.svgElement);
128
+
129
+ const pieArc = d3
130
+ .arc<d3.PieArcDatum<ChartPieItem>>()
131
+ .innerRadius(0)
132
+ .outerRadius(radius);
133
+
134
+ const labelsArc = d3
135
+ .arc<d3.PieArcDatum<ChartPieItem>>()
136
+ .innerRadius(radius + 10)
137
+ .outerRadius(radius + 10);
138
+
139
+ // Update SVG dimensions and center transform
140
+ svg.attr('width', this.width).attr('height', this.width);
141
+ svg
142
+ .select('.chart-container')
143
+ .attr('transform', `translate(${this.width / 2},${this.width / 2})`);
144
+
145
+ // Arc paths — keyed by name so D3 matches elements across updates
146
+ const $paths = svg
147
+ .select('.arc-container')
148
+ .selectAll<SVGPathElement, d3.PieArcDatum<ChartPieItem>>('.arc')
149
+ .data(pieData, d => d.data.name)
150
+ .join('path')
151
+ .attr('class', 'arc')
152
+ .style('fill', d => d.data.color || colorScale(d.data.name).color);
153
+
154
+ if (animate) {
155
+ $paths
156
+ .transition()
157
+ .duration(DURATION)
158
+ .ease(d3.easeCubicInOut)
159
+ .attrTween('d', function (this: SVGPathElement, d) {
160
+ const self = this as ArcPathElement;
161
+ // Interpolate from the last rendered angles to the new ones.
162
+ // New (entering) arcs start collapsed at their startAngle.
163
+ const prev: { startAngle: number; endAngle: number } =
164
+ self._prevDatum ?? {
165
+ startAngle: d.startAngle,
166
+ endAngle: d.startAngle,
167
+ };
168
+ self._prevDatum = d;
169
+ const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);
170
+ const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);
171
+ return (t: number) =>
172
+ pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';
173
+ });
174
+ } else {
175
+ // Initial render: draw immediately and seed previous-datum for later tweens
176
+ $paths
177
+ .each(function (this: SVGPathElement, d) {
178
+ (this as ArcPathElement)._prevDatum = d;
179
+ })
180
+ .attr('d', d => pieArc(d) ?? '');
181
+ }
182
+
183
+ // Label polylines and text
184
+ const $chartContainer = svg.select('.chart-container');
185
+
186
+ if (this.showLabels) {
187
+ const pointsFn = (d: d3.PieArcDatum<ChartPieItem>) => {
188
+ const posA = pieArc.centroid(d);
189
+ const posB = labelsArc.centroid(d);
190
+ const posC = posB.slice() as [number, number];
191
+ const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
192
+ posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
193
+ return [posA, posB, posC].map(p => p.join(',')).join(' ');
194
+ };
195
+
196
+ const transformFn = (d: d3.PieArcDatum<ChartPieItem>) => {
197
+ const pos = labelsArc.centroid(d);
198
+ const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
199
+ pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
200
+ return `translate(${pos})`;
201
+ };
202
+
203
+ const anchorFn = (d: d3.PieArcDatum<ChartPieItem>) => {
204
+ const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
205
+ return midAngle < Math.PI ? 'start' : 'end';
206
+ };
207
+
208
+ const $polylines = $chartContainer
209
+ .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartPieItem>>(
210
+ '.item-polyline',
211
+ )
212
+ .data(pieData, d => d.data.name)
213
+ .join('polyline')
214
+ .attr('class', 'item-polyline');
215
+
216
+ const $labels = $chartContainer
217
+ .selectAll<SVGTextElement, d3.PieArcDatum<ChartPieItem>>('.item-label')
218
+ .data(pieData, d => d.data.name)
219
+ .join('text')
220
+ .attr('class', 'item-label')
221
+ .text(d => d.data.label ?? '');
222
+
223
+ if (animate) {
224
+ $polylines
225
+ .transition()
226
+ .duration(DURATION)
227
+ .ease(d3.easeCubicInOut)
228
+ .attr('points', pointsFn);
229
+ $labels
230
+ .transition()
231
+ .duration(DURATION)
232
+ .ease(d3.easeCubicInOut)
233
+ .attr('transform', transformFn)
234
+ .style('text-anchor', anchorFn);
235
+ } else {
236
+ $polylines.attr('points', pointsFn);
237
+ $labels.attr('transform', transformFn).style('text-anchor', anchorFn);
238
+ }
239
+ } else {
240
+ $chartContainer.selectAll('.item-polyline').remove();
241
+ $chartContainer.selectAll('.item-label').remove();
242
+ }
243
+ }
244
+
245
+ render() {
246
+ return html`
247
+ <div class="chart">
248
+ <svg>
249
+ <g class="chart-container">
250
+ <g class="arc-container"></g>
251
+ </g>
252
+ </svg>
253
+ </div>
254
+ `;
255
+ }
256
+ }
package/src/chart-pie/demo/index.html ADDED
@@ -0,0 +1,51 @@
1
+ <!doctype html>
2
+ <html lang='en-GB' data-theme=dark>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
+ <link rel='stylesheet' href='/dist/assets/styles.css' />
7
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
8
+
9
+ <style>
10
+ body {
11
+ background: var(--color-surface);
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+
17
+ <wc-button id="randomize">Randomize</wc-button>
18
+ <br />
19
+
20
+ <wc-chart-pie width="400" margin="20"></wc-chart-pie>
21
+
22
+ <script>
23
+ const chart = document.querySelector('wc-chart-pie');
24
+ chart.label = "Browsers";
25
+ chart.data = [
26
+ { label: 'Firefox', name: 'firefox', value: 10},
27
+ { label: 'Chrome', name: 'chrome', value: 20},
28
+ { label: 'Microsoft Edge', name: 'microsoft-edge', value: 30 },
29
+ { label: 'Internet Explorer', name: 'internet-explorer', value: 40 },
30
+ { label: 'MC Browser', name: 'mc-browser', value: 50 },
31
+ ];
32
+
33
+ function randomNumber(min, max) {
34
+ return parseInt(Math.random() * (max - min) + min);
35
+ }
36
+
37
+ let count = 1;
38
+ document.querySelector('#randomize').addEventListener('click', () => {
39
+ chart.data = chart.data.map(d => ({ ...d, value: parseInt(Math.random() * 100) }));
40
+ chart.width = randomNumber(400, 600);
41
+ });
42
+ </script>
43
+
44
+
45
+ <script type='module'>
46
+ import { Button, ChartPie } from '/dist/index.js';
47
+ window.customElements.define('wc-chart-pie', ChartPie);
48
+ window.customElements.define('wc-button', Button);
49
+ </script>
50
+ </body>
51
+ </html>
package/src/chart-pie/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { ChartPie } from './chart-pie.js';
package/src/checkbox/checkbox.ts CHANGED
@@ -6,29 +6,26 @@ import styles from './checkbox.scss';
6
6
 
7
7
  /**
8
8
  * @label Checkbox
9
- * @tag base-checkbox
9
+ * @tag wc-checkbox
10
10
  * @rawTag checkbox
11
- *
12
11
  * @summary Captures boolean input with an optional indeterminate mode.
13
12
  * @overview
14
13
  * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
15
14
  * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
16
- *
17
15
  * @cssprop --checkbox-size: Size of the checkbox container.
18
16
  * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
19
17
  * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
20
18
  * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
21
19
  * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
22
- *
23
20
  * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
24
21
  * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
25
22
  * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
23
+ * @tags input, form
26
24
  *
27
25
  * @example
28
26
  * ```html
29
- * <base-checkbox label="Accept terms"></base-checkbox>
27
+ * <wc-checkbox label="Accept terms"></wc-checkbox>
30
28
  * ```
31
- * @tags input, form
32
29
  */
33
30
  export class Checkbox extends LitElement {
34
31
  static styles = [styles];
package/src/chip/chip/chip.ts CHANGED
@@ -7,15 +7,15 @@ import sizeStyles from './chip-sizes.scss';
7
7
 
8
8
  /**
9
9
  * @label Chip
10
- * @tag base-chip
10
+ * @tag wc-chip
11
11
  * @rawTag chip
12
- * @summary
12
+ * @summary Chip component for displaying compact information with optional actions.
13
+ * @tags display
13
14
  *
14
15
  * @example
15
16
  * ```html
16
- * <base-tag>Link</base-tag>
17
+ * <wc-chip>Chip content</wc-chip>
17
18
  * ```
18
- * @tags display
19
19
  */
20
20
  export class Chip extends LitElement {
21
21
  // Define styles (Lit handles Scoping via Shadow DOM by default)
@@ -65,7 +65,7 @@ export class Chip extends LitElement {
65
65
  @click=${this._dismissClickHandler}
66
66
  aria-label="Dismiss"
67
67
  >
68
- <base-icon class="close-btn-icon" name="close"></base-icon>
68
+ <wc-icon class="close-btn-icon" name="close"></wc-icon>
69
69
  </button>
70
70
  `;
71
71
  }
@@ -90,7 +90,7 @@ export class Chip extends LitElement {
90
90
 
91
91
  return html`
92
92
  <div class="${classMap(classes)}">
93
- <base-elevation class="elevation"></base-elevation>
93
+ <wc-elevation class="elevation"></wc-elevation>
94
94
  <div class="background"></div>
95
95
  <div class="outline"></div>
96
96
 
package/src/chip/tag/tag.ts CHANGED
@@ -7,15 +7,15 @@ import sizeStyles from './tag-sizes.scss';
7
7
 
8
8
  /**
9
9
  * @label Tag
10
- * @tag base-tag
10
+ * @tag wc-tag
11
11
  * @rawTag tag
12
12
  * @summary Tag component for displaying labels or values with optional dismiss functionality.
13
+ * @tags display
13
14
  *
14
15
  * @example
15
16
  * ```html
16
- * <base-tag color=red>Tag</base-tag>
17
+ * <wc-tag color="red">Tag</wc-tag>
17
18
  * ```
18
- * @tags display
19
19
  */
20
20
  export class Tag extends LitElement {
21
21
  // Define styles (Lit handles Scoping via Shadow DOM by default)
@@ -57,8 +57,8 @@ export class Tag extends LitElement {
57
57
  @click=${this._dismissClickHandler}
58
58
  aria-label="Dismiss"
59
59
  >
60
- <base-ripple class="ripple"></base-ripple>
61
- <base-icon class="dismiss-button-icon" name="close"></base-icon>
60
+ <wc-ripple class="ripple"></wc-ripple>
61
+ <wc-icon class="dismiss-button-icon" name="close"></wc-icon>
62
62
  </button>
63
63
  `;
64
64
  }
@@ -74,7 +74,7 @@ export class Tag extends LitElement {
74
74
 
75
75
  return html`
76
76
  <div class="${classMap(classes)}">
77
- <base-elevation class="elevation"></base-elevation>
77
+ <wc-elevation class="elevation"></wc-elevation>
78
78
  <div class="background"></div>
79
79
  <div class="outline"></div>
80
80
 
package/src/clock/clock.ts CHANGED
@@ -1,27 +1,26 @@
1
1
  import { html, LitElement } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
- import PeacockComponent from 'src/PeacockComponent.js';
3
+ import IndividualComponent from 'src/IndividualComponent.js';
4
4
  import { ClockController } from './ClockController.js';
5
5
 
6
6
  import styles from './clock.scss';
7
7
 
8
8
  /**
9
9
  * @label Clock
10
- * @tag base-clock
10
+ * @tag wc-clock
11
11
  * @rawTag clock
12
- *
13
12
  * @summary Displays the current time in a given timezone.
14
13
  * @overview
15
14
  * - Clocks are used to display the current time in a specified timezone.
16
15
  * - They can be displayed in various formats, including 12-hour and 24-hour time.
16
+ * @tags display
17
17
  *
18
18
  * @example
19
19
  * ```html
20
- * <base-clock></base-clock>
20
+ * <wc-clock></wc-clock>
21
21
  * ```
22
- * @tags display
23
22
  */
24
- @PeacockComponent
23
+ @IndividualComponent
25
24
  export class Clock extends LitElement {
26
25
  static styles = [styles];
27
26
 
package/src/code-editor/code-editor.scss CHANGED
@@ -8,8 +8,7 @@
8
8
  :host {
9
9
  display: block;
10
10
  height: 100%;
11
- --code-editor-border: 1px solid var(--color-outline);
12
- --code-editor-border-radius: var(--shape-corner-small);
11
+ --code-editor-height: 300px;
13
12
  }
14
13
 
15
14
 
@@ -30,11 +29,10 @@
30
29
  display: block;
31
30
  height: 100%;
32
31
  position: relative;
33
- --field-height: 300px;
34
- min-height: 5rem;
32
+ --field-height: var(--code-editor-height);
35
33
 
36
34
  .editor {
37
- height: var(--field-height);
35
+ height: var(--code-editor-height);
38
36
  }
39
37
 
40
38
  .monaco-editor {
package/src/code-editor/code-editor.ts CHANGED
@@ -2,7 +2,7 @@ import { html, nothing } from 'lit';
2
2
  import { property, state, query } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import {init} from 'modern-monaco';
5
- import PeacockComponent from 'src/PeacockComponent.js';
5
+ import IndividualComponent from 'src/IndividualComponent.js';
6
6
  import BaseInput from '../input/BaseInput.js';
7
7
  import { observeThemeChange } from '../utils/observe-theme-change.js';
8
8
  import { redispatchEvent } from '../utils/dispatch-event-utils.js';
@@ -12,6 +12,19 @@ import {
12
12
 
13
13
  import styles from './code-editor.scss';
14
14
 
15
+ /**
16
+ * @label Code Editor
17
+ * @tag wc-code-editor
18
+ * @rawTag code-editor
19
+ * @summary A code editor component using Monaco Editor.
20
+ * @tags input
21
+ *
22
+ * @example
23
+ * ```html
24
+ * <wc-code-editor language="javascript"></wc-code-editor>
25
+ * ```
26
+ */
27
+
15
28
  // At module level, outside the class
16
29
  // @ts-ignore
17
30
  // At module level, outside the class
@@ -34,22 +47,24 @@ import styles from './code-editor.scss';
34
47
  * @tag code-editor
35
48
  * @rawTag code-editor
36
49
  *
37
- * @summary Code editor
50
+ * @summary A Monaco-based code editing component with syntax highlighting and theming.
38
51
  * @overview
39
- * - CodeHighlighter is a component that provides syntax highlighting for code snippets.
40
- * - It supports various programming languages and can display line numbers for better readability.
52
+ * - CodeEditor wraps Monaco Editor as a web component.
53
+ * - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.
54
+ * - Emits `change` when content is edited and updates value from property changes.
41
55
  *
42
56
  * @example
43
57
  * ```html
44
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
45
- * function helloWorld() {
46
- * console.log('Hello, world!');
47
- * }</code></pre>
48
- * </code-highlighter>
58
+ * <code-editor
59
+ * language="javascript"
60
+ * value="function hello() { console.log('Hello'); }"
61
+ * lineNumbers="on"
62
+ * minimap="false">
63
+ * </code-editor>
49
64
  * ```
50
- * @tags display
65
+ * @tags input, editor
51
66
  */
52
- @PeacockComponent
67
+ @IndividualComponent
53
68
  export default class CodeEditor extends BaseInput {
54
69
 
55
70
  static styles = [styles];
@@ -187,7 +202,7 @@ export default class CodeEditor extends BaseInput {
187
202
 
188
203
  render() {
189
204
  return html`
190
- <base-field
205
+ <wc-field
191
206
  ?required=${this.required}
192
207
  ?disabled=${this.disabled}
193
208
  ?readonly=${this.readonly}
@@ -200,16 +215,16 @@ export default class CodeEditor extends BaseInput {
200
215
  })}"
201
216
  >
202
217
  ${(this.disabled || this.readonly)
203
- ? html`<base-tag class="read-only-tag" color="red">Read Only</base-tag>`
218
+ ? html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
204
219
  : nothing
205
220
  }
206
221
  <div class="editor"></div>
207
222
  ${!this.editorMonacoInstance ? html`
208
223
  <div class="code-editor-loader">
209
- <base-spinner></base-spinner> Loading...
224
+ <wc-spinner></wc-spinner> Loading...
210
225
  </div>
211
226
  ` : nothing}
212
- </base-field>
227
+ </wc-field>
213
228
  `;
214
229
  }
215
230
  }