@mgdis/mg-components 5.7.0 → 5.8.0

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 (53) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mg-action-more_31.cjs.entry.js +216 -565
  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/menu/mg-menu/mg-menu.conf.js +0 -13
  11. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +39 -67
  12. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +3 -3
  13. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +156 -77
  14. package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js +1 -0
  15. package/dist/collection/components/molecules/mg-item-more/mg-item-more.css +30 -0
  16. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +200 -0
  17. package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +0 -2
  18. package/dist/collection/styles/navigation-button.scss +1 -1
  19. package/dist/collection/utils/behaviors.utils.js +33 -29
  20. package/dist/components/index.d.ts +1 -0
  21. package/dist/components/index.js +1 -0
  22. package/dist/components/mg-action-more.js +2 -1
  23. package/dist/components/mg-button2.js +4 -1
  24. package/dist/components/mg-icon2.js +8 -0
  25. package/dist/components/mg-item-more.d.ts +11 -0
  26. package/dist/components/mg-item-more.js +336 -0
  27. package/dist/components/mg-menu-item2.js +134 -250
  28. package/dist/components/mg-menu.conf.js +14 -0
  29. package/dist/components/mg-menu2.js +35 -102
  30. package/dist/components/mg-tabs.js +1 -1
  31. package/dist/components/mg-tooltip2.js +6 -2
  32. package/dist/esm/loader.js +1 -1
  33. package/dist/esm/mg-action-more_31.entry.js +185 -534
  34. package/dist/esm/mg-components.js +1 -1
  35. package/dist/esm/mg-item-more.entry.js +269 -0
  36. package/dist/esm/mg-menu.conf-881fbd82.js +235 -0
  37. package/dist/mg-components/mg-components.css +1 -1
  38. package/dist/mg-components/mg-components.esm.js +1 -1
  39. package/dist/mg-components/p-1221773c.entry.js +1 -0
  40. package/dist/mg-components/p-367f92d2.js +1 -0
  41. package/dist/mg-components/p-6aeded97.entry.js +1 -0
  42. package/dist/mg-components/styles/navigation-button.scss +1 -1
  43. package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -0
  44. package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +3 -27
  45. package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +9 -27
  46. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +5 -0
  47. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +65 -16
  48. package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts +26 -0
  49. package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +74 -0
  50. package/dist/types/components.d.ts +66 -12
  51. package/dist/types/utils/behaviors.utils.d.ts +12 -5
  52. package/package.json +1 -1
  53. 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
 
@@ -55,45 +49,23 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
55
49
  });
56
50
  };
57
51
  /**
58
- * render mg-menu-more
52
+ * render mg-item-more
59
53
  *
60
- * @returns {HTMLElement} formated mg-menu-item element
61
- */
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
- });
78
- });
79
- this.element.appendChild(moreElement);
80
- return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
81
- };
82
- /**
83
- * Render mg-menu-item more element for overflow behavior
84
- *
85
- * @returns {HTMLElement} rendered mg-menu-item more element
54
+ * @returns {void}
86
55
  */
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 })));
56
+ this.renderMgItemMore = () => {
57
+ // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
58
+ // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
59
+ const item = 'mg-item-more';
60
+ const mgItemMore = document.createElement(item);
61
+ Object.assign(mgItemMore, this.itemMore);
62
+ this.element.appendChild(mgItemMore);
90
63
  };
91
64
  this.label = undefined;
92
65
  this.direction = Direction.HORIZONTAL;
93
- this.moreitem = undefined;
66
+ this.itemMore = undefined;
94
67
  this.size = 'regular';
95
68
  this.isChildMenu = undefined;
96
- this.hasOverflow = false;
97
69
  }
98
70
  validateLabel(newValue) {
99
71
  if (newValue === undefined) {
@@ -105,12 +77,9 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
105
77
  throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
106
78
  }
107
79
  }
108
- validateMoreItem(newValue) {
80
+ validateItemMore(newValue) {
109
81
  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.`);
82
+ throw new Error(`<${this.name}> prop "itemMore" must be paired with direction ${Direction.HORIZONTAL}.`);
114
83
  }
115
84
  }
116
85
  validateSize(newValue) {
@@ -127,11 +96,9 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
127
96
  * @returns {void}
128
97
  */
129
98
  componentWillLoad() {
130
- this.messages = initLocales(this.element).messages.plusMenu;
131
- // validation
132
99
  this.validateDirection(this.direction);
133
100
  this.validateLabel(this.label);
134
- this.validateMoreItem(this.moreitem);
101
+ this.validateItemMore(this.itemMore);
135
102
  this.validateSize(this.size);
136
103
  }
137
104
  /**
@@ -147,99 +114,65 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
147
114
  // store all menu-items
148
115
  this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
149
116
  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);
117
+ // add mg-item-more to manage OverflowBehavior
118
+ if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
119
+ this.renderMgItemMore();
120
+ // use mutation observer to improve reactivity
121
+ new MutationObserver(entries => {
122
+ const mgItemMore = this.element.querySelector('mg-item-more');
123
+ // prevent infinit loop by exclude mg-item-more deletion entry
124
+ if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
125
+ return;
126
+ else if (mgItemMore !== null) {
127
+ // render a new mg-item-more
128
+ mgItemMore.remove();
129
+ this.renderMgItemMore();
130
+ }
131
+ }).observe(this.element, { childList: true, characterData: true, subtree: true });
153
132
  }, 0);
154
133
  }
155
134
  /**
156
- * Check add listeners to childs
135
+ * Add listeners to items
157
136
  *
158
137
  * @returns {void}
159
138
  */
160
139
  componentDidRender() {
161
- // add menu items listeners
162
140
  this.initMenuItemsListeners();
163
141
  }
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
142
  /**
174
143
  * Render
175
144
  *
176
145
  * @returns {HTMLElement} HTML Element
177
146
  */
178
147
  render() {
179
- return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
148
+ return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
180
149
  }
181
150
  get element() { return this; }
182
151
  static get watchers() { return {
183
152
  "label": ["validateLabel"],
184
153
  "direction": ["validateDirection"],
185
- "moreitem": ["validateMoreItem"],
154
+ "itemMore": ["validateItemMore"],
186
155
  "size": ["validateSize"]
187
156
  }; }
188
157
  static get style() { return mgMenuCss; }
189
158
  }, [1, "mg-menu", {
190
159
  "label": [1],
191
160
  "direction": [513],
192
- "moreitem": [16],
161
+ "itemMore": [16],
193
162
  "size": [1],
194
- "isChildMenu": [32],
195
- "hasOverflow": [32]
163
+ "isChildMenu": [32]
196
164
  }]);
197
165
  function defineCustomElement() {
198
166
  if (typeof customElements === "undefined") {
199
167
  return;
200
168
  }
201
- const components = ["mg-menu", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover"];
169
+ const components = ["mg-menu"];
202
170
  components.forEach(tagName => { switch (tagName) {
203
171
  case "mg-menu":
204
172
  if (!customElements.get(tagName)) {
205
173
  customElements.define(tagName, MgMenu);
206
174
  }
207
175
  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
176
  } });
244
177
  }
245
178
  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