le-kit 0.1.18 → 0.1.19
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/dist/cjs/le-button_13.cjs.entry.js +17 -17
- package/dist/cjs/le-card.cjs.entry.js +1 -1
- package/dist/cjs/le-combobox.cjs.entry.js +1 -1
- package/dist/cjs/le-header-placeholder.cjs.entry.js +1 -1
- package/dist/cjs/le-multiselect.cjs.entry.js +3 -3
- package/dist/cjs/le-number-input.cjs.entry.js +1 -1
- package/dist/cjs/le-round-progress.cjs.entry.js +1 -1
- package/dist/cjs/le-segmented-control.cjs.entry.js +1 -1
- package/dist/cjs/le-stack.cjs.entry.js +1 -1
- package/dist/cjs/le-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/le-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/le-tab.cjs.entry.js +1 -1
- package/dist/cjs/le-tabs.cjs.entry.js +2 -2
- package/dist/cjs/le-tag.cjs.entry.js +1 -1
- package/dist/cjs/le-turntable.cjs.entry.js +1 -1
- package/dist/collection/components/le-button/le-button.css +24 -24
- package/dist/collection/components/le-button/le-button.js +2 -2
- package/dist/collection/components/le-button/le-button.js.map +1 -1
- package/dist/collection/components/le-card/le-card.js +1 -1
- package/dist/collection/components/le-checkbox/le-checkbox.js +1 -1
- package/dist/collection/components/le-collapse/le-collapse.js +1 -1
- package/dist/collection/components/le-combobox/le-combobox.js +1 -1
- package/dist/collection/components/le-current-heading/le-current-heading.js +1 -1
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.js +1 -1
- package/dist/collection/components/le-header/le-header.js +2 -2
- package/dist/collection/components/le-header-placeholder/le-header-placeholder.js +1 -1
- package/dist/collection/components/le-multiselect/le-multiselect.js +3 -3
- package/dist/collection/components/le-number-input/le-number-input.js +1 -1
- package/dist/collection/components/le-popover/le-popover.js +3 -3
- package/dist/collection/components/le-round-progress/le-round-progress.js +1 -1
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.js +1 -1
- package/dist/collection/components/le-segmented-control/le-segmented-control.js +1 -1
- package/dist/collection/components/le-select/le-select.js +2 -2
- package/dist/collection/components/le-slot/le-slot.js +1 -1
- package/dist/collection/components/le-stack/le-stack.js +1 -1
- package/dist/collection/components/le-string-input/le-string-input.js +2 -2
- package/dist/collection/components/le-tab/le-tab.js +1 -1
- package/dist/collection/components/le-tab-bar/le-tab-bar.js +1 -1
- package/dist/collection/components/le-tab-panel/le-tab-panel.js +2 -2
- package/dist/collection/components/le-tabs/le-tabs.js +2 -2
- package/dist/collection/components/le-tag/le-tag.js +1 -1
- package/dist/collection/components/le-turntable/le-turntable.js +1 -1
- package/dist/collection/dist/components/assets/custom-elements.json +397 -397
- package/dist/components/assets/custom-elements.json +397 -397
- package/dist/components/le-button2.js +8 -8
- package/dist/components/le-button2.js.map +1 -1
- package/dist/components/le-card.js +1 -1
- package/dist/components/le-collapse.js +1 -1
- package/dist/components/le-combobox.js +1 -1
- package/dist/components/le-current-heading.js +1 -1
- package/dist/components/le-dropdown-base2.js +1 -1
- package/dist/components/le-header-placeholder.js +1 -1
- package/dist/components/le-header.js +2 -2
- package/dist/components/le-multiselect.js +3 -3
- package/dist/components/le-number-input.js +1 -1
- package/dist/components/le-popover2.js +3 -3
- package/dist/components/le-round-progress.js +1 -1
- package/dist/components/le-scroll-progress.js +1 -1
- package/dist/components/le-segmented-control.js +1 -1
- package/dist/components/le-stack.js +1 -1
- package/dist/components/le-tab-bar.js +1 -1
- package/dist/components/le-tab-panel.js +2 -2
- package/dist/components/le-tab2.js +1 -1
- package/dist/components/le-tabs.js +2 -2
- package/dist/components/le-tag2.js +1 -1
- package/dist/components/le-turntable.js +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/le-button_13.entry.js +17 -17
- package/dist/esm/le-card.entry.js +1 -1
- package/dist/esm/le-combobox.entry.js +1 -1
- package/dist/esm/le-header-placeholder.entry.js +1 -1
- package/dist/esm/le-multiselect.entry.js +3 -3
- package/dist/esm/le-number-input.entry.js +1 -1
- package/dist/esm/le-round-progress.entry.js +1 -1
- package/dist/esm/le-segmented-control.entry.js +1 -1
- package/dist/esm/le-stack.entry.js +1 -1
- package/dist/esm/le-tab-bar.entry.js +1 -1
- package/dist/esm/le-tab-panel.entry.js +2 -2
- package/dist/esm/le-tab.entry.js +1 -1
- package/dist/esm/le-tabs.entry.js +2 -2
- package/dist/esm/le-tag.entry.js +1 -1
- package/dist/esm/le-turntable.entry.js +1 -1
- package/dist/le-kit/dist/components/assets/custom-elements.json +397 -397
- package/dist/le-kit/le-kit.esm.js +1 -1
- package/dist/le-kit/{p-9ba2bfb3.entry.js → p-02532919.entry.js} +2 -2
- package/dist/le-kit/{p-684adc9f.entry.js → p-1733d907.entry.js} +2 -2
- package/dist/le-kit/p-2ec60692.entry.js +2 -0
- package/dist/le-kit/{p-b3531106.entry.js → p-3327b089.entry.js} +2 -2
- package/dist/le-kit/{p-8afe6862.entry.js → p-4bdb03cb.entry.js} +2 -2
- package/dist/le-kit/{p-269fb44f.entry.js → p-64c2cee1.entry.js} +2 -2
- package/dist/le-kit/{p-95cf203e.entry.js → p-6acdf000.entry.js} +2 -2
- package/dist/le-kit/p-83007215.entry.js +2 -0
- package/dist/le-kit/p-83007215.entry.js.map +1 -0
- package/dist/le-kit/{p-629c5e13.entry.js → p-a8963634.entry.js} +2 -2
- package/dist/le-kit/{p-c83a1255.entry.js → p-b7c008de.entry.js} +2 -2
- package/dist/le-kit/{p-7d316315.entry.js → p-da0265c5.entry.js} +2 -2
- package/dist/le-kit/{p-d2a5d431.entry.js → p-df9389f0.entry.js} +2 -2
- package/dist/le-kit/{p-31c3649c.entry.js → p-dfd20890.entry.js} +2 -2
- package/dist/le-kit/{p-deef1f4d.entry.js → p-e3f3cc8f.entry.js} +2 -2
- package/dist/le-kit/{p-e4618b36.entry.js → p-f88c804a.entry.js} +2 -2
- package/package.json +1 -1
- package/dist/le-kit/p-3829f572.entry.js +0 -2
- package/dist/le-kit/p-3829f572.entry.js.map +0 -1
- package/dist/le-kit/p-e07d4b78.entry.js +0 -2
- /package/dist/le-kit/{p-9ba2bfb3.entry.js.map → p-02532919.entry.js.map} +0 -0
- /package/dist/le-kit/{p-684adc9f.entry.js.map → p-1733d907.entry.js.map} +0 -0
- /package/dist/le-kit/{p-e07d4b78.entry.js.map → p-2ec60692.entry.js.map} +0 -0
- /package/dist/le-kit/{p-b3531106.entry.js.map → p-3327b089.entry.js.map} +0 -0
- /package/dist/le-kit/{p-8afe6862.entry.js.map → p-4bdb03cb.entry.js.map} +0 -0
- /package/dist/le-kit/{p-269fb44f.entry.js.map → p-64c2cee1.entry.js.map} +0 -0
- /package/dist/le-kit/{p-95cf203e.entry.js.map → p-6acdf000.entry.js.map} +0 -0
- /package/dist/le-kit/{p-629c5e13.entry.js.map → p-a8963634.entry.js.map} +0 -0
- /package/dist/le-kit/{p-c83a1255.entry.js.map → p-b7c008de.entry.js.map} +0 -0
- /package/dist/le-kit/{p-7d316315.entry.js.map → p-da0265c5.entry.js.map} +0 -0
- /package/dist/le-kit/{p-d2a5d431.entry.js.map → p-df9389f0.entry.js.map} +0 -0
- /package/dist/le-kit/{p-31c3649c.entry.js.map → p-dfd20890.entry.js.map} +0 -0
- /package/dist/le-kit/{p-deef1f4d.entry.js.map → p-e3f3cc8f.entry.js.map} +0 -0
- /package/dist/le-kit/{p-e4618b36.entry.js.map → p-f88c804a.entry.js.map} +0 -0
|
@@ -7,7 +7,7 @@ var index$1 = require('./index.cjs.js');
|
|
|
7
7
|
const leButtonCss = () => `:host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),
|
|
8
8
|
border-color var(--le-button-transition) var(--le-transition-easing),
|
|
9
9
|
box-shadow var(--le-button-transition) var(--le-transition-easing),
|
|
10
|
-
transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0
|
|
10
|
+
transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host(.color-primary){--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host(.color-secondary){--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host(.color-success){--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host(.color-warning){--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host(.color-danger){--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host(.color-info){--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host(.variant-solid) .le-button-container{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host(.variant-outlined) .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host(.variant-clear) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.size-small){--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host(.size-large){--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host(.variant-outlined.selected) .le-button-container,:host(.variant-clear.selected) .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .le-button-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .le-button-container{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}`;
|
|
11
11
|
|
|
12
12
|
const LeButton = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -103,7 +103,7 @@ const LeButton = class {
|
|
|
103
103
|
const attrs = this.href
|
|
104
104
|
? { href: this.href, target: this.target, role: 'button' }
|
|
105
105
|
: { type: this.type, disabled: this.disabled };
|
|
106
|
-
return (index.h("le-component", { key: '
|
|
106
|
+
return (index.h(index.Host, { key: 'bc9515b65357611b9a29f8c4f89edfdfb1535bf0', class: classes }, index.h("le-component", { key: 'bb5367d16d781e6af44f709d5f132faa3b0fc88e', component: "le-button" }, index.h(TagType, { key: '09118bccd54456ee8dadaaff92d9fedfa91831ec', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
LeButton.style = leButtonCss();
|
|
@@ -157,7 +157,7 @@ const LeCheckbox = class {
|
|
|
157
157
|
});
|
|
158
158
|
};
|
|
159
159
|
render() {
|
|
160
|
-
return (index.h("le-component", { key: '
|
|
160
|
+
return (index.h("le-component", { key: '15e49aa77c2d904b1610f68802428e9dd86b3631', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '50691376a207f004112820742df46ef9ff8016e0', class: "le-checkbox-wrapper" }, index.h("label", { key: '339a209a9a649ff491dd1867e617f71e4bca7365', class: "le-checkbox-label" }, index.h("span", { key: '1086e8989abe5a23ac01bd2323a8ae2454c4acb6', class: "le-checkbox-input" }, index.h("input", { key: '90126054fb3aa8ed58d043694275cac416d06578', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: '8b47592103fbd4f7e3b7b1b01f27d42bf6dccbc7', class: "le-checkbox-text" }, index.h("le-slot", { key: 'c5f5aaff0b69bcf7d993ea84181a63d30b794774', name: "", type: "text", tag: "span" }, index.h("slot", { key: 'bc615ec211b6db8f5f22760ae5298560384a1b84' })))), index.h("div", { key: '0c6037f4d7948b262beb4a5b969018fb6b0cad4a', class: "le-checkbox-description" }, index.h("le-slot", { key: '17631ed776592063601dd37052f43d7e4732af21', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: '13a3138cd0101fc1f9175a89ed933a2f2d4df79f', name: "description" }))))));
|
|
161
161
|
}
|
|
162
162
|
};
|
|
163
163
|
LeCheckbox.style = leCheckboxCss();
|
|
@@ -215,7 +215,7 @@ const LeCollapse = class {
|
|
|
215
215
|
this.el.toggleAttribute('data-open', nextOpen);
|
|
216
216
|
}
|
|
217
217
|
render() {
|
|
218
|
-
return (index.h(index.Host, { key: '
|
|
218
|
+
return (index.h(index.Host, { key: '92c1136afc95e8180376138f12ebc8728cb315f8', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '6adcd21ed09859542312574e59d2a9fe9ff86ab0', component: "le-collapse" }, index.h("div", { key: '496239294c483cac2873a3966fcd841450c631bf', class: "region", part: "region" }, index.h("slot", { key: 'e29e789534a390b2c9434b19ee6cad166805c138' })))));
|
|
219
219
|
}
|
|
220
220
|
static get watchers() { return {
|
|
221
221
|
"open": ["onOpenChange"],
|
|
@@ -521,7 +521,7 @@ const LeCurrentHeading = class {
|
|
|
521
521
|
}
|
|
522
522
|
}
|
|
523
523
|
render() {
|
|
524
|
-
return (index.h(index.Host, { key: '
|
|
524
|
+
return (index.h(index.Host, { key: 'd6773c072799d0337b7d2bade9de2c169e35d3c8' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
|
|
525
525
|
}
|
|
526
526
|
static get watchers() { return {
|
|
527
527
|
"selector": ["onSelectorChange"]
|
|
@@ -861,7 +861,7 @@ const LeDropdownBase = class {
|
|
|
861
861
|
}
|
|
862
862
|
render() {
|
|
863
863
|
const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
|
|
864
|
-
return (index.h(index.Host, { key: '
|
|
864
|
+
return (index.h(index.Host, { key: 'eeb6316ffb006adb8d53f3c2f81cadde32d261ae' }, index.h("le-popover", { key: '703c57bf2185590df226787778ad67cd423ce943', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, index.h("slot", { key: 'bc401b4af80c9e6d15c4f5fe2a5ff2687b9ae582', name: "trigger", slot: "trigger" }), index.h("slot", { key: '3414d6eb1d4fecfe642b31e2a1abd271c83ab2df', name: "header" }), index.h("div", { key: '685d0aa6e15b6a191d517e194ae96302cfb4a191', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
|
|
865
865
|
}
|
|
866
866
|
static get watchers() { return {
|
|
867
867
|
"options": ["handleOptionsChange"],
|
|
@@ -1105,7 +1105,7 @@ const LeHeader = class {
|
|
|
1105
1105
|
'is-hidden': !this.revealed,
|
|
1106
1106
|
'is-shrunk': this.shrunk,
|
|
1107
1107
|
});
|
|
1108
|
-
return (index.h(index.Host, { key: '
|
|
1108
|
+
return (index.h(index.Host, { key: '564328055a69a1646c7f9030ac274a30c3baad0a', class: hostClass, onMouseEnter: () => {
|
|
1109
1109
|
if (!this.expandOnHover)
|
|
1110
1110
|
return;
|
|
1111
1111
|
this.hoverActive = true;
|
|
@@ -1115,7 +1115,7 @@ const LeHeader = class {
|
|
|
1115
1115
|
return;
|
|
1116
1116
|
this.hoverActive = false;
|
|
1117
1117
|
this.scheduleUpdate(true);
|
|
1118
|
-
} }, index.h("le-component", { key: '
|
|
1118
|
+
} }, index.h("le-component", { key: 'a9feac7b7229ed250b4c2cade7e5dce8bb79e634', component: "le-header" }, index.h("header", { key: 'acebe4ea5222593e65190a35515c60ee7e15549a', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'bf37e677a5058e4e9bf74a4f6a3c62112daaea20', class: "inner", part: "inner" }, index.h("div", { key: 'd6886dba1b0e8003a2080f03f6bfe3fa0ffdca18', class: "row", part: "row" }, index.h("div", { key: 'd4c328bb74c955fa377a06f1a33783750bd83237', class: "start", part: "start" }, index.h("le-slot", { key: '1b9d58c81f8a498637eefd7a1310c961b014d1a5', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'd5c2727c4f427b60cad9575c0e74a18e7b229462', name: "start" }))), index.h("div", { key: '35831f9dfb3ff584cdc573081ebdeef1968f06c7', class: "title", part: "title" }, index.h("le-slot", { key: 'bed684a7880dfa79b4b7585dcb3c2bd024e0cc93', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: 'f523ee36ff1f0c6a2793e5d813d6b9a9c632f2bf', class: "title-slot", part: "title" }, index.h("slot", { key: '39e750e3f4231406552187e961ae7e9a206d240b', name: "title" })))), index.h("div", { key: 'c99435b41a905b6780c07e7103125d7c439af7cb', class: "end", part: "end" }, index.h("le-slot", { key: 'efca1aadcf9108add84dbb5a2ea539fb95e795c6', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'd04b78ca1eeb1cbae4b3575f03231b93ed4d9692', name: "end" })))), index.h("div", { key: 'd83bda303c5fcd63da3e0419bd9276677d8f5cc7', class: "secondary", part: "secondary" }, index.h("le-slot", { key: '1f5f6d317e969c54d87a6ad516fed071e72f342c', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, index.h("slot", { key: 'fb5a6a434190658f8fb55e3bc21d5f952a559ad5' }))))))));
|
|
1119
1119
|
}
|
|
1120
1120
|
static get watchers() { return {
|
|
1121
1121
|
"revealOnScroll": ["onBehaviorPropsChange"],
|
|
@@ -1741,12 +1741,12 @@ const LePopover = class {
|
|
|
1741
1741
|
popoverStyles.minWidth = this.minWidth;
|
|
1742
1742
|
if (this.maxWidth)
|
|
1743
1743
|
popoverStyles.maxWidth = this.maxWidth;
|
|
1744
|
-
return (index.h(index.Host, { key: '
|
|
1744
|
+
return (index.h(index.Host, { key: '2f9cf64bec38fb417d783b3b0279f594888412cc', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: 'b9568393ba7ad41a63dbd98d37efc6e906ba429b', class: utils.classnames('le-popover-trigger', {
|
|
1745
1745
|
'le-popover-trigger-full-width': this.triggerFullWidth,
|
|
1746
|
-
}), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '
|
|
1746
|
+
}), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '4b354dbb5bc2afdaaed3154df08ffa93e8c9eb8b', name: "trigger" }, index.h("button", { key: 'f3935e5609049d4ab0325c4800806d504806d02c', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: '3d5005fa23631178e43cee22a2ab28ca168814b5' }, "\u2295")))), index.h("div", { key: 'b0c3d8197689d777a35467d8e7da563f43ca747b', id: this.uniqueId, class: "le-popover-content",
|
|
1747
1747
|
// Always use manual mode so nested popovers can be open together.
|
|
1748
1748
|
// We implement click-outside and Escape handling ourselves.
|
|
1749
|
-
popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '
|
|
1749
|
+
popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '1fc6c737b7388f46b57524e68f90c15572c7995d', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: '8b90c6a2455bdbff0ffa3b0641dd9b3812230f9a', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: 'a940cc73287aa9954543036a00e661ed6cf1214c', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: '2e5985096a5cd5e8cff9dea7e91430dbac17c5b7', class: "le-popover-body", part: "content" }, index.h("slot", { key: 'be0996467525c5a7c658ba1f8b72d4ad2370b5e9' })))));
|
|
1750
1750
|
}
|
|
1751
1751
|
};
|
|
1752
1752
|
LePopover.style = lePopoverCss();
|
|
@@ -2065,7 +2065,7 @@ const LeScrollProgress = class {
|
|
|
2065
2065
|
}
|
|
2066
2066
|
render() {
|
|
2067
2067
|
const width = `${this.progress * 100}%`;
|
|
2068
|
-
return (index.h(index.Host, { key: '
|
|
2068
|
+
return (index.h(index.Host, { key: 'cbadf9f2574e351a75629829d808cddb0faffa9f' }, index.h("div", { key: 'fa0ab594f7c0629ce888f2b6fe94001ff7e682ea', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'c440d66e68a5322766a88b5e3f3dee76399b9c5e', class: "fill", part: "fill", style: { width } }))));
|
|
2069
2069
|
}
|
|
2070
2070
|
static get watchers() { return {
|
|
2071
2071
|
"trackScrollProgress": ["onTrackChange"]
|
|
@@ -2240,13 +2240,13 @@ const LeSelect = class {
|
|
|
2240
2240
|
}
|
|
2241
2241
|
render() {
|
|
2242
2242
|
const hasValue = this.selectedOption !== undefined;
|
|
2243
|
-
return (index.h("le-component", { key: '
|
|
2243
|
+
return (index.h("le-component", { key: 'a0ca432db47f107068c4e042879e3d4dd414d06e', component: "le-select" }, index.h("le-dropdown-base", { key: '66f09301db0dcfada04db5e1ab29816e8f8d3b4d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: '7fd27c00d95a170074790ffdc717642d8461a2c6', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
|
|
2244
2244
|
'select-trigger': true,
|
|
2245
2245
|
'has-value': hasValue,
|
|
2246
2246
|
'is-open': this.open,
|
|
2247
2247
|
}, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
|
|
2248
2248
|
? this.renderIcon(this.selectedOption.iconStart)
|
|
2249
|
-
: null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: '
|
|
2249
|
+
: null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: '6fca1cffb7daf5884b39d229d34062b3cdba9e08', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'c81b509a8c60ce714ad690afa4a4f216e5202179', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'ff765da2ab677ece47247c9814d0ca1c33c8e755', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '7ed21492c742b5c48fe9eb42d9a3ac8cbfc42262', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
|
|
2250
2250
|
}
|
|
2251
2251
|
static get watchers() { return {
|
|
2252
2252
|
"value": ["handleValueChange"],
|
|
@@ -2590,7 +2590,7 @@ const LeSlot = class {
|
|
|
2590
2590
|
render() {
|
|
2591
2591
|
const displayLabel = this.label || this.name;
|
|
2592
2592
|
// Always render the same structure, CSS handles visibility via .admin-mode class
|
|
2593
|
-
return (index.h(index.Host, { key: '
|
|
2593
|
+
return (index.h(index.Host, { key: '2ec5bf87657767e9f173e3a54f6574314d1b9a5c', class: {
|
|
2594
2594
|
'admin-mode': this.adminMode,
|
|
2595
2595
|
'invalid-html': !this.isValidHtml,
|
|
2596
2596
|
}, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (index.h("div", { class: "le-slot-container" }, index.h("div", { class: utils.classnames('le-slot-header', {
|
|
@@ -2728,11 +2728,11 @@ const LeStringInput = class {
|
|
|
2728
2728
|
ev.stopPropagation();
|
|
2729
2729
|
};
|
|
2730
2730
|
render() {
|
|
2731
|
-
return (index.h("le-component", { key: '
|
|
2731
|
+
return (index.h("le-component", { key: 'db58477a8aad248ec99e39e2949df2fd7470d1d8', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: '213727813a87a8b11b48c4f3007b6f0575a75369', class: "le-input-wrapper" }, this.label && (index.h("label", { key: '981efc4b5ea8bb9459642c6b95bb377f199aa184', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: 'b66b4e42ee3830c28443ccc01916b430386dcfac', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'e4d2eb3fb5e3acddc8eeccc2c9368b96ae7da10b', class: "icon-start" }, this.iconStart), index.h("input", { key: 'adb72263beb77ae7ae036e90213b98e68044cced', ref: el => {
|
|
2732
2732
|
if (this.inputRef) {
|
|
2733
2733
|
this.inputRef(el);
|
|
2734
2734
|
}
|
|
2735
|
-
}, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: '
|
|
2735
|
+
}, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: '49aaa72cd3512ffd5efc543921ef6c4fadc62e61', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '5d19624840df8a25ee1e975680b279271015c2b9', class: "le-input-description" }, index.h("le-slot", { key: '32bd340c8ad780d684470d8bb62bb561c29ddfc0', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '72fd752c60411b60b6a3f7394d48db2c45e2126b', name: "description" })))))));
|
|
2736
2736
|
}
|
|
2737
2737
|
};
|
|
2738
2738
|
LeStringInput.style = leStringInputCss();
|
|
@@ -20,7 +20,7 @@ const LeCard = class {
|
|
|
20
20
|
*/
|
|
21
21
|
interactive = false;
|
|
22
22
|
render() {
|
|
23
|
-
return (index.h("le-component", { key: '
|
|
23
|
+
return (index.h("le-component", { key: 'b7eb138d4df55f27716d53c41ff7e1035e058cbe', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: 'db58aceaf332727671c73f121bd7c7b7c00c798e', class: "card", part: "card" }, index.h("div", { key: '1eb45033cee8e18dc9edfaba3341b1c8df8c737c', class: "card-header", part: "header" }, index.h("le-slot", { key: 'e77e29b0cf5965063554a50936fa0e9026fbc73a', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: 'b67e02c52fbfa2a7b1ed58e0c1537355af9a125e', name: "header" }))), index.h("div", { key: 'bcdbdc7c2e7addaaa4892d41cf5af2e43260c876', class: "card-content", part: "content" }, index.h("le-slot", { key: 'e4dc82322cbcb0ca884ac55c7805fa860fdaf588', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'e9576903dfc9c04c01614207078ee02a03d9f4b8' }))), index.h("div", { key: '6f684335dfc5acd55cbd832e2cd6f8a468df7a9a', class: "card-footer", part: "footer" }, index.h("le-slot", { key: 'b4013edc8431ba54f44cabd4763916c6e83bc6a8', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: '9e9d1c9d99beb2d877a9b8d59b13659e0c9c6459', name: "footer" }))))));
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
LeCard.style = leCardDefaultCss();
|
|
@@ -224,7 +224,7 @@ const LeCombobox = class {
|
|
|
224
224
|
}
|
|
225
225
|
render() {
|
|
226
226
|
const hasValue = this.inputValue.length > 0;
|
|
227
|
-
return (index.h("le-component", { key: '
|
|
227
|
+
return (index.h("le-component", { key: '5d1aae34a01c8e9d4744dee3921ad07733961158', component: "le-combobox" }, index.h("le-dropdown-base", { key: '449d64f2b8744828709c32051d4c6528621e7c4d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, index.h("div", { key: '5d4c616f2c55fba8ca5836a27af445123ef0755d', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, index.h("le-string-input", { key: '70f876a2a8842ce3fd20994e11501bc7766e6570', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (index.h("button", { key: 'ca5e8bdd951650f63c2284bf4d4634964462838c', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, index.h("svg", { key: '49b3e50b68a9c5f8a6c0708a43a60be559f6cdd8', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '33b347862ce2321bcc38823a3b25774f06e625f3', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: 'aa4080873acd15706757f33c032ad4c0caa03f01', class: "combobox-arrow" }, index.h("svg", { key: '86782ee6405d553baecac64d6a780a79dd5deda0', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '93cc4e3a3898c7f9b4149c2bd54934f7d9d4519b', d: "M4 6l4 4 4-4" }))))), this.name && index.h("input", { key: 'b0766761f5e8f48428af5e1a360cb2a51a9bf316', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
|
|
228
228
|
}
|
|
229
229
|
static get watchers() { return {
|
|
230
230
|
"value": ["handleValueChange"],
|
|
@@ -7,7 +7,7 @@ const LeHeaderPlaceholder = class {
|
|
|
7
7
|
index.registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (index.h(index.Host, { key: '
|
|
10
|
+
return (index.h(index.Host, { key: '53a4cd451e1b53a4be3b6b20c82e12f53a982a17', "aria-hidden": "true", style: {
|
|
11
11
|
display: 'block',
|
|
12
12
|
height: 'var(--le-header-height, 64px)',
|
|
13
13
|
} }));
|
|
@@ -286,13 +286,13 @@ const LeMultiselect = class {
|
|
|
286
286
|
render() {
|
|
287
287
|
const hasSelections = this.selectedOptions.length > 0;
|
|
288
288
|
const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
|
|
289
|
-
return (index.h("le-component", { key: '
|
|
289
|
+
return (index.h("le-component", { key: '140e151311a635aac4f9a14405466c5b93127576', component: "le-multiselect" }, index.h("le-dropdown-base", { key: '39f2f2ea2bccccd7dfee5514afb3c3767d0ac006', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, index.h("div", { key: '202886428f7731f7102135746c7506ccc9649390', slot: "trigger", class: {
|
|
290
290
|
'multiselect-trigger': true,
|
|
291
291
|
'has-selections': hasSelections,
|
|
292
292
|
'is-open': this.open,
|
|
293
293
|
'is-disabled': this.disabled,
|
|
294
|
-
}, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), index.h("div", { key: '
|
|
295
|
-
this.value.map(val => (index.h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (index.h("span", { key: '
|
|
294
|
+
}, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), index.h("div", { key: 'a181ed91241b2b2e67f6b0cf0450b172a505311a', class: "multiselect-actions" }, hasSelections && !this.disabled && (index.h("button", { key: 'cf6406faa147cefd721b4be7eebe36b7dcc096b9', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, index.h("svg", { key: '123cbff9842d26bb5854d1a501f1b6efa4c94e1b', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '966646d52554f636938cac32281b71185fd1af84', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: '9005886bc32ed7ce748db6ec9c7e194814043097', class: "multiselect-arrow" }, index.h("svg", { key: 'ed065128791c22b1015e209108d1352d4023dfd9', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '53c8a514bca6a56a70f4fe830e43f6433a31f07b', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (index.h("div", { key: '9883672b6d448039ba2774db6c327432825759c3', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'd8f1a827363829bb57f437bf478a9e331cfc1119', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
|
|
295
|
+
this.value.map(val => (index.h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (index.h("span", { key: 'c723d1feb85be0e1b4cd840f24acc53e16fd09f3', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
|
|
296
296
|
}
|
|
297
297
|
static get watchers() { return {
|
|
298
298
|
"value": ["handleValueChange"],
|
|
@@ -190,7 +190,7 @@ const LeNumberInput = class {
|
|
|
190
190
|
this.emitChange();
|
|
191
191
|
};
|
|
192
192
|
render() {
|
|
193
|
-
return (index.h("le-component", { key: '
|
|
193
|
+
return (index.h("le-component", { key: '5403532693c953ecb18a4eed385e51e65b85b25f', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '805a34c835e525c3b2058b1ed857c902820a8161', class: "le-input-wrapper" }, this.label && (index.h("label", { key: '65e7e6aa6f668407ca64be9e6aa6a1756ac379c3', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '9128a87c28796276b7b40c88a6a95a22fe7aea86', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: '2d6a2026db781100de617c6150e7e790f07cb778', class: "icon-start" }, this.iconStart)), index.h("input", { key: '5a17f9fca5f5e2706e34c0dfc3e5f74730c631b2', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: '4e075f49e495e320dfd3ec63936ea57a1798b5ab', class: "le-input-controls" }, index.h("le-button", { key: 'b3e4895ec49aa3a8579bf348c97f84e6e5667e5c', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: '436704faafdea57baa4df0d298ed1700cec81df8', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '154ddac168a71bde52370a389e8f1bfc46dd46eb', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: '4575bc557baad459ff91ec97a6384f766c1d01b2', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: '4b5d085fa37c799d594fccdb629f6c1cba80255e', class: "le-input-error" }, this.validationMessage), index.h("div", { key: 'd0d1486e6243e4ef2fbb462b41853b942c8789cb', class: "le-input-description" }, index.h("le-slot", { key: 'c841fb065ed38fe88d2b165d8cd8fde7e483920d', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'e5a3be8caf94d69cd8a105c64dfa5e473c00ab5d', name: "description" }))))));
|
|
194
194
|
}
|
|
195
195
|
static get watchers() { return {
|
|
196
196
|
"value": ["valueChanged"]
|
|
@@ -92,7 +92,7 @@ const LeRoundProgress = class {
|
|
|
92
92
|
return (index.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
|
-
return (index.h("div", { key: '
|
|
95
|
+
return (index.h("div", { key: 'ffb8f83f99c183fd82969cf6ec7822ccf4aa9af8', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '29aa0e60c26968564b1e930a3b1b9d32460721dd', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: '7a5cd37e96a65fa6397704d88a4add6e2a1ec1e9', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: 'eb135e9bad29d96cba229c5a5e61e74d4e6392ec' })));
|
|
96
96
|
}
|
|
97
97
|
static get watchers() { return {
|
|
98
98
|
"value": ["updateValue"],
|
|
@@ -228,7 +228,7 @@ const LeSegmentedControl = class {
|
|
|
228
228
|
'full-width': fullWidth,
|
|
229
229
|
'disabled': disabled,
|
|
230
230
|
};
|
|
231
|
-
return (index.h(index.Host, { key: '
|
|
231
|
+
return (index.h(index.Host, { key: '567a033dd9fbb023d599b918bdc9f6505a98b4be', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '0f60a5e7985740f9309c1fbc98df297149a2988c', component: "le-segmented-control" }, index.h("div", { key: '6c5e3f60ed1ed2bace109750ab79a4a36edaf60b', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
|
|
232
232
|
const optValue = this.getOptionValue(option);
|
|
233
233
|
const isSelected = optValue === value;
|
|
234
234
|
const isDisabled = option.disabled || disabled;
|
|
@@ -126,7 +126,7 @@ const LeStack = class {
|
|
|
126
126
|
});
|
|
127
127
|
// Slot style for admin mode - make items display in the same direction
|
|
128
128
|
const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
|
|
129
|
-
return (index.h("le-component", { key: '
|
|
129
|
+
return (index.h("le-component", { key: '39228201dedcc0975488238fbe18411cd48a6ad3', component: "le-stack", hostClass: hostClass }, index.h("div", { key: 'b091295bebfdbc4d7a650d592e9d9de826730a2d', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: '32c1c13d8a818613c07aa7ba56505c65194755bb', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, index.h("slot", { key: '05110d4ab7abfc4fa1687ec110de0c482ad3588e' })))));
|
|
130
130
|
}
|
|
131
131
|
};
|
|
132
132
|
LeStack.style = leStackDefaultCss();
|
|
@@ -225,7 +225,7 @@ const LeTabBar = class {
|
|
|
225
225
|
'position-top': this.position === 'top',
|
|
226
226
|
'position-bottom': this.position === 'bottom',
|
|
227
227
|
};
|
|
228
|
-
return (index.h(index.Host, { key: '
|
|
228
|
+
return (index.h(index.Host, { key: '03f3a22715a909d668ff293a92a91f7120983ecd', class: classes }, index.h("le-component", { key: '86da25b4d88d889523e5b19206cd336e98fc32e7', component: "le-tab-bar" }, index.h("div", { key: 'f34a6496e03b15380b9839ec2104e2a19a62b685', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: '35b09441b75eb660350bb0d636660249ba156195', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
|
|
229
229
|
const value = this.getTabValue(tab);
|
|
230
230
|
const isSelected = value === selected;
|
|
231
231
|
return (index.h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, index.h("span", { class: "tab-label" }, tab.label)));
|
|
@@ -84,11 +84,11 @@ const LeTabPanel = class {
|
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
86
|
const shouldRender = this.shouldRenderContent();
|
|
87
|
-
return (index.h("le-component", { key: '
|
|
87
|
+
return (index.h("le-component", { key: '8ae45da7951a15dd1178264f0fcd61f446b7f50c', component: "le-tab-panel" }, index.h("div", { key: 'cda465344d5c9d79945b924fca39f469c4535157', class: {
|
|
88
88
|
'tab-panel': true,
|
|
89
89
|
'active': this.active,
|
|
90
90
|
'lazy-hidden': this.lazy && !this.active,
|
|
91
|
-
}, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: '
|
|
91
|
+
}, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: 'c7107b12b375e614b523b6ad4d3f1afb81e93bd6', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '48580ffcedff46a2f9351e3790c257062b64d101' })))));
|
|
92
92
|
}
|
|
93
93
|
static get watchers() { return {
|
|
94
94
|
"active": ["activeChanged"]
|
|
@@ -127,7 +127,7 @@ const LeTab = class {
|
|
|
127
127
|
const attrs = this.href
|
|
128
128
|
? { href: this.href, target: this.target, role: 'button' }
|
|
129
129
|
: { disabled: this.disabled };
|
|
130
|
-
return (index.h(index.Host, { key: '
|
|
130
|
+
return (index.h(index.Host, { key: '3f96ce4f479bcd0ddd35f07dd488e9584484b464' }, index.h("le-component", { key: '33bacc8d4b513904d366570c250e1e2ddbc7c210', component: "le-tab" }, index.h(TagType, { key: '5addc8519aee06d8c3406dd8684e4b8d2cd86caa', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
LeTab.style = leTabCss();
|
|
@@ -273,7 +273,7 @@ const LeTabs = class {
|
|
|
273
273
|
: this.position === 'start'
|
|
274
274
|
? 'top'
|
|
275
275
|
: 'bottom';
|
|
276
|
-
return (index.h("le-component", { key: '
|
|
276
|
+
return (index.h("le-component", { key: 'f3f3847f64cc12236d84bcd2027bb42bd8af3756', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: '204e8cc3a6890496f6f8e0c9791b472c0a28585a', class: classes }, index.h("div", { key: '3d87b1ebfb432154ab415e5e69ee5485ef546429', class: {
|
|
277
277
|
'tablist': true,
|
|
278
278
|
'wrap-tabs': this.wrap,
|
|
279
279
|
[`overflow-${this.overflow}`]: true,
|
|
@@ -282,7 +282,7 @@ const LeTabs = class {
|
|
|
282
282
|
const tabId = `tab-${config.value}`;
|
|
283
283
|
const panelId = `panel-${config.value}`;
|
|
284
284
|
return (index.h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, index.h("span", { class: "tab-label" }, config.label)));
|
|
285
|
-
})), index.h("div", { key: '
|
|
285
|
+
})), index.h("div", { key: 'c09c5228a9e3fd9e091ece0974d159ff05195907', class: "panels", part: "panels" }, isDeclarativeMode ? (
|
|
286
286
|
// Declarative mode - render slot for le-tab-panel children
|
|
287
287
|
index.h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, index.h("slot", null))) : (
|
|
288
288
|
// Programmatic mode - render named slots
|
|
@@ -59,7 +59,7 @@ const LeTag = class {
|
|
|
59
59
|
return index.h("span", { class: "tag-icon" }, this.icon);
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h("le-component", { key: '
|
|
62
|
+
return (index.h("le-component", { key: '1b899660574d9ca3c513a394c3f979de2221e5b9', component: "le-tag" }, index.h("span", { key: 'f41bf783b0409d68f3975ea9d8c7443f591f9d6b', class: "tag" }, this.renderIcon(), index.h("span", { key: 'b873ada5b9d1904ed90b614b26a4ac5655ffed97', class: "tag-label" }, index.h("le-slot", { key: '2f1ee302a3a7ce2b06c436e5dd52c03c3a30f0de', name: "", tag: "span", type: "text" }, index.h("slot", { key: '7d349e9859e6d586ddd1b2a6c990a41b04cba00c' }, this.label))), this.dismissible && (index.h("button", { key: '140aee44497f7a883ac983634a74032043f8429e', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: '14dd70b058b110d2753c1014bef241d7782d5f9e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'b1ce480cd49e5b7f543aa7747f215e1b0435b0a4', d: "M4 4l8 8M12 4l-8 8" })))))));
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
LeTag.style = leTagCss();
|
|
@@ -127,7 +127,7 @@ const LeTurntable = class {
|
|
|
127
127
|
this.el.style.transform = `rotate(${angle}deg)`;
|
|
128
128
|
}
|
|
129
129
|
render() {
|
|
130
|
-
return (index.h("div", { key: '
|
|
130
|
+
return (index.h("div", { key: '57c8d99bae0b1602f5c514b95318811f906ca235', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, index.h("slot", { key: '1d613224984f1472034775376c8ec1c6fa782427' })));
|
|
131
131
|
}
|
|
132
132
|
static get watchers() { return {
|
|
133
133
|
"value": ["updateValue"]
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.le-button-container:active:not(:disabled) {
|
|
65
|
-
box-shadow: inset 0 0
|
|
65
|
+
box-shadow: inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.le-button-container:focus-visible {
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
* =========================================== */
|
|
89
89
|
|
|
90
90
|
/* Primary (default) */
|
|
91
|
-
:host
|
|
91
|
+
:host(.color-primary) {
|
|
92
92
|
--_btn-bg: var(--le-color-primary);
|
|
93
93
|
--_btn-bg-hover: var(--le-color-primary-dark);
|
|
94
94
|
--_btn-color: var(--le-button-color);
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
/* Secondary */
|
|
99
|
-
:host
|
|
99
|
+
:host(.color-secondary) {
|
|
100
100
|
--_btn-bg: var(--le-color-secondary);
|
|
101
101
|
--_btn-bg-hover: var(--le-color-secondary-dark);
|
|
102
102
|
--_btn-color: var(--le-color-secondary-contrast);
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
/* Success */
|
|
107
|
-
:host
|
|
107
|
+
:host(.color-success) {
|
|
108
108
|
--_btn-bg: var(--le-color-success);
|
|
109
109
|
--_btn-bg-hover: var(--le-color-success-dark);
|
|
110
110
|
--_btn-color: var(--le-color-success-contrast);
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
/* Warning */
|
|
115
|
-
:host
|
|
115
|
+
:host(.color-warning) {
|
|
116
116
|
--_btn-bg: var(--le-color-warning);
|
|
117
117
|
--_btn-bg-hover: var(--le-color-warning-dark);
|
|
118
118
|
--_btn-color: var(--le-color-warning-contrast);
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
/* Danger */
|
|
123
|
-
:host
|
|
123
|
+
:host(.color-danger) {
|
|
124
124
|
--_btn-bg: var(--le-color-danger);
|
|
125
125
|
--_btn-bg-hover: var(--le-color-danger-dark);
|
|
126
126
|
--_btn-color: var(--le-color-danger-contrast);
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
/* Info */
|
|
131
|
-
:host
|
|
131
|
+
:host(.color-info) {
|
|
132
132
|
--_btn-bg: var(--le-color-info);
|
|
133
133
|
--_btn-bg-hover: var(--le-color-info-dark);
|
|
134
134
|
--_btn-color: var(--le-color-info-contrast);
|
|
@@ -140,39 +140,39 @@
|
|
|
140
140
|
* =========================================== */
|
|
141
141
|
|
|
142
142
|
/* Solid (default) - already styled by color classes */
|
|
143
|
-
:host
|
|
143
|
+
:host(.variant-solid) .le-button-container {
|
|
144
144
|
box-shadow: var(--le-shadow-sm);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
:host
|
|
147
|
+
:host(.variant-solid) .le-button-container:hover:not(:disabled) {
|
|
148
148
|
box-shadow: var(--le-shadow-md);
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
/* Outlined */
|
|
152
|
-
:host
|
|
152
|
+
:host(.variant-outlined) .le-button-container {
|
|
153
153
|
background: transparent;
|
|
154
154
|
color: var(--_btn-bg);
|
|
155
155
|
border-color: color-mix(in srgb, var(--_btn-border-color) 33%, transparent);
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
:host
|
|
158
|
+
:host(.variant-outlined) .le-button-container:hover:not(:disabled) {
|
|
159
159
|
border-color: var(--_btn-border-color);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
/* Clear (ghost) */
|
|
163
|
-
:host
|
|
163
|
+
:host(.variant-clear) .le-button-container {
|
|
164
164
|
background: transparent;
|
|
165
165
|
color: var(--_btn-bg);
|
|
166
166
|
border-color: transparent;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
:host
|
|
169
|
+
:host(.variant-clear) .le-button-container:hover:not(:disabled) {
|
|
170
170
|
background: var(--le-color-gray-100);
|
|
171
171
|
border-color: transparent;
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
/* System (controls without access) */
|
|
175
|
-
:host
|
|
175
|
+
:host(.variant-system) .le-button-container {
|
|
176
176
|
background: transparent;
|
|
177
177
|
color: var(--_btn-bg-system);
|
|
178
178
|
border-color: transparent;
|
|
@@ -181,14 +181,14 @@
|
|
|
181
181
|
/* ===========================================
|
|
182
182
|
* SIZES
|
|
183
183
|
* =========================================== */
|
|
184
|
-
:host
|
|
184
|
+
:host(.size-small) {
|
|
185
185
|
--le-button-padding-x: 0.4rem;
|
|
186
186
|
--le-button-padding-y: 0.3rem;
|
|
187
187
|
--le-button-padding-top: 0.35rem;
|
|
188
188
|
--le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
:host
|
|
191
|
+
:host(.size-large) {
|
|
192
192
|
--le-button-padding-x: 0.9rem;
|
|
193
193
|
--le-button-padding-y: 0.6rem;
|
|
194
194
|
--le-button-font-size: var(--le-font-size-xl);
|
|
@@ -199,39 +199,39 @@
|
|
|
199
199
|
* =========================================== */
|
|
200
200
|
|
|
201
201
|
/* Full width */
|
|
202
|
-
:host
|
|
202
|
+
:host(.full-width) {
|
|
203
203
|
display: block;
|
|
204
204
|
width: 100%;
|
|
205
205
|
}
|
|
206
206
|
|
|
207
207
|
/* Selected state */
|
|
208
|
-
:host
|
|
208
|
+
:host(.selected) .le-button-container {
|
|
209
209
|
box-shadow: inset 0 0 4px var(--le-color-shadow);
|
|
210
210
|
}
|
|
211
211
|
|
|
212
|
-
:host
|
|
213
|
-
:host
|
|
212
|
+
:host(.variant-outlined.selected) .le-button-container,
|
|
213
|
+
:host(.variant-clear.selected) .le-button-container {
|
|
214
214
|
background: var(--_btn-bg);
|
|
215
215
|
color: var(--_btn-color);
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
/* Icon only */
|
|
219
|
-
:host
|
|
219
|
+
:host(.icon-only) .le-button-container {
|
|
220
220
|
padding: 0.5rem;
|
|
221
221
|
padding-bottom: 0.6rem;
|
|
222
222
|
aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
:host
|
|
225
|
+
:host(.icon-only.size-small) .le-button-container {
|
|
226
226
|
padding: var(--le-button-small-padding, 0.25rem);
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
:host
|
|
229
|
+
:host(.icon-only.size-large) .le-button-container {
|
|
230
230
|
padding: 0.75rem;
|
|
231
231
|
}
|
|
232
232
|
|
|
233
233
|
/* Hide content in icon-only mode */
|
|
234
|
-
:host
|
|
234
|
+
:host(.icon-only) .content {
|
|
235
235
|
display: none;
|
|
236
236
|
}
|
|
237
237
|
|