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
package/dist/docs.json
CHANGED
package/package.json
CHANGED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/* LeKit custom elements */
|
|
2
|
-
export { LeBox as LeBox } from '../types/components/le-box/le-box';
|
|
3
|
-
export { defineCustomElement as defineCustomElementLeBox } from './le-box';
|
|
4
|
-
export { LeButton as LeButton } from '../types/components/le-button/le-button';
|
|
5
|
-
export { defineCustomElement as defineCustomElementLeButton } from './le-button';
|
|
6
|
-
export { LeCard as LeCard } from '../types/components/le-card/le-card';
|
|
7
|
-
export { defineCustomElement as defineCustomElementLeCard } from './le-card';
|
|
8
|
-
export { LeCheckbox as LeCheckbox } from '../types/components/le-checkbox/le-checkbox';
|
|
9
|
-
export { defineCustomElement as defineCustomElementLeCheckbox } from './le-checkbox';
|
|
10
|
-
export { LeComponent as LeComponent } from '../types/components/le-component/le-component';
|
|
11
|
-
export { defineCustomElement as defineCustomElementLeComponent } from './le-component';
|
|
12
|
-
export { LeNumberInput as LeNumberInput } from '../types/components/le-number-input/le-number-input';
|
|
13
|
-
export { defineCustomElement as defineCustomElementLeNumberInput } from './le-number-input';
|
|
14
|
-
export { LePopover as LePopover } from '../types/components/le-popover/le-popover';
|
|
15
|
-
export { defineCustomElement as defineCustomElementLePopover } from './le-popover';
|
|
16
|
-
export { LePopup as LePopup } from '../types/components/le-popup/le-popup';
|
|
17
|
-
export { defineCustomElement as defineCustomElementLePopup } from './le-popup';
|
|
18
|
-
export { LeRoundProgress as LeRoundProgress } from '../types/components/le-round-progress/le-round-progress';
|
|
19
|
-
export { defineCustomElement as defineCustomElementLeRoundProgress } from './le-round-progress';
|
|
20
|
-
export { LeSlot as LeSlot } from '../types/components/le-slot/le-slot';
|
|
21
|
-
export { defineCustomElement as defineCustomElementLeSlot } from './le-slot';
|
|
22
|
-
export { LeStack as LeStack } from '../types/components/le-stack/le-stack';
|
|
23
|
-
export { defineCustomElement as defineCustomElementLeStack } from './le-stack';
|
|
24
|
-
export { LeStringInput as LeStringInput } from '../types/components/le-string-input/le-string-input';
|
|
25
|
-
export { defineCustomElement as defineCustomElementLeStringInput } from './le-string-input';
|
|
26
|
-
export { LeText as LeText } from '../types/components/le-text/le-text';
|
|
27
|
-
export { defineCustomElement as defineCustomElementLeText } from './le-text';
|
|
28
|
-
export { LeTurntable as LeTurntable } from '../types/components/le-turntable/le-turntable';
|
|
29
|
-
export { defineCustomElement as defineCustomElementLeTurntable } from './le-turntable';
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
|
|
33
|
-
* if the path needs to be customized.
|
|
34
|
-
*/
|
|
35
|
-
export declare const getAssetPath: (path: string) => string;
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Used to manually set the base path where assets can be found.
|
|
39
|
-
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
40
|
-
* such as "setAssetPath(import.meta.url)". Other options include
|
|
41
|
-
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
42
|
-
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
43
|
-
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
44
|
-
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
45
|
-
* will have to ensure the static assets are copied to its build directory.
|
|
46
|
-
*/
|
|
47
|
-
export declare const setAssetPath: (path: string) => void;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Used to specify a nonce value that corresponds with an application's CSP.
|
|
51
|
-
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
52
|
-
* Alternatively, the nonce value can be set on a meta tag in the DOM head
|
|
53
|
-
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
|
|
54
|
-
* will result in the same behavior.
|
|
55
|
-
*/
|
|
56
|
-
export declare const setNonce: (nonce: string) => void
|
|
57
|
-
|
|
58
|
-
export interface SetPlatformOptions {
|
|
59
|
-
raf?: (c: FrameRequestCallback) => number;
|
|
60
|
-
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
61
|
-
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
62
|
-
}
|
|
63
|
-
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
64
|
-
export * from '../types';
|
package/dist/components/index.js
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { i as initializeMode } from './le-button2.js';
|
|
2
|
-
export { e as configureLeki, g as generateId, f as getLeKitConfig, a as getMode, c as getTheme, p as parseCommaSeparated, b as setGlobalMode, d as setGlobalTheme, s as slotHasContent } from './le-button2.js';
|
|
3
|
-
export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
|
|
4
|
-
export { LeBox, defineCustomElement as defineCustomElementLeBox } from './le-box.js';
|
|
5
|
-
export { LeButton, defineCustomElement as defineCustomElementLeButton } from './le-button.js';
|
|
6
|
-
export { LeCard, defineCustomElement as defineCustomElementLeCard } from './le-card.js';
|
|
7
|
-
export { LeCheckbox, defineCustomElement as defineCustomElementLeCheckbox } from './le-checkbox.js';
|
|
8
|
-
export { LeComponent, defineCustomElement as defineCustomElementLeComponent } from './le-component.js';
|
|
9
|
-
export { LeNumberInput, defineCustomElement as defineCustomElementLeNumberInput } from './le-number-input.js';
|
|
10
|
-
export { LePopover, defineCustomElement as defineCustomElementLePopover } from './le-popover.js';
|
|
11
|
-
export { LePopup, defineCustomElement as defineCustomElementLePopup } from './le-popup.js';
|
|
12
|
-
export { LeRoundProgress, defineCustomElement as defineCustomElementLeRoundProgress } from './le-round-progress.js';
|
|
13
|
-
export { LeSlot, defineCustomElement as defineCustomElementLeSlot } from './le-slot.js';
|
|
14
|
-
export { LeStack, defineCustomElement as defineCustomElementLeStack } from './le-stack.js';
|
|
15
|
-
export { LeStringInput, defineCustomElement as defineCustomElementLeStringInput } from './le-string-input.js';
|
|
16
|
-
export { LeText, defineCustomElement as defineCustomElementLeText } from './le-text.js';
|
|
17
|
-
export { LeTurntable, defineCustomElement as defineCustomElementLeTurntable } from './le-turntable.js';
|
|
18
|
-
|
|
19
|
-
const globalScripts = initializeMode;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Programmatic API for le-popup component
|
|
23
|
-
*
|
|
24
|
-
* These functions allow you to show popups without manually creating elements.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* // Alert
|
|
28
|
-
* await leAlert('Something happened!');
|
|
29
|
-
*
|
|
30
|
-
* // Confirm
|
|
31
|
-
* const confirmed = await leConfirm('Are you sure?');
|
|
32
|
-
* if (confirmed) { ... }
|
|
33
|
-
*
|
|
34
|
-
* // Prompt
|
|
35
|
-
* const name = await lePrompt('What is your name?');
|
|
36
|
-
* if (name !== null) { ... }
|
|
37
|
-
*/
|
|
38
|
-
/**
|
|
39
|
-
* Show an alert popup with a message
|
|
40
|
-
* @param message - The message to display
|
|
41
|
-
* @param options - Optional configuration
|
|
42
|
-
* @returns Promise that resolves when closed
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* await leAlert('File saved successfully!');
|
|
46
|
-
* await leAlert('Error occurred', { title: 'Error', theme: 'dark' });
|
|
47
|
-
*/
|
|
48
|
-
async function leAlert(message, options = {}) {
|
|
49
|
-
const popup = createPopupElement(message, { ...options, type: 'alert' });
|
|
50
|
-
document.body.appendChild(popup);
|
|
51
|
-
await popup.show();
|
|
52
|
-
popup.remove();
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Show a confirm popup with OK/Cancel buttons
|
|
56
|
-
* @param message - The message to display
|
|
57
|
-
* @param options - Optional configuration
|
|
58
|
-
* @returns Promise that resolves to true (confirmed) or false (cancelled)
|
|
59
|
-
*
|
|
60
|
-
* @example
|
|
61
|
-
* const confirmed = await leConfirm('Delete this item?');
|
|
62
|
-
* if (confirmed) {
|
|
63
|
-
* deleteItem();
|
|
64
|
-
* }
|
|
65
|
-
*/
|
|
66
|
-
async function leConfirm(message, options = {}) {
|
|
67
|
-
const popup = createPopupElement(message, { ...options, type: 'confirm' });
|
|
68
|
-
document.body.appendChild(popup);
|
|
69
|
-
const result = await popup.show();
|
|
70
|
-
popup.remove();
|
|
71
|
-
return result.confirmed;
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Show a prompt popup with an input field
|
|
75
|
-
* @param message - The message to display
|
|
76
|
-
* @param options - Optional configuration (including defaultValue, placeholder)
|
|
77
|
-
* @returns Promise that resolves to the input value or null if cancelled
|
|
78
|
-
*
|
|
79
|
-
* @example
|
|
80
|
-
* const name = await lePrompt('Enter your name:', {
|
|
81
|
-
* title: 'Welcome',
|
|
82
|
-
* placeholder: 'John Doe',
|
|
83
|
-
* defaultValue: 'Guest'
|
|
84
|
-
* });
|
|
85
|
-
* if (name !== null) {
|
|
86
|
-
* greetUser(name);
|
|
87
|
-
* }
|
|
88
|
-
*/
|
|
89
|
-
async function lePrompt(message, options = {}) {
|
|
90
|
-
const popup = createPopupElement(message, { ...options, type: 'prompt' });
|
|
91
|
-
document.body.appendChild(popup);
|
|
92
|
-
const result = await popup.show();
|
|
93
|
-
popup.remove();
|
|
94
|
-
return result.confirmed ? (result.value ?? '') : null;
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* Create a popup element with the given configuration
|
|
98
|
-
*/
|
|
99
|
-
function createPopupElement(message, options) {
|
|
100
|
-
const popup = document.createElement('le-popup');
|
|
101
|
-
popup.message = message;
|
|
102
|
-
popup.type = options.type || 'alert';
|
|
103
|
-
if (options.title)
|
|
104
|
-
popup.popupTitle = options.title;
|
|
105
|
-
if (options.modal !== undefined)
|
|
106
|
-
popup.modal = options.modal;
|
|
107
|
-
if (options.position)
|
|
108
|
-
popup.position = options.position;
|
|
109
|
-
if (options.confirmText)
|
|
110
|
-
popup.confirmText = options.confirmText;
|
|
111
|
-
if (options.cancelText)
|
|
112
|
-
popup.cancelText = options.cancelText;
|
|
113
|
-
if (options.placeholder)
|
|
114
|
-
popup.placeholder = options.placeholder;
|
|
115
|
-
if (options.defaultValue)
|
|
116
|
-
popup.defaultValue = options.defaultValue;
|
|
117
|
-
if (options.theme)
|
|
118
|
-
popup.setAttribute('theme', options.theme);
|
|
119
|
-
return popup;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
globalScripts();
|
|
123
|
-
|
|
124
|
-
export { leAlert, leConfirm, lePrompt };
|
|
125
|
-
//# sourceMappingURL=index.js.map
|
|
126
|
-
|
|
127
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;AACO,MAAM,aAAa,GAAGA,cAAe;;ACD5C;;;;;;;;;;;;;;;;AAgBG;AAqCH;;;;;;;;;AASG;AACI,eAAe,OAAO,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACvE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACxE,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,KAAK,CAAC,IAAI,EAAE;IAClB,KAAK,CAAC,MAAM,EAAE;AAChB;AAEA;;;;;;;;;;;AAWG;AACI,eAAe,SAAS,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACzE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAC1E,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,EAAE;IACjC,KAAK,CAAC,MAAM,EAAE;IAEd,OAAO,MAAM,CAAC,SAAS;AACzB;AAEA;;;;;;;;;;;;;;;AAeG;AACI,eAAe,QAAQ,CAAC,OAAe,EAAE,UAAwB,EAAE,EAAA;AACxE,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AACzE,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,EAAE;IACjC,KAAK,CAAC,MAAM,EAAE;AAEd,IAAA,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE,IAAI,IAAI;AACvD;AAEA;;AAEG;AACH,SAAS,kBAAkB,CAAC,OAAe,EAAE,OAAqB,EAAA;IAChE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAuB;AAEtE,IAAA,KAAK,CAAC,OAAO,GAAG,OAAO;IACvB,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO;IAEpC,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,KAAK;AACnD,IAAA,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK;IAC5D,IAAI,OAAO,CAAC,QAAQ;AAAE,QAAA,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ;IACvD,IAAI,OAAO,CAAC,WAAW;AAAE,QAAA,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;IAChE,IAAI,OAAO,CAAC,UAAU;AAAE,QAAA,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;IAC7D,IAAI,OAAO,CAAC,WAAW;AAAE,QAAA,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;IAChE,IAAI,OAAO,CAAC,YAAY;AAAE,QAAA,KAAK,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY;IACnE,IAAI,OAAO,CAAC,KAAK;QAAE,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;AAE7D,IAAA,OAAO,KAAK;AACd;;;;;;","names":["appGlobalScript"],"sources":["@stencil/core/internal/app-globals","src/components/le-popup/le-popup.api.ts"],"sourcesContent":["import appGlobalScript from '/Users/andreylechev/Projects/le-kit/src/global/app.ts';\nexport const globalScripts = appGlobalScript;\nexport const globalStyles = \":root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--le-spacing-0:0;--le-spacing-1:0.25rem;--le-spacing-2:0.5rem;--le-spacing-3:0.75rem;--le-spacing-4:1rem;--le-spacing-5:1.25rem;--le-spacing-6:1.5rem;--le-spacing-8:2rem;--le-spacing-10:2.5rem;--le-spacing-12:3rem;--le-spacing-16:4rem;--le-font-family-base:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--le-font-family-mono:'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;--le-font-size-xs:0.75rem;--le-font-size-sm:0.875rem;--le-font-size-md:1rem;--le-font-size-lg:1.125rem;--le-font-size-xl:1.25rem;--le-font-size-2xl:1.5rem;--le-font-size-3xl:1.875rem;--le-font-size-4xl:2.25rem;--le-font-weight-normal:400;--le-font-weight-medium:500;--le-font-weight-semibold:600;--le-font-weight-bold:700;--le-line-height-tight:1.25;--le-line-height-normal:1.5;--le-line-height-relaxed:1.75;--le-radius-none:0;--le-radius-xs:0.066rem;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-transition-fast:100ms;--le-transition-normal:200ms;--le-transition-slow:300ms;--le-transition-easing:cubic-bezier(0.4, 0, 0.2, 1);--le-z-dropdown:1000;--le-z-sticky:1020;--le-z-fixed:1030;--le-z-modal-backdrop:1040;--le-z-modal:1050;--le-z-popover:1060;--le-z-tooltip:1070}:root,[theme=\\\"default\\\"]{--le-color-primary:#0088ff;--le-color-primary-light:#4da6ff;--le-color-primary-dark:#0066cc;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6c757d;--le-color-secondary-light:#868e96;--le-color-secondary-dark:#545b62;--le-color-secondary-contrast:#ffffff;--le-color-success:#28a745;--le-color-success-light:#48c764;--le-color-success-dark:#1e7e34;--le-color-success-contrast:#ffffff;--le-color-warning:#ffc107;--le-color-warning-light:#ffcd39;--le-color-warning-dark:#d39e00;--le-color-warning-contrast:#212529;--le-color-danger:#dc3545;--le-color-danger-light:#e4606d;--le-color-danger-dark:#bd2130;--le-color-danger-contrast:#ffffff;--le-color-info:#17a2b8;--le-color-info-light:#3ab0c3;--le-color-info-dark:#117a8b;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#fafafa;--le-color-gray-100:#f5f5f5;--le-color-gray-200:#eeeeee;--le-color-gray-300:#e0e0e0;--le-color-gray-400:#bdbdbd;--le-color-gray-500:#9e9e9e;--le-color-gray-600:#757575;--le-color-gray-700:#616161;--le-color-gray-800:#424242;--le-color-gray-900:#212121;--le-color-background:#ffffff;--le-color-background-secondary:#f5f5f5;--le-color-background-tertiary:#eeeeee;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#212121;--le-color-text-secondary:#757575;--le-color-text-disabled:#9e9e9e;--le-color-text-inverse:#ffffff;--le-color-border:#e0e0e0;--le-color-border-light:#eeeeee;--le-color-border-dark:#bdbdbd;--le-border-width:2px;--le-color-border-input:#c4d6e6;--le-color-focus:rgba(0, 136, 255, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--le-shadow-md:0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);--le-shadow-lg:0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);--le-shadow-xl:0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);--le-shadow-2xl:0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)}[theme=\\\"dark\\\"]{--le-color-primary:#4da6ff;--le-color-primary-light:#80c1ff;--le-color-primary-dark:#0088ff;--le-color-primary-contrast:#000000;--le-color-secondary:#868e96;--le-color-secondary-light:#adb5bd;--le-color-secondary-dark:#6c757d;--le-color-secondary-contrast:#000000;--le-color-success:#48c764;--le-color-success-light:#6dd587;--le-color-success-dark:#28a745;--le-color-success-contrast:#000000;--le-color-warning:#ffcd39;--le-color-warning-light:#ffda6a;--le-color-warning-dark:#ffc107;--le-color-warning-contrast:#000000;--le-color-danger:#e4606d;--le-color-danger-light:#ea868f;--le-color-danger-dark:#dc3545;--le-color-danger-contrast:#000000;--le-color-info:#3ab0c3;--le-color-info-light:#6dc4d3;--le-color-info-dark:#17a2b8;--le-color-info-contrast:#000000;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#212121;--le-color-gray-100:#424242;--le-color-gray-200:#616161;--le-color-gray-300:#757575;--le-color-gray-400:#9e9e9e;--le-color-gray-500:#bdbdbd;--le-color-gray-600:#e0e0e0;--le-color-gray-700:#eeeeee;--le-color-gray-800:#f5f5f5;--le-color-gray-900:#fafafa;--le-color-background:#121212;--le-color-background-secondary:#1e1e1e;--le-color-background-tertiary:#2d2d2d;--le-color-surface:#1e1e1e;--le-color-surface-elevated:#2d2d2d;--le-color-text-primary:#ffffff;--le-color-text-secondary:#b3b3b3;--le-color-text-disabled:#666666;--le-color-text-inverse:#121212;--le-color-border:#333333;--le-color-border-light:#2d2d2d;--le-color-border-dark:#444444;--le-border-width:2px;--le-color-border-input:#515c6b;--le-color-focus:rgba(77, 166, 255, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3);--le-shadow-md:0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);--le-shadow-lg:0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);--le-shadow-xl:0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);--le-shadow-2xl:0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3)}[theme=\\\"gradient\\\"]{--le-color-primary:#8b5cf6;--le-color-primary-light:#a78bfa;--le-color-primary-dark:#7c3aed;--le-color-primary-contrast:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-light:#f472b6;--le-color-secondary-dark:#db2777;--le-color-secondary-contrast:#ffffff;--le-color-success:#10b981;--le-color-success-light:#34d399;--le-color-success-dark:#059669;--le-color-success-contrast:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-light:#fbbf24;--le-color-warning-dark:#d97706;--le-color-warning-contrast:#000000;--le-color-danger:#ef4444;--le-color-danger-light:#f87171;--le-color-danger-dark:#dc2626;--le-color-danger-contrast:#ffffff;--le-color-info:#06b6d4;--le-color-info-light:#22d3ee;--le-color-info-dark:#0891b2;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#faf5ff;--le-color-gray-100:#f3e8ff;--le-color-gray-200:#e9d5ff;--le-color-gray-300:#d8b4fe;--le-color-gray-400:#c084fc;--le-color-gray-500:#a855f7;--le-color-gray-600:#9333ea;--le-color-gray-700:#7e22ce;--le-color-gray-800:#6b21a8;--le-color-gray-900:#581c87;--le-color-background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--le-color-background-secondary:rgba(255, 255, 255, 0.1);--le-color-background-tertiary:rgba(255, 255, 255, 0.05);--le-color-surface:rgba(255, 255, 255, 0.95);--le-color-surface-elevated:#ffffff;--le-color-text-primary:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:rgba(139, 92, 246, 0.3);--le-color-border-light:rgba(139, 92, 246, 0.1);--le-color-border-dark:rgba(139, 92, 246, 0.5);--le-border-width:2px;--le-color-border-input:#eccddd;--le-color-focus:rgba(139, 92, 246, 0.5);--le-radius-none:0;--le-radius-sm:0.25rem;--le-radius-md:0.5rem;--le-radius-lg:1rem;--le-radius-xl:1.5rem;--le-radius-2xl:2rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(139, 92, 246, 0.1);--le-shadow-md:0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);--le-shadow-lg:0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);--le-shadow-xl:0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);--le-shadow-2xl:0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2)}[theme=\\\"minimal\\\"]{--le-color-primary:#111827;--le-color-primary-light:#374151;--le-color-primary-dark:#030712;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6b7280;--le-color-secondary-light:#9ca3af;--le-color-secondary-dark:#4b5563;--le-color-secondary-contrast:#ffffff;--le-color-success:#059669;--le-color-success-light:#10b981;--le-color-success-dark:#047857;--le-color-success-contrast:#ffffff;--le-color-warning:#d97706;--le-color-warning-light:#f59e0b;--le-color-warning-dark:#b45309;--le-color-warning-contrast:#ffffff;--le-color-danger:#dc2626;--le-color-danger-light:#ef4444;--le-color-danger-dark:#b91c1c;--le-color-danger-contrast:#ffffff;--le-color-info:#0284c7;--le-color-info-light:#0ea5e9;--le-color-info-dark:#0369a1;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#f9fafb;--le-color-gray-100:#f3f4f6;--le-color-gray-200:#e5e7eb;--le-color-gray-300:#d1d5db;--le-color-gray-400:#9ca3af;--le-color-gray-500:#6b7280;--le-color-gray-600:#4b5563;--le-color-gray-700:#374151;--le-color-gray-800:#1f2937;--le-color-gray-900:#111827;--le-color-background:#ffffff;--le-color-background-secondary:#fafafa;--le-color-background-tertiary:#f5f5f5;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#111827;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-light:#f3f4f6;--le-color-border-dark:#d1d5db;--le-border-width:1px;--le-color-border-input:#c8cfdd;--le-color-focus:rgba(17, 24, 39, 0.3);--le-radius-none:0;--le-radius-sm:0;--le-radius-md:2px;--le-radius-lg:4px;--le-radius-xl:6px;--le-radius-2xl:8px;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:none;--le-shadow-md:0 1px 2px rgba(0, 0, 0, 0.05);--le-shadow-lg:0 1px 3px rgba(0, 0, 0, 0.08);--le-shadow-xl:0 2px 4px rgba(0, 0, 0, 0.1);--le-shadow-2xl:0 4px 8px rgba(0, 0, 0, 0.1)}[theme=\\\"warm\\\"]{--le-color-primary:#ea580c;--le-color-primary-light:#fb923c;--le-color-primary-dark:#c2410c;--le-color-primary-contrast:#ffffff;--le-color-secondary:#b45309;--le-color-secondary-light:#d97706;--le-color-secondary-dark:#92400e;--le-color-secondary-contrast:#ffffff;--le-color-success:#16a34a;--le-color-success-light:#22c55e;--le-color-success-dark:#15803d;--le-color-success-contrast:#ffffff;--le-color-warning:#ca8a04;--le-color-warning-light:#eab308;--le-color-warning-dark:#a16207;--le-color-warning-contrast:#000000;--le-color-danger:#dc2626;--le-color-danger-light:#ef4444;--le-color-danger-dark:#b91c1c;--le-color-danger-contrast:#ffffff;--le-color-info:#0891b2;--le-color-info-light:#06b6d4;--le-color-info-dark:#0e7490;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#fffbeb;--le-color-gray-100:#fef3c7;--le-color-gray-200:#fde68a;--le-color-gray-300:#fcd34d;--le-color-gray-400:#fbbf24;--le-color-gray-500:#f59e0b;--le-color-gray-600:#d97706;--le-color-gray-700:#b45309;--le-color-gray-800:#92400e;--le-color-gray-900:#78350f;--le-color-background:#fffbeb;--le-color-background-secondary:#fef3c7;--le-color-background-tertiary:#fde68a;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#78350f;--le-color-text-secondary:#92400e;--le-color-text-disabled:#d97706;--le-color-text-inverse:#ffffff;--le-color-border:#fcd34d;--le-color-border-light:#fde68a;--le-color-border-dark:#fbbf24;--le-border-width:2px;--le-color-border-input:#e7d4c4;--le-color-focus:rgba(234, 88, 12, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.375rem;--le-radius-lg:0.625rem;--le-radius-xl:0.875rem;--le-radius-2xl:1.125rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(234, 88, 12, 0.05);--le-shadow-md:0 4px 6px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.06);--le-shadow-lg:0 10px 15px rgba(234, 88, 12, 0.15), 0 4px 6px rgba(234, 88, 12, 0.08);--le-shadow-xl:0 20px 25px rgba(234, 88, 12, 0.15), 0 10px 10px rgba(234, 88, 12, 0.1);--le-shadow-2xl:0 25px 50px rgba(234, 88, 12, 0.2), 0 12px 24px rgba(234, 88, 12, 0.12)}:root{--le-space-xs:4px;--le-space-sm:8px;--le-space-md:16px;--le-space-lg:24px;--le-space-xl:32px;--le-space-2xl:48px;--le-space-3xl:64px;--le-font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--le-font-family-mono:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;--le-font-size-xs:0.75rem;--le-font-size-sm:0.875rem;--le-font-size-md:1rem;--le-font-size-lg:1.125rem;--le-font-size-xl:1.25rem;--le-font-size-2xl:1.5rem;--le-font-size-3xl:2rem;--le-font-size-4xl:2.5rem;--le-font-weight-normal:400;--le-font-weight-medium:500;--le-font-weight-semibold:600;--le-font-weight-bold:700;--le-line-height-tight:1.25;--le-line-height-normal:1.5;--le-line-height-relaxed:1.75;--le-transition-fast:150ms ease;--le-transition-normal:250ms ease;--le-transition-slow:400ms ease;--le-transition-bounce:400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);--le-z-dropdown:1000;--le-z-sticky:1020;--le-z-fixed:1030;--le-z-modal-backdrop:1040;--le-z-modal:1050;--le-z-popover:1060;--le-z-tooltip:1070}:root,[theme=\\\"default\\\"]{--le-color-primary:#3b82f6;--le-color-primary-hover:#2563eb;--le-color-primary-active:#1d4ed8;--le-color-primary-subtle:#eff6ff;--le-color-on-primary:#ffffff;--le-color-secondary:#64748b;--le-color-secondary-hover:#475569;--le-color-secondary-active:#334155;--le-color-secondary-subtle:#f1f5f9;--le-color-on-secondary:#ffffff;--le-color-success:#22c55e;--le-color-success-subtle:#f0fdf4;--le-color-on-success:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#ef4444;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#06b6d4;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#ffffff;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.5);--le-color-text:#1e293b;--le-color-text-secondary:#64748b;--le-color-text-muted:#94a3b8;--le-color-text-inverse:#ffffff;--le-color-border:#e2e8f0;--le-color-border-strong:#cbd5e1;--le-color-border-focus:var(--le-color-primary);--le-radius-none:0;--le-radius-sm:4px;--le-radius-md:7px;--le-radius-lg:12px;--le-radius-xl:16px;--le-radius-2xl:24px;--le-radius-full:9999px;--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--le-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--le-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--le-shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--le-shadow-focus:0 0 0 3px rgba(59, 130, 246, 0.3)}[theme=\\\"dark\\\"]{--le-color-primary:#60a5fa;--le-color-primary-hover:#93c5fd;--le-color-primary-active:#3b82f6;--le-color-primary-subtle:#1e3a5f;--le-color-on-primary:#0f172a;--le-color-secondary:#94a3b8;--le-color-secondary-hover:#cbd5e1;--le-color-secondary-active:#64748b;--le-color-secondary-subtle:#1e293b;--le-color-on-secondary:#0f172a;--le-color-success:#4ade80;--le-color-success-subtle:#14532d;--le-color-on-success:#0f172a;--le-color-warning:#fbbf24;--le-color-warning-subtle:#422006;--le-color-on-warning:#0f172a;--le-color-error:#f87171;--le-color-error-subtle:#450a0a;--le-color-on-error:#0f172a;--le-color-info:#22d3ee;--le-color-info-subtle:#164e63;--le-color-on-info:#0f172a;--le-color-background:#0f172a;--le-color-surface:#1e293b;--le-color-surface-raised:#334155;--le-color-surface-overlay:rgba(0, 0, 0, 0.7);--le-color-text:#f1f5f9;--le-color-text-secondary:#94a3b8;--le-color-text-muted:#64748b;--le-color-text-inverse:#0f172a;--le-color-border:#334155;--le-color-border-strong:#475569;--le-color-border-focus:var(--le-color-primary);--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.3);--le-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--le-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);--le-shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--le-shadow-focus:0 0 0 3px rgba(96, 165, 250, 0.4)}[theme=\\\"gradient\\\"]{--le-color-primary:#8b5cf6;--le-color-primary-hover:#a78bfa;--le-color-primary-active:#7c3aed;--le-color-primary-subtle:#f5f3ff;--le-color-on-primary:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-hover:#f472b6;--le-color-secondary-active:#db2777;--le-color-secondary-subtle:#fdf2f8;--le-color-on-secondary:#ffffff;--le-color-success:#10b981;--le-color-success-subtle:#ecfdf5;--le-color-on-success:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#f43f5e;--le-color-error-subtle:#fff1f2;--le-color-on-error:#ffffff;--le-color-info:#06b6d4;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #fff7ed 100%);--le-color-surface:rgba(255, 255, 255, 0.9);--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(139, 92, 246, 0.3);--le-color-text:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:rgba(139, 92, 246, 0.2);--le-color-border-strong:rgba(139, 92, 246, 0.4);--le-color-border-focus:var(--le-color-primary);--le-radius-sm:6px;--le-radius-md:12px;--le-radius-lg:16px;--le-radius-xl:20px;--le-radius-2xl:28px;--le-shadow-sm:0 1px 3px 0 rgba(139, 92, 246, 0.1);--le-shadow-md:0 4px 6px -1px rgba(139, 92, 246, 0.15), 0 2px 4px -2px rgba(236, 72, 153, 0.1);--le-shadow-lg:0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.15);--le-shadow-xl:0 20px 25px -5px rgba(139, 92, 246, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.2);--le-shadow-focus:0 0 0 3px rgba(139, 92, 246, 0.4)}[theme=\\\"minimal\\\"]{--le-color-primary:#374151;--le-color-primary-hover:#1f2937;--le-color-primary-active:#111827;--le-color-primary-subtle:#f3f4f6;--le-color-on-primary:#ffffff;--le-color-secondary:#9ca3af;--le-color-secondary-hover:#6b7280;--le-color-secondary-active:#4b5563;--le-color-secondary-subtle:#f9fafb;--le-color-on-secondary:#ffffff;--le-color-success:#059669;--le-color-success-subtle:#f0fdf4;--le-color-on-success:#ffffff;--le-color-warning:#d97706;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#ffffff;--le-color-error:#dc2626;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#0891b2;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#fafafa;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.4);--le-color-text:#111827;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-strong:#d1d5db;--le-color-border-focus:var(--le-color-primary);--le-radius-none:0;--le-radius-sm:2px;--le-radius-md:4px;--le-radius-lg:6px;--le-radius-xl:8px;--le-radius-2xl:12px;--le-radius-full:9999px;--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.03);--le-shadow-md:0 2px 4px -1px rgba(0, 0, 0, 0.06);--le-shadow-lg:0 4px 8px -2px rgba(0, 0, 0, 0.08);--le-shadow-xl:0 8px 16px -4px rgba(0, 0, 0, 0.1);--le-shadow-focus:0 0 0 2px rgba(55, 65, 81, 0.2)}[theme=\\\"warm\\\"]{--le-color-primary:#ea580c;--le-color-primary-hover:#f97316;--le-color-primary-active:#c2410c;--le-color-primary-subtle:#fff7ed;--le-color-on-primary:#ffffff;--le-color-secondary:#78716c;--le-color-secondary-hover:#57534e;--le-color-secondary-active:#44403c;--le-color-secondary-subtle:#fafaf9;--le-color-on-secondary:#ffffff;--le-color-success:#65a30d;--le-color-success-subtle:#f7fee7;--le-color-on-success:#ffffff;--le-color-warning:#d97706;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#dc2626;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#0891b2;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#fffbf5;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(120, 53, 15, 0.4);--le-color-text:#292524;--le-color-text-secondary:#78716c;--le-color-text-muted:#a8a29e;--le-color-text-inverse:#ffffff;--le-color-border:#e7e5e4;--le-color-border-strong:#d6d3d1;--le-color-border-focus:var(--le-color-primary);--le-radius-sm:4px;--le-radius-md:8px;--le-radius-lg:12px;--le-radius-xl:16px;--le-radius-2xl:24px;--le-shadow-sm:0 1px 2px 0 rgba(120, 53, 15, 0.05);--le-shadow-md:0 4px 6px -1px rgba(120, 53, 15, 0.1), 0 2px 4px -2px rgba(120, 53, 15, 0.08);--le-shadow-lg:0 10px 15px -3px rgba(120, 53, 15, 0.12), 0 4px 6px -4px rgba(120, 53, 15, 0.1);--le-shadow-xl:0 20px 25px -5px rgba(120, 53, 15, 0.15), 0 8px 10px -6px rgba(120, 53, 15, 0.12);--le-shadow-focus:0 0 0 3px rgba(234, 88, 12, 0.3)}\";\n","/**\n * Programmatic API for le-popup component\n * \n * These functions allow you to show popups without manually creating elements.\n * \n * @example\n * // Alert\n * await leAlert('Something happened!');\n * \n * // Confirm\n * const confirmed = await leConfirm('Are you sure?');\n * if (confirmed) { ... }\n * \n * // Prompt\n * const name = await lePrompt('What is your name?');\n * if (name !== null) { ... }\n */\n\nimport type { PopupType, PopupPosition, PopupResult } from './le-popup';\n\n/**\n * Options for programmatic popup functions\n */\nexport interface PopupOptions {\n title?: string;\n type?: PopupType;\n modal?: boolean;\n position?: PopupPosition;\n confirmText?: string;\n cancelText?: string;\n placeholder?: string;\n defaultValue?: string;\n theme?: string;\n}\n\n/**\n * Interface for the le-popup custom element\n */\ninterface HTMLLePopupElement extends HTMLElement {\n open: boolean;\n type: PopupType;\n popupTitle?: string;\n message?: string;\n modal: boolean;\n position: PopupPosition;\n confirmText: string;\n cancelText: string;\n placeholder: string;\n defaultValue: string;\n show(): Promise<PopupResult>;\n hide(confirmed?: boolean): Promise<void>;\n}\n\n/**\n * Show an alert popup with a message\n * @param message - The message to display\n * @param options - Optional configuration\n * @returns Promise that resolves when closed\n * \n * @example\n * await leAlert('File saved successfully!');\n * await leAlert('Error occurred', { title: 'Error', theme: 'dark' });\n */\nexport async function leAlert(message: string, options: PopupOptions = {}): Promise<void> {\n const popup = createPopupElement(message, { ...options, type: 'alert' });\n document.body.appendChild(popup);\n \n await popup.show();\n popup.remove();\n}\n\n/**\n * Show a confirm popup with OK/Cancel buttons\n * @param message - The message to display\n * @param options - Optional configuration\n * @returns Promise that resolves to true (confirmed) or false (cancelled)\n * \n * @example\n * const confirmed = await leConfirm('Delete this item?');\n * if (confirmed) {\n * deleteItem();\n * }\n */\nexport async function leConfirm(message: string, options: PopupOptions = {}): Promise<boolean> {\n const popup = createPopupElement(message, { ...options, type: 'confirm' });\n document.body.appendChild(popup);\n \n const result = await popup.show();\n popup.remove();\n \n return result.confirmed;\n}\n\n/**\n * Show a prompt popup with an input field\n * @param message - The message to display\n * @param options - Optional configuration (including defaultValue, placeholder)\n * @returns Promise that resolves to the input value or null if cancelled\n * \n * @example\n * const name = await lePrompt('Enter your name:', { \n * title: 'Welcome',\n * placeholder: 'John Doe',\n * defaultValue: 'Guest'\n * });\n * if (name !== null) {\n * greetUser(name);\n * }\n */\nexport async function lePrompt(message: string, options: PopupOptions = {}): Promise<string | null> {\n const popup = createPopupElement(message, { ...options, type: 'prompt' });\n document.body.appendChild(popup);\n \n const result = await popup.show();\n popup.remove();\n \n return result.confirmed ? (result.value ?? '') : null;\n}\n\n/**\n * Create a popup element with the given configuration\n */\nfunction createPopupElement(message: string, options: PopupOptions): HTMLLePopupElement {\n const popup = document.createElement('le-popup') as HTMLLePopupElement;\n \n popup.message = message;\n popup.type = options.type || 'alert';\n \n if (options.title) popup.popupTitle = options.title;\n if (options.modal !== undefined) popup.modal = options.modal;\n if (options.position) popup.position = options.position;\n if (options.confirmText) popup.confirmText = options.confirmText;\n if (options.cancelText) popup.cancelText = options.cancelText;\n if (options.placeholder) popup.placeholder = options.placeholder;\n if (options.defaultValue) popup.defaultValue = options.defaultValue;\n if (options.theme) popup.setAttribute('theme', options.theme);\n \n return popup;\n}\n"],"version":3}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface LeBox extends Components.LeBox, HTMLElement {}
|
|
4
|
-
export const LeBox: {
|
|
5
|
-
prototype: LeBox;
|
|
6
|
-
new (): LeBox;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { h as classnames, j as defineCustomElement$2, k as defineCustomElement$3, l as defineCustomElement$5, m as defineCustomElement$6, n as defineCustomElement$7 } from './le-button2.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './le-popover2.js';
|
|
4
|
-
|
|
5
|
-
const leBoxDefaultCss = ":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}";
|
|
6
|
-
|
|
7
|
-
const LeBox$1 = /*@__PURE__*/ proxyCustomElement(class LeBox extends HTMLElement {
|
|
8
|
-
constructor(registerHost) {
|
|
9
|
-
super();
|
|
10
|
-
if (registerHost !== false) {
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
}
|
|
13
|
-
this.__attachShadow();
|
|
14
|
-
}
|
|
15
|
-
get el() { return this; }
|
|
16
|
-
/**
|
|
17
|
-
* Flex grow factor - how much the item should grow relative to siblings
|
|
18
|
-
* @min 0
|
|
19
|
-
*/
|
|
20
|
-
grow = 0;
|
|
21
|
-
/**
|
|
22
|
-
* Flex shrink factor - how much the item should shrink relative to siblings
|
|
23
|
-
* @min 0
|
|
24
|
-
*/
|
|
25
|
-
shrink = 1;
|
|
26
|
-
/**
|
|
27
|
-
* Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
|
|
28
|
-
*/
|
|
29
|
-
basis = 'auto';
|
|
30
|
-
/**
|
|
31
|
-
* Width of the box (CSS value like '100px', '50%', 'auto')
|
|
32
|
-
*/
|
|
33
|
-
width;
|
|
34
|
-
/**
|
|
35
|
-
* Height of the box (CSS value)
|
|
36
|
-
*/
|
|
37
|
-
height;
|
|
38
|
-
/**
|
|
39
|
-
* Minimum width constraint
|
|
40
|
-
*/
|
|
41
|
-
minWidth;
|
|
42
|
-
/**
|
|
43
|
-
* Maximum width constraint
|
|
44
|
-
*/
|
|
45
|
-
maxWidth;
|
|
46
|
-
/**
|
|
47
|
-
* Minimum height constraint
|
|
48
|
-
*/
|
|
49
|
-
minHeight;
|
|
50
|
-
/**
|
|
51
|
-
* Maximum height constraint
|
|
52
|
-
*/
|
|
53
|
-
maxHeight;
|
|
54
|
-
/**
|
|
55
|
-
* Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
|
|
56
|
-
*/
|
|
57
|
-
background;
|
|
58
|
-
/**
|
|
59
|
-
* Border radius (e.g., '8px', 'var(--le-radius-md)')
|
|
60
|
-
*/
|
|
61
|
-
borderRadius;
|
|
62
|
-
/**
|
|
63
|
-
* Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
|
|
64
|
-
*/
|
|
65
|
-
border;
|
|
66
|
-
/**
|
|
67
|
-
* Self-alignment override for this item on the cross axis
|
|
68
|
-
* @allowedValues auto | start | center | end | stretch | baseline
|
|
69
|
-
*/
|
|
70
|
-
alignSelf = 'auto';
|
|
71
|
-
/**
|
|
72
|
-
* Internal horizontal alignment of content
|
|
73
|
-
* @allowedValues start | center | end | stretch
|
|
74
|
-
*/
|
|
75
|
-
alignContent = 'stretch';
|
|
76
|
-
/**
|
|
77
|
-
* Internal vertical alignment of content
|
|
78
|
-
* @allowedValues start | center | end | stretch
|
|
79
|
-
*/
|
|
80
|
-
justifyContent = 'start';
|
|
81
|
-
/**
|
|
82
|
-
* Padding inside the box (CSS value like '8px', '1rem')
|
|
83
|
-
*/
|
|
84
|
-
padding;
|
|
85
|
-
/**
|
|
86
|
-
* Order in the flex container (lower values come first)
|
|
87
|
-
*/
|
|
88
|
-
order;
|
|
89
|
-
/**
|
|
90
|
-
* Whether to display box content as flex (for internal alignment)
|
|
91
|
-
*/
|
|
92
|
-
displayFlex = false;
|
|
93
|
-
/**
|
|
94
|
-
* Direction of internal flex layout when displayFlex is true
|
|
95
|
-
* @allowedValues horizontal | vertical
|
|
96
|
-
*/
|
|
97
|
-
innerDirection = 'vertical';
|
|
98
|
-
/**
|
|
99
|
-
* Gap between internal flex items when displayFlex is true
|
|
100
|
-
*/
|
|
101
|
-
innerGap;
|
|
102
|
-
getAlignSelf() {
|
|
103
|
-
const alignMap = {
|
|
104
|
-
auto: 'auto',
|
|
105
|
-
start: 'flex-start',
|
|
106
|
-
center: 'center',
|
|
107
|
-
end: 'flex-end',
|
|
108
|
-
stretch: 'stretch',
|
|
109
|
-
baseline: 'baseline',
|
|
110
|
-
};
|
|
111
|
-
return alignMap[this.alignSelf] || 'auto';
|
|
112
|
-
}
|
|
113
|
-
getContentAlign() {
|
|
114
|
-
const alignMap = {
|
|
115
|
-
start: 'flex-start',
|
|
116
|
-
center: 'center',
|
|
117
|
-
end: 'flex-end',
|
|
118
|
-
stretch: 'stretch',
|
|
119
|
-
};
|
|
120
|
-
return alignMap[this.alignContent] || 'stretch';
|
|
121
|
-
}
|
|
122
|
-
getContentJustify() {
|
|
123
|
-
const justifyMap = {
|
|
124
|
-
start: 'flex-start',
|
|
125
|
-
center: 'center',
|
|
126
|
-
end: 'flex-end',
|
|
127
|
-
stretch: 'stretch',
|
|
128
|
-
};
|
|
129
|
-
return justifyMap[this.justifyContent] || 'flex-start';
|
|
130
|
-
}
|
|
131
|
-
render() {
|
|
132
|
-
// Host styles for flex item behavior
|
|
133
|
-
const hostStyle = {
|
|
134
|
-
flexGrow: String(this.grow),
|
|
135
|
-
flexShrink: String(this.shrink),
|
|
136
|
-
flexBasis: this.basis,
|
|
137
|
-
alignSelf: this.getAlignSelf(),
|
|
138
|
-
};
|
|
139
|
-
if (this.width)
|
|
140
|
-
hostStyle.width = this.width;
|
|
141
|
-
if (this.height)
|
|
142
|
-
hostStyle.height = this.height;
|
|
143
|
-
if (this.minWidth)
|
|
144
|
-
hostStyle.minWidth = this.minWidth;
|
|
145
|
-
if (this.maxWidth)
|
|
146
|
-
hostStyle.maxWidth = this.maxWidth;
|
|
147
|
-
if (this.minHeight)
|
|
148
|
-
hostStyle.minHeight = this.minHeight;
|
|
149
|
-
if (this.maxHeight)
|
|
150
|
-
hostStyle.maxHeight = this.maxHeight;
|
|
151
|
-
if (this.order !== undefined)
|
|
152
|
-
hostStyle.order = String(this.order);
|
|
153
|
-
// Inner content styles
|
|
154
|
-
const contentStyle = {};
|
|
155
|
-
if (this.padding) {
|
|
156
|
-
contentStyle.padding = this.padding;
|
|
157
|
-
}
|
|
158
|
-
if (this.background) {
|
|
159
|
-
contentStyle.background = this.background;
|
|
160
|
-
}
|
|
161
|
-
if (this.borderRadius) {
|
|
162
|
-
contentStyle.borderRadius = this.borderRadius;
|
|
163
|
-
}
|
|
164
|
-
if (this.border) {
|
|
165
|
-
contentStyle.border = this.border;
|
|
166
|
-
}
|
|
167
|
-
if (this.displayFlex) {
|
|
168
|
-
contentStyle.display = 'flex';
|
|
169
|
-
contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';
|
|
170
|
-
contentStyle.alignItems = this.getContentAlign();
|
|
171
|
-
contentStyle.justifyContent = this.getContentJustify();
|
|
172
|
-
if (this.innerGap) {
|
|
173
|
-
contentStyle.gap = this.innerGap;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
const hostClass = classnames({
|
|
177
|
-
'has-grow': this.grow > 0,
|
|
178
|
-
'display-flex': this.displayFlex,
|
|
179
|
-
[`inner-${this.innerDirection}`]: this.displayFlex,
|
|
180
|
-
});
|
|
181
|
-
return (h(Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
|
|
182
|
-
}
|
|
183
|
-
static get style() { return leBoxDefaultCss; }
|
|
184
|
-
}, [769, "le-box", {
|
|
185
|
-
"grow": [2],
|
|
186
|
-
"shrink": [2],
|
|
187
|
-
"basis": [1],
|
|
188
|
-
"width": [1],
|
|
189
|
-
"height": [1],
|
|
190
|
-
"minWidth": [1, "min-width"],
|
|
191
|
-
"maxWidth": [1, "max-width"],
|
|
192
|
-
"minHeight": [1, "min-height"],
|
|
193
|
-
"maxHeight": [1, "max-height"],
|
|
194
|
-
"background": [1],
|
|
195
|
-
"borderRadius": [1, "border-radius"],
|
|
196
|
-
"border": [1],
|
|
197
|
-
"alignSelf": [1, "align-self"],
|
|
198
|
-
"alignContent": [1, "align-content"],
|
|
199
|
-
"justifyContent": [1, "justify-content"],
|
|
200
|
-
"padding": [1],
|
|
201
|
-
"order": [2],
|
|
202
|
-
"displayFlex": [4, "display-flex"],
|
|
203
|
-
"innerDirection": [1, "inner-direction"],
|
|
204
|
-
"innerGap": [1, "inner-gap"]
|
|
205
|
-
}]);
|
|
206
|
-
function defineCustomElement$1() {
|
|
207
|
-
if (typeof customElements === "undefined") {
|
|
208
|
-
return;
|
|
209
|
-
}
|
|
210
|
-
const components = ["le-box", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
211
|
-
components.forEach(tagName => { switch (tagName) {
|
|
212
|
-
case "le-box":
|
|
213
|
-
if (!customElements.get(tagName)) {
|
|
214
|
-
customElements.define(tagName, LeBox$1);
|
|
215
|
-
}
|
|
216
|
-
break;
|
|
217
|
-
case "le-button":
|
|
218
|
-
if (!customElements.get(tagName)) {
|
|
219
|
-
defineCustomElement$7();
|
|
220
|
-
}
|
|
221
|
-
break;
|
|
222
|
-
case "le-checkbox":
|
|
223
|
-
if (!customElements.get(tagName)) {
|
|
224
|
-
defineCustomElement$6();
|
|
225
|
-
}
|
|
226
|
-
break;
|
|
227
|
-
case "le-component":
|
|
228
|
-
if (!customElements.get(tagName)) {
|
|
229
|
-
defineCustomElement$5();
|
|
230
|
-
}
|
|
231
|
-
break;
|
|
232
|
-
case "le-popover":
|
|
233
|
-
if (!customElements.get(tagName)) {
|
|
234
|
-
defineCustomElement$4();
|
|
235
|
-
}
|
|
236
|
-
break;
|
|
237
|
-
case "le-slot":
|
|
238
|
-
if (!customElements.get(tagName)) {
|
|
239
|
-
defineCustomElement$3();
|
|
240
|
-
}
|
|
241
|
-
break;
|
|
242
|
-
case "le-string-input":
|
|
243
|
-
if (!customElements.get(tagName)) {
|
|
244
|
-
defineCustomElement$2();
|
|
245
|
-
}
|
|
246
|
-
break;
|
|
247
|
-
} });
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
const LeBox = LeBox$1;
|
|
251
|
-
const defineCustomElement = defineCustomElement$1;
|
|
252
|
-
|
|
253
|
-
export { LeBox, defineCustomElement };
|
|
254
|
-
//# sourceMappingURL=le-box.js.map
|
|
255
|
-
|
|
256
|
-
//# sourceMappingURL=le-box.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-box.js","mappings":"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","names":["LeBox","__stencil_proxyCustomElement"],"sources":["src/components/le-box/le-box.default.css?tag=le-box&encapsulation=shadow","src/components/le-box/le-box.tsx"],"sourcesContent":["/**\n * le-box default styles\n *\n * Flex item properties are applied inline via hostStyle.\n * This CSS handles visual styling and theming.\n */\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* Box container - full size by default */\n.box {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\n/* Content wrapper */\n.content {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n background: var(--le-box-bg, transparent);\n border-radius: var(--le-box-border-radius, 0);\n padding: var(--le-box-padding, 0);\n}\n\n/* When displayFlex is enabled, ensure content stretches */\n:host(.display-flex) .content {\n min-height: 100%;\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible box component for use as a flex item within le-stack.\n *\n * `le-box` wraps content and provides flex item properties like grow, shrink,\n * basis, and self-alignment. It can also control its internal content alignment.\n *\n * @slot - Default slot for box content\n *\n * @cssprop --le-box-bg - Background color\n * @cssprop --le-box-padding - Padding inside the box\n * @cssprop --le-box-border-radius - Border radius\n *\n * @csspart box - The main box container\n * @csspart content - The inner content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-box',\n styleUrl: 'le-box.default.css',\n shadow: true,\n})\nexport class LeBox {\n @Element() el: HTMLElement;\n\n /**\n * Flex grow factor - how much the item should grow relative to siblings\n * @min 0\n */\n @Prop() grow: number = 0;\n\n /**\n * Flex shrink factor - how much the item should shrink relative to siblings\n * @min 0\n */\n @Prop() shrink: number = 1;\n\n /**\n * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')\n */\n @Prop() basis: string = 'auto';\n\n /**\n * Width of the box (CSS value like '100px', '50%', 'auto')\n */\n @Prop() width?: string;\n\n /**\n * Height of the box (CSS value)\n */\n @Prop() height?: string;\n\n /**\n * Minimum width constraint\n */\n @Prop() minWidth?: string;\n\n /**\n * Maximum width constraint\n */\n @Prop() maxWidth?: string;\n\n /**\n * Minimum height constraint\n */\n @Prop() minHeight?: string;\n\n /**\n * Maximum height constraint\n */\n @Prop() maxHeight?: string;\n\n /**\n * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')\n */\n @Prop() background?: string;\n\n /**\n * Border radius (e.g., '8px', 'var(--le-radius-md)')\n */\n @Prop() borderRadius?: string;\n\n /**\n * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')\n */\n @Prop() border?: string;\n\n /**\n * Self-alignment override for this item on the cross axis\n * @allowedValues auto | start | center | end | stretch | baseline\n */\n @Prop() alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'auto';\n\n /**\n * Internal horizontal alignment of content\n * @allowedValues start | center | end | stretch\n */\n @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /**\n * Internal vertical alignment of content\n * @allowedValues start | center | end | stretch\n */\n @Prop() justifyContent: 'start' | 'center' | 'end' | 'stretch' = 'start';\n\n /**\n * Padding inside the box (CSS value like '8px', '1rem')\n */\n @Prop() padding?: string;\n\n /**\n * Order in the flex container (lower values come first)\n */\n @Prop() order?: number;\n\n /**\n * Whether to display box content as flex (for internal alignment)\n */\n @Prop() displayFlex: boolean = false;\n\n /**\n * Direction of internal flex layout when displayFlex is true\n * @allowedValues horizontal | vertical\n */\n @Prop() innerDirection: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Gap between internal flex items when displayFlex is true\n */\n @Prop() innerGap?: string;\n\n private getAlignSelf(): string {\n const alignMap: Record<string, string> = {\n auto: 'auto',\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n return alignMap[this.alignSelf] || 'auto';\n }\n\n private getContentAlign(): string {\n const alignMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n };\n return alignMap[this.alignContent] || 'stretch';\n }\n\n private getContentJustify(): string {\n const justifyMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n };\n return justifyMap[this.justifyContent] || 'flex-start';\n }\n\n render() {\n // Host styles for flex item behavior\n const hostStyle: { [key: string]: string } = {\n flexGrow: String(this.grow),\n flexShrink: String(this.shrink),\n flexBasis: this.basis,\n alignSelf: this.getAlignSelf(),\n };\n\n if (this.width) hostStyle.width = this.width;\n if (this.height) hostStyle.height = this.height;\n if (this.minWidth) hostStyle.minWidth = this.minWidth;\n if (this.maxWidth) hostStyle.maxWidth = this.maxWidth;\n if (this.minHeight) hostStyle.minHeight = this.minHeight;\n if (this.maxHeight) hostStyle.maxHeight = this.maxHeight;\n if (this.order !== undefined) hostStyle.order = String(this.order);\n\n // Inner content styles\n const contentStyle: { [key: string]: string } = {};\n\n if (this.padding) {\n contentStyle.padding = this.padding;\n }\n if (this.background) {\n contentStyle.background = this.background;\n }\n if (this.borderRadius) {\n contentStyle.borderRadius = this.borderRadius;\n }\n if (this.border) {\n contentStyle.border = this.border;\n }\n\n if (this.displayFlex) {\n contentStyle.display = 'flex';\n contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';\n contentStyle.alignItems = this.getContentAlign();\n contentStyle.justifyContent = this.getContentJustify();\n if (this.innerGap) {\n contentStyle.gap = this.innerGap;\n }\n }\n\n const hostClass = classnames({\n 'has-grow': this.grow > 0,\n 'display-flex': this.displayFlex,\n [`inner-${this.innerDirection}`]: this.displayFlex,\n });\n\n return (\n <Host style={hostStyle} class={hostClass}>\n <le-component component=\"le-box\">\n <div class=\"box\" part=\"box\">\n <div class=\"content\" part=\"content\" style={contentStyle}>\n <le-slot\n name=\"\"\n description=\"Content inside this flex item\"\n type=\"slot\"\n allowed-components=\"le-text,le-card,le-button,le-stack,le-box\"\n >\n <slot></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface LeButton extends Components.LeButton, HTMLElement {}
|
|
4
|
-
export const LeButton: {
|
|
5
|
-
prototype: LeButton;
|
|
6
|
-
new (): LeButton;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { L as LeButton$1, n as defineCustomElement$1 } from './le-button2.js';
|
|
2
|
-
|
|
3
|
-
const LeButton = LeButton$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { LeButton, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=le-button.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=le-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|