@mgdis/mg-components 5.7.0 → 5.8.1
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/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_31.cjs.entry.js +351 -600
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +273 -0
- package/dist/cjs/mg-menu.conf-9afe6571.js +242 -0
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +24 -0
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +8 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +6 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +14 -10
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +91 -21
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +0 -13
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +80 -76
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +7 -5
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +174 -78
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js +1 -0
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.css +30 -0
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +200 -0
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +0 -2
- package/dist/collection/styles/navigation-button.scss +1 -1
- package/dist/collection/utils/behaviors.utils.js +33 -29
- package/dist/collection/utils/components.utils.js +2 -4
- package/dist/collection/utils/unit.test.utils.js +25 -0
- package/dist/components/components.utils.js +2 -4
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/mg-action-more.js +2 -1
- package/dist/components/mg-button2.js +4 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-icon2.js +8 -0
- package/dist/components/mg-input-checkbox.js +5 -4
- package/dist/components/mg-input-select2.js +83 -17
- package/dist/components/mg-item-more.d.ts +11 -0
- package/dist/components/mg-item-more.js +336 -0
- package/dist/components/mg-menu-item2.js +138 -251
- package/dist/components/mg-menu.conf.js +14 -0
- package/dist/components/mg-menu2.js +76 -111
- package/dist/components/mg-tabs.js +1 -1
- package/dist/components/mg-tooltip2.js +6 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_31.entry.js +321 -570
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-item-more.entry.js +269 -0
- package/dist/esm/mg-menu.conf-881fbd82.js +235 -0
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-1221773c.entry.js +1 -0
- package/dist/mg-components/p-30bc87db.entry.js +1 -0
- package/dist/mg-components/p-367f92d2.js +1 -0
- package/dist/mg-components/styles/navigation-button.scss +1 -1
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +3 -3
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +39 -4
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +3 -27
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +38 -30
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +5 -0
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +69 -16
- package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts +26 -0
- package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +74 -0
- package/dist/types/components.d.ts +75 -17
- package/dist/types/utils/behaviors.utils.d.ts +12 -5
- package/dist/types/utils/components.utils.d.ts +2 -2
- package/dist/types/utils/unit.test.utils.d.ts +11 -0
- package/package.json +1 -1
- package/dist/mg-components/p-4cfd5423.entry.js +0 -1
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
3
|
-
import { i as initLocales } from './index2.js';
|
|
4
|
-
import { d as defineCustomElement$6 } from './mg-badge2.js';
|
|
5
|
-
import { d as defineCustomElement$5 } from './mg-button2.js';
|
|
6
|
-
import { d as defineCustomElement$4 } from './mg-card2.js';
|
|
7
|
-
import { d as defineCustomElement$3 } from './mg-icon2.js';
|
|
8
|
-
import { d as defineCustomElement$1 } from './mg-popover2.js';
|
|
2
|
+
import { D as Direction, s as sizes } from './mg-menu.conf.js';
|
|
9
3
|
|
|
10
4
|
const mgMenuCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
|
|
11
5
|
|
|
@@ -20,6 +14,9 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
20
14
|
this.name = 'mg-menu';
|
|
21
15
|
this.menuItems = [];
|
|
22
16
|
this.focusedMenuItem = 0;
|
|
17
|
+
/*************
|
|
18
|
+
* Methods *
|
|
19
|
+
*************/
|
|
23
20
|
/**
|
|
24
21
|
* Close matching menu-item
|
|
25
22
|
*
|
|
@@ -32,68 +29,74 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
32
29
|
item.expanded = false;
|
|
33
30
|
}
|
|
34
31
|
};
|
|
35
|
-
/*************
|
|
36
|
-
* Methods *
|
|
37
|
-
*************/
|
|
38
32
|
/**
|
|
39
|
-
*
|
|
33
|
+
* get mg-item-more element
|
|
40
34
|
*
|
|
35
|
+
* @returns {HTMLMgItemMoreElement} mg-item-more element
|
|
36
|
+
*/
|
|
37
|
+
this.getItemMore = () => this.element.querySelector('mg-item-more');
|
|
38
|
+
/**
|
|
39
|
+
* get mg-item-more >>> mg-menu-item element
|
|
40
|
+
*
|
|
41
|
+
* @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
|
|
42
|
+
*/
|
|
43
|
+
this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
|
|
44
|
+
/**
|
|
45
|
+
* Set item listend
|
|
46
|
+
*
|
|
47
|
+
* @param {HTMLMgMenuItemElement} item mg-menu-item element
|
|
48
|
+
* @param {MgMenu['focusedMenuItem']} index number
|
|
41
49
|
* @returns {void}
|
|
42
50
|
*/
|
|
43
|
-
this.
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
this.menuItems.forEach((item, index) => {
|
|
51
|
-
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
52
|
-
});
|
|
51
|
+
this.setItemListener = (item, index) => {
|
|
52
|
+
['click', 'focus'].forEach(trigger => {
|
|
53
|
+
(item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
|
|
54
|
+
this.focusedMenuItem = index;
|
|
55
|
+
// reset expanded on previous active menu item
|
|
56
|
+
(Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
|
|
57
|
+
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
53
58
|
});
|
|
54
59
|
});
|
|
55
60
|
});
|
|
56
61
|
};
|
|
57
62
|
/**
|
|
58
|
-
*
|
|
63
|
+
* Store menu-items on component init and add listeners
|
|
59
64
|
*
|
|
60
|
-
* @returns {
|
|
65
|
+
* @returns {void}
|
|
61
66
|
*/
|
|
62
|
-
this.
|
|
63
|
-
|
|
64
|
-
this.menuItems.forEach((
|
|
65
|
-
|
|
66
|
-
moreElement.querySelector('mg-menu').appendChild(proxy);
|
|
67
|
-
});
|
|
68
|
-
const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
|
|
69
|
-
Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
|
|
70
|
-
// manage click on proxy to mirror it on initial element
|
|
71
|
-
proxy.addEventListener('click', () => {
|
|
72
|
-
(allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
73
|
-
});
|
|
74
|
-
// manage status change miror in proxy
|
|
75
|
-
allMenuItem[index].addEventListener('status-change', (event) => {
|
|
76
|
-
proxy.setAttribute('status', event.detail);
|
|
77
|
-
});
|
|
67
|
+
this.initMenuItemsListeners = () => {
|
|
68
|
+
// add listeners on menu item and edit index
|
|
69
|
+
this.menuItems.forEach((item, index) => {
|
|
70
|
+
this.setItemListener(item, index);
|
|
78
71
|
});
|
|
79
|
-
this.element.appendChild(moreElement);
|
|
80
|
-
return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
|
|
81
72
|
};
|
|
82
73
|
/**
|
|
83
|
-
*
|
|
74
|
+
* Handle item-loaded event on mg-item-more element
|
|
84
75
|
*
|
|
85
|
-
* @returns {
|
|
76
|
+
* @returns {void}
|
|
77
|
+
*/
|
|
78
|
+
this.handleItemLoaded = () => {
|
|
79
|
+
this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* render mg-item-more
|
|
83
|
+
*
|
|
84
|
+
* @returns {void}
|
|
86
85
|
*/
|
|
87
|
-
this.
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
this.renderMgItemMore = () => {
|
|
87
|
+
// /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
|
|
88
|
+
// by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
|
|
89
|
+
const item = 'mg-item-more';
|
|
90
|
+
const mgItemMore = document.createElement(item);
|
|
91
|
+
Object.assign(mgItemMore, this.itemmore);
|
|
92
|
+
mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
|
|
93
|
+
this.element.appendChild(mgItemMore);
|
|
90
94
|
};
|
|
91
95
|
this.label = undefined;
|
|
92
96
|
this.direction = Direction.HORIZONTAL;
|
|
93
|
-
this.
|
|
97
|
+
this.itemmore = undefined;
|
|
94
98
|
this.size = 'regular';
|
|
95
99
|
this.isChildMenu = undefined;
|
|
96
|
-
this.hasOverflow = false;
|
|
97
100
|
}
|
|
98
101
|
validateLabel(newValue) {
|
|
99
102
|
if (newValue === undefined) {
|
|
@@ -105,12 +108,9 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
105
108
|
throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
|
|
106
109
|
}
|
|
107
110
|
}
|
|
108
|
-
|
|
111
|
+
validateItemMore(newValue) {
|
|
109
112
|
if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
|
|
110
|
-
throw new Error(`<${this.name}> prop "
|
|
111
|
-
}
|
|
112
|
-
else if (newValue !== undefined && !isMoreItem(newValue)) {
|
|
113
|
-
throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
|
|
113
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
validateSize(newValue) {
|
|
@@ -127,11 +127,9 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
127
127
|
* @returns {void}
|
|
128
128
|
*/
|
|
129
129
|
componentWillLoad() {
|
|
130
|
-
this.messages = initLocales(this.element).messages.plusMenu;
|
|
131
|
-
// validation
|
|
132
130
|
this.validateDirection(this.direction);
|
|
133
131
|
this.validateLabel(this.label);
|
|
134
|
-
this.
|
|
132
|
+
this.validateItemMore(this.itemmore);
|
|
135
133
|
this.validateSize(this.size);
|
|
136
134
|
}
|
|
137
135
|
/**
|
|
@@ -147,99 +145,66 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
147
145
|
// store all menu-items
|
|
148
146
|
this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
149
147
|
this.isChildMenu = this.element.closest('mg-menu-item') !== null;
|
|
150
|
-
|
|
151
|
-
if (this.
|
|
152
|
-
this.
|
|
148
|
+
// add mg-item-more to manage OverflowBehavior
|
|
149
|
+
if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
|
|
150
|
+
this.renderMgItemMore();
|
|
151
|
+
// use mutation observer to improve reactivity
|
|
152
|
+
new MutationObserver(entries => {
|
|
153
|
+
const mgItemMore = this.getItemMore();
|
|
154
|
+
// prevent infinit loop by exclude mg-item-more deletion entry
|
|
155
|
+
if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
|
|
156
|
+
return;
|
|
157
|
+
else if (mgItemMore !== null) {
|
|
158
|
+
// render a new mg-item-more
|
|
159
|
+
mgItemMore.remove();
|
|
160
|
+
mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
|
|
161
|
+
this.renderMgItemMore();
|
|
162
|
+
}
|
|
163
|
+
}).observe(this.element, { childList: true, characterData: true, subtree: true });
|
|
153
164
|
}, 0);
|
|
154
165
|
}
|
|
155
166
|
/**
|
|
156
|
-
*
|
|
167
|
+
* Add listeners to items
|
|
157
168
|
*
|
|
158
169
|
* @returns {void}
|
|
159
170
|
*/
|
|
160
171
|
componentDidRender() {
|
|
161
|
-
// add menu items listeners
|
|
162
172
|
this.initMenuItemsListeners();
|
|
163
173
|
}
|
|
164
|
-
/**
|
|
165
|
-
* Disconnect overflow ResizeObserver
|
|
166
|
-
*
|
|
167
|
-
* @returns {void} run overflow resize obeserver disconnexion
|
|
168
|
-
*/
|
|
169
|
-
disconnectedCallback() {
|
|
170
|
-
if (this.hasOverflow)
|
|
171
|
-
this.overflowBehavior.disconnect();
|
|
172
|
-
}
|
|
173
174
|
/**
|
|
174
175
|
* Render
|
|
175
176
|
*
|
|
176
177
|
* @returns {HTMLElement} HTML Element
|
|
177
178
|
*/
|
|
178
179
|
render() {
|
|
179
|
-
return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)
|
|
180
|
+
return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
|
|
180
181
|
}
|
|
181
182
|
get element() { return this; }
|
|
182
183
|
static get watchers() { return {
|
|
183
184
|
"label": ["validateLabel"],
|
|
184
185
|
"direction": ["validateDirection"],
|
|
185
|
-
"
|
|
186
|
+
"itemmore": ["validateItemMore"],
|
|
186
187
|
"size": ["validateSize"]
|
|
187
188
|
}; }
|
|
188
189
|
static get style() { return mgMenuCss; }
|
|
189
190
|
}, [1, "mg-menu", {
|
|
190
191
|
"label": [1],
|
|
191
192
|
"direction": [513],
|
|
192
|
-
"
|
|
193
|
+
"itemmore": [16],
|
|
193
194
|
"size": [1],
|
|
194
|
-
"isChildMenu": [32]
|
|
195
|
-
"hasOverflow": [32]
|
|
195
|
+
"isChildMenu": [32]
|
|
196
196
|
}]);
|
|
197
197
|
function defineCustomElement() {
|
|
198
198
|
if (typeof customElements === "undefined") {
|
|
199
199
|
return;
|
|
200
200
|
}
|
|
201
|
-
const components = ["mg-menu"
|
|
201
|
+
const components = ["mg-menu"];
|
|
202
202
|
components.forEach(tagName => { switch (tagName) {
|
|
203
203
|
case "mg-menu":
|
|
204
204
|
if (!customElements.get(tagName)) {
|
|
205
205
|
customElements.define(tagName, MgMenu);
|
|
206
206
|
}
|
|
207
207
|
break;
|
|
208
|
-
case "mg-badge":
|
|
209
|
-
if (!customElements.get(tagName)) {
|
|
210
|
-
defineCustomElement$6();
|
|
211
|
-
}
|
|
212
|
-
break;
|
|
213
|
-
case "mg-button":
|
|
214
|
-
if (!customElements.get(tagName)) {
|
|
215
|
-
defineCustomElement$5();
|
|
216
|
-
}
|
|
217
|
-
break;
|
|
218
|
-
case "mg-card":
|
|
219
|
-
if (!customElements.get(tagName)) {
|
|
220
|
-
defineCustomElement$4();
|
|
221
|
-
}
|
|
222
|
-
break;
|
|
223
|
-
case "mg-icon":
|
|
224
|
-
if (!customElements.get(tagName)) {
|
|
225
|
-
defineCustomElement$3();
|
|
226
|
-
}
|
|
227
|
-
break;
|
|
228
|
-
case "mg-menu":
|
|
229
|
-
if (!customElements.get(tagName)) {
|
|
230
|
-
defineCustomElement();
|
|
231
|
-
}
|
|
232
|
-
break;
|
|
233
|
-
case "mg-menu-item":
|
|
234
|
-
if (!customElements.get(tagName)) {
|
|
235
|
-
defineCustomElement$2();
|
|
236
|
-
}
|
|
237
|
-
break;
|
|
238
|
-
case "mg-popover":
|
|
239
|
-
if (!customElements.get(tagName)) {
|
|
240
|
-
defineCustomElement$1();
|
|
241
|
-
}
|
|
242
|
-
break;
|
|
243
208
|
} });
|
|
244
209
|
}
|
|
245
210
|
defineCustomElement();
|
|
@@ -18,7 +18,7 @@ var Status;
|
|
|
18
18
|
*/
|
|
19
19
|
const sizes = ['regular', 'large'];
|
|
20
20
|
|
|
21
|
-
const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular{padding:1rem 2rem
|
|
21
|
+
const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-tabs__navigation-button:focus-visible{z-index:10}.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled),.mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl), 0.1)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-tabs__navigation-button.mg-tabs__navigation-button--vertical{border-left:0.3rem solid transparent}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__content-container:focus-visible{outline:none}.mg-tabs__navigation-button-text{flex:0 0 content}";
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* type TabItem validation function
|
|
@@ -169,6 +169,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
169
169
|
if (typeof newValue !== 'string' || newValue.trim() === '') {
|
|
170
170
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
171
171
|
}
|
|
172
|
+
this.popper.update();
|
|
172
173
|
}
|
|
173
174
|
handleDisplay(newValue) {
|
|
174
175
|
if (newValue) {
|
|
@@ -200,10 +201,13 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
200
201
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
201
202
|
// Check if slotted element is a disabled mg-button
|
|
202
203
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
203
|
-
if (
|
|
204
|
+
if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
|
|
204
205
|
new MutationObserver(mutationList => {
|
|
205
|
-
if (mutationList.some(mutation =>
|
|
206
|
+
if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
|
|
206
207
|
this.setMgButtonWrapper(slotElement);
|
|
208
|
+
// Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
|
|
209
|
+
// we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
|
|
210
|
+
this.resetGuard();
|
|
207
211
|
this.initTooltip(slotElement, interactiveElement);
|
|
208
212
|
}
|
|
209
213
|
}).observe(slotElement, { attributes: true });
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["mg-action-more_31",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu",{"
|
|
14
|
+
return bootstrapLazy([["mg-action-more_31",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-item-more",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|