@krumio/trailhand-ui 1.4.1 → 1.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.
Files changed (70) hide show
  1. package/README.md +119 -52
  2. package/dist/components/action-menu/action-menu.d.ts +79 -0
  3. package/dist/components/action-menu/action-menu.d.ts.map +1 -0
  4. package/dist/components/action-menu/action-menu.js +333 -0
  5. package/dist/components/action-menu/action-menu.js.map +1 -0
  6. package/dist/components/action-menu/action-menu.stories.d.ts +261 -0
  7. package/dist/components/action-menu/action-menu.stories.d.ts.map +1 -0
  8. package/dist/components/action-menu/action-menu.stories.js +363 -0
  9. package/dist/components/action-menu/action-menu.stories.js.map +1 -0
  10. package/dist/components/action-menu/index.d.ts +2 -0
  11. package/dist/components/action-menu/index.d.ts.map +1 -0
  12. package/dist/components/action-menu/index.js +2 -0
  13. package/dist/components/action-menu/index.js.map +1 -0
  14. package/dist/components/data-table/data-table.d.ts +191 -0
  15. package/dist/components/data-table/data-table.d.ts.map +1 -0
  16. package/dist/components/data-table/data-table.js +857 -0
  17. package/dist/components/data-table/data-table.js.map +1 -0
  18. package/dist/components/data-table/data-table.stories.d.ts +507 -0
  19. package/dist/components/data-table/data-table.stories.d.ts.map +1 -0
  20. package/dist/components/data-table/data-table.stories.js +601 -0
  21. package/dist/components/data-table/data-table.stories.js.map +1 -0
  22. package/dist/components/data-table/index.d.ts +2 -0
  23. package/dist/components/data-table/index.d.ts.map +1 -0
  24. package/dist/components/data-table/index.js +2 -0
  25. package/dist/components/data-table/index.js.map +1 -0
  26. package/dist/components/th-card/index.d.ts +3 -0
  27. package/dist/components/th-card/index.d.ts.map +1 -0
  28. package/dist/components/th-card/index.js +2 -0
  29. package/dist/components/th-card/index.js.map +1 -0
  30. package/dist/components/th-card/th-card.d.ts +78 -0
  31. package/dist/components/th-card/th-card.d.ts.map +1 -0
  32. package/dist/components/th-card/th-card.js +449 -0
  33. package/dist/components/th-card/th-card.js.map +1 -0
  34. package/dist/components/th-card/th-card.stories.d.ts +232 -0
  35. package/dist/components/th-card/th-card.stories.d.ts.map +1 -0
  36. package/dist/components/th-card/th-card.stories.js +385 -0
  37. package/dist/components/th-card/th-card.stories.js.map +1 -0
  38. package/dist/components/th-tag/index.d.ts +3 -0
  39. package/dist/components/th-tag/index.d.ts.map +1 -0
  40. package/dist/components/th-tag/index.js +2 -0
  41. package/dist/components/th-tag/index.js.map +1 -0
  42. package/dist/components/th-tag/th-tag.d.ts +65 -0
  43. package/dist/components/th-tag/th-tag.d.ts.map +1 -0
  44. package/dist/components/th-tag/th-tag.js +307 -0
  45. package/dist/components/th-tag/th-tag.js.map +1 -0
  46. package/dist/components/th-tag/th-tag.stories.d.ts +277 -0
  47. package/dist/components/th-tag/th-tag.stories.d.ts.map +1 -0
  48. package/dist/components/th-tag/th-tag.stories.js +415 -0
  49. package/dist/components/th-tag/th-tag.stories.js.map +1 -0
  50. package/dist/components/toggle-switch/index.d.ts +2 -0
  51. package/dist/components/toggle-switch/index.d.ts.map +1 -0
  52. package/dist/components/toggle-switch/index.js +2 -0
  53. package/dist/components/toggle-switch/index.js.map +1 -0
  54. package/dist/components/toggle-switch/toggle-switch.d.ts +38 -0
  55. package/dist/components/toggle-switch/toggle-switch.d.ts.map +1 -0
  56. package/dist/components/toggle-switch/toggle-switch.js +175 -0
  57. package/dist/components/toggle-switch/toggle-switch.js.map +1 -0
  58. package/dist/components/toggle-switch/toggle-switch.stories.d.ts +239 -0
  59. package/dist/components/toggle-switch/toggle-switch.stories.d.ts.map +1 -0
  60. package/dist/components/toggle-switch/toggle-switch.stories.js +408 -0
  61. package/dist/components/toggle-switch/toggle-switch.stories.js.map +1 -0
  62. package/dist/design-system/color-palette.stories.d.ts +24 -0
  63. package/dist/design-system/color-palette.stories.d.ts.map +1 -0
  64. package/dist/design-system/color-palette.stories.js +361 -0
  65. package/dist/design-system/color-palette.stories.js.map +1 -0
  66. package/dist/index.d.ts +4 -0
  67. package/dist/index.d.ts.map +1 -0
  68. package/dist/index.js +5 -0
  69. package/dist/index.js.map +1 -0
  70. package/package.json +11 -8
@@ -0,0 +1,415 @@
1
+ import './th-tag.ts';
2
+ /**
3
+ * The ThTag component is a versatile tag/badge component for displaying
4
+ * labels, statuses, categories, or chips.
5
+ */
6
+ export default {
7
+ title: 'Components/ThTag',
8
+ tags: ['autodocs'],
9
+ render: (args) => {
10
+ const tag = document.createElement('th-tag');
11
+ if (args.label)
12
+ tag.label = args.label;
13
+ if (args.variant)
14
+ tag.variant = args.variant;
15
+ if (args.size)
16
+ tag.size = args.size;
17
+ if (args.dismissible !== undefined)
18
+ tag.dismissible = args.dismissible;
19
+ if (args.disabled !== undefined)
20
+ tag.disabled = args.disabled;
21
+ if (args.icon)
22
+ tag.icon = args.icon;
23
+ if (args.value)
24
+ tag.value = args.value;
25
+ if (args.outlined !== undefined)
26
+ tag.outlined = args.outlined;
27
+ tag.addEventListener('tag-dismiss', (e) => {
28
+ console.log('Tag dismissed:', e.detail);
29
+ });
30
+ return tag;
31
+ },
32
+ argTypes: {
33
+ label: {
34
+ control: 'text',
35
+ description: 'The text content of the tag',
36
+ defaultValue: 'Tag',
37
+ },
38
+ variant: {
39
+ control: 'select',
40
+ options: ['default', 'primary', 'success', 'warning', 'error', 'info'],
41
+ description: 'Visual style variant',
42
+ defaultValue: 'default',
43
+ },
44
+ size: {
45
+ control: 'select',
46
+ options: ['sm', 'md', 'lg'],
47
+ description: 'Size of the tag',
48
+ defaultValue: 'md',
49
+ },
50
+ dismissible: {
51
+ control: 'boolean',
52
+ description: 'Whether the tag can be dismissed',
53
+ defaultValue: false,
54
+ },
55
+ disabled: {
56
+ control: 'boolean',
57
+ description: 'Whether the tag is disabled',
58
+ defaultValue: false,
59
+ },
60
+ outlined: {
61
+ control: 'boolean',
62
+ description: 'Use outlined style instead of filled',
63
+ defaultValue: false,
64
+ },
65
+ icon: {
66
+ control: 'text',
67
+ description: 'Iconify icon name to display before label',
68
+ },
69
+ value: {
70
+ control: 'text',
71
+ description: 'Value passed in dismiss event',
72
+ },
73
+ },
74
+ parameters: {
75
+ docs: {
76
+ description: {
77
+ component: `
78
+ A tag/badge component for displaying labels, statuses, or categories.
79
+
80
+ **Features:**
81
+ - Multiple color variants (default, primary, success, warning, error, info)
82
+ - Three size options (sm, md, lg)
83
+ - Optional dismiss button with \`tag-dismiss\` event
84
+ - Optional icon support via Iconify
85
+ - CSS custom properties for theming
86
+ - Accessible with proper ARIA attributes
87
+ `.trim(),
88
+ },
89
+ },
90
+ },
91
+ };
92
+ /**
93
+ * Default tag with basic styling
94
+ */
95
+ export const Default = {
96
+ args: {
97
+ label: 'Tag',
98
+ variant: 'default',
99
+ size: 'md',
100
+ },
101
+ parameters: {
102
+ docs: {
103
+ source: {
104
+ code: '<th-tag label="Tag"></th-tag>',
105
+ },
106
+ },
107
+ },
108
+ };
109
+ /**
110
+ * All color variants
111
+ */
112
+ export const Variants = {
113
+ render: () => {
114
+ const container = document.createElement('div');
115
+ container.style.cssText = 'display: flex; gap: 8px; flex-wrap: wrap;';
116
+ const variants = ['default', 'primary', 'success', 'warning', 'error', 'info'];
117
+ variants.forEach((variant) => {
118
+ const tag = document.createElement('th-tag');
119
+ tag.label = variant;
120
+ tag.variant = variant;
121
+ container.appendChild(tag);
122
+ });
123
+ return container;
124
+ },
125
+ parameters: {
126
+ docs: {
127
+ description: {
128
+ story: 'All available color variants for different use cases.',
129
+ },
130
+ source: {
131
+ code: `<th-tag label="default" variant="default"></th-tag>
132
+ <th-tag label="primary" variant="primary"></th-tag>
133
+ <th-tag label="success" variant="success"></th-tag>
134
+ <th-tag label="warning" variant="warning"></th-tag>
135
+ <th-tag label="error" variant="error"></th-tag>
136
+ <th-tag label="info" variant="info"></th-tag>`,
137
+ },
138
+ },
139
+ },
140
+ };
141
+ /**
142
+ * Outlined variants
143
+ */
144
+ export const Outlined = {
145
+ render: () => {
146
+ const container = document.createElement('div');
147
+ container.style.cssText = 'display: flex; gap: 8px; flex-wrap: wrap;';
148
+ const variants = ['default', 'primary', 'success', 'warning', 'error', 'info'];
149
+ variants.forEach((variant) => {
150
+ const tag = document.createElement('th-tag');
151
+ tag.label = variant;
152
+ tag.variant = variant;
153
+ tag.outlined = true;
154
+ container.appendChild(tag);
155
+ });
156
+ return container;
157
+ },
158
+ parameters: {
159
+ docs: {
160
+ description: {
161
+ story: 'Outlined style for a lighter, border-only appearance.',
162
+ },
163
+ source: {
164
+ code: `<th-tag label="default" variant="default" outlined></th-tag>
165
+ <th-tag label="primary" variant="primary" outlined></th-tag>
166
+ <th-tag label="success" variant="success" outlined></th-tag>
167
+ <th-tag label="warning" variant="warning" outlined></th-tag>
168
+ <th-tag label="error" variant="error" outlined></th-tag>
169
+ <th-tag label="info" variant="info" outlined></th-tag>`,
170
+ },
171
+ },
172
+ },
173
+ };
174
+ /**
175
+ * Size variations
176
+ */
177
+ export const Sizes = {
178
+ render: () => {
179
+ const container = document.createElement('div');
180
+ container.style.cssText = 'display: flex; gap: 8px; align-items: center;';
181
+ const sizes = ['sm', 'md', 'lg'];
182
+ sizes.forEach((size) => {
183
+ const tag = document.createElement('th-tag');
184
+ tag.label = size;
185
+ tag.variant = 'primary';
186
+ tag.size = size;
187
+ container.appendChild(tag);
188
+ });
189
+ return container;
190
+ },
191
+ parameters: {
192
+ docs: {
193
+ description: {
194
+ story: 'Tags come in three sizes to fit different contexts.',
195
+ },
196
+ source: {
197
+ code: `<th-tag label="sm" size="sm" variant="primary"></th-tag>
198
+ <th-tag label="md" size="md" variant="primary"></th-tag>
199
+ <th-tag label="lg" size="lg" variant="primary"></th-tag>`,
200
+ },
201
+ },
202
+ },
203
+ };
204
+ /**
205
+ * Dismissible tags
206
+ */
207
+ export const Dismissible = {
208
+ render: () => {
209
+ const container = document.createElement('div');
210
+ container.style.cssText = 'display: flex; gap: 8px; flex-wrap: wrap;';
211
+ const tags = ['React', 'Vue', 'Angular', 'Svelte', 'Lit'];
212
+ tags.forEach((name) => {
213
+ const tag = document.createElement('th-tag');
214
+ tag.label = name;
215
+ tag.variant = 'primary';
216
+ tag.dismissible = true;
217
+ tag.value = name.toLowerCase();
218
+ tag.addEventListener('tag-dismiss', (e) => {
219
+ console.log('Dismissed:', e.detail.value);
220
+ tag.remove();
221
+ });
222
+ container.appendChild(tag);
223
+ });
224
+ return container;
225
+ },
226
+ parameters: {
227
+ docs: {
228
+ description: {
229
+ story: 'Tags can be dismissible, useful for filter chips or selected items.',
230
+ },
231
+ source: {
232
+ code: `<th-tag label="React" variant="primary" dismissible value="react"></th-tag>
233
+
234
+ <script>
235
+ const tag = document.querySelector('th-tag');
236
+ tag.addEventListener('tag-dismiss', (e) => {
237
+ console.log('Dismissed:', e.detail.value);
238
+ tag.remove();
239
+ });
240
+ </script>`,
241
+ },
242
+ },
243
+ },
244
+ };
245
+ /**
246
+ * Tags with icons
247
+ */
248
+ export const WithIcons = {
249
+ render: () => {
250
+ const container = document.createElement('div');
251
+ container.style.cssText = 'display: flex; gap: 8px; flex-wrap: wrap;';
252
+ const items = [
253
+ { label: 'Running', icon: 'heroicons:play-circle', variant: 'success' },
254
+ { label: 'Stopped', icon: 'heroicons:stop-circle', variant: 'error' },
255
+ { label: 'Pending', icon: 'heroicons:clock', variant: 'warning' },
256
+ { label: 'Info', icon: 'heroicons:information-circle', variant: 'info' },
257
+ ];
258
+ items.forEach(({ label, icon, variant }) => {
259
+ const tag = document.createElement('th-tag');
260
+ tag.label = label;
261
+ tag.icon = icon;
262
+ tag.variant = variant;
263
+ container.appendChild(tag);
264
+ });
265
+ return container;
266
+ },
267
+ parameters: {
268
+ docs: {
269
+ description: {
270
+ story: 'Tags can include icons from Iconify for visual context.',
271
+ },
272
+ source: {
273
+ code: `<th-tag label="Running" icon="heroicons:play-circle" variant="success"></th-tag>
274
+ <th-tag label="Stopped" icon="heroicons:stop-circle" variant="error"></th-tag>
275
+ <th-tag label="Pending" icon="heroicons:clock" variant="warning"></th-tag>`,
276
+ },
277
+ },
278
+ },
279
+ };
280
+ /**
281
+ * Status indicators
282
+ */
283
+ export const StatusIndicators = {
284
+ render: () => {
285
+ const container = document.createElement('div');
286
+ container.style.cssText = 'display: flex; flex-direction: column; gap: 12px;';
287
+ const statuses = [
288
+ { label: 'Active', variant: 'success' },
289
+ { label: 'Inactive', variant: 'default' },
290
+ { label: 'Pending', variant: 'warning' },
291
+ { label: 'Error', variant: 'error' },
292
+ { label: 'Processing', variant: 'info' },
293
+ ];
294
+ statuses.forEach(({ label, variant }) => {
295
+ const row = document.createElement('div');
296
+ row.style.cssText = 'display: flex; align-items: center; gap: 12px;';
297
+ const text = document.createElement('span');
298
+ text.textContent = `User Status: `;
299
+ text.style.minWidth = '120px';
300
+ const tag = document.createElement('th-tag');
301
+ tag.label = label;
302
+ tag.variant = variant;
303
+ tag.size = 'sm';
304
+ row.appendChild(text);
305
+ row.appendChild(tag);
306
+ container.appendChild(row);
307
+ });
308
+ return container;
309
+ },
310
+ parameters: {
311
+ docs: {
312
+ description: {
313
+ story: 'Common pattern: using tags as status indicators.',
314
+ },
315
+ source: {
316
+ code: `<th-tag label="Active" variant="success" size="sm"></th-tag>
317
+ <th-tag label="Inactive" variant="default" size="sm"></th-tag>
318
+ <th-tag label="Pending" variant="warning" size="sm"></th-tag>
319
+ <th-tag label="Error" variant="error" size="sm"></th-tag>`,
320
+ },
321
+ },
322
+ },
323
+ };
324
+ /**
325
+ * Version badge (like in the mockup)
326
+ */
327
+ export const VersionBadge = {
328
+ args: {
329
+ label: 'v2.0.0',
330
+ variant: 'primary',
331
+ size: 'md',
332
+ },
333
+ parameters: {
334
+ docs: {
335
+ description: {
336
+ story: 'Used as a version badge next to titles.',
337
+ },
338
+ source: {
339
+ code: '<th-tag label="v2.0.0" variant="primary"></th-tag>',
340
+ },
341
+ },
342
+ },
343
+ };
344
+ /**
345
+ * Disabled state
346
+ */
347
+ export const Disabled = {
348
+ render: () => {
349
+ const container = document.createElement('div');
350
+ container.style.cssText = 'display: flex; gap: 8px;';
351
+ const tag1 = document.createElement('th-tag');
352
+ tag1.label = 'Enabled';
353
+ tag1.variant = 'primary';
354
+ const tag2 = document.createElement('th-tag');
355
+ tag2.label = 'Disabled';
356
+ tag2.variant = 'primary';
357
+ tag2.disabled = true;
358
+ container.appendChild(tag1);
359
+ container.appendChild(tag2);
360
+ return container;
361
+ },
362
+ parameters: {
363
+ docs: {
364
+ description: {
365
+ story: 'Tags can be disabled for visual reference without interaction.',
366
+ },
367
+ source: {
368
+ code: `<th-tag label="Enabled" variant="primary"></th-tag>
369
+ <th-tag label="Disabled" variant="primary" disabled></th-tag>`,
370
+ },
371
+ },
372
+ },
373
+ };
374
+ /**
375
+ * Filter chips example
376
+ */
377
+ export const FilterChips = {
378
+ render: () => {
379
+ const container = document.createElement('div');
380
+ container.style.cssText = 'display: flex; flex-direction: column; gap: 12px;';
381
+ const header = document.createElement('div');
382
+ header.textContent = 'Active Filters:';
383
+ header.style.fontWeight = '500';
384
+ const chipsContainer = document.createElement('div');
385
+ chipsContainer.style.cssText = 'display: flex; gap: 8px; flex-wrap: wrap;';
386
+ const filters = ['Status: Running', 'Namespace: production', 'Type: Service'];
387
+ filters.forEach((filter) => {
388
+ const tag = document.createElement('th-tag');
389
+ tag.label = filter;
390
+ tag.variant = 'default';
391
+ tag.dismissible = true;
392
+ tag.addEventListener('tag-dismiss', () => {
393
+ tag.remove();
394
+ if (chipsContainer.children.length === 0) {
395
+ const empty = document.createElement('span');
396
+ empty.textContent = 'No filters active';
397
+ empty.style.color = '#666';
398
+ chipsContainer.appendChild(empty);
399
+ }
400
+ });
401
+ chipsContainer.appendChild(tag);
402
+ });
403
+ container.appendChild(header);
404
+ container.appendChild(chipsContainer);
405
+ return container;
406
+ },
407
+ parameters: {
408
+ docs: {
409
+ description: {
410
+ story: 'Dismissible tags work great as filter chips.',
411
+ },
412
+ },
413
+ },
414
+ };
415
+ //# sourceMappingURL=th-tag.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"th-tag.stories.js","sourceRoot":"","sources":["../../../src/components/th-tag/th-tag.stories.js"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export { ToggleSwitch } from './toggle-switch';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { ToggleSwitch } from './toggle-switch';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1,38 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ /**
3
+ * A reusable toggle switch component for boolean values.
4
+ * Can be used for any on/off, enabled/disabled, or true/false functionality.
5
+ */
6
+ export declare class ToggleSwitch extends LitElement {
7
+ checked: boolean;
8
+ onLabel: string;
9
+ offLabel: string;
10
+ storageKey: string | null;
11
+ name: string;
12
+ private boundHandleExternalChange;
13
+ static styles: import("lit").CSSResult;
14
+ constructor();
15
+ connectedCallback(): void;
16
+ disconnectedCallback(): void;
17
+ /**
18
+ * Handle changes from other toggle instances with the same name
19
+ * @param e - The toggle-changed event
20
+ */
21
+ handleExternalChange(e: Event): void;
22
+ /**
23
+ * Dispatch a change event
24
+ * @param checked - The new checked state
25
+ */
26
+ dispatchChangeEvent(checked: boolean): void;
27
+ /**
28
+ * Handle toggle switch change
29
+ * @param e - The change event
30
+ */
31
+ handleToggleChange(e: Event): void;
32
+ /**
33
+ * Render the component
34
+ * @returns TemplateResult
35
+ */
36
+ render(): TemplateResult;
37
+ }
38
+ //# sourceMappingURL=toggle-switch.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAW5D;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAE1C,OAAO,UAAS;IAGhB,OAAO,SAAQ;IAGf,QAAQ,SAAS;IAGjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,IAAI,SAAM;IAEV,OAAO,CAAC,yBAAyB,CAAqB;IAEtD,OAAgB,MAAM,0BAyDpB;;IASO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAQrC;;;OAGG;IACH,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAOpC;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAkB3C;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAalC;;;OAGG;IACM,MAAM,IAAI,cAAc;CAclC"}
@@ -0,0 +1,175 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ /**
10
+ * A reusable toggle switch component for boolean values.
11
+ * Can be used for any on/off, enabled/disabled, or true/false functionality.
12
+ */
13
+ export class ToggleSwitch extends LitElement {
14
+ constructor() {
15
+ super();
16
+ this.checked = false;
17
+ this.onLabel = 'On';
18
+ this.offLabel = 'Off';
19
+ this.storageKey = null;
20
+ this.name = '';
21
+ // Listen for changes from other instances with the same name
22
+ this.boundHandleExternalChange = this.handleExternalChange.bind(this);
23
+ window.addEventListener('toggle-changed', this.boundHandleExternalChange);
24
+ }
25
+ connectedCallback() {
26
+ super.connectedCallback();
27
+ // Initialize from localStorage if storageKey is provided
28
+ if (this.storageKey) {
29
+ const savedValue = localStorage.getItem(this.storageKey);
30
+ if (savedValue !== null) {
31
+ this.checked = savedValue === 'true';
32
+ }
33
+ }
34
+ }
35
+ disconnectedCallback() {
36
+ super.disconnectedCallback();
37
+ window.removeEventListener('toggle-changed', this.boundHandleExternalChange);
38
+ }
39
+ /**
40
+ * Handle changes from other toggle instances with the same name
41
+ * @param e - The toggle-changed event
42
+ */
43
+ handleExternalChange(e) {
44
+ const customEvent = e;
45
+ if (this.name && customEvent.detail.name === this.name) {
46
+ this.checked = customEvent.detail.checked;
47
+ }
48
+ }
49
+ /**
50
+ * Dispatch a change event
51
+ * @param checked - The new checked state
52
+ */
53
+ dispatchChangeEvent(checked) {
54
+ const event = new CustomEvent('toggle-change', {
55
+ bubbles: true,
56
+ composed: true,
57
+ detail: { checked, name: this.name },
58
+ });
59
+ this.dispatchEvent(event);
60
+ // Dispatch on window if name is provided (for syncing multiple instances)
61
+ if (this.name) {
62
+ window.dispatchEvent(new CustomEvent('toggle-changed', {
63
+ detail: { checked, name: this.name },
64
+ }));
65
+ }
66
+ }
67
+ /**
68
+ * Handle toggle switch change
69
+ * @param e - The change event
70
+ */
71
+ handleToggleChange(e) {
72
+ const target = e.target;
73
+ this.checked = target.checked;
74
+ // Save to localStorage if storageKey is provided
75
+ if (this.storageKey) {
76
+ localStorage.setItem(this.storageKey, this.checked.toString());
77
+ }
78
+ // Dispatch change event
79
+ this.dispatchChangeEvent(this.checked);
80
+ }
81
+ /**
82
+ * Render the component
83
+ * @returns TemplateResult
84
+ */
85
+ render() {
86
+ return html `
87
+ <span class="label">${this.offLabel}</span>
88
+ <label class="toggle-switch">
89
+ <input
90
+ type="checkbox"
91
+ .checked=${this.checked}
92
+ @change=${this.handleToggleChange}
93
+ />
94
+ <span class="slider"></span>
95
+ </label>
96
+ <span class="label">${this.onLabel}</span>
97
+ `;
98
+ }
99
+ }
100
+ ToggleSwitch.styles = css `
101
+ :host {
102
+ display: flex;
103
+ align-items: center;
104
+ margin-right: 10px;
105
+ }
106
+
107
+ .toggle-switch {
108
+ position: relative;
109
+ display: inline-block;
110
+ width: 44px;
111
+ height: 24px;
112
+ margin: 0 8px;
113
+ }
114
+
115
+ .toggle-switch input {
116
+ opacity: 0;
117
+ width: 0;
118
+ height: 0;
119
+ }
120
+
121
+ .slider {
122
+ position: absolute;
123
+ cursor: pointer;
124
+ top: 0;
125
+ left: 0;
126
+ right: 0;
127
+ bottom: 0;
128
+ background-color: var(--color-grey-500, #8D8D8D);
129
+ transition: 0.3s;
130
+ border-radius: 24px;
131
+ }
132
+
133
+ .slider:before {
134
+ position: absolute;
135
+ content: '';
136
+ height: 18px;
137
+ width: 18px;
138
+ left: 3px;
139
+ bottom: 3px;
140
+ background-color: var(--color-white, #FFFFFF);
141
+ transition: 0.3s;
142
+ border-radius: 50%;
143
+ }
144
+
145
+ input:checked + .slider {
146
+ background-color: var(--color-primary, #3d98d3);
147
+ }
148
+
149
+ input:checked + .slider:before {
150
+ transform: translateX(20px);
151
+ }
152
+
153
+ .label {
154
+ font-size: 14px;
155
+ user-select: none;
156
+ }
157
+ `;
158
+ __decorate([
159
+ property({ type: Boolean })
160
+ ], ToggleSwitch.prototype, "checked", void 0);
161
+ __decorate([
162
+ property({ type: String, attribute: 'on-label' })
163
+ ], ToggleSwitch.prototype, "onLabel", void 0);
164
+ __decorate([
165
+ property({ type: String, attribute: 'off-label' })
166
+ ], ToggleSwitch.prototype, "offLabel", void 0);
167
+ __decorate([
168
+ property({ type: String, attribute: 'storage-key' })
169
+ ], ToggleSwitch.prototype, "storageKey", void 0);
170
+ __decorate([
171
+ property({ type: String })
172
+ ], ToggleSwitch.prototype, "name", void 0);
173
+ // Register the element
174
+ customElements.define('toggle-switch', ToggleSwitch);
175
+ //# sourceMappingURL=toggle-switch.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"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"}