@limetech/lime-elements 33.14.0-next.4 → 33.14.0-next.8
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/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-list_3.cjs.entry.js +2 -0
- package/dist/cjs/limel-menu.cjs.entry.js +49 -1
- package/dist/cjs/limel-tooltip.cjs.entry.js +6 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/list/list.js +2 -0
- package/dist/collection/components/menu/menu.js +51 -2
- package/dist/collection/components/tab-panel/tab-panel.js +2 -1
- package/dist/collection/components/tab-panel/tab-panel.types.js +1 -0
- package/dist/collection/components/tooltip/tooltip-content.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +9 -4
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-list_3.entry.js +2 -0
- package/dist/esm/limel-menu.entry.js +49 -1
- package/dist/esm/limel-tooltip.entry.js +6 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-63e4f918.entry.js +1 -0
- package/dist/lime-elements/p-6fcc1378.entry.js +177 -0
- package/dist/lime-elements/p-b0b18dfc.entry.js +1 -0
- package/dist/types/components/menu/menu.d.ts +7 -0
- package/dist/types/components/tab-panel/tab-panel.d.ts +2 -1
- package/dist/types/components/tab-panel/tab-panel.types.d.ts +16 -0
- package/dist/types/components/tooltip/tooltip.d.ts +1 -0
- package/dist/types/interface.d.ts +1 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-1f3b6139.entry.js +0 -1
- package/dist/lime-elements/p-4e6042f7.entry.js +0 -1
- package/dist/lime-elements/p-8e8219ac.entry.js +0 -177
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[
|
|
18
|
+
return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip-content.cjs",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-flatpickr-adapter_2.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
|
|
19
19
|
});
|
|
@@ -3244,6 +3244,8 @@ const List = class {
|
|
|
3244
3244
|
return;
|
|
3245
3245
|
}
|
|
3246
3246
|
this.mdcMenu = new MDCMenu(element);
|
|
3247
|
+
this.mdcMenu.hasTypeahead = true;
|
|
3248
|
+
this.mdcMenu.wrapFocus = true;
|
|
3247
3249
|
this.mdcMenu.items.forEach((item) => new component$1.MDCRipple(item));
|
|
3248
3250
|
}
|
|
3249
3251
|
setupListeners() {
|
|
@@ -55,6 +55,22 @@ const Menu = class {
|
|
|
55
55
|
* obsolete.
|
|
56
56
|
*/
|
|
57
57
|
this.fixed = false;
|
|
58
|
+
this.setTriggerAttributes = (element) => {
|
|
59
|
+
const attributes = {
|
|
60
|
+
'aria-haspopup': true,
|
|
61
|
+
'aria-expanded': this.open,
|
|
62
|
+
disabled: this.disabled,
|
|
63
|
+
role: 'button',
|
|
64
|
+
};
|
|
65
|
+
for (const [key, value] of Object.entries(attributes)) {
|
|
66
|
+
if (!value) {
|
|
67
|
+
element.removeAttribute(key);
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
element.setAttribute(key, String(value));
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
58
74
|
this.onClose = () => {
|
|
59
75
|
this.cancel.emit();
|
|
60
76
|
this.open = false;
|
|
@@ -76,6 +92,18 @@ const Menu = class {
|
|
|
76
92
|
this.select.emit(event.detail);
|
|
77
93
|
this.open = false;
|
|
78
94
|
};
|
|
95
|
+
this.setListElement = (element) => {
|
|
96
|
+
this.list = element;
|
|
97
|
+
};
|
|
98
|
+
this.focusMenuItem = () => {
|
|
99
|
+
var _a;
|
|
100
|
+
const activeElement = this.list.shadowRoot.activeElement;
|
|
101
|
+
activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
|
|
102
|
+
const listItems = this.items.filter(this.isListItem);
|
|
103
|
+
const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
|
|
104
|
+
const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
|
|
105
|
+
(_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
106
|
+
};
|
|
79
107
|
this.portalId = randomString.createRandomString();
|
|
80
108
|
}
|
|
81
109
|
componentDidLoad() {
|
|
@@ -84,6 +112,16 @@ const Menu = class {
|
|
|
84
112
|
console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
|
|
85
113
|
}
|
|
86
114
|
}
|
|
115
|
+
openWatcher() {
|
|
116
|
+
if (!this.open) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
const observer = new IntersectionObserver(() => {
|
|
120
|
+
observer.unobserve(this.list);
|
|
121
|
+
this.focusMenuItem();
|
|
122
|
+
});
|
|
123
|
+
observer.observe(this.list);
|
|
124
|
+
}
|
|
87
125
|
render() {
|
|
88
126
|
const cssProperties = this.getCssProperties();
|
|
89
127
|
const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
|
|
@@ -93,7 +131,11 @@ const Menu = class {
|
|
|
93
131
|
const portalPosition = this.getPortalPosition();
|
|
94
132
|
return (index.h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { name: "trigger" }, this.renderTrigger()), index.h("limel-portal", { class: portalClasses, style: portalPosition, visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: this.fixed ? 'fixed' : 'absolute', containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties }, index.h("limel-list", { class: {
|
|
95
133
|
'has-grid-layout has-interactive-items': this.gridLayout,
|
|
96
|
-
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange })))));
|
|
134
|
+
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
|
|
135
|
+
}
|
|
136
|
+
componentDidRender() {
|
|
137
|
+
const slotElement = this.host.shadowRoot.querySelector('slot');
|
|
138
|
+
slotElement.assignedElements().forEach(this.setTriggerAttributes);
|
|
97
139
|
}
|
|
98
140
|
renderTrigger() {
|
|
99
141
|
return (index.h("button", { class: `
|
|
@@ -128,7 +170,13 @@ const Menu = class {
|
|
|
128
170
|
});
|
|
129
171
|
return zipObject.zipObject(propertyNames, values);
|
|
130
172
|
}
|
|
173
|
+
isListItem(item) {
|
|
174
|
+
return !('separator' in item);
|
|
175
|
+
}
|
|
131
176
|
get host() { return index.getElement(this); }
|
|
177
|
+
static get watchers() { return {
|
|
178
|
+
"open": ["openWatcher"]
|
|
179
|
+
}; }
|
|
132
180
|
};
|
|
133
181
|
Menu.style = menuCss;
|
|
134
182
|
|
|
@@ -11,9 +11,13 @@ const Tooltip = class {
|
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.showTooltip = () => {
|
|
14
|
-
|
|
14
|
+
const tooltipDelay = 500;
|
|
15
|
+
this.showTooltipTimeoutHandle = window.setTimeout(() => {
|
|
16
|
+
this.open = true;
|
|
17
|
+
}, tooltipDelay);
|
|
15
18
|
};
|
|
16
19
|
this.hideTooltip = () => {
|
|
20
|
+
clearTimeout(this.showTooltipTimeoutHandle);
|
|
17
21
|
this.open = false;
|
|
18
22
|
};
|
|
19
23
|
this.portalId = randomString.createRandomString();
|
|
@@ -30,6 +34,7 @@ const Tooltip = class {
|
|
|
30
34
|
const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
|
|
31
35
|
return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: {
|
|
32
36
|
'z-index': tooltipZIndex,
|
|
37
|
+
'pointer-events': 'none',
|
|
33
38
|
} }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
|
|
34
39
|
}
|
|
35
40
|
setOwnerAriaLabel() {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[
|
|
17
|
+
return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip-content.cjs",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-flatpickr-adapter_2.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Event, h, Prop, Element, } from '@stencil/core';
|
|
1
|
+
import { Component, Event, h, Prop, Element, Watch, } from '@stencil/core';
|
|
2
2
|
import { createRandomString } from '../../util/random-string';
|
|
3
3
|
import { zipObject } from 'lodash-es';
|
|
4
4
|
/**
|
|
@@ -52,6 +52,22 @@ export class Menu {
|
|
|
52
52
|
* obsolete.
|
|
53
53
|
*/
|
|
54
54
|
this.fixed = false;
|
|
55
|
+
this.setTriggerAttributes = (element) => {
|
|
56
|
+
const attributes = {
|
|
57
|
+
'aria-haspopup': true,
|
|
58
|
+
'aria-expanded': this.open,
|
|
59
|
+
disabled: this.disabled,
|
|
60
|
+
role: 'button',
|
|
61
|
+
};
|
|
62
|
+
for (const [key, value] of Object.entries(attributes)) {
|
|
63
|
+
if (!value) {
|
|
64
|
+
element.removeAttribute(key);
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
element.setAttribute(key, String(value));
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
55
71
|
this.onClose = () => {
|
|
56
72
|
this.cancel.emit();
|
|
57
73
|
this.open = false;
|
|
@@ -73,6 +89,18 @@ export class Menu {
|
|
|
73
89
|
this.select.emit(event.detail);
|
|
74
90
|
this.open = false;
|
|
75
91
|
};
|
|
92
|
+
this.setListElement = (element) => {
|
|
93
|
+
this.list = element;
|
|
94
|
+
};
|
|
95
|
+
this.focusMenuItem = () => {
|
|
96
|
+
var _a;
|
|
97
|
+
const activeElement = this.list.shadowRoot.activeElement;
|
|
98
|
+
activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
|
|
99
|
+
const listItems = this.items.filter(this.isListItem);
|
|
100
|
+
const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
|
|
101
|
+
const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
|
|
102
|
+
(_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
103
|
+
};
|
|
76
104
|
this.portalId = createRandomString();
|
|
77
105
|
}
|
|
78
106
|
componentDidLoad() {
|
|
@@ -81,6 +109,16 @@ export class Menu {
|
|
|
81
109
|
console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
|
|
82
110
|
}
|
|
83
111
|
}
|
|
112
|
+
openWatcher() {
|
|
113
|
+
if (!this.open) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
const observer = new IntersectionObserver(() => {
|
|
117
|
+
observer.unobserve(this.list);
|
|
118
|
+
this.focusMenuItem();
|
|
119
|
+
});
|
|
120
|
+
observer.observe(this.list);
|
|
121
|
+
}
|
|
84
122
|
render() {
|
|
85
123
|
const cssProperties = this.getCssProperties();
|
|
86
124
|
const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
|
|
@@ -94,7 +132,11 @@ export class Menu {
|
|
|
94
132
|
h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties },
|
|
95
133
|
h("limel-list", { class: {
|
|
96
134
|
'has-grid-layout has-interactive-items': this.gridLayout,
|
|
97
|
-
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange })))));
|
|
135
|
+
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
|
|
136
|
+
}
|
|
137
|
+
componentDidRender() {
|
|
138
|
+
const slotElement = this.host.shadowRoot.querySelector('slot');
|
|
139
|
+
slotElement.assignedElements().forEach(this.setTriggerAttributes);
|
|
98
140
|
}
|
|
99
141
|
renderTrigger() {
|
|
100
142
|
return (h("button", { class: `
|
|
@@ -130,6 +172,9 @@ export class Menu {
|
|
|
130
172
|
});
|
|
131
173
|
return zipObject(propertyNames, values);
|
|
132
174
|
}
|
|
175
|
+
isListItem(item) {
|
|
176
|
+
return !('separator' in item);
|
|
177
|
+
}
|
|
133
178
|
static get is() { return "limel-menu"; }
|
|
134
179
|
static get encapsulation() { return "shadow"; }
|
|
135
180
|
static get originalStyleUrls() { return {
|
|
@@ -342,4 +387,8 @@ export class Menu {
|
|
|
342
387
|
}
|
|
343
388
|
}]; }
|
|
344
389
|
static get elementRef() { return "host"; }
|
|
390
|
+
static get watchers() { return [{
|
|
391
|
+
"propName": "open",
|
|
392
|
+
"methodName": "openWatcher"
|
|
393
|
+
}]; }
|
|
345
394
|
}
|
|
@@ -4,7 +4,8 @@ import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
|
|
|
4
4
|
* The `limel-tab-panel` component uses the `limel-tab-bar` component together
|
|
5
5
|
* with custom slotted components and will display the content for the currently
|
|
6
6
|
* active tab. Each slotted component must have an id equal to the id of the
|
|
7
|
-
* corresponding tab it belongs to.
|
|
7
|
+
* corresponding tab it belongs to. These components should implement the
|
|
8
|
+
* [TabPanelComponent](#/type/TabPanelComponent/) interface.
|
|
8
9
|
*
|
|
9
10
|
* The `limel-tab-panel` component will automatically set each tab configuration
|
|
10
11
|
* on the corresponding slotted component as a property named `tab` so that the
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -34,7 +34,7 @@ export class TooltipContent {
|
|
|
34
34
|
"text": "Short descriptive text of the owner element."
|
|
35
35
|
},
|
|
36
36
|
"attribute": "label",
|
|
37
|
-
"reflect":
|
|
37
|
+
"reflect": true
|
|
38
38
|
},
|
|
39
39
|
"helperLabel": {
|
|
40
40
|
"type": "string",
|
|
@@ -51,7 +51,7 @@ export class TooltipContent {
|
|
|
51
51
|
"text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
|
|
52
52
|
},
|
|
53
53
|
"attribute": "helper-label",
|
|
54
|
-
"reflect":
|
|
54
|
+
"reflect": true
|
|
55
55
|
}
|
|
56
56
|
}; }
|
|
57
57
|
}
|
|
@@ -18,9 +18,13 @@ import { createRandomString } from '../../util/random-string';
|
|
|
18
18
|
export class Tooltip {
|
|
19
19
|
constructor() {
|
|
20
20
|
this.showTooltip = () => {
|
|
21
|
-
|
|
21
|
+
const tooltipDelay = 500;
|
|
22
|
+
this.showTooltipTimeoutHandle = window.setTimeout(() => {
|
|
23
|
+
this.open = true;
|
|
24
|
+
}, tooltipDelay);
|
|
22
25
|
};
|
|
23
26
|
this.hideTooltip = () => {
|
|
27
|
+
clearTimeout(this.showTooltipTimeoutHandle);
|
|
24
28
|
this.open = false;
|
|
25
29
|
};
|
|
26
30
|
this.portalId = createRandomString();
|
|
@@ -38,6 +42,7 @@ export class Tooltip {
|
|
|
38
42
|
return (h("div", { class: "trigger-anchor" },
|
|
39
43
|
h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: {
|
|
40
44
|
'z-index': tooltipZIndex,
|
|
45
|
+
'pointer-events': 'none',
|
|
41
46
|
} },
|
|
42
47
|
h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
|
|
43
48
|
}
|
|
@@ -91,7 +96,7 @@ export class Tooltip {
|
|
|
91
96
|
"text": "Short descriptive text of the owner element."
|
|
92
97
|
},
|
|
93
98
|
"attribute": "label",
|
|
94
|
-
"reflect":
|
|
99
|
+
"reflect": true
|
|
95
100
|
},
|
|
96
101
|
"helperLabel": {
|
|
97
102
|
"type": "string",
|
|
@@ -108,7 +113,7 @@ export class Tooltip {
|
|
|
108
113
|
"text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
|
|
109
114
|
},
|
|
110
115
|
"attribute": "helper-label",
|
|
111
|
-
"reflect":
|
|
116
|
+
"reflect": true
|
|
112
117
|
},
|
|
113
118
|
"elementId": {
|
|
114
119
|
"type": "string",
|
|
@@ -125,7 +130,7 @@ export class Tooltip {
|
|
|
125
130
|
"text": "ID of the owner element that the tooltip should describe.\nMust be a child within the same document fragment as the tooltip element\nitself."
|
|
126
131
|
},
|
|
127
132
|
"attribute": "element-id",
|
|
128
|
-
"reflect":
|
|
133
|
+
"reflect": true
|
|
129
134
|
}
|
|
130
135
|
}; }
|
|
131
136
|
static get states() { return {
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip",[[1,"limel-tooltip",{"label":[
|
|
16
|
+
return bootstrapLazy([["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-popover-surface",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip-content",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-list_3",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-flatpickr-adapter_2",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
|
|
17
17
|
});
|
|
@@ -3240,6 +3240,8 @@ const List = class {
|
|
|
3240
3240
|
return;
|
|
3241
3241
|
}
|
|
3242
3242
|
this.mdcMenu = new MDCMenu(element);
|
|
3243
|
+
this.mdcMenu.hasTypeahead = true;
|
|
3244
|
+
this.mdcMenu.wrapFocus = true;
|
|
3243
3245
|
this.mdcMenu.items.forEach((item) => new MDCRipple(item));
|
|
3244
3246
|
}
|
|
3245
3247
|
setupListeners() {
|
|
@@ -51,6 +51,22 @@ const Menu = class {
|
|
|
51
51
|
* obsolete.
|
|
52
52
|
*/
|
|
53
53
|
this.fixed = false;
|
|
54
|
+
this.setTriggerAttributes = (element) => {
|
|
55
|
+
const attributes = {
|
|
56
|
+
'aria-haspopup': true,
|
|
57
|
+
'aria-expanded': this.open,
|
|
58
|
+
disabled: this.disabled,
|
|
59
|
+
role: 'button',
|
|
60
|
+
};
|
|
61
|
+
for (const [key, value] of Object.entries(attributes)) {
|
|
62
|
+
if (!value) {
|
|
63
|
+
element.removeAttribute(key);
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
element.setAttribute(key, String(value));
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
54
70
|
this.onClose = () => {
|
|
55
71
|
this.cancel.emit();
|
|
56
72
|
this.open = false;
|
|
@@ -72,6 +88,18 @@ const Menu = class {
|
|
|
72
88
|
this.select.emit(event.detail);
|
|
73
89
|
this.open = false;
|
|
74
90
|
};
|
|
91
|
+
this.setListElement = (element) => {
|
|
92
|
+
this.list = element;
|
|
93
|
+
};
|
|
94
|
+
this.focusMenuItem = () => {
|
|
95
|
+
var _a;
|
|
96
|
+
const activeElement = this.list.shadowRoot.activeElement;
|
|
97
|
+
activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
|
|
98
|
+
const listItems = this.items.filter(this.isListItem);
|
|
99
|
+
const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
|
|
100
|
+
const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
|
|
101
|
+
(_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
102
|
+
};
|
|
75
103
|
this.portalId = createRandomString();
|
|
76
104
|
}
|
|
77
105
|
componentDidLoad() {
|
|
@@ -80,6 +108,16 @@ const Menu = class {
|
|
|
80
108
|
console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
|
|
81
109
|
}
|
|
82
110
|
}
|
|
111
|
+
openWatcher() {
|
|
112
|
+
if (!this.open) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
const observer = new IntersectionObserver(() => {
|
|
116
|
+
observer.unobserve(this.list);
|
|
117
|
+
this.focusMenuItem();
|
|
118
|
+
});
|
|
119
|
+
observer.observe(this.list);
|
|
120
|
+
}
|
|
83
121
|
render() {
|
|
84
122
|
const cssProperties = this.getCssProperties();
|
|
85
123
|
const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
|
|
@@ -89,7 +127,11 @@ const Menu = class {
|
|
|
89
127
|
const portalPosition = this.getPortalPosition();
|
|
90
128
|
return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { name: "trigger" }, this.renderTrigger()), h("limel-portal", { class: portalClasses, style: portalPosition, visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: this.fixed ? 'fixed' : 'absolute', containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties }, h("limel-list", { class: {
|
|
91
129
|
'has-grid-layout has-interactive-items': this.gridLayout,
|
|
92
|
-
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange })))));
|
|
130
|
+
}, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
|
|
131
|
+
}
|
|
132
|
+
componentDidRender() {
|
|
133
|
+
const slotElement = this.host.shadowRoot.querySelector('slot');
|
|
134
|
+
slotElement.assignedElements().forEach(this.setTriggerAttributes);
|
|
93
135
|
}
|
|
94
136
|
renderTrigger() {
|
|
95
137
|
return (h("button", { class: `
|
|
@@ -124,7 +166,13 @@ const Menu = class {
|
|
|
124
166
|
});
|
|
125
167
|
return zipObject(propertyNames, values);
|
|
126
168
|
}
|
|
169
|
+
isListItem(item) {
|
|
170
|
+
return !('separator' in item);
|
|
171
|
+
}
|
|
127
172
|
get host() { return getElement(this); }
|
|
173
|
+
static get watchers() { return {
|
|
174
|
+
"open": ["openWatcher"]
|
|
175
|
+
}; }
|
|
128
176
|
};
|
|
129
177
|
Menu.style = menuCss;
|
|
130
178
|
|
|
@@ -7,9 +7,13 @@ const Tooltip = class {
|
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.showTooltip = () => {
|
|
10
|
-
|
|
10
|
+
const tooltipDelay = 500;
|
|
11
|
+
this.showTooltipTimeoutHandle = window.setTimeout(() => {
|
|
12
|
+
this.open = true;
|
|
13
|
+
}, tooltipDelay);
|
|
11
14
|
};
|
|
12
15
|
this.hideTooltip = () => {
|
|
16
|
+
clearTimeout(this.showTooltipTimeoutHandle);
|
|
13
17
|
this.open = false;
|
|
14
18
|
};
|
|
15
19
|
this.portalId = createRandomString();
|
|
@@ -26,6 +30,7 @@ const Tooltip = class {
|
|
|
26
30
|
const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
|
|
27
31
|
return (h("div", { class: "trigger-anchor" }, h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: {
|
|
28
32
|
'z-index': tooltipZIndex,
|
|
33
|
+
'pointer-events': 'none',
|
|
29
34
|
} }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
|
|
30
35
|
}
|
|
31
36
|
setOwnerAriaLabel() {
|
package/dist/esm/loader.js
CHANGED
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip",[[1,"limel-tooltip",{"label":[
|
|
13
|
+
return bootstrapLazy([["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-tooltip",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-popover-surface",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip-content",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-list_3",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-flatpickr-adapter_2",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|