@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.
Files changed (66) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mg-action-more_31.cjs.entry.js +351 -600
  3. package/dist/cjs/mg-components.cjs.js +1 -1
  4. package/dist/cjs/mg-item-more.cjs.entry.js +273 -0
  5. package/dist/cjs/mg-menu.conf-9afe6571.js +242 -0
  6. package/dist/collection/collection-manifest.json +2 -1
  7. package/dist/collection/components/atoms/mg-button/mg-button.js +24 -0
  8. package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +8 -0
  9. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +6 -2
  10. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +14 -10
  11. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +91 -21
  12. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +0 -13
  13. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +80 -76
  14. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +7 -5
  15. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +174 -78
  16. package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
  17. package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js +1 -0
  18. package/dist/collection/components/molecules/mg-item-more/mg-item-more.css +30 -0
  19. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +200 -0
  20. package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +0 -2
  21. package/dist/collection/styles/navigation-button.scss +1 -1
  22. package/dist/collection/utils/behaviors.utils.js +33 -29
  23. package/dist/collection/utils/components.utils.js +2 -4
  24. package/dist/collection/utils/unit.test.utils.js +25 -0
  25. package/dist/components/components.utils.js +2 -4
  26. package/dist/components/index.d.ts +1 -0
  27. package/dist/components/index.js +1 -0
  28. package/dist/components/mg-action-more.js +2 -1
  29. package/dist/components/mg-button2.js +4 -1
  30. package/dist/components/mg-form.js +1 -1
  31. package/dist/components/mg-icon2.js +8 -0
  32. package/dist/components/mg-input-checkbox.js +5 -4
  33. package/dist/components/mg-input-select2.js +83 -17
  34. package/dist/components/mg-item-more.d.ts +11 -0
  35. package/dist/components/mg-item-more.js +336 -0
  36. package/dist/components/mg-menu-item2.js +138 -251
  37. package/dist/components/mg-menu.conf.js +14 -0
  38. package/dist/components/mg-menu2.js +76 -111
  39. package/dist/components/mg-tabs.js +1 -1
  40. package/dist/components/mg-tooltip2.js +6 -2
  41. package/dist/esm/loader.js +1 -1
  42. package/dist/esm/mg-action-more_31.entry.js +321 -570
  43. package/dist/esm/mg-components.js +1 -1
  44. package/dist/esm/mg-item-more.entry.js +269 -0
  45. package/dist/esm/mg-menu.conf-881fbd82.js +235 -0
  46. package/dist/mg-components/mg-components.css +1 -1
  47. package/dist/mg-components/mg-components.esm.js +1 -1
  48. package/dist/mg-components/p-1221773c.entry.js +1 -0
  49. package/dist/mg-components/p-30bc87db.entry.js +1 -0
  50. package/dist/mg-components/p-367f92d2.js +1 -0
  51. package/dist/mg-components/styles/navigation-button.scss +1 -1
  52. package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -0
  53. package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +3 -3
  54. package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +39 -4
  55. package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +3 -27
  56. package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +38 -30
  57. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +5 -0
  58. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +69 -16
  59. package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts +26 -0
  60. package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +74 -0
  61. package/dist/types/components.d.ts +75 -17
  62. package/dist/types/utils/behaviors.utils.d.ts +12 -5
  63. package/dist/types/utils/components.utils.d.ts +2 -2
  64. package/dist/types/utils/unit.test.utils.d.ts +11 -0
  65. package/package.json +1 -1
  66. 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 { O as OverflowBehaviorElements, D as Direction, i as isMoreItem, s as sizes, a as OverflowBehavior, d as defineCustomElement$2 } from './mg-menu-item2.js';
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
- * Store menu-items on component init and add listeners
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.initMenuItemsListeners = () => {
44
- // add listeners on menu item and edit index
45
- this.menuItems.forEach((item, menuItemIndex) => {
46
- ['click', 'focus'].forEach(trigger => {
47
- (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
48
- this.focusedMenuItem = menuItemIndex;
49
- // reset expanded on previous active menu item
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
- * render mg-menu-more
63
+ * Store menu-items on component init and add listeners
59
64
  *
60
- * @returns {HTMLElement} formated mg-menu-item element
65
+ * @returns {void}
61
66
  */
62
- this.renderMgMenuMore = () => {
63
- const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
64
- this.menuItems.forEach((child) => {
65
- const proxy = child.cloneNode(true);
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
- * Render mg-menu-item more element for overflow behavior
74
+ * Handle item-loaded event on mg-item-more element
84
75
  *
85
- * @returns {HTMLElement} rendered mg-menu-item more element
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.renderMgMenuItemMore = () => {
88
- var _a, _b, _c, _d, _e, _f, _g;
89
- return (h("mg-menu-item", { "data-overflow-more": true }, h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
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.moreitem = undefined;
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
- validateMoreItem(newValue) {
111
+ validateItemMore(newValue) {
109
112
  if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
110
- throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
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.validateMoreItem(this.moreitem);
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
- this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
151
- if (this.hasOverflow && isMoreItem(this.moreitem))
152
- this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
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
- * Check add listeners to childs
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), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
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
- "moreitem": ["validateMoreItem"],
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
- "moreitem": [16],
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", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover"];
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;height:calc()}.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;height:calc()}.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}";
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 (slotElement.tagName === 'MG-BUTTON') {
204
+ if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
204
205
  new MutationObserver(mutationList => {
205
- if (mutationList.some(mutation => mutation.attributeName === 'aria-disabled')) {
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 });
@@ -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",{"label":[1],"direction":[513],"moreitem":[16],"size":[1],"isChildMenu":[32],"hasOverflow":[32]}],[1,"mg-menu-item",{"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"hasChildren":[32],"displayNotificationBadge":[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]}]]]], options);
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