le-kit 0.1.10 → 0.1.11
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/custom-elements.json +620 -620
- package/dist/docs.json +1 -1
- package/package.json +1 -1
- package/dist/components/index.d.ts +0 -64
- package/dist/components/index.js +0 -127
- package/dist/components/index.js.map +0 -1
- package/dist/components/le-box.d.ts +0 -11
- package/dist/components/le-box.js +0 -256
- package/dist/components/le-box.js.map +0 -1
- package/dist/components/le-button.d.ts +0 -11
- package/dist/components/le-button.js +0 -9
- package/dist/components/le-button.js.map +0 -1
- package/dist/components/le-button2.js +0 -1446
- package/dist/components/le-button2.js.map +0 -1
- package/dist/components/le-card.d.ts +0 -11
- package/dist/components/le-card.js +0 -83
- package/dist/components/le-card.js.map +0 -1
- package/dist/components/le-checkbox.d.ts +0 -11
- package/dist/components/le-checkbox.js +0 -9
- package/dist/components/le-checkbox.js.map +0 -1
- package/dist/components/le-component.d.ts +0 -11
- package/dist/components/le-component.js +0 -9
- package/dist/components/le-component.js.map +0 -1
- package/dist/components/le-number-input.d.ts +0 -11
- package/dist/components/le-number-input.js +0 -271
- package/dist/components/le-number-input.js.map +0 -1
- package/dist/components/le-popover.d.ts +0 -11
- package/dist/components/le-popover.js +0 -9
- package/dist/components/le-popover.js.map +0 -1
- package/dist/components/le-popover2.js +0 -382
- package/dist/components/le-popover2.js.map +0 -1
- package/dist/components/le-popup.d.ts +0 -11
- package/dist/components/le-popup.js +0 -279
- package/dist/components/le-popup.js.map +0 -1
- package/dist/components/le-round-progress.d.ts +0 -11
- package/dist/components/le-round-progress.js +0 -135
- package/dist/components/le-round-progress.js.map +0 -1
- package/dist/components/le-slot.d.ts +0 -11
- package/dist/components/le-slot.js +0 -9
- package/dist/components/le-slot.js.map +0 -1
- package/dist/components/le-stack.d.ts +0 -11
- package/dist/components/le-stack.js +0 -198
- package/dist/components/le-stack.js.map +0 -1
- package/dist/components/le-string-input.d.ts +0 -11
- package/dist/components/le-string-input.js +0 -9
- package/dist/components/le-string-input.js.map +0 -1
- package/dist/components/le-text.d.ts +0 -11
- package/dist/components/le-text.js +0 -398
- package/dist/components/le-text.js.map +0 -1
- package/dist/components/le-turntable.d.ts +0 -11
- package/dist/components/le-turntable.js +0 -164
- package/dist/components/le-turntable.js.map +0 -1
|
@@ -1,1446 +0,0 @@
|
|
|
1
|
-
import { setMode, proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$5 } from './le-popover2.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Global mode initialization for le-kit components.
|
|
6
|
-
*
|
|
7
|
-
* Mode inheritance works as follows:
|
|
8
|
-
* 1. Check the element's own `mode` attribute
|
|
9
|
-
* 2. Traverse up the DOM to find a parent with `mode` attribute
|
|
10
|
-
* 3. Check the document root element (html) for `mode` attribute
|
|
11
|
-
* 4. Fall back to 'default'
|
|
12
|
-
*
|
|
13
|
-
* This allows setting mode at any level:
|
|
14
|
-
* - `<html mode="admin">` - all components in admin mode
|
|
15
|
-
* - `<le-card mode="admin">` - this card and its children in admin mode
|
|
16
|
-
*/
|
|
17
|
-
function initializeMode() {
|
|
18
|
-
setMode((el) => {
|
|
19
|
-
// 1. Check element's own mode attribute
|
|
20
|
-
const ownMode = el.getAttribute('mode');
|
|
21
|
-
if (ownMode) {
|
|
22
|
-
return ownMode;
|
|
23
|
-
}
|
|
24
|
-
// 2. Traverse up the DOM tree to find inherited mode
|
|
25
|
-
let parent = el.parentElement;
|
|
26
|
-
while (parent) {
|
|
27
|
-
const parentMode = parent.getAttribute('mode');
|
|
28
|
-
if (parentMode) {
|
|
29
|
-
return parentMode;
|
|
30
|
-
}
|
|
31
|
-
parent = parent.parentElement;
|
|
32
|
-
}
|
|
33
|
-
// 3. Check document root element
|
|
34
|
-
const rootMode = document.documentElement.getAttribute('mode');
|
|
35
|
-
if (rootMode) {
|
|
36
|
-
return rootMode;
|
|
37
|
-
}
|
|
38
|
-
// 4. Default mode
|
|
39
|
-
return 'default';
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Helper function to get the current mode for an element.
|
|
44
|
-
* Can be used programmatically in components.
|
|
45
|
-
*
|
|
46
|
-
* This function traverses both regular DOM and shadow DOM boundaries
|
|
47
|
-
* to find the nearest mode attribute.
|
|
48
|
-
*/
|
|
49
|
-
function getMode(el) {
|
|
50
|
-
// Check element's own mode
|
|
51
|
-
const ownMode = el.getAttribute('mode');
|
|
52
|
-
if (ownMode) {
|
|
53
|
-
return ownMode;
|
|
54
|
-
}
|
|
55
|
-
// Traverse up DOM, crossing shadow boundaries
|
|
56
|
-
let current = el;
|
|
57
|
-
while (current) {
|
|
58
|
-
// Try parent element first
|
|
59
|
-
if (current instanceof Element && current.parentElement) {
|
|
60
|
-
current = current.parentElement;
|
|
61
|
-
const mode = current.getAttribute?.('mode');
|
|
62
|
-
if (mode) {
|
|
63
|
-
return mode;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
// No parent element - check if we're in a shadow root
|
|
68
|
-
const root = current.getRootNode();
|
|
69
|
-
if (root instanceof ShadowRoot) {
|
|
70
|
-
// Cross the shadow boundary to the host element
|
|
71
|
-
current = root.host;
|
|
72
|
-
const mode = current.getAttribute?.('mode');
|
|
73
|
-
if (mode) {
|
|
74
|
-
return mode;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
// We've reached the document root
|
|
79
|
-
break;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
// Check document root
|
|
84
|
-
const rootMode = document.documentElement.getAttribute('mode');
|
|
85
|
-
if (rootMode) {
|
|
86
|
-
return rootMode;
|
|
87
|
-
}
|
|
88
|
-
return 'default';
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* Helper function to get the current theme for an element.
|
|
92
|
-
* Theme inheritance works the same as mode - cascades through DOM.
|
|
93
|
-
*/
|
|
94
|
-
function getTheme(el) {
|
|
95
|
-
// Check element's own theme
|
|
96
|
-
const ownTheme = el.getAttribute('theme');
|
|
97
|
-
if (ownTheme) {
|
|
98
|
-
return ownTheme;
|
|
99
|
-
}
|
|
100
|
-
// Traverse up DOM
|
|
101
|
-
let parent = el.parentElement;
|
|
102
|
-
while (parent) {
|
|
103
|
-
const parentTheme = parent.getAttribute('theme');
|
|
104
|
-
if (parentTheme) {
|
|
105
|
-
return parentTheme;
|
|
106
|
-
}
|
|
107
|
-
parent = parent.parentElement;
|
|
108
|
-
}
|
|
109
|
-
// Check root
|
|
110
|
-
const rootTheme = document.documentElement.getAttribute('theme');
|
|
111
|
-
if (rootTheme) {
|
|
112
|
-
return rootTheme;
|
|
113
|
-
}
|
|
114
|
-
return 'default';
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Helper function to set mode on the document root.
|
|
118
|
-
* Useful for switching all components to admin mode.
|
|
119
|
-
*/
|
|
120
|
-
function setGlobalMode(mode) {
|
|
121
|
-
document.documentElement.setAttribute('mode', mode);
|
|
122
|
-
}
|
|
123
|
-
/**
|
|
124
|
-
* Helper function to set theme on the document root.
|
|
125
|
-
* Useful for switching all components to a different theme.
|
|
126
|
-
*/
|
|
127
|
-
function setGlobalTheme(theme) {
|
|
128
|
-
document.documentElement.setAttribute('theme', theme);
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Global configuration for le-kit
|
|
132
|
-
*/
|
|
133
|
-
let leKitConfig = {
|
|
134
|
-
/**
|
|
135
|
-
* URL to the custom-elements.json manifest.
|
|
136
|
-
* Used by admin components (le-component, le-slot) to load component metadata.
|
|
137
|
-
*
|
|
138
|
-
* Default: '/custom-elements.json' (served from app root)
|
|
139
|
-
*
|
|
140
|
-
* For apps using le-kit, you may need to:
|
|
141
|
-
* 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder
|
|
142
|
-
* 2. Or set this to point to where the manifest is served
|
|
143
|
-
*/
|
|
144
|
-
manifestUrl: '/custom-elements.json',
|
|
145
|
-
};
|
|
146
|
-
/**
|
|
147
|
-
* Configure le-kit global settings.
|
|
148
|
-
*
|
|
149
|
-
* @example
|
|
150
|
-
* ```ts
|
|
151
|
-
* import { configureLeki } from 'le-kit';
|
|
152
|
-
*
|
|
153
|
-
* configureLeki({
|
|
154
|
-
* manifestUrl: '/assets/custom-elements.json'
|
|
155
|
-
* });
|
|
156
|
-
* ```
|
|
157
|
-
*/
|
|
158
|
-
function configureLeki(config) {
|
|
159
|
-
leKitConfig = { ...leKitConfig, ...config };
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Get the current le-kit configuration.
|
|
163
|
-
*/
|
|
164
|
-
function getLeKitConfig() {
|
|
165
|
-
return leKitConfig;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Utility functions for le-kit components
|
|
170
|
-
*/
|
|
171
|
-
/**
|
|
172
|
-
* Generates a unique ID for component instances
|
|
173
|
-
*/
|
|
174
|
-
function generateId(prefix = 'le') {
|
|
175
|
-
return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* Parses a comma-separated string into an array
|
|
179
|
-
*/
|
|
180
|
-
function parseCommaSeparated(value) {
|
|
181
|
-
if (!value)
|
|
182
|
-
return [];
|
|
183
|
-
return value
|
|
184
|
-
.split(',')
|
|
185
|
-
.map(s => s.trim())
|
|
186
|
-
.filter(Boolean);
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* Checks if a slot has content
|
|
190
|
-
*/
|
|
191
|
-
function slotHasContent(el, slotName = '') {
|
|
192
|
-
const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
|
|
193
|
-
return el.querySelector(selector) !== null;
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Sets up a MutationObserver to track mode changes on ancestor elements.
|
|
197
|
-
* Returns a cleanup function to disconnect the observer.
|
|
198
|
-
*
|
|
199
|
-
* If the element or any ancestor has an explicit `mode` attribute, that creates
|
|
200
|
-
* a "mode boundary" - the mode is determined from that point, not from further up.
|
|
201
|
-
* This allows components like le-popover to force default mode for their children.
|
|
202
|
-
*
|
|
203
|
-
* @param el - The component's host element
|
|
204
|
-
* @param callback - Function to call when mode changes, receives the new mode
|
|
205
|
-
* @returns Cleanup function to disconnect the observer
|
|
206
|
-
*
|
|
207
|
-
* @example
|
|
208
|
-
* ```tsx
|
|
209
|
-
* export class MyComponent {
|
|
210
|
-
* @Element() el: HTMLElement;
|
|
211
|
-
* @State() adminMode: boolean = false;
|
|
212
|
-
* private disconnectModeObserver?: () => void;
|
|
213
|
-
*
|
|
214
|
-
* connectedCallback() {
|
|
215
|
-
* this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
|
|
216
|
-
* this.adminMode = mode === 'admin';
|
|
217
|
-
* });
|
|
218
|
-
* }
|
|
219
|
-
*
|
|
220
|
-
* disconnectedCallback() {
|
|
221
|
-
* this.disconnectModeObserver?.();
|
|
222
|
-
* }
|
|
223
|
-
* }
|
|
224
|
-
* ```
|
|
225
|
-
*/
|
|
226
|
-
function observeModeChanges(el, callback) {
|
|
227
|
-
// Call immediately with current mode
|
|
228
|
-
callback(getMode(el));
|
|
229
|
-
// Set up observer for mode attribute changes
|
|
230
|
-
const observer = new MutationObserver(() => {
|
|
231
|
-
callback(getMode(el));
|
|
232
|
-
});
|
|
233
|
-
// Observe the element itself (for mode boundary changes)
|
|
234
|
-
observer.observe(el, {
|
|
235
|
-
attributes: true,
|
|
236
|
-
attributeFilter: ['mode'],
|
|
237
|
-
});
|
|
238
|
-
// Observe document root
|
|
239
|
-
observer.observe(document.documentElement, {
|
|
240
|
-
attributes: true,
|
|
241
|
-
attributeFilter: ['mode'],
|
|
242
|
-
});
|
|
243
|
-
// Traverse up, crossing shadow boundaries, and observe each element
|
|
244
|
-
let current = el;
|
|
245
|
-
while (current) {
|
|
246
|
-
if (current instanceof Element && current.parentElement) {
|
|
247
|
-
current = current.parentElement;
|
|
248
|
-
observer.observe(current, {
|
|
249
|
-
attributes: true,
|
|
250
|
-
attributeFilter: ['mode'],
|
|
251
|
-
});
|
|
252
|
-
// If this element has an explicit mode, it's a boundary
|
|
253
|
-
if (current.hasAttribute('mode')) {
|
|
254
|
-
break;
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
else {
|
|
258
|
-
// Check if we're in a shadow root
|
|
259
|
-
const root = current.getRootNode();
|
|
260
|
-
if (root instanceof ShadowRoot) {
|
|
261
|
-
// Cross the shadow boundary and observe the host
|
|
262
|
-
current = root.host;
|
|
263
|
-
observer.observe(current, {
|
|
264
|
-
attributes: true,
|
|
265
|
-
attributeFilter: ['mode'],
|
|
266
|
-
});
|
|
267
|
-
// If the host has an explicit mode, it's a boundary
|
|
268
|
-
if (current.hasAttribute('mode')) {
|
|
269
|
-
break;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
else {
|
|
273
|
-
break;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
// Return cleanup function
|
|
278
|
-
return () => observer.disconnect();
|
|
279
|
-
}
|
|
280
|
-
/**
|
|
281
|
-
* Combines multiple class names into a single string, filtering out falsy values.
|
|
282
|
-
*
|
|
283
|
-
* @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
|
|
284
|
-
* @returns Combined class names string
|
|
285
|
-
*/
|
|
286
|
-
function classnames(...classes) {
|
|
287
|
-
const result = [];
|
|
288
|
-
classes.forEach(cls => {
|
|
289
|
-
if (!cls)
|
|
290
|
-
return;
|
|
291
|
-
if (typeof cls === 'string') {
|
|
292
|
-
result.push(cls);
|
|
293
|
-
}
|
|
294
|
-
else if (Array.isArray(cls)) {
|
|
295
|
-
result.push(classnames(...cls));
|
|
296
|
-
}
|
|
297
|
-
else if (typeof cls === 'object') {
|
|
298
|
-
Object.entries(cls).forEach(([key, value]) => {
|
|
299
|
-
if (value) {
|
|
300
|
-
result.push(key);
|
|
301
|
-
}
|
|
302
|
-
});
|
|
303
|
-
}
|
|
304
|
-
});
|
|
305
|
-
return result.join(' ');
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
|
|
309
|
-
|
|
310
|
-
const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput extends HTMLElement {
|
|
311
|
-
constructor(registerHost) {
|
|
312
|
-
super();
|
|
313
|
-
if (registerHost !== false) {
|
|
314
|
-
this.__registerHost();
|
|
315
|
-
}
|
|
316
|
-
this.__attachShadow();
|
|
317
|
-
this.leChange = createEvent(this, "change", 7);
|
|
318
|
-
this.leInput = createEvent(this, "input", 7);
|
|
319
|
-
}
|
|
320
|
-
get el() { return this; }
|
|
321
|
-
/**
|
|
322
|
-
* Mode of the popover should be 'default' for internal use
|
|
323
|
-
*/
|
|
324
|
-
mode;
|
|
325
|
-
/**
|
|
326
|
-
* The value of the input
|
|
327
|
-
*/
|
|
328
|
-
value;
|
|
329
|
-
/**
|
|
330
|
-
* The name of the input
|
|
331
|
-
*/
|
|
332
|
-
name;
|
|
333
|
-
/**
|
|
334
|
-
* The type of the input (text, email, password, etc.)
|
|
335
|
-
*/
|
|
336
|
-
type = 'text';
|
|
337
|
-
/**
|
|
338
|
-
* Label for the input
|
|
339
|
-
*/
|
|
340
|
-
label;
|
|
341
|
-
/**
|
|
342
|
-
* Icon for the start icon
|
|
343
|
-
*/
|
|
344
|
-
iconStart;
|
|
345
|
-
/**
|
|
346
|
-
* Icon for the end icon
|
|
347
|
-
*/
|
|
348
|
-
iconEnd;
|
|
349
|
-
/**
|
|
350
|
-
* Placeholder text
|
|
351
|
-
*/
|
|
352
|
-
placeholder;
|
|
353
|
-
/**
|
|
354
|
-
* Whether the input is disabled
|
|
355
|
-
*/
|
|
356
|
-
disabled = false;
|
|
357
|
-
/**
|
|
358
|
-
* Whether the input is read-only
|
|
359
|
-
*/
|
|
360
|
-
readonly = false;
|
|
361
|
-
/**
|
|
362
|
-
* External ID for linking with external systems
|
|
363
|
-
*/
|
|
364
|
-
externalId;
|
|
365
|
-
/**
|
|
366
|
-
* Emitted when the value changes (on blur or Enter)
|
|
367
|
-
*/
|
|
368
|
-
leChange;
|
|
369
|
-
/**
|
|
370
|
-
* Emitted when the input value changes (on keystroke)
|
|
371
|
-
*/
|
|
372
|
-
leInput;
|
|
373
|
-
handleInput = (ev) => {
|
|
374
|
-
const input = ev.target;
|
|
375
|
-
this.value = input.value;
|
|
376
|
-
this.leInput.emit({
|
|
377
|
-
value: this.value,
|
|
378
|
-
name: this.name,
|
|
379
|
-
externalId: this.externalId
|
|
380
|
-
});
|
|
381
|
-
};
|
|
382
|
-
handleChange = (ev) => {
|
|
383
|
-
const input = ev.target;
|
|
384
|
-
this.value = input.value;
|
|
385
|
-
this.leChange.emit({
|
|
386
|
-
value: this.value,
|
|
387
|
-
name: this.name,
|
|
388
|
-
externalId: this.externalId
|
|
389
|
-
});
|
|
390
|
-
};
|
|
391
|
-
handleClick = (ev) => {
|
|
392
|
-
ev.stopPropagation();
|
|
393
|
-
};
|
|
394
|
-
render() {
|
|
395
|
-
return (h("le-component", { key: 'd0c69370dae2d1fee5700954e4823d2a03a51331', component: "le-string-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '4acae8d3c34da2a86970a616c493ff210d561f5f', class: "le-input-wrapper" }, this.label && (h("label", { key: '609191b45187b6b1a65d05cd594b149760ac6882', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '36b4caff4468ac7421db03f811cb3ef4a622b001', class: "le-input-container" }, this.iconStart && (h("span", { key: '344f88887fe8270bbef7e26ec1ad5da9fae1f8e4', class: "icon-start" }, this.iconStart)), h("input", { key: '4ba7beeddd7fb3cf23d03e029d11a804764cdd6e', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: '7cdd4b52c3e1a1b18b19e697bdb42431941bba01', class: "icon-end" }, this.iconEnd))), h("div", { key: '113a75aa413e4d95300aeaa97d1ce7a75cf68c7a', class: "le-input-description" }, h("le-slot", { key: '0b37fc14e6df68f6c44cf9001d63a70f019e1cc3', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2674056dc915fabdb4fcbcaa13294a116b9509a6', name: "description" }))))));
|
|
396
|
-
}
|
|
397
|
-
static get style() { return leStringInputCss; }
|
|
398
|
-
}, [769, "le-string-input", {
|
|
399
|
-
"mode": [1537],
|
|
400
|
-
"value": [1537],
|
|
401
|
-
"name": [1],
|
|
402
|
-
"type": [1],
|
|
403
|
-
"label": [1],
|
|
404
|
-
"iconStart": [1, "icon-start"],
|
|
405
|
-
"iconEnd": [1, "icon-end"],
|
|
406
|
-
"placeholder": [1],
|
|
407
|
-
"disabled": [4],
|
|
408
|
-
"readonly": [4],
|
|
409
|
-
"externalId": [1, "external-id"]
|
|
410
|
-
}]);
|
|
411
|
-
function defineCustomElement$4() {
|
|
412
|
-
if (typeof customElements === "undefined") {
|
|
413
|
-
return;
|
|
414
|
-
}
|
|
415
|
-
const components = ["le-string-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
416
|
-
components.forEach(tagName => { switch (tagName) {
|
|
417
|
-
case "le-string-input":
|
|
418
|
-
if (!customElements.get(tagName)) {
|
|
419
|
-
customElements.define(tagName, LeStringInput);
|
|
420
|
-
}
|
|
421
|
-
break;
|
|
422
|
-
case "le-button":
|
|
423
|
-
if (!customElements.get(tagName)) {
|
|
424
|
-
defineCustomElement();
|
|
425
|
-
}
|
|
426
|
-
break;
|
|
427
|
-
case "le-checkbox":
|
|
428
|
-
if (!customElements.get(tagName)) {
|
|
429
|
-
defineCustomElement$1();
|
|
430
|
-
}
|
|
431
|
-
break;
|
|
432
|
-
case "le-component":
|
|
433
|
-
if (!customElements.get(tagName)) {
|
|
434
|
-
defineCustomElement$2();
|
|
435
|
-
}
|
|
436
|
-
break;
|
|
437
|
-
case "le-popover":
|
|
438
|
-
if (!customElements.get(tagName)) {
|
|
439
|
-
defineCustomElement$5();
|
|
440
|
-
}
|
|
441
|
-
break;
|
|
442
|
-
case "le-slot":
|
|
443
|
-
if (!customElements.get(tagName)) {
|
|
444
|
-
defineCustomElement$3();
|
|
445
|
-
}
|
|
446
|
-
break;
|
|
447
|
-
case "le-string-input":
|
|
448
|
-
if (!customElements.get(tagName)) {
|
|
449
|
-
defineCustomElement$4();
|
|
450
|
-
}
|
|
451
|
-
break;
|
|
452
|
-
} });
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
const leSlotDefaultCss = ":host{display:contents;--le-slot-border-color:#0088ff;--le-slot-bg-color:rgba(0, 136, 255, 0.05);--le-slot-header-bg:rgb(218, 238, 255);--le-slot-label-color:#0066cc;--le-slot-description-color:#666;--le-slot-required-color:#e53935;--le-slot-dropzone-min-height:20px;--le-slot-dropzone-border-color:#ccc}.le-slot-container,.le-slot-header,.le-slot-description,.le-slot-dropzone,.le-slot-input{display:none}.hidden-slot{display:none}:host(.admin-mode){display:block;flex:1}:host(.admin-mode) .le-slot-container{position:relative;display:flex;flex-direction:column;border:2px dashed var(--le-slot-border-color);border-radius:4px;background:var(--le-slot-bg-color);margin:4px 0}:host(.admin-mode) .le-slot-header{display:flex;align-items:center;gap:4px;padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-slot-header-bg);border-bottom:1px solid var(--le-slot-border-color);font-size:var(--le-font-size-xs, 11px);font-weight:400;text-transform:capitalize}:host(.admin-mode) .le-slot-header-no-label{justify-content:flex-end;height:16px;border:none;background-color:transparent}.le-slot-label{color:var(--le-slot-label-color);text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-slot-required{color:var(--le-slot-required-color);font-weight:bold}:host(.admin-mode) .le-slot-description{display:block;padding:4px 8px;font-size:12px;color:var(--le-slot-description-color);font-style:italic}:host(.admin-mode) .le-slot-description-icon{display:inline-block;font-size:9px;line-height:1;cursor:pointer;color:var(--le-slot-description-color)}:host(.admin-mode) .le-slot-dropzone{display:block;min-height:var(--le-slot-dropzone-min-height);padding:var(--le-spacing-1, 4px);position:relative}:host(.admin-mode) .le-slot-dropzone:empty::before{content:'Drop content here';display:flex;align-items:center;justify-content:center;position:absolute;inset:8px;border:2px dashed var(--le-slot-dropzone-border-color);border-radius:4px;color:#999;font-size:12px;pointer-events:none}:host(.admin-mode.drag-over) .le-slot-container{border-color:#00cc66;background:rgba(0, 204, 102, 0.1)}:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before{border-color:#00cc66;color:#00cc66;content:'Release to drop'}:host(.admin-mode) .le-slot-input{display:block;padding:var(--le-spacing-1, 4px)}:host(.admin-mode) .le-slot-input input,:host(.admin-mode) .le-slot-input textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--le-slot-dropzone-border-color);border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;background:#fff;color:#333;box-sizing:border-box;transition:border-color 0.2s, box-shadow 0.2s}:host(.admin-mode) .le-slot-input input:focus,:host(.admin-mode) .le-slot-input textarea:focus{outline:none;border-color:var(--le-slot-border-color);box-shadow:0 0 0 3px rgba(0, 136, 255, 0.15)}:host(.admin-mode) .le-slot-input input::placeholder,:host(.admin-mode) .le-slot-input textarea::placeholder{color:#999}:host(.admin-mode) .le-slot-input textarea{resize:vertical;min-height:60px}:host(.admin-mode) .le-slot-input slot{display:none}.le-slot-invalid{color:var(--le-slot-required-color);font-size:10px;margin-left:auto;font-weight:normal;text-transform:none}:host(.admin-mode) .le-slot-input.has-error input,:host(.admin-mode) .le-slot-input.has-error textarea{border-color:var(--le-slot-required-color);background:rgba(229, 57, 53, 0.05)}:host(.admin-mode) .le-slot-input.has-error input:focus,:host(.admin-mode) .le-slot-input.has-error textarea:focus{border-color:var(--le-slot-required-color);box-shadow:0 0 0 3px rgba(229, 57, 53, 0.15)}.le-slot-add-btn{font-size:24px;line-height:0px;width:12px;height:12px}.le-slot-header-no-label .le-slot-add-btn{font-size:16px}.le-slot-button{width:20px;height:20px}:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text{height:0}";
|
|
456
|
-
|
|
457
|
-
const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement {
|
|
458
|
-
constructor(registerHost) {
|
|
459
|
-
super();
|
|
460
|
-
if (registerHost !== false) {
|
|
461
|
-
this.__registerHost();
|
|
462
|
-
}
|
|
463
|
-
this.__attachShadow();
|
|
464
|
-
this.leSlotChange = createEvent(this, "leSlotChange", 7);
|
|
465
|
-
}
|
|
466
|
-
get el() { return this; }
|
|
467
|
-
/**
|
|
468
|
-
* The type of slot content.
|
|
469
|
-
* - `slot`: Default, shows a dropzone for components (default)
|
|
470
|
-
* - `text`: Shows a single-line text input
|
|
471
|
-
* - `textarea`: Shows a multi-line text area
|
|
472
|
-
*/
|
|
473
|
-
type = 'slot';
|
|
474
|
-
/**
|
|
475
|
-
* The name of the slot this placeholder represents.
|
|
476
|
-
* Should match the slot name in the parent component.
|
|
477
|
-
*/
|
|
478
|
-
name = '';
|
|
479
|
-
/**
|
|
480
|
-
* Label to display in admin mode.
|
|
481
|
-
* If not provided, the slot name will be used.
|
|
482
|
-
*/
|
|
483
|
-
label;
|
|
484
|
-
/**
|
|
485
|
-
* Description of what content this slot accepts.
|
|
486
|
-
* Shown in admin mode to guide content editors.
|
|
487
|
-
*/
|
|
488
|
-
description;
|
|
489
|
-
/**
|
|
490
|
-
* Comma-separated list of allowed component tags for this slot.
|
|
491
|
-
* Used by CMS to filter available components.
|
|
492
|
-
*
|
|
493
|
-
* @example "le-card,le-button,le-text"
|
|
494
|
-
*/
|
|
495
|
-
allowedComponents;
|
|
496
|
-
/**
|
|
497
|
-
* Whether multiple components can be dropped in this slot.
|
|
498
|
-
*/
|
|
499
|
-
multiple = true;
|
|
500
|
-
/**
|
|
501
|
-
* Whether this slot is required to have content.
|
|
502
|
-
*/
|
|
503
|
-
required = false;
|
|
504
|
-
/**
|
|
505
|
-
* Placeholder text for text/textarea inputs in admin mode.
|
|
506
|
-
*/
|
|
507
|
-
placeholder;
|
|
508
|
-
/**
|
|
509
|
-
* The HTML tag to create when there's no slotted element.
|
|
510
|
-
* Used with type="text" or type="textarea" to auto-create elements.
|
|
511
|
-
*
|
|
512
|
-
* @example "h3" - creates <h3 slot="header">content</h3>
|
|
513
|
-
* @example "p" - creates <p slot="content">content</p>
|
|
514
|
-
*/
|
|
515
|
-
tag;
|
|
516
|
-
/**
|
|
517
|
-
* CSS styles for the slot dropzone container.
|
|
518
|
-
* Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
|
|
519
|
-
* Only applies in admin mode for type="slot".
|
|
520
|
-
*/
|
|
521
|
-
slotStyle;
|
|
522
|
-
/**
|
|
523
|
-
* Internal state to track admin mode
|
|
524
|
-
*/
|
|
525
|
-
adminMode = false;
|
|
526
|
-
/**
|
|
527
|
-
* Internal state for text input value (synced from slot content)
|
|
528
|
-
*/
|
|
529
|
-
textValue = '';
|
|
530
|
-
/**
|
|
531
|
-
* Whether the current textValue contains valid HTML
|
|
532
|
-
*/
|
|
533
|
-
isValidHtml = true;
|
|
534
|
-
/**
|
|
535
|
-
* Available components loaded from Custom Elements Manifest
|
|
536
|
-
*/
|
|
537
|
-
availableComponents = [];
|
|
538
|
-
/**
|
|
539
|
-
* Whether the component picker popover is open
|
|
540
|
-
*/
|
|
541
|
-
pickerOpen = false;
|
|
542
|
-
/**
|
|
543
|
-
* Reference to the slot element to access assignedNodes
|
|
544
|
-
*/
|
|
545
|
-
slotRef;
|
|
546
|
-
/**
|
|
547
|
-
* The original slotted element (e.g., <h3 slot="header">)
|
|
548
|
-
*/
|
|
549
|
-
slottedElement;
|
|
550
|
-
/**
|
|
551
|
-
* Emitted when text content changes in admin mode.
|
|
552
|
-
* The event detail contains the new text value and validity.
|
|
553
|
-
*/
|
|
554
|
-
leSlotChange;
|
|
555
|
-
disconnectModeObserver;
|
|
556
|
-
connectedCallback() {
|
|
557
|
-
this.disconnectModeObserver = observeModeChanges(this.el, mode => {
|
|
558
|
-
const wasAdmin = this.adminMode;
|
|
559
|
-
this.adminMode = mode === 'admin';
|
|
560
|
-
// When entering admin mode, read content from slotted elements
|
|
561
|
-
if (this.adminMode && !wasAdmin) {
|
|
562
|
-
// Need to wait for render to access slot ref
|
|
563
|
-
requestAnimationFrame(() => this.readSlottedContent());
|
|
564
|
-
// Load available components for the component picker
|
|
565
|
-
if (this.type === 'slot') {
|
|
566
|
-
this.loadAvailableComponents();
|
|
567
|
-
}
|
|
568
|
-
}
|
|
569
|
-
});
|
|
570
|
-
}
|
|
571
|
-
disconnectedCallback() {
|
|
572
|
-
this.disconnectModeObserver?.();
|
|
573
|
-
}
|
|
574
|
-
/**
|
|
575
|
-
* Flag to prevent re-reading content right after we updated it
|
|
576
|
-
*/
|
|
577
|
-
isUpdating = false;
|
|
578
|
-
/**
|
|
579
|
-
* Read content from slotted elements via assignedNodes()
|
|
580
|
-
*/
|
|
581
|
-
readSlottedContent() {
|
|
582
|
-
if (!this.slotRef)
|
|
583
|
-
return;
|
|
584
|
-
// Skip if we just updated the content ourselves
|
|
585
|
-
if (this.isUpdating) {
|
|
586
|
-
this.isUpdating = false;
|
|
587
|
-
return;
|
|
588
|
-
}
|
|
589
|
-
const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
|
|
590
|
-
// For text/textarea types, we want to edit the innerHTML of slotted elements
|
|
591
|
-
if (this.type === 'text' || this.type === 'textarea') {
|
|
592
|
-
// Find the first element node (skip text nodes that are just whitespace)
|
|
593
|
-
const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
|
|
594
|
-
if (elementNode) {
|
|
595
|
-
// Only update textValue if slotted element changed or we don't have one yet
|
|
596
|
-
if (this.slottedElement !== elementNode) {
|
|
597
|
-
this.slottedElement = elementNode;
|
|
598
|
-
this.textValue = elementNode.innerHTML?.trim() || '';
|
|
599
|
-
// console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
else {
|
|
603
|
-
// No element, check for direct text content
|
|
604
|
-
const textContent = assignedNodes
|
|
605
|
-
.filter(node => node.nodeType === Node.TEXT_NODE)
|
|
606
|
-
.map(node => node.textContent)
|
|
607
|
-
.join('')
|
|
608
|
-
.trim();
|
|
609
|
-
if (textContent && !this.textValue) {
|
|
610
|
-
this.textValue = textContent;
|
|
611
|
-
// console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
|
|
612
|
-
}
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
/**
|
|
617
|
-
* Validates if a string contains valid HTML
|
|
618
|
-
*/
|
|
619
|
-
validateHtml(html) {
|
|
620
|
-
// Empty string is valid
|
|
621
|
-
if (!html.trim())
|
|
622
|
-
return true;
|
|
623
|
-
// Create a template element to parse the HTML
|
|
624
|
-
const template = document.createElement('template');
|
|
625
|
-
template.innerHTML = html;
|
|
626
|
-
// Check that we don't have obviously broken HTML
|
|
627
|
-
// Count opening and closing tags for common elements
|
|
628
|
-
const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
|
|
629
|
-
const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
|
|
630
|
-
const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
|
|
631
|
-
// Simple validation: opening tags (minus self-closing) should roughly match closing tags
|
|
632
|
-
// Allow some tolerance for void elements like <br>, <img>, etc.
|
|
633
|
-
const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
|
|
634
|
-
const effectiveOpenTags = openTags - selfClosing - voidElements;
|
|
635
|
-
// If difference is too large, HTML is likely broken
|
|
636
|
-
if (Math.abs(effectiveOpenTags - closeTags) > 1) {
|
|
637
|
-
return false;
|
|
638
|
-
}
|
|
639
|
-
return true;
|
|
640
|
-
}
|
|
641
|
-
handleTextInput = (event) => {
|
|
642
|
-
const target = event.target;
|
|
643
|
-
this.textValue = target.value;
|
|
644
|
-
this.isValidHtml = this.validateHtml(this.textValue);
|
|
645
|
-
if (this.isValidHtml) {
|
|
646
|
-
// Set flag to prevent slotchange from re-reading what we just wrote
|
|
647
|
-
this.isUpdating = true;
|
|
648
|
-
console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
|
|
649
|
-
if (this.slottedElement) {
|
|
650
|
-
// Update existing slotted element's innerHTML
|
|
651
|
-
this.slottedElement.innerHTML = this.textValue;
|
|
652
|
-
}
|
|
653
|
-
else if (this.tag && this.textValue) {
|
|
654
|
-
// No slotted element exists
|
|
655
|
-
// If the slot doesn't have a name, then it's the default slot
|
|
656
|
-
// remove the existing non-slotted content (text nodes and elements without slot attribute)
|
|
657
|
-
const rootNode = this.el.getRootNode();
|
|
658
|
-
if (!this.name && rootNode instanceof ShadowRoot) {
|
|
659
|
-
const hostComponent = rootNode.host;
|
|
660
|
-
Array.from(hostComponent.childNodes).forEach(node => {
|
|
661
|
-
if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
|
|
662
|
-
node.remove();
|
|
663
|
-
}
|
|
664
|
-
});
|
|
665
|
-
}
|
|
666
|
-
// create one using the specified tag
|
|
667
|
-
this.createSlottedElement();
|
|
668
|
-
}
|
|
669
|
-
else if (this.textValue) {
|
|
670
|
-
// no tag specified - just replace everything in the host component
|
|
671
|
-
const rootNode = this.el.getRootNode();
|
|
672
|
-
if (rootNode instanceof ShadowRoot) {
|
|
673
|
-
const hostComponent = rootNode.host;
|
|
674
|
-
hostComponent.innerHTML = this.textValue;
|
|
675
|
-
}
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
this.leSlotChange.emit({
|
|
679
|
-
name: this.name,
|
|
680
|
-
value: this.textValue,
|
|
681
|
-
isValid: this.isValidHtml,
|
|
682
|
-
});
|
|
683
|
-
};
|
|
684
|
-
/**
|
|
685
|
-
* Create a new slotted element when none exists.
|
|
686
|
-
* The element is appended to the host component's light DOM.
|
|
687
|
-
*/
|
|
688
|
-
createSlottedElement() {
|
|
689
|
-
if (!this.tag)
|
|
690
|
-
return;
|
|
691
|
-
// Find the host component (le-card, etc.) by traversing up through shadow DOM
|
|
692
|
-
// le-slot is inside le-card's shadow DOM, so we need to find le-card's host
|
|
693
|
-
const rootNode = this.el.getRootNode();
|
|
694
|
-
if (!(rootNode instanceof ShadowRoot))
|
|
695
|
-
return;
|
|
696
|
-
const hostComponent = rootNode.host;
|
|
697
|
-
if (!hostComponent)
|
|
698
|
-
return;
|
|
699
|
-
// Create the new element
|
|
700
|
-
const newElement = document.createElement(this.tag);
|
|
701
|
-
newElement.innerHTML = this.textValue;
|
|
702
|
-
// Set the slot attribute if this is a named slot
|
|
703
|
-
if (this.name) {
|
|
704
|
-
newElement.setAttribute('slot', this.name);
|
|
705
|
-
}
|
|
706
|
-
// Append to the host component's light DOM
|
|
707
|
-
hostComponent.appendChild(newElement);
|
|
708
|
-
// Store reference to the new element
|
|
709
|
-
this.slottedElement = newElement;
|
|
710
|
-
// console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
|
|
711
|
-
}
|
|
712
|
-
/**
|
|
713
|
-
* Load available components from Custom Elements Manifest
|
|
714
|
-
*/
|
|
715
|
-
async loadAvailableComponents() {
|
|
716
|
-
try {
|
|
717
|
-
const { manifestUrl } = getLeKitConfig();
|
|
718
|
-
const response = await fetch(manifestUrl);
|
|
719
|
-
const manifest = await response.json();
|
|
720
|
-
const components = [];
|
|
721
|
-
const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
|
|
722
|
-
for (const module of manifest.modules) {
|
|
723
|
-
for (const declaration of module.declarations || []) {
|
|
724
|
-
if (declaration.tagName && declaration.customElement) {
|
|
725
|
-
// Skip internal components (le-slot, le-component, le-popover)
|
|
726
|
-
const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
|
|
727
|
-
if (isInternal)
|
|
728
|
-
continue;
|
|
729
|
-
// If allowedComponents is specified, filter by it
|
|
730
|
-
if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
|
|
731
|
-
continue;
|
|
732
|
-
}
|
|
733
|
-
components.push({
|
|
734
|
-
tagName: declaration.tagName,
|
|
735
|
-
name: this.formatComponentName(declaration.tagName),
|
|
736
|
-
description: declaration.description || '',
|
|
737
|
-
});
|
|
738
|
-
}
|
|
739
|
-
}
|
|
740
|
-
}
|
|
741
|
-
this.availableComponents = components || [];
|
|
742
|
-
}
|
|
743
|
-
catch (error) {
|
|
744
|
-
console.warn('[le-slot] Failed to load component manifest:', error);
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
/**
|
|
748
|
-
* Format a tag name into a display name
|
|
749
|
-
* e.g., 'le-card' -> 'Card'
|
|
750
|
-
*/
|
|
751
|
-
formatComponentName(tagName) {
|
|
752
|
-
return tagName
|
|
753
|
-
.replace(/^le-/, '')
|
|
754
|
-
.split('-')
|
|
755
|
-
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
756
|
-
.join(' ');
|
|
757
|
-
}
|
|
758
|
-
/**
|
|
759
|
-
* Add a new component to the slot
|
|
760
|
-
*/
|
|
761
|
-
addComponent(tagName) {
|
|
762
|
-
// Find the host component by traversing up through shadow DOM
|
|
763
|
-
const rootNode = this.el.getRootNode();
|
|
764
|
-
if (!(rootNode instanceof ShadowRoot))
|
|
765
|
-
return;
|
|
766
|
-
const hostComponent = rootNode.host;
|
|
767
|
-
if (!hostComponent)
|
|
768
|
-
return;
|
|
769
|
-
// Create the new component element
|
|
770
|
-
const newElement = document.createElement(tagName);
|
|
771
|
-
// Set the slot attribute if this is a named slot
|
|
772
|
-
if (this.name) {
|
|
773
|
-
newElement.setAttribute('slot', this.name);
|
|
774
|
-
}
|
|
775
|
-
// Append to the host component's light DOM
|
|
776
|
-
hostComponent.appendChild(newElement);
|
|
777
|
-
// Emit change event so the page can save
|
|
778
|
-
this.leSlotChange.emit({
|
|
779
|
-
name: this.name,
|
|
780
|
-
value: hostComponent.innerHTML,
|
|
781
|
-
isValid: true,
|
|
782
|
-
});
|
|
783
|
-
}
|
|
784
|
-
/**
|
|
785
|
-
* Handle slot change event to re-read content when nodes are assigned
|
|
786
|
-
*/
|
|
787
|
-
handleSlotChange = () => {
|
|
788
|
-
this.readSlottedContent();
|
|
789
|
-
};
|
|
790
|
-
render() {
|
|
791
|
-
const displayLabel = this.label || this.name;
|
|
792
|
-
// Always render the same structure, CSS handles visibility via .admin-mode class
|
|
793
|
-
return (h(Host, { key: '5ff8f0dd3c07f92e0584450fabf57b89ea0c0a10', class: {
|
|
794
|
-
'admin-mode': this.adminMode,
|
|
795
|
-
'invalid-html': !this.isValidHtml,
|
|
796
|
-
}, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
|
|
797
|
-
'le-slot-header-no-label': !displayLabel,
|
|
798
|
-
'le-slot-header-text': this.type === 'text',
|
|
799
|
-
'le-slot-header-error': !this.isValidHtml,
|
|
800
|
-
}) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => (this.pickerOpen = true), onLePopoverClose: () => (this.pickerOpen = false) }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
|
|
801
|
-
this.addComponent(component.tagName);
|
|
802
|
-
this.pickerOpen = false;
|
|
803
|
-
} }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
|
|
804
|
-
// In default mode, just pass through the slot - slotted content renders naturally
|
|
805
|
-
// Note: We use unnamed slot here because named slots from parent component
|
|
806
|
-
// are passed as le-slot's light DOM children
|
|
807
|
-
h("slot", null))));
|
|
808
|
-
}
|
|
809
|
-
renderContent() {
|
|
810
|
-
// Create the slot element with ref for reading assignedNodes
|
|
811
|
-
// Wrap in a hidden div since slot elements can't have style prop in Stencil
|
|
812
|
-
// Note: We use unnamed slot here because named slots from parent component
|
|
813
|
-
// are passed as le-slot's light DOM children
|
|
814
|
-
const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
|
|
815
|
-
switch (this.type) {
|
|
816
|
-
case 'text':
|
|
817
|
-
return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
|
|
818
|
-
case 'textarea':
|
|
819
|
-
return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("textarea", { value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onInput: this.handleTextInput, required: this.required, rows: 3 }), slotElement));
|
|
820
|
-
case 'slot':
|
|
821
|
-
default:
|
|
822
|
-
// Parse slotStyle string into style object if provided
|
|
823
|
-
const dropzoneStyle = {};
|
|
824
|
-
if (this.slotStyle) {
|
|
825
|
-
this.slotStyle.split(';').forEach(rule => {
|
|
826
|
-
const [prop, value] = rule.split(':').map(s => s.trim());
|
|
827
|
-
if (prop && value) {
|
|
828
|
-
// Convert kebab-case to camelCase for style object
|
|
829
|
-
const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
830
|
-
dropzoneStyle[camelProp] = value;
|
|
831
|
-
}
|
|
832
|
-
});
|
|
833
|
-
}
|
|
834
|
-
return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
|
|
835
|
-
}
|
|
836
|
-
}
|
|
837
|
-
static get style() { return leSlotDefaultCss; }
|
|
838
|
-
}, [769, "le-slot", {
|
|
839
|
-
"type": [1],
|
|
840
|
-
"name": [1],
|
|
841
|
-
"label": [1],
|
|
842
|
-
"description": [1],
|
|
843
|
-
"allowedComponents": [1, "allowed-components"],
|
|
844
|
-
"multiple": [4],
|
|
845
|
-
"required": [4],
|
|
846
|
-
"placeholder": [1],
|
|
847
|
-
"tag": [1],
|
|
848
|
-
"slotStyle": [1, "slot-style"],
|
|
849
|
-
"adminMode": [32],
|
|
850
|
-
"textValue": [32],
|
|
851
|
-
"isValidHtml": [32],
|
|
852
|
-
"availableComponents": [32],
|
|
853
|
-
"pickerOpen": [32]
|
|
854
|
-
}]);
|
|
855
|
-
function defineCustomElement$3() {
|
|
856
|
-
if (typeof customElements === "undefined") {
|
|
857
|
-
return;
|
|
858
|
-
}
|
|
859
|
-
const components = ["le-slot", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
860
|
-
components.forEach(tagName => { switch (tagName) {
|
|
861
|
-
case "le-slot":
|
|
862
|
-
if (!customElements.get(tagName)) {
|
|
863
|
-
customElements.define(tagName, LeSlot);
|
|
864
|
-
}
|
|
865
|
-
break;
|
|
866
|
-
case "le-button":
|
|
867
|
-
if (!customElements.get(tagName)) {
|
|
868
|
-
defineCustomElement();
|
|
869
|
-
}
|
|
870
|
-
break;
|
|
871
|
-
case "le-checkbox":
|
|
872
|
-
if (!customElements.get(tagName)) {
|
|
873
|
-
defineCustomElement$1();
|
|
874
|
-
}
|
|
875
|
-
break;
|
|
876
|
-
case "le-component":
|
|
877
|
-
if (!customElements.get(tagName)) {
|
|
878
|
-
defineCustomElement$2();
|
|
879
|
-
}
|
|
880
|
-
break;
|
|
881
|
-
case "le-popover":
|
|
882
|
-
if (!customElements.get(tagName)) {
|
|
883
|
-
defineCustomElement$5();
|
|
884
|
-
}
|
|
885
|
-
break;
|
|
886
|
-
case "le-slot":
|
|
887
|
-
if (!customElements.get(tagName)) {
|
|
888
|
-
defineCustomElement$3();
|
|
889
|
-
}
|
|
890
|
-
break;
|
|
891
|
-
case "le-string-input":
|
|
892
|
-
if (!customElements.get(tagName)) {
|
|
893
|
-
defineCustomElement$4();
|
|
894
|
-
}
|
|
895
|
-
break;
|
|
896
|
-
} });
|
|
897
|
-
}
|
|
898
|
-
|
|
899
|
-
const leComponentCss = ":host{display:contents}:host(.admin-mode){display:block}.le-component-wrapper{position:relative;border:2px dashed var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px);background:var(--le-admin-bg, rgba(144, 202, 249, 0.05));transition:border-color 0.2s ease, box-shadow 0.2s ease}.le-component-wrapper:hover{border-color:var(--le-admin-border-hover, #42a5f5);box-shadow:0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2))}.le-component-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-spacing-1, 4px);padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));border-bottom:1px solid var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;font-size:var(--le-font-size-xs, 11px)}.le-component-name{font-weight:var(--le-font-weight-medium, 500);color:var(--le-admin-text, #1976d2);text-transform:capitalize;text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-component-content{padding:var(--le-space-xs, 4px)}.le-component-trigger{font-size:24px;line-height:0px;width:12px;height:12px}.le-component-button{width:20px}.property-editor{display:flex;flex-direction:column;gap:var(--le-space-sm, 8px);max-width:380px}.property-field{display:flex;flex-direction:column;gap:var(--le-space-xs, 4px)}.property-field label{display:flex;flex-direction:column;gap:2px;font-size:var(--le-font-size-sm, 13px);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text, #333)}.property-hint{font-size:var(--le-font-size-xs, 11px);font-weight:normal;color:var(--le-color-text-secondary, #666);line-height:1.3}.property-field input[type=\"text\"],.property-field input[type=\"number\"],.property-field select{padding:var(--le-space-xs, 4px) var(--le-space-sm, 8px);border:1px solid var(--le-color-border, #ddd);border-radius:var(--le-radius-md, 7px);font-size:var(--le-font-size-sm, 13px);font-family:inherit;background:var(--le-color-surface, #fff);color:var(--le-color-text, #333);transition:border-color 0.15s ease, box-shadow 0.15s ease}.property-field input:focus,.property-field select:focus{outline:none;border-color:var(--le-color-primary, #1976d2);box-shadow:0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2))}.property-field--checkbox{flex-direction:column}.property-field--checkbox label{flex-direction:row;align-items:center;gap:var(--le-space-sm, 8px);cursor:pointer}.property-field--checkbox input[type=\"checkbox\"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--le-color-primary, #1976d2)}.property-field--checkbox .property-hint{margin-left:24px}.no-properties{margin:0;padding:var(--le-space-sm, 8px);font-size:var(--le-font-size-sm, 13px);color:var(--le-color-text-secondary, #666);text-align:center}.property-editor-container{display:flex;flex-direction:column;gap:var(--le-space-md, 12px)}.property-editor-actions{padding-top:var(--le-space-sm, 8px);border-top:1px solid var(--le-color-border, #e5e5e5)}.delete-component-btn{display:flex;align-items:center;justify-content:center;gap:var(--le-space-xs, 4px);width:100%;padding:var(--le-space-sm, 8px) var(--le-space-md, 12px);border:1px solid var(--le-color-danger, #e53935);border-radius:var(--le-radius-md, 6px);background:transparent;color:var(--le-color-danger, #e53935);font-size:var(--le-font-size-sm, 13px);font-weight:500;cursor:pointer;transition:background-color 0.15s, color 0.15s}.delete-component-btn:hover{background:var(--le-color-danger, #e53935);color:white}.delete-component-btn:active{opacity:0.9}";
|
|
900
|
-
|
|
901
|
-
const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends HTMLElement {
|
|
902
|
-
constructor(registerHost) {
|
|
903
|
-
super();
|
|
904
|
-
if (registerHost !== false) {
|
|
905
|
-
this.__registerHost();
|
|
906
|
-
}
|
|
907
|
-
this.__attachShadow();
|
|
908
|
-
}
|
|
909
|
-
get el() { return this; }
|
|
910
|
-
/**
|
|
911
|
-
* The tag name of the component (e.g., 'le-card').
|
|
912
|
-
* Used to look up property metadata and display the component name.
|
|
913
|
-
*/
|
|
914
|
-
component;
|
|
915
|
-
/**
|
|
916
|
-
* Optional display name for the component.
|
|
917
|
-
* If not provided, the tag name will be formatted as the display name.
|
|
918
|
-
*/
|
|
919
|
-
displayName;
|
|
920
|
-
/**
|
|
921
|
-
* Classes to apply to the host element.
|
|
922
|
-
* Allows parent components to pass their styling classes.
|
|
923
|
-
*/
|
|
924
|
-
hostClass;
|
|
925
|
-
/**
|
|
926
|
-
* Inline styles to apply to the host element.
|
|
927
|
-
* Allows parent components to pass dynamic styles (e.g., flex properties).
|
|
928
|
-
*/
|
|
929
|
-
hostStyle;
|
|
930
|
-
/**
|
|
931
|
-
* Reference to the host element (found automatically from parent)
|
|
932
|
-
*/
|
|
933
|
-
hostElement;
|
|
934
|
-
/**
|
|
935
|
-
* Internal state to track admin mode
|
|
936
|
-
*/
|
|
937
|
-
adminMode = false;
|
|
938
|
-
/**
|
|
939
|
-
* Component metadata loaded from Custom Elements Manifest
|
|
940
|
-
*/
|
|
941
|
-
componentMeta = null;
|
|
942
|
-
/**
|
|
943
|
-
* Current property values of the host component
|
|
944
|
-
*/
|
|
945
|
-
propertyValues = {};
|
|
946
|
-
disconnectModeObserver;
|
|
947
|
-
connectedCallback() {
|
|
948
|
-
// Find the host element - le-component is rendered inside the component's shadow DOM,
|
|
949
|
-
// so we need to find the shadow root's host element
|
|
950
|
-
this.findHostElement();
|
|
951
|
-
this.disconnectModeObserver = observeModeChanges(this.el, mode => {
|
|
952
|
-
this.adminMode = mode === 'admin';
|
|
953
|
-
// Load metadata and refresh property values only when entering admin mode
|
|
954
|
-
if (this.adminMode) {
|
|
955
|
-
if (!this.componentMeta) {
|
|
956
|
-
this.loadComponentMetadata();
|
|
957
|
-
}
|
|
958
|
-
else {
|
|
959
|
-
this.readPropertyValues();
|
|
960
|
-
}
|
|
961
|
-
}
|
|
962
|
-
});
|
|
963
|
-
}
|
|
964
|
-
/**
|
|
965
|
-
* Find the host element by traversing up through shadow DOM
|
|
966
|
-
*/
|
|
967
|
-
findHostElement() {
|
|
968
|
-
// Get the shadow root that contains this le-component
|
|
969
|
-
const rootNode = this.el.getRootNode();
|
|
970
|
-
if (rootNode instanceof ShadowRoot) {
|
|
971
|
-
// The host of this shadow root is our target component (e.g., le-card)
|
|
972
|
-
this.hostElement = rootNode.host;
|
|
973
|
-
}
|
|
974
|
-
}
|
|
975
|
-
componentDidLoad() {
|
|
976
|
-
// Read initial property values from the host element
|
|
977
|
-
this.readPropertyValues();
|
|
978
|
-
}
|
|
979
|
-
disconnectedCallback() {
|
|
980
|
-
this.disconnectModeObserver?.();
|
|
981
|
-
}
|
|
982
|
-
/**
|
|
983
|
-
* Formats a tag name into a display name
|
|
984
|
-
* e.g., 'le-card' -> 'Card'
|
|
985
|
-
*/
|
|
986
|
-
formatDisplayName(tagName) {
|
|
987
|
-
return tagName
|
|
988
|
-
.replace(/^le-/, '') // Remove 'le-' prefix
|
|
989
|
-
.split('-')
|
|
990
|
-
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
991
|
-
.join(' ');
|
|
992
|
-
}
|
|
993
|
-
/**
|
|
994
|
-
* Load component metadata from the Custom Elements Manifest
|
|
995
|
-
*/
|
|
996
|
-
async loadComponentMetadata() {
|
|
997
|
-
try {
|
|
998
|
-
// Fetch the manifest from configured URL
|
|
999
|
-
const { manifestUrl } = getLeKitConfig();
|
|
1000
|
-
const response = await fetch(manifestUrl);
|
|
1001
|
-
const manifest = await response.json();
|
|
1002
|
-
// Find the component definition
|
|
1003
|
-
for (const module of manifest.modules) {
|
|
1004
|
-
for (const declaration of module.declarations || []) {
|
|
1005
|
-
if (declaration.tagName === this.component) {
|
|
1006
|
-
const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
|
|
1007
|
-
this.componentMeta = {
|
|
1008
|
-
tagName: declaration.tagName,
|
|
1009
|
-
description: declaration.description,
|
|
1010
|
-
attributes,
|
|
1011
|
-
};
|
|
1012
|
-
// console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
|
|
1013
|
-
// Read property values after metadata is loaded
|
|
1014
|
-
this.readPropertyValues();
|
|
1015
|
-
return;
|
|
1016
|
-
}
|
|
1017
|
-
}
|
|
1018
|
-
}
|
|
1019
|
-
// console.warn(`[le-component] No metadata found for component: ${this.component}`);
|
|
1020
|
-
}
|
|
1021
|
-
catch (error) {
|
|
1022
|
-
// console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
|
|
1023
|
-
}
|
|
1024
|
-
}
|
|
1025
|
-
/**
|
|
1026
|
-
* Check if an attribute is internal (should not be shown in editor)
|
|
1027
|
-
*/
|
|
1028
|
-
isInternalAttribute(name) {
|
|
1029
|
-
const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
|
|
1030
|
-
return internalAttrs.includes(name);
|
|
1031
|
-
}
|
|
1032
|
-
/**
|
|
1033
|
-
* Read current property values from the host element
|
|
1034
|
-
*/
|
|
1035
|
-
readPropertyValues() {
|
|
1036
|
-
if (!this.hostElement || !this.componentMeta)
|
|
1037
|
-
return;
|
|
1038
|
-
const values = {};
|
|
1039
|
-
for (const attr of this.componentMeta.attributes) {
|
|
1040
|
-
const value = this.hostElement.getAttribute(attr.name);
|
|
1041
|
-
values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
|
|
1042
|
-
}
|
|
1043
|
-
this.propertyValues = values;
|
|
1044
|
-
}
|
|
1045
|
-
/**
|
|
1046
|
-
* Parse an attribute value based on its type
|
|
1047
|
-
*/
|
|
1048
|
-
parseAttributeValue(value, type) {
|
|
1049
|
-
if (value === null)
|
|
1050
|
-
return undefined;
|
|
1051
|
-
if (type === 'boolean') {
|
|
1052
|
-
return value !== null && value !== 'false';
|
|
1053
|
-
}
|
|
1054
|
-
if (type === 'number') {
|
|
1055
|
-
return parseFloat(value);
|
|
1056
|
-
}
|
|
1057
|
-
return value;
|
|
1058
|
-
}
|
|
1059
|
-
/**
|
|
1060
|
-
* Handle property value changes from the editor
|
|
1061
|
-
*/
|
|
1062
|
-
handlePropertyChange(attrName, value, type) {
|
|
1063
|
-
if (!this.hostElement)
|
|
1064
|
-
return;
|
|
1065
|
-
// Update the host element's attribute
|
|
1066
|
-
if (type === 'boolean') {
|
|
1067
|
-
if (value) {
|
|
1068
|
-
this.hostElement.setAttribute(attrName, '');
|
|
1069
|
-
}
|
|
1070
|
-
else {
|
|
1071
|
-
this.hostElement.removeAttribute(attrName);
|
|
1072
|
-
}
|
|
1073
|
-
}
|
|
1074
|
-
else if (value === undefined || value === '') {
|
|
1075
|
-
this.hostElement.removeAttribute(attrName);
|
|
1076
|
-
}
|
|
1077
|
-
else {
|
|
1078
|
-
this.hostElement.setAttribute(attrName, String(value));
|
|
1079
|
-
}
|
|
1080
|
-
// Update local state
|
|
1081
|
-
this.propertyValues = { ...this.propertyValues, [attrName]: value };
|
|
1082
|
-
}
|
|
1083
|
-
/**
|
|
1084
|
-
* Delete this component from the DOM
|
|
1085
|
-
*/
|
|
1086
|
-
deleteComponent() {
|
|
1087
|
-
if (!this.hostElement)
|
|
1088
|
-
return;
|
|
1089
|
-
// Confirm deletion
|
|
1090
|
-
const name = this.displayName || this.formatDisplayName(this.component);
|
|
1091
|
-
if (!confirm(`Delete this ${name}?`))
|
|
1092
|
-
return;
|
|
1093
|
-
// Remove the host element from its parent
|
|
1094
|
-
const parent = this.hostElement.parentElement;
|
|
1095
|
-
if (parent) {
|
|
1096
|
-
this.hostElement.remove();
|
|
1097
|
-
}
|
|
1098
|
-
}
|
|
1099
|
-
/**
|
|
1100
|
-
* Render the property editor form
|
|
1101
|
-
*/
|
|
1102
|
-
renderPropertyEditor() {
|
|
1103
|
-
const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
|
|
1104
|
-
return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
|
|
1105
|
-
}
|
|
1106
|
-
/**
|
|
1107
|
-
* Render a single property field based on its type
|
|
1108
|
-
*/
|
|
1109
|
-
renderPropertyField(attr) {
|
|
1110
|
-
const value = this.propertyValues[attr.name];
|
|
1111
|
-
const type = attr.type?.text || 'string';
|
|
1112
|
-
// Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
|
|
1113
|
-
const enumMatch = type.match(/^'[^']+'/);
|
|
1114
|
-
if (enumMatch) {
|
|
1115
|
-
const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
|
|
1116
|
-
return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
|
|
1117
|
-
}
|
|
1118
|
-
// Boolean type
|
|
1119
|
-
if (type === 'boolean') {
|
|
1120
|
-
return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: e => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
|
|
1121
|
-
}
|
|
1122
|
-
// Number type
|
|
1123
|
-
if (type === 'number') {
|
|
1124
|
-
return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) })));
|
|
1125
|
-
}
|
|
1126
|
-
// Default: string/text input
|
|
1127
|
-
return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
|
|
1128
|
-
}
|
|
1129
|
-
render() {
|
|
1130
|
-
const name = this.displayName || this.formatDisplayName(this.component);
|
|
1131
|
-
// In default mode, just pass through content with host classes
|
|
1132
|
-
if (!this.adminMode) {
|
|
1133
|
-
return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
|
|
1134
|
-
}
|
|
1135
|
-
// In admin mode, show wrapper with header and settings
|
|
1136
|
-
return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
|
|
1137
|
-
}
|
|
1138
|
-
static get style() { return leComponentCss; }
|
|
1139
|
-
}, [769, "le-component", {
|
|
1140
|
-
"component": [1],
|
|
1141
|
-
"displayName": [1, "display-name"],
|
|
1142
|
-
"hostClass": [1, "host-class"],
|
|
1143
|
-
"hostStyle": [16],
|
|
1144
|
-
"adminMode": [32],
|
|
1145
|
-
"componentMeta": [32],
|
|
1146
|
-
"propertyValues": [32]
|
|
1147
|
-
}]);
|
|
1148
|
-
function defineCustomElement$2() {
|
|
1149
|
-
if (typeof customElements === "undefined") {
|
|
1150
|
-
return;
|
|
1151
|
-
}
|
|
1152
|
-
const components = ["le-component", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
1153
|
-
components.forEach(tagName => { switch (tagName) {
|
|
1154
|
-
case "le-component":
|
|
1155
|
-
if (!customElements.get(tagName)) {
|
|
1156
|
-
customElements.define(tagName, LeComponent);
|
|
1157
|
-
}
|
|
1158
|
-
break;
|
|
1159
|
-
case "le-button":
|
|
1160
|
-
if (!customElements.get(tagName)) {
|
|
1161
|
-
defineCustomElement();
|
|
1162
|
-
}
|
|
1163
|
-
break;
|
|
1164
|
-
case "le-checkbox":
|
|
1165
|
-
if (!customElements.get(tagName)) {
|
|
1166
|
-
defineCustomElement$1();
|
|
1167
|
-
}
|
|
1168
|
-
break;
|
|
1169
|
-
case "le-component":
|
|
1170
|
-
if (!customElements.get(tagName)) {
|
|
1171
|
-
defineCustomElement$2();
|
|
1172
|
-
}
|
|
1173
|
-
break;
|
|
1174
|
-
case "le-popover":
|
|
1175
|
-
if (!customElements.get(tagName)) {
|
|
1176
|
-
defineCustomElement$5();
|
|
1177
|
-
}
|
|
1178
|
-
break;
|
|
1179
|
-
case "le-slot":
|
|
1180
|
-
if (!customElements.get(tagName)) {
|
|
1181
|
-
defineCustomElement$3();
|
|
1182
|
-
}
|
|
1183
|
-
break;
|
|
1184
|
-
case "le-string-input":
|
|
1185
|
-
if (!customElements.get(tagName)) {
|
|
1186
|
-
defineCustomElement$4();
|
|
1187
|
-
}
|
|
1188
|
-
break;
|
|
1189
|
-
} });
|
|
1190
|
-
}
|
|
1191
|
-
|
|
1192
|
-
const leCheckboxCss = ":host{display:block;--le-checkbox-size:18px;--le-checkbox-color:var(--le-color-primary, #007bff);--le-checkbox-label-color:var(--le-color-text-primary, #333);--le-checkbox-desc-color:var(--le-color-text-secondary, #666);--le-checkbox-border-radius:var(--le-radius-sm, 2px);--le-checkbox-marker-color:var(--le-color-surface, #fff)}.le-checkbox-wrapper{display:flex;flex-direction:column;gap:4px}.le-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}:host([disabled]) .le-checkbox-label{cursor:not-allowed;opacity:0.6}.le-checkbox-input{display:flex;align-items:center;justify-content:center;min-height:1.4em}input[type=\"checkbox\"]{appearance:none;-webkit-appearance:none;width:var(--le-checkbox-size);height:var(--le-checkbox-size);border:var(--le-border-width, 2px) solid var(--le-checkbox-color);border-radius:var(--le-checkbox-border-radius);margin:0;margin-top:2px;position:relative;cursor:inherit;background-color:transparent;transition:background-color 0.2s, border-color 0.2s}input[type=\"checkbox\"]:checked{background-color:var(--le-checkbox-color)}input[type=\"checkbox\"]:checked::after{content:'';position:absolute;left:0;top:0;bottom:calc(var(--le-checkbox-size) / 5);right:0;margin:auto;width:calc(var(--le-checkbox-size) / 4);height:calc(var(--le-checkbox-size) / 2);border:solid var(--le-checkbox-marker-color, #fff);border-width:0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;transform:rotate(45deg)}input[type=\"checkbox\"]:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-checkbox-text{flex:1;flex-wrap:wrap;color:var(--le-checkbox-label-color);line-height:1.5;text-align:start}.le-checkbox-description{margin-left:calc(var(--le-checkbox-size) + 8px);font-size:0.875em;color:var(--le-checkbox-desc-color);line-height:1.4}:host [slot=\"description\"]{margin:0}";
|
|
1193
|
-
|
|
1194
|
-
const LeCheckbox = /*@__PURE__*/ proxyCustomElement(class LeCheckbox extends HTMLElement {
|
|
1195
|
-
constructor(registerHost) {
|
|
1196
|
-
super();
|
|
1197
|
-
if (registerHost !== false) {
|
|
1198
|
-
this.__registerHost();
|
|
1199
|
-
}
|
|
1200
|
-
this.__attachShadow();
|
|
1201
|
-
this.leChange = createEvent(this, "change", 7);
|
|
1202
|
-
}
|
|
1203
|
-
get el() { return this; }
|
|
1204
|
-
/**
|
|
1205
|
-
* Whether the checkbox is checked
|
|
1206
|
-
*/
|
|
1207
|
-
checked = false;
|
|
1208
|
-
/**
|
|
1209
|
-
* Whether the checkbox is disabled
|
|
1210
|
-
*/
|
|
1211
|
-
disabled = false;
|
|
1212
|
-
/**
|
|
1213
|
-
* The name of the checkbox input
|
|
1214
|
-
*/
|
|
1215
|
-
name;
|
|
1216
|
-
/**
|
|
1217
|
-
* The value of the checkbox input
|
|
1218
|
-
*/
|
|
1219
|
-
value;
|
|
1220
|
-
/**
|
|
1221
|
-
* External ID for linking with external systems (e.g. database ID, PDF form field ID)
|
|
1222
|
-
*/
|
|
1223
|
-
externalId;
|
|
1224
|
-
/**
|
|
1225
|
-
* Emitted when the checked state changes
|
|
1226
|
-
*/
|
|
1227
|
-
leChange;
|
|
1228
|
-
handleChange = (event) => {
|
|
1229
|
-
// We stop the internal button click from bubbling up
|
|
1230
|
-
event.stopPropagation();
|
|
1231
|
-
if (this.disabled) {
|
|
1232
|
-
event.preventDefault();
|
|
1233
|
-
return;
|
|
1234
|
-
}
|
|
1235
|
-
const input = event.target;
|
|
1236
|
-
this.checked = input.checked;
|
|
1237
|
-
this.leChange.emit({
|
|
1238
|
-
checked: this.checked,
|
|
1239
|
-
value: this.value,
|
|
1240
|
-
name: this.name,
|
|
1241
|
-
externalId: this.externalId
|
|
1242
|
-
});
|
|
1243
|
-
};
|
|
1244
|
-
render() {
|
|
1245
|
-
return (h("le-component", { key: '43399929e07835e0019d509803e50a151921fa72', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '7ddbf2ac1690bb09082adfea70b9767c972d007a', class: "le-checkbox-wrapper" }, h("label", { key: '8eec4055c713e8b3b155695751b10bff64c9f903', class: "le-checkbox-label" }, h("span", { key: '2118b1cbe7911ff1674e522d723949d81cade185', class: "le-checkbox-input" }, h("input", { key: 'd0a30af5c14497fa6fa294c07ba74ae2e032481f', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '02cf9588431240039a53ee50e02b08ba5d63b974', class: "le-checkbox-text" }, h("le-slot", { key: 'e7d7b253deab72e627164eb72fc06109abfca6a5', name: "", type: "text", tag: "span" }, h("slot", { key: '1d8c443073e48848513a8a6d04cd7805a394e54e' })))), h("div", { key: '16c2c927dc0c0f7844a203a0628bf0e561009bd0', class: "le-checkbox-description" }, h("le-slot", { key: 'c6898ecc8992dce4786e68ab4b136bf5c3a4d3aa', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: '3342add8ed1400ab74681e445163eeb3dd415941', name: "description" }))))));
|
|
1246
|
-
}
|
|
1247
|
-
static get style() { return leCheckboxCss; }
|
|
1248
|
-
}, [769, "le-checkbox", {
|
|
1249
|
-
"checked": [1540],
|
|
1250
|
-
"disabled": [4],
|
|
1251
|
-
"name": [1],
|
|
1252
|
-
"value": [1],
|
|
1253
|
-
"externalId": [1, "external-id"]
|
|
1254
|
-
}]);
|
|
1255
|
-
function defineCustomElement$1() {
|
|
1256
|
-
if (typeof customElements === "undefined") {
|
|
1257
|
-
return;
|
|
1258
|
-
}
|
|
1259
|
-
const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
1260
|
-
components.forEach(tagName => { switch (tagName) {
|
|
1261
|
-
case "le-checkbox":
|
|
1262
|
-
if (!customElements.get(tagName)) {
|
|
1263
|
-
customElements.define(tagName, LeCheckbox);
|
|
1264
|
-
}
|
|
1265
|
-
break;
|
|
1266
|
-
case "le-button":
|
|
1267
|
-
if (!customElements.get(tagName)) {
|
|
1268
|
-
defineCustomElement();
|
|
1269
|
-
}
|
|
1270
|
-
break;
|
|
1271
|
-
case "le-checkbox":
|
|
1272
|
-
if (!customElements.get(tagName)) {
|
|
1273
|
-
defineCustomElement$1();
|
|
1274
|
-
}
|
|
1275
|
-
break;
|
|
1276
|
-
case "le-component":
|
|
1277
|
-
if (!customElements.get(tagName)) {
|
|
1278
|
-
defineCustomElement$2();
|
|
1279
|
-
}
|
|
1280
|
-
break;
|
|
1281
|
-
case "le-popover":
|
|
1282
|
-
if (!customElements.get(tagName)) {
|
|
1283
|
-
defineCustomElement$5();
|
|
1284
|
-
}
|
|
1285
|
-
break;
|
|
1286
|
-
case "le-slot":
|
|
1287
|
-
if (!customElements.get(tagName)) {
|
|
1288
|
-
defineCustomElement$3();
|
|
1289
|
-
}
|
|
1290
|
-
break;
|
|
1291
|
-
case "le-string-input":
|
|
1292
|
-
if (!customElements.get(tagName)) {
|
|
1293
|
-
defineCustomElement$4();
|
|
1294
|
-
}
|
|
1295
|
-
break;
|
|
1296
|
-
} });
|
|
1297
|
-
}
|
|
1298
|
-
|
|
1299
|
-
const leButtonDefaultCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:0.4rem;--le-button-padding-y:0.4rem;--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-button-icon-aspect-ratio:1;--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding-y) var(--le-button-padding-x);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),\n border-color var(--le-button-transition) var(--le-transition-easing),\n box-shadow var(--le-button-transition) var(--le-transition-easing),\n transform var(--le-button-transition) var(--le-transition-easing)}.button:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.button:active:not(:disabled){transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.button:disabled{opacity:0.5;cursor:not-allowed}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host>le-component.color-secondary{--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host>le-component.color-success{--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host>le-component.color-warning{--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host>le-component.color-danger{--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host>le-component.color-info{--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host>le-component.variant-solid .button{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host>le-component.variant-outlined .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.variant-clear .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .button{--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host>le-component.size-large .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host>le-component.full-width{display:block;width:100%}:host>le-component.selected .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host>le-component.variant-outlined.selected .button,:host>le-component.variant-clear.selected .button{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .button{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .button{padding:0.75rem}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}";
|
|
1300
|
-
|
|
1301
|
-
const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLElement {
|
|
1302
|
-
constructor(registerHost) {
|
|
1303
|
-
super();
|
|
1304
|
-
if (registerHost !== false) {
|
|
1305
|
-
this.__registerHost();
|
|
1306
|
-
}
|
|
1307
|
-
this.__attachShadow();
|
|
1308
|
-
this.leClick = createEvent(this, "click", 7);
|
|
1309
|
-
}
|
|
1310
|
-
get el() { return this; }
|
|
1311
|
-
/**
|
|
1312
|
-
* Mode of the popover should be 'default' for internal use
|
|
1313
|
-
*/
|
|
1314
|
-
mode;
|
|
1315
|
-
/**
|
|
1316
|
-
* Button variant style
|
|
1317
|
-
* @allowedValues solid | outlined | clear
|
|
1318
|
-
*/
|
|
1319
|
-
variant = 'solid';
|
|
1320
|
-
/**
|
|
1321
|
-
* Button color theme (uses theme semantic colors)
|
|
1322
|
-
* @allowedValues primary | secondary | success | warning | danger | info
|
|
1323
|
-
*/
|
|
1324
|
-
color = 'primary';
|
|
1325
|
-
/**
|
|
1326
|
-
* Button size
|
|
1327
|
-
* @allowedValues small | medium | large
|
|
1328
|
-
*/
|
|
1329
|
-
size = 'medium';
|
|
1330
|
-
/**
|
|
1331
|
-
* Whether the button is in a selected/active state
|
|
1332
|
-
*/
|
|
1333
|
-
selected = false;
|
|
1334
|
-
/**
|
|
1335
|
-
* Whether the button takes full width of its container
|
|
1336
|
-
*/
|
|
1337
|
-
fullWidth = false;
|
|
1338
|
-
/**
|
|
1339
|
-
* Whether the button displays only an icon (square aspect ratio)
|
|
1340
|
-
*/
|
|
1341
|
-
iconOnly = false;
|
|
1342
|
-
/**
|
|
1343
|
-
* Whether the button is disabled
|
|
1344
|
-
*/
|
|
1345
|
-
disabled = false;
|
|
1346
|
-
/**
|
|
1347
|
-
* The button type attribute
|
|
1348
|
-
* @allowedValues button | submit | reset
|
|
1349
|
-
*/
|
|
1350
|
-
type = 'button';
|
|
1351
|
-
/**
|
|
1352
|
-
* Optional href to make the button act as a link
|
|
1353
|
-
*/
|
|
1354
|
-
href;
|
|
1355
|
-
/**
|
|
1356
|
-
* Link target when href is set
|
|
1357
|
-
*/
|
|
1358
|
-
target;
|
|
1359
|
-
/**
|
|
1360
|
-
* Emitted when the button is clicked.
|
|
1361
|
-
* This is a custom event that wraps the native click but ensures the target is the le-button.
|
|
1362
|
-
*/
|
|
1363
|
-
leClick;
|
|
1364
|
-
handleClick = (event) => {
|
|
1365
|
-
// We stop the internal button click from bubbling up
|
|
1366
|
-
event.stopPropagation();
|
|
1367
|
-
if (this.disabled) {
|
|
1368
|
-
event.preventDefault();
|
|
1369
|
-
return;
|
|
1370
|
-
}
|
|
1371
|
-
// And emit our own click event from the host element
|
|
1372
|
-
this.leClick.emit(event);
|
|
1373
|
-
};
|
|
1374
|
-
render() {
|
|
1375
|
-
const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
|
|
1376
|
-
'selected': this.selected,
|
|
1377
|
-
'full-width': this.fullWidth,
|
|
1378
|
-
'icon-only': this.iconOnly,
|
|
1379
|
-
'disabled': this.disabled,
|
|
1380
|
-
});
|
|
1381
|
-
const TagType = this.href ? 'a' : 'button';
|
|
1382
|
-
const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
|
|
1383
|
-
return (h("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
|
|
1384
|
-
}
|
|
1385
|
-
static get style() { return leButtonDefaultCss; }
|
|
1386
|
-
}, [769, "le-button", {
|
|
1387
|
-
"mode": [1537],
|
|
1388
|
-
"variant": [1],
|
|
1389
|
-
"color": [1],
|
|
1390
|
-
"size": [1],
|
|
1391
|
-
"selected": [4],
|
|
1392
|
-
"fullWidth": [516, "full-width"],
|
|
1393
|
-
"iconOnly": [4, "icon-only"],
|
|
1394
|
-
"disabled": [4],
|
|
1395
|
-
"type": [1],
|
|
1396
|
-
"href": [1],
|
|
1397
|
-
"target": [1]
|
|
1398
|
-
}]);
|
|
1399
|
-
function defineCustomElement() {
|
|
1400
|
-
if (typeof customElements === "undefined") {
|
|
1401
|
-
return;
|
|
1402
|
-
}
|
|
1403
|
-
const components = ["le-button", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
1404
|
-
components.forEach(tagName => { switch (tagName) {
|
|
1405
|
-
case "le-button":
|
|
1406
|
-
if (!customElements.get(tagName)) {
|
|
1407
|
-
customElements.define(tagName, LeButton);
|
|
1408
|
-
}
|
|
1409
|
-
break;
|
|
1410
|
-
case "le-button":
|
|
1411
|
-
if (!customElements.get(tagName)) {
|
|
1412
|
-
defineCustomElement();
|
|
1413
|
-
}
|
|
1414
|
-
break;
|
|
1415
|
-
case "le-checkbox":
|
|
1416
|
-
if (!customElements.get(tagName)) {
|
|
1417
|
-
defineCustomElement$1();
|
|
1418
|
-
}
|
|
1419
|
-
break;
|
|
1420
|
-
case "le-component":
|
|
1421
|
-
if (!customElements.get(tagName)) {
|
|
1422
|
-
defineCustomElement$2();
|
|
1423
|
-
}
|
|
1424
|
-
break;
|
|
1425
|
-
case "le-popover":
|
|
1426
|
-
if (!customElements.get(tagName)) {
|
|
1427
|
-
defineCustomElement$5();
|
|
1428
|
-
}
|
|
1429
|
-
break;
|
|
1430
|
-
case "le-slot":
|
|
1431
|
-
if (!customElements.get(tagName)) {
|
|
1432
|
-
defineCustomElement$3();
|
|
1433
|
-
}
|
|
1434
|
-
break;
|
|
1435
|
-
case "le-string-input":
|
|
1436
|
-
if (!customElements.get(tagName)) {
|
|
1437
|
-
defineCustomElement$4();
|
|
1438
|
-
}
|
|
1439
|
-
break;
|
|
1440
|
-
} });
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
export { LeButton as L, getMode as a, setGlobalMode as b, getTheme as c, setGlobalTheme as d, configureLeki as e, getLeKitConfig as f, generateId as g, classnames as h, initializeMode as i, defineCustomElement$4 as j, defineCustomElement$3 as k, defineCustomElement$2 as l, defineCustomElement$1 as m, defineCustomElement as n, LeCheckbox as o, parseCommaSeparated as p, LeComponent as q, LeSlot as r, slotHasContent as s, LeStringInput as t, observeModeChanges as u };
|
|
1444
|
-
//# sourceMappingURL=le-button2.js.map
|
|
1445
|
-
|
|
1446
|
-
//# sourceMappingURL=le-button2.js.map
|