@limetech/lime-elements 33.14.0-next.5 → 33.14.0-next.6
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/limel-list_3.cjs.entry.js +2 -0
- package/dist/cjs/limel-menu.cjs.entry.js +49 -1
- package/dist/collection/components/list/list.js +2 -0
- package/dist/collection/components/menu/menu.js +51 -2
- package/dist/esm/limel-list_3.entry.js +2 -0
- package/dist/esm/limel-menu.entry.js +49 -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/types/components/menu/menu.d.ts +7 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-1f3b6139.entry.js +0 -1
- package/dist/lime-elements/p-8e8219ac.entry.js +0 -177
|
@@ -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
|
|
|
@@ -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
|
}
|
|
@@ -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
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-fabb836f.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-7dd9c41d",[[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]}]]],["p-7be3a593",[[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]}]]],["p-24c128ec",[[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]}]]],["p-bde1749a",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-90b2c0a2",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-fabb836f.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-7dd9c41d",[[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]}]]],["p-7be3a593",[[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]}]]],["p-24c128ec",[[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]}]]],["p-bde1749a",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-90b2c0a2",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-63e4f918",[[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]}]]],["p-1a3a9bfd",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516]}]]],["p-3df01502",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[1],actions:[16]}]]],["p-c636bfcf",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-dc5b3f45",[[1,"limel-popover",{open:[4]}]]],["p-b88e7350",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-4e6042f7",[[1,"limel-tooltip",{label:[1],helperLabel:[1,"helper-label"],elementId:[1,"element-id"],open:[32]}]]],["p-191f05bc",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-aeeca058",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-67c48f98",[[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"]}]]],["p-79541c2b",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],checked:[516],required:[516],modified:[32]}]]],["p-231f62ba",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}]]],["p-467c87f6",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-7c6f6b80",[[1,"limel-config",{config:[16]}]]],["p-f94cbe50",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-2476f7bb",[[1,"limel-form",{schema:[16],value:[16],propsFactory:[16]}]]],["p-6d9f679d",[[1,"limel-grid"]]],["p-3a21fa33",[[1,"limel-linear-progress",{value:[2],indeterminate:[4]}]]],["p-af7c5b11",[[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]}]]],["p-16c336e8",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-c53695a3",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],fieldId:[32]}]]],["p-eb81fc35",[[1,"limel-badge",{label:[514]}]]],["p-fa880bd6",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-61ecc7f1",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-e9b4bdac",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-6e3b6e69",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-c45238b6",[[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-a6a7dd00",[[1,"limel-tooltip-content",{label:[1],helperLabel:[1,"helper-label"]}]]],["p-6fcc1378",[[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]}]]],["p-5577f962",[[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]}]]],["p-034f336b",[[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]}]]],["p-30c4b32a",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516],relayout:[64]}]]],["p-136230d6",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-fabb836f.js";import{c as r}from"./p-6c094f3f.js";import{z as n}from"./p-7c4d91f5.js";import"./p-acfbf7ac.js";import"./p-8bbe3720.js";import"./p-fc610f15.js";const o=class{constructor(s){t(this,s),this.cancel=i(this,"cancel",7),this.select=i(this,"select",7),this.label="",this.items=[],this.disabled=!1,this.openDirection="right",this.open=!1,this.badgeIcons=!1,this.gridLayout=!1,this.fixed=!1,this.setTriggerAttributes=t=>{const i={"aria-haspopup":!0,"aria-expanded":this.open,disabled:this.disabled,role:"button"};for(const[s,e]of Object.entries(i))e?t.setAttribute(s,String(e)):t.removeAttribute(s)},this.onClose=()=>{this.cancel.emit(),this.open=!1},this.onTriggerClick=t=>{t.stopPropagation(),this.disabled||(this.open=!this.open)},this.onListChange=t=>{this.items=this.items.map((i=>i===t.detail?t.detail:i)),this.select.emit(t.detail),this.open=!1},this.setListElement=t=>{this.list=t},this.focusMenuItem=()=>{var t;const i=this.list.shadowRoot.activeElement;null==i||i.blur();const s=this.items.filter(this.isListItem),e=Math.max(s.findIndex((t=>t.selected)),0);null===(t=Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'))[e])||void 0===t||t.focus()},this.portalId=r()}componentDidLoad(){this.host.querySelector('[slot="trigger"]')||console.warn("Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.")}openWatcher(){if(!this.open)return;const t=new IntersectionObserver((()=>{t.unobserve(this.list),this.focusMenuItem()}));t.observe(this.list)}render(){const t=this.getCssProperties(),i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index"),e={"limel-portal--fixed":this.fixed},r=this.getPortalPosition();return s("div",{class:"mdc-menu-surface--anchor",onClick:this.onTriggerClick},s("slot",{name:"trigger"},this.renderTrigger()),s("limel-portal",{class:e,style:r,visible:this.open,containerId:this.portalId,openDirection:this.openDirection,position:this.fixed?"fixed":"absolute",containerStyle:{"z-index":i}},s("limel-menu-surface",{open:this.open,onDismiss:this.onClose,style:t},s("limel-list",{class:{"has-grid-layout has-interactive-items":this.gridLayout},items:this.items,type:"menu",badgeIcons:this.badgeIcons,onChange:this.onListChange,ref:this.setListElement}))))}componentDidRender(){this.host.shadowRoot.querySelector("slot").assignedElements().forEach(this.setTriggerAttributes)}renderTrigger(){return s("button",{class:`\n menu__trigger\n ${this.disabled?"":"menu__trigger-enabled"}\n `,disabled:this.disabled},s("span",null,this.label))}getPortalPosition(){if(!this.fixed)return{};const t=this.host.getBoundingClientRect(),i={top:`${t.y+t.height}px`,left:`${t.x}px`};return"left"===this.openDirection&&(i.left=`${t.x+t.width}px`),i}getCssProperties(){const t=["--menu-surface-width","--list-grid-item-max-width","--list-grid-item-min-width","--list-grid-gap"],i=getComputedStyle(this.host),s=t.map((t=>i.getPropertyValue(t)));return n(t,s)}isListItem(t){return!("separator"in t)}get host(){return e(this)}static get watchers(){return{open:["openWatcher"]}}};o.style=":host{display:inline-block}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}";export{o as limel_menu}
|