@krumio/trailhand-ui 1.5.0 → 1.7.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 (89) hide show
  1. package/README.md +102 -11
  2. package/dist/components/button/button.d.ts +20 -0
  3. package/dist/components/button/button.d.ts.map +1 -0
  4. package/dist/components/button/button.js +189 -0
  5. package/dist/components/button/button.js.map +1 -0
  6. package/dist/components/button/index.d.ts +2 -0
  7. package/dist/components/button/index.d.ts.map +1 -0
  8. package/dist/components/button/index.js +2 -0
  9. package/dist/components/button/index.js.map +1 -0
  10. package/dist/components/icon/icon.d.ts +18 -0
  11. package/dist/components/icon/icon.d.ts.map +1 -0
  12. package/dist/components/icon/icon.js +44 -0
  13. package/dist/components/icon/icon.js.map +1 -0
  14. package/dist/components/icon/index.d.ts +2 -0
  15. package/dist/components/icon/index.d.ts.map +1 -0
  16. package/dist/components/icon/index.js +2 -0
  17. package/dist/components/icon/index.js.map +1 -0
  18. package/dist/index.d.ts +2 -0
  19. package/dist/index.d.ts.map +1 -1
  20. package/dist/index.js +2 -0
  21. package/dist/index.js.map +1 -1
  22. package/dist/styles/colors.css +132 -0
  23. package/package.json +25 -28
  24. package/dist/Button.d.ts +0 -15
  25. package/dist/Button.d.ts.map +0 -1
  26. package/dist/Button.js +0 -18
  27. package/dist/Button.js.map +0 -1
  28. package/dist/Header.d.ts +0 -15
  29. package/dist/Header.d.ts.map +0 -1
  30. package/dist/Header.js +0 -44
  31. package/dist/Header.js.map +0 -1
  32. package/dist/Page.d.ts +0 -9
  33. package/dist/Page.d.ts.map +0 -1
  34. package/dist/Page.js +0 -61
  35. package/dist/Page.js.map +0 -1
  36. package/dist/action-menu.d.ts +0 -79
  37. package/dist/action-menu.d.ts.map +0 -1
  38. package/dist/action-menu.js +0 -321
  39. package/dist/action-menu.js.map +0 -1
  40. package/dist/assets/index-B7q5L5KS.js +0 -91
  41. package/dist/components/action-menu/action-menu.stories.d.ts +0 -261
  42. package/dist/components/action-menu/action-menu.stories.d.ts.map +0 -1
  43. package/dist/components/action-menu/action-menu.stories.js +0 -363
  44. package/dist/components/action-menu/action-menu.stories.js.map +0 -1
  45. package/dist/components/data-table/data-table.stories.d.ts +0 -507
  46. package/dist/components/data-table/data-table.stories.d.ts.map +0 -1
  47. package/dist/components/data-table/data-table.stories.js +0 -601
  48. package/dist/components/data-table/data-table.stories.js.map +0 -1
  49. package/dist/components/th-card/index.d.ts +0 -3
  50. package/dist/components/th-card/index.d.ts.map +0 -1
  51. package/dist/components/th-card/index.js +0 -2
  52. package/dist/components/th-card/index.js.map +0 -1
  53. package/dist/components/th-card/th-card.d.ts +0 -78
  54. package/dist/components/th-card/th-card.d.ts.map +0 -1
  55. package/dist/components/th-card/th-card.js +0 -449
  56. package/dist/components/th-card/th-card.js.map +0 -1
  57. package/dist/components/th-card/th-card.stories.d.ts +0 -232
  58. package/dist/components/th-card/th-card.stories.d.ts.map +0 -1
  59. package/dist/components/th-card/th-card.stories.js +0 -385
  60. package/dist/components/th-card/th-card.stories.js.map +0 -1
  61. package/dist/components/th-tag/index.d.ts +0 -3
  62. package/dist/components/th-tag/index.d.ts.map +0 -1
  63. package/dist/components/th-tag/index.js +0 -2
  64. package/dist/components/th-tag/index.js.map +0 -1
  65. package/dist/components/th-tag/th-tag.d.ts +0 -65
  66. package/dist/components/th-tag/th-tag.d.ts.map +0 -1
  67. package/dist/components/th-tag/th-tag.js +0 -307
  68. package/dist/components/th-tag/th-tag.js.map +0 -1
  69. package/dist/components/th-tag/th-tag.stories.d.ts +0 -277
  70. package/dist/components/th-tag/th-tag.stories.d.ts.map +0 -1
  71. package/dist/components/th-tag/th-tag.stories.js +0 -415
  72. package/dist/components/th-tag/th-tag.stories.js.map +0 -1
  73. package/dist/components/toggle-switch/toggle-switch.stories.d.ts +0 -239
  74. package/dist/components/toggle-switch/toggle-switch.stories.d.ts.map +0 -1
  75. package/dist/components/toggle-switch/toggle-switch.stories.js +0 -408
  76. package/dist/components/toggle-switch/toggle-switch.stories.js.map +0 -1
  77. package/dist/data-table.d.ts +0 -191
  78. package/dist/data-table.d.ts.map +0 -1
  79. package/dist/data-table.js +0 -796
  80. package/dist/data-table.js.map +0 -1
  81. package/dist/design-system/color-palette.stories.d.ts +0 -24
  82. package/dist/design-system/color-palette.stories.d.ts.map +0 -1
  83. package/dist/design-system/color-palette.stories.js +0 -361
  84. package/dist/design-system/color-palette.stories.js.map +0 -1
  85. package/dist/index.html +0 -102
  86. package/dist/toggle-switch.d.ts +0 -38
  87. package/dist/toggle-switch.d.ts.map +0 -1
  88. package/dist/toggle-switch.js +0 -175
  89. package/dist/toggle-switch.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"data-table.js","sourceRoot":"","sources":["../Components/data-table.ts"],"names":[],"mappings":"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"}
@@ -1,24 +0,0 @@
1
- declare namespace _default {
2
- let title: string;
3
- let tags: string[];
4
- namespace parameters {
5
- namespace docs {
6
- namespace description {
7
- let component: string;
8
- }
9
- }
10
- }
11
- }
12
- export default _default;
13
- export namespace AllColors {
14
- function render(): import("lit-html").TemplateResult<1>;
15
- }
16
- export namespace SemanticAliases {
17
- export function render_1(): import("lit-html").TemplateResult<1>;
18
- export { render_1 as render };
19
- }
20
- export namespace UsageExamples {
21
- export function render_2(): import("lit-html").TemplateResult<1>;
22
- export { render_2 as render };
23
- }
24
- //# sourceMappingURL=color-palette.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-palette.stories.d.ts","sourceRoot":"","sources":["../../src/design-system/color-palette.stories.js"],"names":[],"mappings":";;;;;;;;;;;;;IAoIU,wDAwDP;;;IAOO,iEAuDP;;;;IAOO,iEA4GP"}
@@ -1,361 +0,0 @@
1
- import { html } from 'lit';
2
- import '../styles/colors.css';
3
- export default {
4
- title: 'Design System/Color Palette',
5
- tags: ['autodocs'],
6
- parameters: {
7
- docs: {
8
- description: {
9
- component: 'The TrailHand UI color palette provides a set of global color variables for consistent use across all components. This includes primary brand colors, greyscale shades, and semantic aliases for text, backgrounds, borders, and status indicators.',
10
- },
11
- },
12
- },
13
- };
14
- /**
15
- * Convert hex to RGB
16
- * @param {string} hex - Hex color value
17
- * @returns {string} RGB string
18
- */
19
- const hexToRgb = (hex) => {
20
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
21
- if (!result)
22
- return '';
23
- const r = parseInt(result[1], 16);
24
- const g = parseInt(result[2], 16);
25
- const b = parseInt(result[3], 16);
26
- return `rgb(${r}, ${g}, ${b})`;
27
- };
28
- /**
29
- * Determine if text should be light or dark based on background
30
- * @param {string} hex - Hex color value
31
- * @returns {string} CSS variable for text color
32
- */
33
- const getContrastText = (hex) => {
34
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
35
- if (!result)
36
- return 'var(--color-black)';
37
- const r = parseInt(result[1], 16);
38
- const g = parseInt(result[2], 16);
39
- const b = parseInt(result[3], 16);
40
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
41
- return luminance > 0.5 ? 'var(--color-text-primary)' : 'var(--color-white)';
42
- };
43
- /**
44
- * Render a single color swatch
45
- */
46
- const ColorSwatch = ({ name, variable, hex, description = '' }) => {
47
- const textColor = getContrastText(hex);
48
- const rgb = hexToRgb(hex);
49
- return html `
50
- <div style="
51
- display: flex;
52
- flex-direction: column;
53
- border: 1px solid var(--color-grey-200);
54
- border-radius: 8px;
55
- overflow: hidden;
56
- background: var(--color-white);
57
- ">
58
- <div style="
59
- background-color: var(${variable});
60
- height: 80px;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- color: ${textColor};
65
- font-weight: 600;
66
- font-size: 14px;
67
- ">
68
- ${name}
69
- </div>
70
- <div style="
71
- padding: 12px;
72
- font-family: 'Nunito Sans', system-ui, sans-serif;
73
- font-size: 13px;
74
- ">
75
- <div style="
76
- font-weight: 600;
77
- color: var(--color-text-primary);
78
- margin-bottom: 4px;
79
- ">${variable}</div>
80
- <div style="
81
- color: var(--color-text-secondary);
82
- font-family: monospace;
83
- font-size: 12px;
84
- ">${hex}</div>
85
- <div style="
86
- color: var(--color-text-muted);
87
- font-family: monospace;
88
- font-size: 11px;
89
- margin-top: 2px;
90
- ">${rgb}</div>
91
- ${description ? html `<div style="
92
- color: var(--color-text-muted);
93
- font-size: 11px;
94
- margin-top: 6px;
95
- font-style: italic;
96
- ">${description}</div>` : ''}
97
- </div>
98
- </div>
99
- `;
100
- };
101
- /**
102
- * Render a section of colors
103
- */
104
- const ColorSection = ({ title, colors }) => html `
105
- <div style="margin-bottom: 40px;">
106
- <h3 style="
107
- font-family: 'Nunito Sans', system-ui, sans-serif;
108
- font-size: 18px;
109
- font-weight: 700;
110
- color: var(--color-text-primary);
111
- margin: 0 0 16px 0;
112
- padding-bottom: 8px;
113
- border-bottom: 2px solid var(--color-grey-200);
114
- ">${title}</h3>
115
- <div style="
116
- display: grid;
117
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
118
- gap: 16px;
119
- ">
120
- ${colors.map(color => ColorSwatch(color))}
121
- </div>
122
- </div>
123
- `;
124
- /**
125
- * Full color palette display
126
- */
127
- export const AllColors = {
128
- render: () => html `
129
- <div style="
130
- font-family: 'Nunito Sans', system-ui, sans-serif;
131
- padding: 20px;
132
- background: var(--color-grey-100);
133
- ">
134
- <h2 style="
135
- font-size: 24px;
136
- font-weight: 700;
137
- color: var(--color-text-primary);
138
- margin: 0 0 8px 0;
139
- ">TrailHand UI Color Palette</h2>
140
- <p style="
141
- color: var(--color-text-secondary);
142
- font-size: 14px;
143
- margin: 0 0 32px 0;
144
- ">Global color variables for consistent design across all components.</p>
145
-
146
- ${ColorSection({
147
- title: 'Primary',
148
- colors: [
149
- { name: 'Primary', variable: '--color-primary', hex: '#3d98d3', description: 'Main brand color' },
150
- ]
151
- })}
152
-
153
- ${ColorSection({
154
- title: 'Black + White',
155
- colors: [
156
- { name: 'Black', variable: '--color-black', hex: '#000000' },
157
- { name: 'White', variable: '--color-white', hex: '#FFFFFF' },
158
- ]
159
- })}
160
-
161
- ${ColorSection({
162
- title: 'Greyscale',
163
- colors: [
164
- { name: 'Grey 100', variable: '--color-grey-100', hex: '#FAFAFA' },
165
- { name: 'Grey 200', variable: '--color-grey-200', hex: '#EBEBEB' },
166
- { name: 'Grey 300', variable: '--color-grey-300', hex: '#D7D7D7' },
167
- { name: 'Grey 400', variable: '--color-grey-400', hex: '#BABABA' },
168
- { name: 'Grey 500', variable: '--color-grey-500', hex: '#8D8D8D' },
169
- { name: 'Grey 600', variable: '--color-grey-600', hex: '#636363' },
170
- { name: 'Grey 700', variable: '--color-grey-700', hex: '#303131' },
171
- { name: 'Grey 800', variable: '--color-grey-800', hex: '#212121' },
172
- ]
173
- })}
174
-
175
- ${ColorSection({
176
- title: 'Status Colors',
177
- colors: [
178
- { name: 'Red', variable: '--color-red', hex: '#9F3A3A', description: 'Error, danger' },
179
- { name: 'Green', variable: '--color-green', hex: '#30AC66', description: 'Success, positive' },
180
- { name: 'Yellow', variable: '--color-yellow', hex: '#D3C255', description: 'Warning, caution' },
181
- ]
182
- })}
183
- </div>
184
- `,
185
- };
186
- /**
187
- * Semantic aliases - showing how colors map to use cases
188
- */
189
- export const SemanticAliases = {
190
- render: () => html `
191
- <div style="
192
- font-family: 'Nunito Sans', system-ui, sans-serif;
193
- padding: 20px;
194
- background: var(--color-grey-100);
195
- ">
196
- <h2 style="
197
- font-size: 24px;
198
- font-weight: 700;
199
- color: var(--color-text-primary);
200
- margin: 0 0 8px 0;
201
- ">Semantic Color Aliases</h2>
202
- <p style="
203
- color: var(--color-text-secondary);
204
- font-size: 14px;
205
- margin: 0 0 32px 0;
206
- ">Context-specific color variables that reference the base palette.</p>
207
-
208
- ${ColorSection({
209
- title: 'Text Colors',
210
- colors: [
211
- { name: 'Primary Text', variable: '--color-text-primary', hex: '#212121', description: 'Main body text' },
212
- { name: 'Secondary Text', variable: '--color-text-secondary', hex: '#636363', description: 'Supporting text' },
213
- { name: 'Muted Text', variable: '--color-text-muted', hex: '#8D8D8D', description: 'Disabled, placeholder' },
214
- { name: 'Inverse Text', variable: '--color-text-inverse', hex: '#FFFFFF', description: 'Text on dark backgrounds' },
215
- ]
216
- })}
217
-
218
- ${ColorSection({
219
- title: 'Background Colors',
220
- colors: [
221
- { name: 'Background', variable: '--color-background', hex: '#FFFFFF', description: 'Default background' },
222
- { name: 'Muted Background', variable: '--color-background-muted', hex: '#FAFAFA', description: 'Subtle background' },
223
- { name: 'Hover Background', variable: '--color-background-hover', hex: '#EBEBEB', description: 'Interactive hover state' },
224
- ]
225
- })}
226
-
227
- ${ColorSection({
228
- title: 'Border Colors',
229
- colors: [
230
- { name: 'Border', variable: '--color-border', hex: '#D7D7D7', description: 'Default borders' },
231
- { name: 'Light Border', variable: '--color-border-light', hex: '#EBEBEB', description: 'Subtle borders' },
232
- ]
233
- })}
234
-
235
- ${ColorSection({
236
- title: 'State Colors',
237
- colors: [
238
- { name: 'Error', variable: '--color-error', hex: '#9F3A3A', description: 'Error states' },
239
- { name: 'Success', variable: '--color-success', hex: '#30AC66', description: 'Success states' },
240
- { name: 'Warning', variable: '--color-warning', hex: '#D3C255', description: 'Warning states' },
241
- { name: 'Link', variable: '--color-link', hex: '#3d98d3', description: 'Interactive links' },
242
- ]
243
- })}
244
- </div>
245
- `,
246
- };
247
- /**
248
- * Usage examples
249
- */
250
- export const UsageExamples = {
251
- render: () => html `
252
- <div style="
253
- font-family: 'Nunito Sans', system-ui, sans-serif;
254
- padding: 20px;
255
- background: var(--color-grey-100);
256
- ">
257
- <h2 style="
258
- font-size: 24px;
259
- font-weight: 700;
260
- color: var(--color-text-primary);
261
- margin: 0 0 8px 0;
262
- ">Usage Examples</h2>
263
- <p style="
264
- color: var(--color-text-secondary);
265
- font-size: 14px;
266
- margin: 0 0 32px 0;
267
- ">How to use color variables in your CSS and components.</p>
268
-
269
- <div style="
270
- background: var(--color-white);
271
- border: 1px solid var(--color-grey-200);
272
- border-radius: 8px;
273
- padding: 24px;
274
- margin-bottom: 24px;
275
- ">
276
- <h3 style="
277
- font-size: 16px;
278
- font-weight: 700;
279
- color: var(--color-text-primary);
280
- margin: 0 0 16px 0;
281
- ">Import the stylesheet</h3>
282
- <pre style="
283
- background: var(--color-grey-800);
284
- color: var(--color-grey-100);
285
- padding: 16px;
286
- border-radius: 4px;
287
- overflow-x: auto;
288
- font-size: 13px;
289
- margin: 0;
290
- "><code>&lt;link rel="stylesheet" href="./src/styles/colors.css"&gt;
291
-
292
- /* Or in JavaScript/TypeScript */
293
- import './src/styles/colors.css';</code></pre>
294
- </div>
295
-
296
- <div style="
297
- background: var(--color-white);
298
- border: 1px solid var(--color-grey-200);
299
- border-radius: 8px;
300
- padding: 24px;
301
- margin-bottom: 24px;
302
- ">
303
- <h3 style="
304
- font-size: 16px;
305
- font-weight: 700;
306
- color: var(--color-text-primary);
307
- margin: 0 0 16px 0;
308
- ">Use in CSS</h3>
309
- <pre style="
310
- background: var(--color-grey-800);
311
- color: var(--color-grey-100);
312
- padding: 16px;
313
- border-radius: 4px;
314
- overflow-x: auto;
315
- font-size: 13px;
316
- margin: 0;
317
- "><code>.my-button {
318
- background-color: var(--color-primary);
319
- color: var(--color-text-inverse);
320
- border: 1px solid var(--color-border);
321
- }
322
-
323
- .my-button:hover {
324
- background-color: var(--color-background-hover);
325
- }
326
-
327
- .error-message {
328
- color: var(--color-error);
329
- }</code></pre>
330
- </div>
331
-
332
- <div style="
333
- background: var(--color-white);
334
- border: 1px solid var(--color-grey-200);
335
- border-radius: 8px;
336
- padding: 24px;
337
- ">
338
- <h3 style="
339
- font-size: 16px;
340
- font-weight: 700;
341
- color: var(--color-text-primary);
342
- margin: 0 0 16px 0;
343
- ">With fallback values</h3>
344
- <pre style="
345
- background: var(--color-grey-800);
346
- color: var(--color-grey-100);
347
- padding: 16px;
348
- border-radius: 4px;
349
- overflow-x: auto;
350
- font-size: 13px;
351
- margin: 0;
352
- "><code>/* Always provide fallbacks for robustness */
353
- .my-component {
354
- color: var(--color-text-primary, #212121);
355
- background: var(--color-background, #FFFFFF);
356
- }</code></pre>
357
- </div>
358
- </div>
359
- `,
360
- };
361
- //# sourceMappingURL=color-palette.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-palette.stories.js","sourceRoot":"","sources":["../../src/design-system/color-palette.stories.js"],"names":[],"mappings":"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"}
package/dist/index.html DELETED
@@ -1,102 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Toggle Switch Demo</title>
7
- <style>
8
- /* Default light mode colors */
9
- :root {
10
- --background-color: #ffffff;
11
- --text-color: #333333;
12
- --card-bg: #f5f5f5;
13
- --border-color: #e0e0e0;
14
- }
15
-
16
- /* System dark mode preference */
17
- @media (prefers-color-scheme: dark) {
18
- :root {
19
- --background-color: #121212;
20
- --text-color: #e0e0e0;
21
- --card-bg: #1e1e1e;
22
- --border-color: #333333;
23
- }
24
- }
25
-
26
- /* User override: explicitly chose light theme */
27
- body.theme-light {
28
- --background-color: #ffffff;
29
- --text-color: #333333;
30
- --card-bg: #f5f5f5;
31
- --border-color: #e0e0e0;
32
- }
33
-
34
- /* User override: explicitly chose dark theme */
35
- body.theme-dark {
36
- --background-color: #121212;
37
- --text-color: #e0e0e0;
38
- --card-bg: #1e1e1e;
39
- --border-color: #333333;
40
- }
41
-
42
- body {
43
- background-color: var(--background-color);
44
- color: var(--text-color);
45
- font-family: system-ui, sans-serif;
46
- margin: 0;
47
- padding: 2rem;
48
- transition: background-color 0.3s ease, color 0.3s ease;
49
- }
50
-
51
- .card {
52
- background-color: var(--card-bg);
53
- border: 1px solid var(--border-color);
54
- padding: 1.5rem;
55
- border-radius: 8px;
56
- margin-top: 2rem;
57
- }
58
-
59
- header {
60
- display: flex;
61
- justify-content: space-between;
62
- align-items: center;
63
- margin-bottom: 2rem;
64
- }
65
- </style>
66
- <script type="module" crossorigin src="/assets/index-B7q5L5KS.js"></script>
67
- </head>
68
- <body>
69
- <header>
70
- <h1>Toggle Switch Demo</h1>
71
- <toggle-switch name="theme"></toggle-switch>
72
- </header>
73
-
74
- <main>
75
- <p>This demo shows the toggle switch component used for theme switching.</p>
76
- <p>The theme automatically matches your system preference, but you can override it using the toggle above.</p>
77
-
78
- <div class="card">
79
- <h2>How it works</h2>
80
- <ul>
81
- <li>CSS uses <code>@media (prefers-color-scheme: dark)</code> for system preference</li>
82
- <li>Toggling adds <code>.theme-light</code> or <code>.theme-dark</code> class to body</li>
83
- <li>Body classes override the media query (higher CSS specificity)</li>
84
- <li>Your choice is saved to localStorage</li>
85
- </ul>
86
- </div>
87
-
88
- <div class="card">
89
- <h2>Test it out</h2>
90
- <p>Try toggling the switch above to see the theme change. Your preference will be remembered when you return!</p>
91
- <p><small>To reset to system preference: Open console and run <code>localStorage.removeItem('user-theme-preference')</code> then reload.</small></p>
92
- </div>
93
-
94
- <div class="card">
95
- <h2>Synced toggles</h2>
96
- <p>These toggles share the same name, so they stay synchronized:</p>
97
- <toggle-switch name="theme" id="sync1"></toggle-switch>
98
- <toggle-switch name="theme" onLabel="Dark" offLabel="Light"></toggle-switch>
99
- </div>
100
- </main>
101
- </body>
102
- </html>
@@ -1,38 +0,0 @@
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
@@ -1 +0,0 @@
1
- {"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../Components/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;IAKrC;;;OAGG;IACH,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAOpC;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAgB3C;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAalC;;;OAGG;IACM,MAAM,IAAI,cAAc;CAclC"}