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,382 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const lePopoverCss = "/* ============================================\n le-popover.css\n Popover using native HTML Popover API\n ============================================ */\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/* ============================================\n Trigger\n ============================================ */\n\n.le-popover-trigger {\n display: inline-flex;\n cursor: pointer;\n}\n\n.le-popover-default-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 6px);\n background: var(--le-color-surface, #fff);\n color: var(--le-color-text-secondary, #666);\n font-size: 16px;\n cursor: pointer;\n transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n border-color: var(--le-color-primary, #2196f3);\n color: var(--le-color-primary, #2196f3);\n background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n Popover Content (native popover)\n ============================================ */\n\n.le-popover-content {\n /* Reset native popover defaults */\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n \n /* Positioning - will be set via JS */\n position: fixed;\n inset: unset;\n \n /* Styling */\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 8px);\n box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n \n /* Animation */\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n .le-popover-content:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n min-height: 32px;\n}\n\n.le-popover-title {\n font-weight: var(--le-font-weight-semibold, 600);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--le-color-text-secondary, #666);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n border-radius: var(--le-radius-sm, 4px);\n transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popover-body {\n padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n Scrollable content\n ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n overflow-y: auto;\n}\n";
|
|
4
|
-
|
|
5
|
-
const LePopover = /*@__PURE__*/ proxyCustomElement(class LePopover extends HTMLElement {
|
|
6
|
-
constructor(registerHost) {
|
|
7
|
-
super();
|
|
8
|
-
if (registerHost !== false) {
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
}
|
|
11
|
-
this.__attachShadow();
|
|
12
|
-
this.lePopoverOpen = createEvent(this, "lePopoverOpen", 7);
|
|
13
|
-
this.lePopoverClose = createEvent(this, "lePopoverClose", 7);
|
|
14
|
-
}
|
|
15
|
-
get el() { return this; }
|
|
16
|
-
/**
|
|
17
|
-
* Mode of the popover should be 'default' for internal use
|
|
18
|
-
*/
|
|
19
|
-
mode;
|
|
20
|
-
/**
|
|
21
|
-
* Whether the popover is currently open
|
|
22
|
-
*/
|
|
23
|
-
open = false;
|
|
24
|
-
/**
|
|
25
|
-
* Position of the popover relative to its trigger
|
|
26
|
-
*/
|
|
27
|
-
position = 'bottom';
|
|
28
|
-
/**
|
|
29
|
-
* Alignment of the popover
|
|
30
|
-
*/
|
|
31
|
-
align = 'start';
|
|
32
|
-
/**
|
|
33
|
-
* Optional title for the popover header
|
|
34
|
-
*/
|
|
35
|
-
popoverTitle;
|
|
36
|
-
/**
|
|
37
|
-
* Whether to show a close button in the header
|
|
38
|
-
*/
|
|
39
|
-
showClose = true;
|
|
40
|
-
/**
|
|
41
|
-
* Whether clicking outside closes the popover
|
|
42
|
-
*/
|
|
43
|
-
closeOnClickOutside = true;
|
|
44
|
-
/**
|
|
45
|
-
* Whether pressing Escape closes the popover
|
|
46
|
-
*/
|
|
47
|
-
closeOnEscape = true;
|
|
48
|
-
/**
|
|
49
|
-
* Offset from the trigger element (in pixels)
|
|
50
|
-
*/
|
|
51
|
-
offset = 8;
|
|
52
|
-
/**
|
|
53
|
-
* Fixed width for the popover (e.g., '300px', '20rem')
|
|
54
|
-
*/
|
|
55
|
-
width;
|
|
56
|
-
/**
|
|
57
|
-
* Minimum width for the popover (e.g., '200px', '15rem')
|
|
58
|
-
*/
|
|
59
|
-
minWidth = '200px';
|
|
60
|
-
/**
|
|
61
|
-
* Maximum width for the popover (e.g., '400px', '25rem')
|
|
62
|
-
*/
|
|
63
|
-
maxWidth;
|
|
64
|
-
/**
|
|
65
|
-
* Emitted when the popover opens
|
|
66
|
-
*/
|
|
67
|
-
lePopoverOpen;
|
|
68
|
-
/**
|
|
69
|
-
* Emitted when the popover closes
|
|
70
|
-
*/
|
|
71
|
-
lePopoverClose;
|
|
72
|
-
isPositioned = false;
|
|
73
|
-
triggerEl;
|
|
74
|
-
popoverEl;
|
|
75
|
-
uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
|
|
76
|
-
scrollParents = [];
|
|
77
|
-
componentDidLoad() {
|
|
78
|
-
// Listen for toggle events from the native popover API
|
|
79
|
-
this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
|
|
80
|
-
// Listen for other popovers opening to close this one
|
|
81
|
-
document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
|
|
82
|
-
}
|
|
83
|
-
disconnectedCallback() {
|
|
84
|
-
this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
|
|
85
|
-
document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
|
|
86
|
-
this.removeScrollListeners();
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Find all scrollable parent elements
|
|
90
|
-
*/
|
|
91
|
-
getScrollParents(element) {
|
|
92
|
-
const scrollParents = [];
|
|
93
|
-
let parent = element.parentElement;
|
|
94
|
-
while (parent) {
|
|
95
|
-
const style = getComputedStyle(parent);
|
|
96
|
-
const overflow = style.overflow + style.overflowY + style.overflowX;
|
|
97
|
-
if (/(auto|scroll)/.test(overflow)) {
|
|
98
|
-
scrollParents.push(parent);
|
|
99
|
-
}
|
|
100
|
-
parent = parent.parentElement;
|
|
101
|
-
}
|
|
102
|
-
// Always include window for page scroll
|
|
103
|
-
return scrollParents;
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Add scroll listeners to all scrollable parents
|
|
107
|
-
*/
|
|
108
|
-
addScrollListeners() {
|
|
109
|
-
if (!this.triggerEl)
|
|
110
|
-
return;
|
|
111
|
-
this.scrollParents = this.getScrollParents(this.triggerEl);
|
|
112
|
-
// Listen to each scroll parent
|
|
113
|
-
this.scrollParents.forEach(parent => {
|
|
114
|
-
parent.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
115
|
-
});
|
|
116
|
-
// Also listen to window scroll and resize
|
|
117
|
-
window.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
118
|
-
window.addEventListener('resize', this.handleScroll, { passive: true });
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Remove scroll listeners
|
|
122
|
-
*/
|
|
123
|
-
removeScrollListeners() {
|
|
124
|
-
this.scrollParents.forEach(parent => {
|
|
125
|
-
parent.removeEventListener('scroll', this.handleScroll);
|
|
126
|
-
});
|
|
127
|
-
window.removeEventListener('scroll', this.handleScroll);
|
|
128
|
-
window.removeEventListener('resize', this.handleScroll);
|
|
129
|
-
this.scrollParents = [];
|
|
130
|
-
}
|
|
131
|
-
handleScroll = () => {
|
|
132
|
-
if (this.open) {
|
|
133
|
-
this.updatePosition();
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
handlePopoverToggle = (event) => {
|
|
137
|
-
if (event.newState === 'open') {
|
|
138
|
-
this.open = true;
|
|
139
|
-
this.addScrollListeners();
|
|
140
|
-
this.updatePosition();
|
|
141
|
-
this.lePopoverOpen.emit();
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
144
|
-
this.open = false;
|
|
145
|
-
this.isPositioned = false;
|
|
146
|
-
this.removeScrollListeners();
|
|
147
|
-
this.lePopoverClose.emit();
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
handleOtherPopoverOpen = (event) => {
|
|
151
|
-
const customEvent = event;
|
|
152
|
-
if (customEvent.detail?.popover === this.el)
|
|
153
|
-
return;
|
|
154
|
-
if (this.open) {
|
|
155
|
-
this.hide();
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
/**
|
|
159
|
-
* Opens the popover
|
|
160
|
-
*/
|
|
161
|
-
async show() {
|
|
162
|
-
document.dispatchEvent(new CustomEvent('le-popover-will-open', {
|
|
163
|
-
detail: { popover: this.el }
|
|
164
|
-
}));
|
|
165
|
-
this.popoverEl?.showPopover();
|
|
166
|
-
}
|
|
167
|
-
/**
|
|
168
|
-
* Closes the popover
|
|
169
|
-
*/
|
|
170
|
-
async hide() {
|
|
171
|
-
this.popoverEl?.hidePopover();
|
|
172
|
-
}
|
|
173
|
-
/**
|
|
174
|
-
* Toggles the popover
|
|
175
|
-
*/
|
|
176
|
-
async toggle() {
|
|
177
|
-
if (this.open) {
|
|
178
|
-
await this.hide();
|
|
179
|
-
}
|
|
180
|
-
else {
|
|
181
|
-
await this.show();
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
handleTriggerClick = (event) => {
|
|
185
|
-
event.stopPropagation();
|
|
186
|
-
this.toggle();
|
|
187
|
-
};
|
|
188
|
-
updatePosition() {
|
|
189
|
-
if (!this.triggerEl || !this.popoverEl)
|
|
190
|
-
return;
|
|
191
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
192
|
-
const popoverRect = this.popoverEl.getBoundingClientRect();
|
|
193
|
-
const viewportWidth = window.innerWidth;
|
|
194
|
-
const viewportHeight = window.innerHeight;
|
|
195
|
-
const viewportPadding = 8;
|
|
196
|
-
let position = this.position;
|
|
197
|
-
let align = this.align;
|
|
198
|
-
// Auto-position logic
|
|
199
|
-
const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
|
|
200
|
-
const spaceAbove = triggerRect.top - viewportPadding;
|
|
201
|
-
const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
|
|
202
|
-
const spaceLeft = triggerRect.left - viewportPadding;
|
|
203
|
-
if (position === 'auto') {
|
|
204
|
-
if (spaceBelow >= popoverRect.height + this.offset) {
|
|
205
|
-
position = 'bottom';
|
|
206
|
-
}
|
|
207
|
-
else if (spaceAbove >= popoverRect.height + this.offset) {
|
|
208
|
-
position = 'top';
|
|
209
|
-
}
|
|
210
|
-
else if (spaceRight >= popoverRect.width + this.offset) {
|
|
211
|
-
position = 'right';
|
|
212
|
-
}
|
|
213
|
-
else if (spaceLeft >= popoverRect.width + this.offset) {
|
|
214
|
-
position = 'left';
|
|
215
|
-
}
|
|
216
|
-
else {
|
|
217
|
-
const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
|
|
218
|
-
if (maxSpace === spaceBelow)
|
|
219
|
-
position = 'bottom';
|
|
220
|
-
else if (maxSpace === spaceAbove)
|
|
221
|
-
position = 'top';
|
|
222
|
-
else if (maxSpace === spaceRight)
|
|
223
|
-
position = 'right';
|
|
224
|
-
else
|
|
225
|
-
position = 'left';
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
// Adjust alignment for horizontal overflow
|
|
229
|
-
if (position === 'top' || position === 'bottom') {
|
|
230
|
-
if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
231
|
-
align = 'end';
|
|
232
|
-
}
|
|
233
|
-
else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
|
|
234
|
-
align = 'start';
|
|
235
|
-
}
|
|
236
|
-
else if (align === 'center') {
|
|
237
|
-
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
238
|
-
if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
|
|
239
|
-
align = 'start';
|
|
240
|
-
}
|
|
241
|
-
else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
|
|
242
|
-
align = 'end';
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
// Calculate position
|
|
247
|
-
let top = 0;
|
|
248
|
-
let left = 0;
|
|
249
|
-
let maxHeight = null;
|
|
250
|
-
switch (position) {
|
|
251
|
-
case 'top':
|
|
252
|
-
top = triggerRect.top - popoverRect.height - this.offset;
|
|
253
|
-
if (top < viewportPadding) {
|
|
254
|
-
maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
|
|
255
|
-
top = viewportPadding;
|
|
256
|
-
}
|
|
257
|
-
break;
|
|
258
|
-
case 'bottom':
|
|
259
|
-
top = triggerRect.bottom + this.offset;
|
|
260
|
-
if (top + popoverRect.height > viewportHeight - viewportPadding) {
|
|
261
|
-
maxHeight = viewportHeight - top - viewportPadding;
|
|
262
|
-
}
|
|
263
|
-
break;
|
|
264
|
-
case 'left':
|
|
265
|
-
left = triggerRect.left - popoverRect.width - this.offset;
|
|
266
|
-
top = triggerRect.top;
|
|
267
|
-
if (left < viewportPadding)
|
|
268
|
-
left = viewportPadding;
|
|
269
|
-
break;
|
|
270
|
-
case 'right':
|
|
271
|
-
left = triggerRect.right + this.offset;
|
|
272
|
-
top = triggerRect.top;
|
|
273
|
-
if (left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
274
|
-
left = viewportWidth - popoverRect.width - viewportPadding;
|
|
275
|
-
}
|
|
276
|
-
break;
|
|
277
|
-
}
|
|
278
|
-
// Calculate horizontal alignment for top/bottom
|
|
279
|
-
if (position === 'top' || position === 'bottom') {
|
|
280
|
-
switch (align) {
|
|
281
|
-
case 'start':
|
|
282
|
-
left = triggerRect.left;
|
|
283
|
-
break;
|
|
284
|
-
case 'center':
|
|
285
|
-
left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
|
|
286
|
-
break;
|
|
287
|
-
case 'end':
|
|
288
|
-
left = triggerRect.right - popoverRect.width;
|
|
289
|
-
break;
|
|
290
|
-
}
|
|
291
|
-
// Constrain to viewport
|
|
292
|
-
if (left < viewportPadding) {
|
|
293
|
-
left = viewportPadding;
|
|
294
|
-
}
|
|
295
|
-
else if (left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
296
|
-
left = viewportWidth - popoverRect.width - viewportPadding;
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
// Calculate vertical alignment for left/right
|
|
300
|
-
if (position === 'left' || position === 'right') {
|
|
301
|
-
switch (align) {
|
|
302
|
-
case 'start':
|
|
303
|
-
top = triggerRect.top;
|
|
304
|
-
break;
|
|
305
|
-
case 'center':
|
|
306
|
-
top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
|
|
307
|
-
break;
|
|
308
|
-
case 'end':
|
|
309
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
310
|
-
break;
|
|
311
|
-
}
|
|
312
|
-
if (top < viewportPadding)
|
|
313
|
-
top = viewportPadding;
|
|
314
|
-
if (top + popoverRect.height > viewportHeight - viewportPadding) {
|
|
315
|
-
maxHeight = viewportHeight - top - viewportPadding;
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
// Apply styles
|
|
319
|
-
this.popoverEl.style.top = `${top}px`;
|
|
320
|
-
this.popoverEl.style.left = `${left}px`;
|
|
321
|
-
if (maxHeight !== null && maxHeight > 100) {
|
|
322
|
-
this.popoverEl.style.maxHeight = `${maxHeight}px`;
|
|
323
|
-
this.popoverEl.style.overflowY = 'auto';
|
|
324
|
-
}
|
|
325
|
-
else {
|
|
326
|
-
this.popoverEl.style.maxHeight = '';
|
|
327
|
-
this.popoverEl.style.overflowY = '';
|
|
328
|
-
}
|
|
329
|
-
this.isPositioned = true;
|
|
330
|
-
}
|
|
331
|
-
render() {
|
|
332
|
-
const popoverStyles = {
|
|
333
|
-
visibility: this.isPositioned ? 'visible' : 'hidden',
|
|
334
|
-
};
|
|
335
|
-
if (this.width)
|
|
336
|
-
popoverStyles.width = this.width;
|
|
337
|
-
if (this.minWidth)
|
|
338
|
-
popoverStyles.minWidth = this.minWidth;
|
|
339
|
-
if (this.maxWidth)
|
|
340
|
-
popoverStyles.maxWidth = this.maxWidth;
|
|
341
|
-
return [
|
|
342
|
-
h("div", { key: '3d2a3b86ddb3be577bd0e976a5a00f25396a97fb', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '9db2e9e2b0bdb25c5a2361115d2094292fe692ec', name: "trigger" }, h("button", { key: '88d78b192f72731f00d6131b92b8d6a4b445d7f9', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '0f2913f160cda5dcbeb20c714219d587196e230b' }, "\u2295")))),
|
|
343
|
-
h("div", { key: 'b65d2de900ff6e67a62d92d7452db34afde9f257', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '323061fc49c8e0fc9ae541dfc576e551b0a83818', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b1d9f4203966ae6a0bb14186824596643954d6f8', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'd0d335d8c9897ed9ba7bd0370572a8cafa72b044', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '52d3294394b0e1fd49f8c361414e228feed68ea9', class: "le-popover-body" }, h("slot", { key: '16d8691545f2eaa44f136bfea33a1f1d71d18cd7' })))
|
|
344
|
-
];
|
|
345
|
-
}
|
|
346
|
-
static get style() { return lePopoverCss; }
|
|
347
|
-
}, [769, "le-popover", {
|
|
348
|
-
"mode": [1537],
|
|
349
|
-
"open": [1540],
|
|
350
|
-
"position": [1],
|
|
351
|
-
"align": [1],
|
|
352
|
-
"popoverTitle": [1, "popover-title"],
|
|
353
|
-
"showClose": [4, "show-close"],
|
|
354
|
-
"closeOnClickOutside": [4, "close-on-click-outside"],
|
|
355
|
-
"closeOnEscape": [4, "close-on-escape"],
|
|
356
|
-
"offset": [2],
|
|
357
|
-
"width": [1],
|
|
358
|
-
"minWidth": [1, "min-width"],
|
|
359
|
-
"maxWidth": [1, "max-width"],
|
|
360
|
-
"isPositioned": [32],
|
|
361
|
-
"show": [64],
|
|
362
|
-
"hide": [64],
|
|
363
|
-
"toggle": [64]
|
|
364
|
-
}]);
|
|
365
|
-
function defineCustomElement() {
|
|
366
|
-
if (typeof customElements === "undefined") {
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
369
|
-
const components = ["le-popover"];
|
|
370
|
-
components.forEach(tagName => { switch (tagName) {
|
|
371
|
-
case "le-popover":
|
|
372
|
-
if (!customElements.get(tagName)) {
|
|
373
|
-
customElements.define(tagName, LePopover);
|
|
374
|
-
}
|
|
375
|
-
break;
|
|
376
|
-
} });
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
export { LePopover as L, defineCustomElement as d };
|
|
380
|
-
//# sourceMappingURL=le-popover2.js.map
|
|
381
|
-
|
|
382
|
-
//# sourceMappingURL=le-popover2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-popover2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-popover/le-popover.css?tag=le-popover&encapsulation=shadow","src/components/le-popover/le-popover.tsx"],"sourcesContent":["/* ============================================\n le-popover.css\n Popover using native HTML Popover API\n ============================================ */\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/* ============================================\n Trigger\n ============================================ */\n\n.le-popover-trigger {\n display: inline-flex;\n cursor: pointer;\n}\n\n.le-popover-default-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 6px);\n background: var(--le-color-surface, #fff);\n color: var(--le-color-text-secondary, #666);\n font-size: 16px;\n cursor: pointer;\n transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n border-color: var(--le-color-primary, #2196f3);\n color: var(--le-color-primary, #2196f3);\n background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n Popover Content (native popover)\n ============================================ */\n\n.le-popover-content {\n /* Reset native popover defaults */\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n \n /* Positioning - will be set via JS */\n position: fixed;\n inset: unset;\n \n /* Styling */\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 8px);\n box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n \n /* Animation */\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n .le-popover-content:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n min-height: 32px;\n}\n\n.le-popover-title {\n font-weight: var(--le-font-weight-semibold, 600);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--le-color-text-secondary, #666);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n border-radius: var(--le-radius-sm, 4px);\n transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popover-body {\n padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n Scrollable content\n ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n overflow-y: auto;\n}\n","import { Component, Prop, Method, Event, EventEmitter, State, h, Element } from '@stencil/core';\n\n/**\n * A popover component for displaying floating content.\n * \n * Uses the native HTML Popover API for proper layering with dialogs\n * and other top-layer elements. Falls back gracefully in older browsers.\n *\n * @slot - Content to display inside the popover\n * @slot trigger - Element that triggers the popover (optional)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n tag: 'le-popover',\n styleUrl: 'le-popover.css',\n shadow: true,\n})\nexport class LePopover {\n @Element() el: HTMLElement;\n\n /**\n * Mode of the popover should be 'default' for internal use\n */\n @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n /**\n * Whether the popover is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Position of the popover relative to its trigger\n */\n @Prop() position: 'top' | 'bottom' | 'left' | 'right' | 'auto' = 'bottom';\n\n /**\n * Alignment of the popover\n */\n @Prop() align: 'start' | 'center' | 'end' = 'start';\n\n /**\n * Optional title for the popover header\n */\n @Prop() popoverTitle?: string;\n\n /**\n * Whether to show a close button in the header\n */\n @Prop() showClose: boolean = true;\n\n /**\n * Whether clicking outside closes the popover\n */\n @Prop() closeOnClickOutside: boolean = true;\n\n /**\n * Whether pressing Escape closes the popover\n */\n @Prop() closeOnEscape: boolean = true;\n\n /**\n * Offset from the trigger element (in pixels)\n */\n @Prop() offset: number = 8;\n\n /**\n * Fixed width for the popover (e.g., '300px', '20rem')\n */\n @Prop() width?: string;\n\n /**\n * Minimum width for the popover (e.g., '200px', '15rem')\n */\n @Prop() minWidth?: string = '200px';\n\n /**\n * Maximum width for the popover (e.g., '400px', '25rem')\n */\n @Prop() maxWidth?: string;\n\n /**\n * Emitted when the popover opens\n */\n @Event() lePopoverOpen: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes\n */\n @Event() lePopoverClose: EventEmitter<void>;\n\n @State() private isPositioned: boolean = false;\n\n private triggerEl?: HTMLElement;\n private popoverEl?: HTMLElement;\n private uniqueId: string = `le-popover-${Math.random().toString(36).substr(2, 9)}`;\n private scrollParents: Element[] = [];\n\n componentDidLoad() {\n // Listen for toggle events from the native popover API\n this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle as EventListener);\n \n // Listen for other popovers opening to close this one\n document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n }\n\n disconnectedCallback() {\n this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle as EventListener);\n document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n this.removeScrollListeners();\n }\n\n /**\n * Find all scrollable parent elements\n */\n private getScrollParents(element: Element): Element[] {\n const scrollParents: Element[] = [];\n let parent = element.parentElement;\n \n while (parent) {\n const style = getComputedStyle(parent);\n const overflow = style.overflow + style.overflowY + style.overflowX;\n if (/(auto|scroll)/.test(overflow)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n \n // Always include window for page scroll\n return scrollParents;\n }\n\n /**\n * Add scroll listeners to all scrollable parents\n */\n private addScrollListeners() {\n if (!this.triggerEl) return;\n \n this.scrollParents = this.getScrollParents(this.triggerEl);\n \n // Listen to each scroll parent\n this.scrollParents.forEach(parent => {\n parent.addEventListener('scroll', this.handleScroll, { passive: true });\n });\n \n // Also listen to window scroll and resize\n window.addEventListener('scroll', this.handleScroll, { passive: true });\n window.addEventListener('resize', this.handleScroll, { passive: true });\n }\n\n /**\n * Remove scroll listeners\n */\n private removeScrollListeners() {\n this.scrollParents.forEach(parent => {\n parent.removeEventListener('scroll', this.handleScroll);\n });\n window.removeEventListener('scroll', this.handleScroll);\n window.removeEventListener('resize', this.handleScroll);\n this.scrollParents = [];\n }\n\n private handleScroll = () => {\n if (this.open) {\n this.updatePosition();\n }\n };\n\n private handlePopoverToggle = (event: ToggleEvent) => {\n if (event.newState === 'open') {\n this.open = true;\n this.addScrollListeners();\n this.updatePosition();\n this.lePopoverOpen.emit();\n } else {\n this.open = false;\n this.isPositioned = false;\n this.removeScrollListeners();\n this.lePopoverClose.emit();\n }\n };\n\n private handleOtherPopoverOpen = (event: Event) => {\n const customEvent = event as CustomEvent;\n if (customEvent.detail?.popover === this.el) return;\n \n if (this.open) {\n this.hide();\n }\n };\n\n /**\n * Opens the popover\n */\n @Method()\n async show() {\n document.dispatchEvent(new CustomEvent('le-popover-will-open', {\n detail: { popover: this.el }\n }));\n \n this.popoverEl?.showPopover();\n }\n\n /**\n * Closes the popover\n */\n @Method()\n async hide() {\n this.popoverEl?.hidePopover();\n }\n\n /**\n * Toggles the popover\n */\n @Method()\n async toggle() {\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private updatePosition() {\n if (!this.triggerEl || !this.popoverEl) return;\n\n const triggerRect = this.triggerEl.getBoundingClientRect();\n const popoverRect = this.popoverEl.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const viewportPadding = 8;\n\n let position = this.position;\n let align = this.align;\n\n // Auto-position logic\n const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;\n const spaceAbove = triggerRect.top - viewportPadding;\n const spaceRight = viewportWidth - triggerRect.right - viewportPadding;\n const spaceLeft = triggerRect.left - viewportPadding;\n\n if (position === 'auto') {\n if (spaceBelow >= popoverRect.height + this.offset) {\n position = 'bottom';\n } else if (spaceAbove >= popoverRect.height + this.offset) {\n position = 'top';\n } else if (spaceRight >= popoverRect.width + this.offset) {\n position = 'right';\n } else if (spaceLeft >= popoverRect.width + this.offset) {\n position = 'left';\n } else {\n const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);\n if (maxSpace === spaceBelow) position = 'bottom';\n else if (maxSpace === spaceAbove) position = 'top';\n else if (maxSpace === spaceRight) position = 'right';\n else position = 'left';\n }\n }\n\n // Adjust alignment for horizontal overflow\n if (position === 'top' || position === 'bottom') {\n if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {\n align = 'end';\n } else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {\n align = 'start';\n } else if (align === 'center') {\n const triggerCenter = triggerRect.left + triggerRect.width / 2;\n if (triggerCenter - popoverRect.width / 2 < viewportPadding) {\n align = 'start';\n } else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {\n align = 'end';\n }\n }\n }\n\n // Calculate position\n let top: number = 0;\n let left: number = 0;\n let maxHeight: number | null = null;\n\n switch (position) {\n case 'top':\n top = triggerRect.top - popoverRect.height - this.offset;\n if (top < viewportPadding) {\n maxHeight = triggerRect.top - this.offset - viewportPadding * 2;\n top = viewportPadding;\n }\n break;\n case 'bottom':\n top = triggerRect.bottom + this.offset;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n break;\n case 'left':\n left = triggerRect.left - popoverRect.width - this.offset;\n top = triggerRect.top;\n if (left < viewportPadding) left = viewportPadding;\n break;\n case 'right':\n left = triggerRect.right + this.offset;\n top = triggerRect.top;\n if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n break;\n }\n\n // Calculate horizontal alignment for top/bottom\n if (position === 'top' || position === 'bottom') {\n switch (align) {\n case 'start':\n left = triggerRect.left;\n break;\n case 'center':\n left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n break;\n case 'end':\n left = triggerRect.right - popoverRect.width;\n break;\n }\n \n // Constrain to viewport\n if (left < viewportPadding) {\n left = viewportPadding;\n } else if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n }\n\n // Calculate vertical alignment for left/right\n if (position === 'left' || position === 'right') {\n switch (align) {\n case 'start':\n top = triggerRect.top;\n break;\n case 'center':\n top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n break;\n case 'end':\n top = triggerRect.bottom - popoverRect.height;\n break;\n }\n \n if (top < viewportPadding) top = viewportPadding;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n }\n\n // Apply styles\n this.popoverEl.style.top = `${top}px`;\n this.popoverEl.style.left = `${left}px`;\n \n if (maxHeight !== null && maxHeight > 100) {\n this.popoverEl.style.maxHeight = `${maxHeight}px`;\n this.popoverEl.style.overflowY = 'auto';\n } else {\n this.popoverEl.style.maxHeight = '';\n this.popoverEl.style.overflowY = '';\n }\n\n this.isPositioned = true;\n }\n\n render() {\n const popoverStyles: Record<string, string> = {\n visibility: this.isPositioned ? 'visible' : 'hidden',\n };\n \n if (this.width) popoverStyles.width = this.width;\n if (this.minWidth) popoverStyles.minWidth = this.minWidth;\n if (this.maxWidth) popoverStyles.maxWidth = this.maxWidth;\n\n return [\n <div \n class=\"le-popover-trigger\" \n ref={(el) => (this.triggerEl = el)}\n onClick={this.handleTriggerClick}\n >\n <slot name=\"trigger\">\n <button type=\"button\" class=\"le-popover-default-trigger\">\n <span>⊕</span>\n </button>\n </slot>\n </div>,\n \n <div\n id={this.uniqueId}\n class=\"le-popover-content\"\n popover={this.closeOnClickOutside ? 'auto' : 'manual'}\n ref={(el) => (this.popoverEl = el)}\n style={popoverStyles}\n >\n {(this.popoverTitle || this.showClose) && (\n <div class=\"le-popover-header\">\n {this.popoverTitle && <span class=\"le-popover-title\">{this.popoverTitle}</span>}\n {this.showClose && (\n <button \n type=\"button\" \n class=\"le-popover-close\"\n onClick={() => this.hide()}\n aria-label=\"Close\"\n >\n ×\n </button>\n )}\n </div>\n )}\n <div class=\"le-popover-body\">\n <slot></slot>\n </div>\n </div>\n ];\n }\n}\n"],"version":3}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface LePopup extends Components.LePopup, HTMLElement {}
|
|
4
|
-
export const LePopup: {
|
|
5
|
-
prototype: LePopup;
|
|
6
|
-
new (): LePopup;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|