@mgdis/mg-components 5.27.2 → 5.27.3
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/index-7bb96ccc.js +1636 -0
- package/dist/cjs/index-7bb96ccc.js.map +1 -0
- package/dist/cjs/{index-00072168.js → index-8e9b0d9b.js} +67 -27
- package/dist/cjs/index-8e9b0d9b.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_36.cjs.entry.js +123 -115
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +9 -9
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +3 -3
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +21 -18
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +2 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -4
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +6 -2
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/components/index.es.js +60 -20
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +2 -2
- package/dist/components/mg-action-more.js +2 -2
- package/dist/components/mg-badge2.js +3 -3
- package/dist/components/mg-button2.js +4 -4
- package/dist/components/mg-card2.js +2 -2
- package/dist/components/mg-details.js +2 -2
- package/dist/components/mg-form.js +3 -3
- package/dist/components/mg-icon2.js +2 -2
- package/dist/components/mg-illustrated-message.js +2 -2
- package/dist/components/mg-input-checkbox.js +4 -4
- package/dist/components/mg-input-date.js +11 -11
- package/dist/components/mg-input-numeric.js +5 -5
- package/dist/components/mg-input-password.js +3 -3
- package/dist/components/mg-input-radio.js +4 -4
- package/dist/components/mg-input-select2.js +6 -6
- package/dist/components/mg-input-text2.js +6 -6
- package/dist/components/mg-input-textarea.js +6 -6
- package/dist/components/mg-input-title2.js +2 -2
- package/dist/components/mg-input-toggle.js +4 -4
- package/dist/components/mg-input2.js +3 -3
- package/dist/components/mg-item-more2.js +26 -23
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +2 -2
- package/dist/components/mg-menu-item2.js +8 -7
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message.js +3 -3
- package/dist/components/mg-modal.js +6 -6
- package/dist/components/mg-pagination2.js +2 -2
- package/dist/components/mg-panel.js +4 -4
- package/dist/components/mg-popover-content2.js +3 -3
- package/dist/components/mg-popover2.js +9 -5
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-skip-links.js +2 -2
- package/dist/components/mg-tabs.js +6 -6
- package/dist/components/mg-tag.js +3 -3
- package/dist/components/mg-tooltip2.js +6 -6
- package/dist/esm/{index-8d5d1bfd.js → index-138ea119.js} +62 -22
- package/dist/esm/index-138ea119.js.map +1 -0
- package/dist/esm/index-c4faef56.js +1607 -0
- package/dist/esm/index-c4faef56.js.map +1 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mg-action-more_36.entry.js +123 -115
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-components.js +10 -10
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-loader.entry.js +3 -3
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/p-284c8327.entry.js +2 -0
- package/dist/mg-components/p-284c8327.entry.js.map +1 -0
- package/dist/mg-components/p-4c68f6ea.js +3 -0
- package/dist/mg-components/p-4c68f6ea.js.map +1 -0
- package/dist/mg-components/{p-99e2f42a.entry.js → p-bac6ca1f.entry.js} +2 -2
- package/dist/mg-components/p-e9433a87.js +2 -0
- package/dist/mg-components/p-e9433a87.js.map +1 -0
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +1 -5
- package/ide/intellij/web-types.json +1 -1
- package/ide/vscode/html-custom-data.json +1 -1
- package/package.json +21 -21
- package/dist/cjs/index-00072168.js.map +0 -1
- package/dist/cjs/index-7e27c7ae.js +0 -2561
- package/dist/cjs/index-7e27c7ae.js.map +0 -1
- package/dist/esm/index-8d5d1bfd.js.map +0 -1
- package/dist/esm/index-e479d5ae.js +0 -2532
- package/dist/esm/index-e479d5ae.js.map +0 -1
- package/dist/mg-components/p-7315d4a6.js +0 -3
- package/dist/mg-components/p-7315d4a6.js.map +0 -1
- package/dist/mg-components/p-8800813b.js +0 -2
- package/dist/mg-components/p-8800813b.js.map +0 -1
- package/dist/mg-components/p-f9ac8927.entry.js +0 -2
- package/dist/mg-components/p-f9ac8927.entry.js.map +0 -1
- /package/dist/mg-components/{p-99e2f42a.entry.js.map → p-bac6ca1f.entry.js.map} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-
|
|
2
|
-
import {
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-c4faef56.js';
|
|
2
|
+
import { N as Ne, i as initLocales, B as Be, P as Pe, z as ze, C as Ce, W as We, p as pe, g as ge, X as Xe, G as Ge, K as Ke, Q as Qe, U as Ue, H as He, w as we } from './index-138ea119.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Available menu-item positions
|
|
@@ -75,7 +75,7 @@ const MgActionMore = class {
|
|
|
75
75
|
************/
|
|
76
76
|
this.name = 'mg-action-more';
|
|
77
77
|
this.classBase = 'mg-c-action-more';
|
|
78
|
-
this.mgPopoverIdentifier =
|
|
78
|
+
this.mgPopoverIdentifier = Ne(this.name);
|
|
79
79
|
/************
|
|
80
80
|
* Methods *
|
|
81
81
|
***********/
|
|
@@ -199,7 +199,7 @@ const MgBadge = class {
|
|
|
199
199
|
this.label = undefined;
|
|
200
200
|
this.variant = variants$5[0];
|
|
201
201
|
this.outline = undefined;
|
|
202
|
-
this.classCollection = new
|
|
202
|
+
this.classCollection = new Be(['mg-c-badge']);
|
|
203
203
|
}
|
|
204
204
|
validateValue(newValue) {
|
|
205
205
|
if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
|
|
@@ -207,7 +207,7 @@ const MgBadge = class {
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
validateLabel(newValue) {
|
|
210
|
-
if (!
|
|
210
|
+
if (!Pe(newValue)) {
|
|
211
211
|
throw new Error('<mg-badge> prop "label" is required.');
|
|
212
212
|
}
|
|
213
213
|
}
|
|
@@ -318,7 +318,7 @@ const MgButton = class {
|
|
|
318
318
|
this.isIcon = false;
|
|
319
319
|
this.disableOnClick = false;
|
|
320
320
|
this.loading = false;
|
|
321
|
-
this.classCollection = new
|
|
321
|
+
this.classCollection = new Be(['mg-c-button']);
|
|
322
322
|
}
|
|
323
323
|
validateVariant(newValue, oldValue) {
|
|
324
324
|
if (!variants$4.includes(newValue)) {
|
|
@@ -377,7 +377,7 @@ const MgButton = class {
|
|
|
377
377
|
this.validateFullWidth(this.fullWidth);
|
|
378
378
|
if (this.isIcon) {
|
|
379
379
|
this.classCollection.add(`mg-c-button--icon`);
|
|
380
|
-
if (!
|
|
380
|
+
if (!Pe(this.label)) {
|
|
381
381
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
382
382
|
}
|
|
383
383
|
}
|
|
@@ -389,7 +389,7 @@ const MgButton = class {
|
|
|
389
389
|
* Add listners
|
|
390
390
|
*/
|
|
391
391
|
componentDidLoad() {
|
|
392
|
-
|
|
392
|
+
ze(() => {
|
|
393
393
|
var _a;
|
|
394
394
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
395
395
|
// submit buttons should trigger form submition;
|
|
@@ -448,7 +448,7 @@ const MgCard = class {
|
|
|
448
448
|
};
|
|
449
449
|
this.variant = undefined;
|
|
450
450
|
this.variantStyle = undefined;
|
|
451
|
-
this.classCollection = new
|
|
451
|
+
this.classCollection = new Be([this.classBase]);
|
|
452
452
|
}
|
|
453
453
|
validateVariant(newValue, oldValue) {
|
|
454
454
|
if (newValue && !variants$3.includes(newValue))
|
|
@@ -553,7 +553,7 @@ const MgDetails = class {
|
|
|
553
553
|
this.expanded = false;
|
|
554
554
|
}
|
|
555
555
|
validateTitles(newValue) {
|
|
556
|
-
if (!
|
|
556
|
+
if (!Pe(newValue)) {
|
|
557
557
|
throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
|
|
558
558
|
}
|
|
559
559
|
}
|
|
@@ -711,7 +711,7 @@ const MgForm = class {
|
|
|
711
711
|
}
|
|
712
712
|
});
|
|
713
713
|
};
|
|
714
|
-
this.identifier =
|
|
714
|
+
this.identifier = Ne('mg-form');
|
|
715
715
|
this.name = this.identifier;
|
|
716
716
|
this.readonly = false;
|
|
717
717
|
this.requiredMessage = undefined;
|
|
@@ -720,7 +720,7 @@ const MgForm = class {
|
|
|
720
720
|
this.disabled = false;
|
|
721
721
|
this.valid = undefined;
|
|
722
722
|
this.invalid = undefined;
|
|
723
|
-
this.classCollection = new
|
|
723
|
+
this.classCollection = new Be(['mg-c-form']);
|
|
724
724
|
this.requiredMessageText = undefined;
|
|
725
725
|
}
|
|
726
726
|
validateRequiredMessage(newValue) {
|
|
@@ -861,7 +861,7 @@ const MgIcon = class {
|
|
|
861
861
|
this.variant = undefined;
|
|
862
862
|
this.variantStyle = undefined;
|
|
863
863
|
this.spin = false;
|
|
864
|
-
this.classCollection = new
|
|
864
|
+
this.classCollection = new Be(['mg-c-icon']);
|
|
865
865
|
}
|
|
866
866
|
validateIcon(newValue, oldValue) {
|
|
867
867
|
if (!Object.keys(icons).includes(newValue))
|
|
@@ -960,7 +960,7 @@ const MgIllustratedMessage = class {
|
|
|
960
960
|
componentDidLoad() {
|
|
961
961
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
962
962
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
963
|
-
if (!
|
|
963
|
+
if (!Ce(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
964
964
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
965
965
|
}
|
|
966
966
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1060,7 +1060,7 @@ const MgInput = class {
|
|
|
1060
1060
|
this.isVerticalList = false;
|
|
1061
1061
|
}
|
|
1062
1062
|
watchIdentifier(newValue) {
|
|
1063
|
-
if (!
|
|
1063
|
+
if (!Pe(newValue)) {
|
|
1064
1064
|
throw new Error('<mg-input> prop "identifier" is required.');
|
|
1065
1065
|
}
|
|
1066
1066
|
else {
|
|
@@ -1145,7 +1145,7 @@ const MgInput = class {
|
|
|
1145
1145
|
*/
|
|
1146
1146
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1147
1147
|
watchLabel() {
|
|
1148
|
-
if (!
|
|
1148
|
+
if (!Pe(this.label)) {
|
|
1149
1149
|
throw new Error('<mg-input> prop "label" is required.');
|
|
1150
1150
|
}
|
|
1151
1151
|
else {
|
|
@@ -1441,7 +1441,7 @@ const MgInputCheckbox = class {
|
|
|
1441
1441
|
* Method to update searchResults
|
|
1442
1442
|
*/
|
|
1443
1443
|
this.updateSearchResults = () => {
|
|
1444
|
-
this.searchResults = this.checkboxItems.filter(item =>
|
|
1444
|
+
this.searchResults = this.checkboxItems.filter(item => We(item.title).includes(We(this.searchValue)));
|
|
1445
1445
|
};
|
|
1446
1446
|
/**
|
|
1447
1447
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1515,7 +1515,7 @@ const MgInputCheckbox = class {
|
|
|
1515
1515
|
this.helpText = undefined;
|
|
1516
1516
|
this.valid = undefined;
|
|
1517
1517
|
this.invalid = undefined;
|
|
1518
|
-
this.classCollection = new
|
|
1518
|
+
this.classCollection = new Be([this.baseClassName, classFieldset]);
|
|
1519
1519
|
this.errorMessage = undefined;
|
|
1520
1520
|
this.checkboxItems = [];
|
|
1521
1521
|
this.displaySearchInput = undefined;
|
|
@@ -1623,7 +1623,7 @@ const MgInputCheckbox = class {
|
|
|
1623
1623
|
if (typeof valid !== 'boolean') {
|
|
1624
1624
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1625
1625
|
}
|
|
1626
|
-
else if (!
|
|
1626
|
+
else if (!Pe(errorMessage)) {
|
|
1627
1627
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1628
1628
|
}
|
|
1629
1629
|
else {
|
|
@@ -1886,7 +1886,7 @@ const MgInputDate = class {
|
|
|
1886
1886
|
* @param value - value to test
|
|
1887
1887
|
* @returns truthy when value match the pattern
|
|
1888
1888
|
*/
|
|
1889
|
-
this.isValidPattern = (value) =>
|
|
1889
|
+
this.isValidPattern = (value) => Pe(value) && pe.test(value);
|
|
1890
1890
|
/**
|
|
1891
1891
|
* Format help text to display
|
|
1892
1892
|
* @param helpText - help text format
|
|
@@ -1894,10 +1894,10 @@ const MgInputDate = class {
|
|
|
1894
1894
|
*/
|
|
1895
1895
|
this.formatHelpText = (helpText) => {
|
|
1896
1896
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1897
|
-
let text =
|
|
1897
|
+
let text = Pe(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1898
1898
|
if (text.includes(defaultHelpTextVariable))
|
|
1899
1899
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1900
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}',
|
|
1900
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', ge(Xe(new Date('2023-12-24')), this.systemLocale));
|
|
1901
1901
|
};
|
|
1902
1902
|
/**
|
|
1903
1903
|
* Handle input event
|
|
@@ -1989,8 +1989,8 @@ const MgInputDate = class {
|
|
|
1989
1989
|
// min, max & minMax
|
|
1990
1990
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
1991
1991
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
1992
|
-
.replace('{min}',
|
|
1993
|
-
.replace('{max}',
|
|
1992
|
+
.replace('{min}', ge(this.min, this.systemLocale))
|
|
1993
|
+
.replace('{max}', ge(this.max, this.systemLocale));
|
|
1994
1994
|
}
|
|
1995
1995
|
// wrong date format
|
|
1996
1996
|
// element.validity.badInput is default error message
|
|
@@ -2004,7 +2004,7 @@ const MgInputDate = class {
|
|
|
2004
2004
|
* @returns translated html pattern
|
|
2005
2005
|
*/
|
|
2006
2006
|
this.renderPattern = () => {
|
|
2007
|
-
let patternLocal =
|
|
2007
|
+
let patternLocal = Ge(this.systemLocale);
|
|
2008
2008
|
for (const key in this.messages.input.date.pattern) {
|
|
2009
2009
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2010
2010
|
}
|
|
@@ -2026,7 +2026,7 @@ const MgInputDate = class {
|
|
|
2026
2026
|
this.helpText = undefined;
|
|
2027
2027
|
this.valid = undefined;
|
|
2028
2028
|
this.invalid = undefined;
|
|
2029
|
-
this.classCollection = new
|
|
2029
|
+
this.classCollection = new Be(['mg-c-input--date']);
|
|
2030
2030
|
this.errorMessage = undefined;
|
|
2031
2031
|
}
|
|
2032
2032
|
validateValue(newValue) {
|
|
@@ -2034,7 +2034,7 @@ const MgInputDate = class {
|
|
|
2034
2034
|
if (newValue === '')
|
|
2035
2035
|
newValue = null;
|
|
2036
2036
|
// check value validity
|
|
2037
|
-
if (newValue && !
|
|
2037
|
+
if (newValue && !Pe(newValue)) {
|
|
2038
2038
|
throw new Error("<mg-input-date> props 'value' must be a valid string");
|
|
2039
2039
|
}
|
|
2040
2040
|
else if (!newValue || (newValue && this.isValidPattern(newValue))) {
|
|
@@ -2091,7 +2091,7 @@ const MgInputDate = class {
|
|
|
2091
2091
|
if (typeof valid !== 'boolean') {
|
|
2092
2092
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2093
2093
|
}
|
|
2094
|
-
else if (!
|
|
2094
|
+
else if (!Pe(errorMessage)) {
|
|
2095
2095
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2096
2096
|
}
|
|
2097
2097
|
else {
|
|
@@ -2145,7 +2145,7 @@ const MgInputDate = class {
|
|
|
2145
2145
|
* @returns HTML Element
|
|
2146
2146
|
*/
|
|
2147
2147
|
render() {
|
|
2148
|
-
return (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue:
|
|
2148
|
+
return (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2149
2149
|
if (el !== null)
|
|
2150
2150
|
this.input = el;
|
|
2151
2151
|
} })));
|
|
@@ -2276,9 +2276,9 @@ const MgInputNumeric = class {
|
|
|
2276
2276
|
this.formatValue = (value) => {
|
|
2277
2277
|
switch (this.format) {
|
|
2278
2278
|
case 'number':
|
|
2279
|
-
return
|
|
2279
|
+
return Qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2280
2280
|
case 'currency':
|
|
2281
|
-
return
|
|
2281
|
+
return Ke(value, this.locale, this.currency);
|
|
2282
2282
|
case 'none':
|
|
2283
2283
|
return value.toString();
|
|
2284
2284
|
}
|
|
@@ -2315,7 +2315,7 @@ const MgInputNumeric = class {
|
|
|
2315
2315
|
this.decimalLength = 2;
|
|
2316
2316
|
this.valid = undefined;
|
|
2317
2317
|
this.invalid = undefined;
|
|
2318
|
-
this.classCollection = new
|
|
2318
|
+
this.classCollection = new Be(['mg-c-input--numeric']);
|
|
2319
2319
|
this.errorMessage = undefined;
|
|
2320
2320
|
this.hasFocus = undefined;
|
|
2321
2321
|
}
|
|
@@ -2411,7 +2411,7 @@ const MgInputNumeric = class {
|
|
|
2411
2411
|
if (typeof valid !== 'boolean') {
|
|
2412
2412
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2413
2413
|
}
|
|
2414
|
-
else if (!
|
|
2414
|
+
else if (!Pe(errorMessage)) {
|
|
2415
2415
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2416
2416
|
}
|
|
2417
2417
|
else {
|
|
@@ -2603,7 +2603,7 @@ const MgInputPassword = class {
|
|
|
2603
2603
|
this.helpText = undefined;
|
|
2604
2604
|
this.valid = undefined;
|
|
2605
2605
|
this.invalid = undefined;
|
|
2606
|
-
this.classCollection = new
|
|
2606
|
+
this.classCollection = new Be(['mg-c-input--password']);
|
|
2607
2607
|
this.errorMessage = undefined;
|
|
2608
2608
|
this.displayPassword = false;
|
|
2609
2609
|
}
|
|
@@ -2661,7 +2661,7 @@ const MgInputPassword = class {
|
|
|
2661
2661
|
if (typeof valid !== 'boolean') {
|
|
2662
2662
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2663
2663
|
}
|
|
2664
|
-
else if (!
|
|
2664
|
+
else if (!Pe(errorMessage)) {
|
|
2665
2665
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2666
2666
|
}
|
|
2667
2667
|
else {
|
|
@@ -2808,7 +2808,7 @@ const MgInputRadio = class {
|
|
|
2808
2808
|
this.helpText = undefined;
|
|
2809
2809
|
this.valid = undefined;
|
|
2810
2810
|
this.invalid = undefined;
|
|
2811
|
-
this.classCollection = new
|
|
2811
|
+
this.classCollection = new Be(['mg-c-input--radio', classFieldset]);
|
|
2812
2812
|
this.errorMessage = undefined;
|
|
2813
2813
|
this.options = undefined;
|
|
2814
2814
|
}
|
|
@@ -2821,7 +2821,7 @@ const MgInputRadio = class {
|
|
|
2821
2821
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2822
2822
|
}
|
|
2823
2823
|
// String array
|
|
2824
|
-
else if (
|
|
2824
|
+
else if (Ue(newValue)) {
|
|
2825
2825
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2826
2826
|
}
|
|
2827
2827
|
// Object array
|
|
@@ -2880,7 +2880,7 @@ const MgInputRadio = class {
|
|
|
2880
2880
|
if (typeof valid !== 'boolean') {
|
|
2881
2881
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2882
2882
|
}
|
|
2883
|
-
else if (!
|
|
2883
|
+
else if (!Pe(errorMessage)) {
|
|
2884
2884
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2885
2885
|
}
|
|
2886
2886
|
else {
|
|
@@ -3027,7 +3027,7 @@ const MgInputSelect = class {
|
|
|
3027
3027
|
if (this.input.value === '') {
|
|
3028
3028
|
this.setValue(null);
|
|
3029
3029
|
}
|
|
3030
|
-
else if (
|
|
3030
|
+
else if (Ue(this.items) && this.items.includes(this.input.value)) {
|
|
3031
3031
|
this.setValue(this.input.value);
|
|
3032
3032
|
}
|
|
3033
3033
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3101,7 +3101,7 @@ const MgInputSelect = class {
|
|
|
3101
3101
|
this.helpText = undefined;
|
|
3102
3102
|
this.valid = undefined;
|
|
3103
3103
|
this.invalid = undefined;
|
|
3104
|
-
this.classCollection = new
|
|
3104
|
+
this.classCollection = new Be(['mg-c-input--select']);
|
|
3105
3105
|
this.errorMessage = undefined;
|
|
3106
3106
|
this.options = undefined;
|
|
3107
3107
|
this.valueExist = undefined;
|
|
@@ -3109,7 +3109,7 @@ const MgInputSelect = class {
|
|
|
3109
3109
|
}
|
|
3110
3110
|
validateValue(newValue) {
|
|
3111
3111
|
var _a, _b;
|
|
3112
|
-
if (
|
|
3112
|
+
if (Ue(this.items) && typeof newValue === 'string') {
|
|
3113
3113
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3114
3114
|
}
|
|
3115
3115
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3126,7 +3126,7 @@ const MgInputSelect = class {
|
|
|
3126
3126
|
this.options = [];
|
|
3127
3127
|
}
|
|
3128
3128
|
// String array
|
|
3129
|
-
else if (
|
|
3129
|
+
else if (Ue(newValue)) {
|
|
3130
3130
|
if (typeof this.value === 'string')
|
|
3131
3131
|
this.valueExist = newValue.includes(this.value);
|
|
3132
3132
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3198,7 +3198,7 @@ const MgInputSelect = class {
|
|
|
3198
3198
|
if (typeof valid !== 'boolean') {
|
|
3199
3199
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3200
3200
|
}
|
|
3201
|
-
else if (!
|
|
3201
|
+
else if (!Pe(errorMessage)) {
|
|
3202
3202
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3203
3203
|
}
|
|
3204
3204
|
else {
|
|
@@ -3310,7 +3310,7 @@ const MgInputText = class {
|
|
|
3310
3310
|
*/
|
|
3311
3311
|
this.handleFocus = () => {
|
|
3312
3312
|
this.classCollection.add(this.classFocus);
|
|
3313
|
-
this.classCollection = new
|
|
3313
|
+
this.classCollection = new Be(this.classCollection.classes);
|
|
3314
3314
|
};
|
|
3315
3315
|
/**
|
|
3316
3316
|
* Handle blur event
|
|
@@ -3318,7 +3318,7 @@ const MgInputText = class {
|
|
|
3318
3318
|
this.handleBlur = () => {
|
|
3319
3319
|
// Manage focus
|
|
3320
3320
|
this.classCollection.delete(this.classFocus);
|
|
3321
|
-
this.classCollection = new
|
|
3321
|
+
this.classCollection = new Be(this.classCollection.classes);
|
|
3322
3322
|
// Display Error
|
|
3323
3323
|
this.handlerInProgress = Handler.BLUR;
|
|
3324
3324
|
this.displayError().finally(() => {
|
|
@@ -3393,7 +3393,7 @@ const MgInputText = class {
|
|
|
3393
3393
|
this.helpText = undefined;
|
|
3394
3394
|
this.valid = undefined;
|
|
3395
3395
|
this.invalid = undefined;
|
|
3396
|
-
this.classCollection = new
|
|
3396
|
+
this.classCollection = new Be(['mg-c-input--text']);
|
|
3397
3397
|
this.errorMessage = undefined;
|
|
3398
3398
|
}
|
|
3399
3399
|
handleValue(newValue) {
|
|
@@ -3444,7 +3444,7 @@ const MgInputText = class {
|
|
|
3444
3444
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3445
3445
|
}
|
|
3446
3446
|
validatePattern(newValue) {
|
|
3447
|
-
if (newValue !== undefined && !(
|
|
3447
|
+
if (newValue !== undefined && !(Pe(this.pattern) && Pe(this.patternErrorMessage))) {
|
|
3448
3448
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3449
3449
|
}
|
|
3450
3450
|
}
|
|
@@ -3474,7 +3474,7 @@ const MgInputText = class {
|
|
|
3474
3474
|
if (typeof valid !== 'boolean') {
|
|
3475
3475
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3476
3476
|
}
|
|
3477
|
-
else if (!
|
|
3477
|
+
else if (!Pe(errorMessage)) {
|
|
3478
3478
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3479
3479
|
}
|
|
3480
3480
|
else {
|
|
@@ -3583,7 +3583,7 @@ const MgInputTextarea = class {
|
|
|
3583
3583
|
*/
|
|
3584
3584
|
this.handleFocus = () => {
|
|
3585
3585
|
this.classCollection.add(this.classFocus);
|
|
3586
|
-
this.classCollection = new
|
|
3586
|
+
this.classCollection = new Be(this.classCollection.classes);
|
|
3587
3587
|
};
|
|
3588
3588
|
/**
|
|
3589
3589
|
* Handle blur event
|
|
@@ -3591,7 +3591,7 @@ const MgInputTextarea = class {
|
|
|
3591
3591
|
this.handleBlur = () => {
|
|
3592
3592
|
// Manage focus
|
|
3593
3593
|
this.classCollection.delete(this.classFocus);
|
|
3594
|
-
this.classCollection = new
|
|
3594
|
+
this.classCollection = new Be(this.classCollection.classes);
|
|
3595
3595
|
// Display Error
|
|
3596
3596
|
this.handlerInProgress = Handler.BLUR;
|
|
3597
3597
|
this.displayError().finally(() => {
|
|
@@ -3654,7 +3654,7 @@ const MgInputTextarea = class {
|
|
|
3654
3654
|
this.valid = undefined;
|
|
3655
3655
|
this.invalid = undefined;
|
|
3656
3656
|
this.resizable = 'none';
|
|
3657
|
-
this.classCollection = new
|
|
3657
|
+
this.classCollection = new Be(['mg-c-input--textarea']);
|
|
3658
3658
|
this.errorMessage = undefined;
|
|
3659
3659
|
}
|
|
3660
3660
|
handleValue(newValue) {
|
|
@@ -3693,7 +3693,7 @@ const MgInputTextarea = class {
|
|
|
3693
3693
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3694
3694
|
}
|
|
3695
3695
|
validatePattern(newValue) {
|
|
3696
|
-
if (newValue !== undefined && !(
|
|
3696
|
+
if (newValue !== undefined && !(Pe(this.pattern) && Pe(this.patternErrorMessage))) {
|
|
3697
3697
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3698
3698
|
}
|
|
3699
3699
|
}
|
|
@@ -3725,7 +3725,7 @@ const MgInputTextarea = class {
|
|
|
3725
3725
|
if (typeof valid !== 'boolean') {
|
|
3726
3726
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3727
3727
|
}
|
|
3728
|
-
else if (!
|
|
3728
|
+
else if (!Pe(errorMessage)) {
|
|
3729
3729
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3730
3730
|
}
|
|
3731
3731
|
else {
|
|
@@ -3814,7 +3814,7 @@ const MgInputTitle = class {
|
|
|
3814
3814
|
this.tagName = 'label';
|
|
3815
3815
|
}
|
|
3816
3816
|
validateIdentifier(newValue) {
|
|
3817
|
-
if (!
|
|
3817
|
+
if (!Pe(newValue)) {
|
|
3818
3818
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3819
3819
|
}
|
|
3820
3820
|
}
|
|
@@ -3928,7 +3928,7 @@ const MgInputToggle = class {
|
|
|
3928
3928
|
this.tooltip = undefined;
|
|
3929
3929
|
this.tooltipPosition = 'input';
|
|
3930
3930
|
this.helpText = undefined;
|
|
3931
|
-
this.classCollection = new
|
|
3931
|
+
this.classCollection = new Be(['mg-c-input--toggle']);
|
|
3932
3932
|
this.options = undefined;
|
|
3933
3933
|
this.errorMessage = undefined;
|
|
3934
3934
|
this.valid = undefined;
|
|
@@ -3945,7 +3945,7 @@ const MgInputToggle = class {
|
|
|
3945
3945
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3946
3946
|
}
|
|
3947
3947
|
// String array
|
|
3948
|
-
else if (
|
|
3948
|
+
else if (Ue(newValue)) {
|
|
3949
3949
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3950
3950
|
}
|
|
3951
3951
|
// Object array
|
|
@@ -4001,7 +4001,7 @@ const MgInputToggle = class {
|
|
|
4001
4001
|
if (typeof valid !== 'boolean') {
|
|
4002
4002
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
4003
4003
|
}
|
|
4004
|
-
else if (!
|
|
4004
|
+
else if (!Pe(errorMessage)) {
|
|
4005
4005
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
4006
4006
|
}
|
|
4007
4007
|
else {
|
|
@@ -4247,7 +4247,7 @@ const MgItemMore = class {
|
|
|
4247
4247
|
navElement.click();
|
|
4248
4248
|
});
|
|
4249
4249
|
// add id suffix to prevent duplicate key. default html id is: '';
|
|
4250
|
-
if (
|
|
4250
|
+
if (Pe(proxy.id))
|
|
4251
4251
|
proxy.id = `${proxy.id}-proxy`;
|
|
4252
4252
|
// update properties and DOM when proxyfied item is updated
|
|
4253
4253
|
proxified.addEventListener('item-updated', (event) => {
|
|
@@ -4277,7 +4277,7 @@ const MgItemMore = class {
|
|
|
4277
4277
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4278
4278
|
}
|
|
4279
4279
|
validateSize(newValue) {
|
|
4280
|
-
if (newValue &&
|
|
4280
|
+
if (newValue && !sizes$2.includes(newValue))
|
|
4281
4281
|
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
|
|
4282
4282
|
}
|
|
4283
4283
|
/*************
|
|
@@ -4326,10 +4326,10 @@ const MgItemMore = class {
|
|
|
4326
4326
|
* @returns HTML Element
|
|
4327
4327
|
*/
|
|
4328
4328
|
render() {
|
|
4329
|
-
return (h(Host, { key: '
|
|
4329
|
+
return (h(Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
|
|
4330
4330
|
if (el)
|
|
4331
4331
|
this.moreElementMenuItem = el;
|
|
4332
|
-
} }, h("mg-icon", { key: '
|
|
4332
|
+
} }, h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4333
4333
|
}
|
|
4334
4334
|
get element() { return getElement(this); }
|
|
4335
4335
|
static get watchers() { return {
|
|
@@ -4365,16 +4365,11 @@ const MgMenu = class {
|
|
|
4365
4365
|
item.expanded = false;
|
|
4366
4366
|
}
|
|
4367
4367
|
};
|
|
4368
|
-
/**
|
|
4369
|
-
* get mg-item-more element
|
|
4370
|
-
* @returns mg-item-more element
|
|
4371
|
-
*/
|
|
4372
|
-
this.getItemMore = () => this.element.querySelector('mg-item-more');
|
|
4373
4368
|
/**
|
|
4374
4369
|
* get mg-item-more child mg-menu-item element
|
|
4375
4370
|
* @returns mg-menu-item element
|
|
4376
4371
|
*/
|
|
4377
|
-
this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.
|
|
4372
|
+
this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
|
|
4378
4373
|
/**
|
|
4379
4374
|
* Set item listend
|
|
4380
4375
|
* @param item - mg-menu-item element
|
|
@@ -4410,20 +4405,25 @@ const MgMenu = class {
|
|
|
4410
4405
|
* render mg-item-more
|
|
4411
4406
|
*/
|
|
4412
4407
|
this.renderMgItemMore = () => {
|
|
4413
|
-
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
|
|
4408
|
+
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
|
|
4414
4409
|
return;
|
|
4415
4410
|
}
|
|
4416
|
-
//
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4422
|
-
Object.assign(mgItemMore, this.itemmore || {});
|
|
4423
|
-
this.element.appendChild(mgItemMore);
|
|
4411
|
+
// Insert mg-item-more outside the mg-menu shadowdom
|
|
4412
|
+
if (!this.itemMoreElement) {
|
|
4413
|
+
this.itemMoreElement = document.createElement('mg-item-more');
|
|
4414
|
+
this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4415
|
+
this.element.appendChild(this.itemMoreElement);
|
|
4424
4416
|
}
|
|
4425
|
-
|
|
4426
|
-
|
|
4417
|
+
// update mg-item-more props
|
|
4418
|
+
for (const attribute in this.itemmore) {
|
|
4419
|
+
const newValue = this.itemmore[attribute];
|
|
4420
|
+
// to improve rendering we use HTML attributes as much as possible
|
|
4421
|
+
if (['string', 'number'].includes(typeof newValue)) {
|
|
4422
|
+
this.itemMoreElement.setAttribute(attribute, newValue);
|
|
4423
|
+
}
|
|
4424
|
+
else {
|
|
4425
|
+
this.itemMoreElement[attribute] = newValue;
|
|
4426
|
+
}
|
|
4427
4427
|
}
|
|
4428
4428
|
};
|
|
4429
4429
|
this.label = undefined;
|
|
@@ -4446,6 +4446,9 @@ const MgMenu = class {
|
|
|
4446
4446
|
if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
|
|
4447
4447
|
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
|
|
4448
4448
|
}
|
|
4449
|
+
else if (newValue) {
|
|
4450
|
+
this.renderMgItemMore();
|
|
4451
|
+
}
|
|
4449
4452
|
}
|
|
4450
4453
|
validateSize(newValue) {
|
|
4451
4454
|
if (!sizes$2.includes(newValue)) {
|
|
@@ -4496,7 +4499,7 @@ const MgMenu = class {
|
|
|
4496
4499
|
* @returns HTML Element
|
|
4497
4500
|
*/
|
|
4498
4501
|
render() {
|
|
4499
|
-
return (h(Host, { key: '
|
|
4502
|
+
return (h(Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
|
|
4500
4503
|
}
|
|
4501
4504
|
get element() { return getElement(this); }
|
|
4502
4505
|
static get watchers() { return {
|
|
@@ -4508,7 +4511,7 @@ const MgMenu = class {
|
|
|
4508
4511
|
};
|
|
4509
4512
|
MgMenu.style = MgMenuStyle0;
|
|
4510
4513
|
|
|
4511
|
-
const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
4514
|
+
const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
4512
4515
|
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4513
4516
|
|
|
4514
4517
|
const MgMenuItem = class {
|
|
@@ -4574,7 +4577,7 @@ const MgMenuItem = class {
|
|
|
4574
4577
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4575
4578
|
['label', 'metadata'].forEach(slot => {
|
|
4576
4579
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4577
|
-
if (!
|
|
4580
|
+
if (!Pe(element.textContent))
|
|
4578
4581
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4579
4582
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4580
4583
|
element.setAttribute('title', element.textContent);
|
|
@@ -4643,13 +4646,13 @@ const MgMenuItem = class {
|
|
|
4643
4646
|
* @returns HTML Element
|
|
4644
4647
|
*/
|
|
4645
4648
|
this.renderSlot = () => h("slot", null);
|
|
4646
|
-
this.identifier =
|
|
4649
|
+
this.identifier = Ne('mg-menu-item');
|
|
4647
4650
|
this.href = undefined;
|
|
4648
4651
|
this.target = undefined;
|
|
4649
4652
|
this.status = Status$1.VISIBLE;
|
|
4650
4653
|
this.expanded = false;
|
|
4651
4654
|
this.size = 'regular';
|
|
4652
|
-
this.navigationButtonClassList = new
|
|
4655
|
+
this.navigationButtonClassList = new Be([this.navigationButton]);
|
|
4653
4656
|
this.direction = undefined;
|
|
4654
4657
|
this.isInMainMenu = undefined;
|
|
4655
4658
|
this.isItemMore = undefined;
|
|
@@ -4796,7 +4799,7 @@ const MgMenuItem = class {
|
|
|
4796
4799
|
* Emit event when component is updated
|
|
4797
4800
|
*/
|
|
4798
4801
|
componentShouldUpdate() {
|
|
4799
|
-
return
|
|
4802
|
+
return ze(() => {
|
|
4800
4803
|
this.itemUpdated.emit();
|
|
4801
4804
|
});
|
|
4802
4805
|
}
|
|
@@ -4809,7 +4812,8 @@ const MgMenuItem = class {
|
|
|
4809
4812
|
['mg-c-menu-item__collapse-container']: true,
|
|
4810
4813
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
4811
4814
|
});
|
|
4812
|
-
return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier()
|
|
4815
|
+
return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
4816
|
+
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
4813
4817
|
this.renderInteractiveElement(),
|
|
4814
4818
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
4815
4819
|
])));
|
|
@@ -4902,13 +4906,13 @@ const MgMessage = class {
|
|
|
4902
4906
|
return 'exclamation-circle';
|
|
4903
4907
|
}
|
|
4904
4908
|
};
|
|
4905
|
-
this.identifier =
|
|
4909
|
+
this.identifier = Ne('mg-message');
|
|
4906
4910
|
this.delay = undefined;
|
|
4907
4911
|
this.variant = variants$1[0];
|
|
4908
4912
|
this.closeButton = false;
|
|
4909
4913
|
this.hide = false;
|
|
4910
4914
|
this.noAriaRole = undefined;
|
|
4911
|
-
this.classCollection = new
|
|
4915
|
+
this.classCollection = new Be(['mg-c-message']);
|
|
4912
4916
|
this.hasActions = false;
|
|
4913
4917
|
}
|
|
4914
4918
|
validateDelay(newValue) {
|
|
@@ -5051,12 +5055,12 @@ const MgModal = class {
|
|
|
5051
5055
|
*/
|
|
5052
5056
|
this.setFocus = () => {
|
|
5053
5057
|
// Get all focusable elements
|
|
5054
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(
|
|
5058
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(He));
|
|
5055
5059
|
// If close button is enabled or at least one of the slotted element is focusable
|
|
5056
5060
|
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5057
5061
|
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5058
5062
|
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5059
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(
|
|
5063
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(He) || focusableElement : focusableElement);
|
|
5060
5064
|
return acc;
|
|
5061
5065
|
}, []);
|
|
5062
5066
|
// When close button is enabled it's the first focusable element.
|
|
@@ -5078,21 +5082,21 @@ const MgModal = class {
|
|
|
5078
5082
|
this.handleClose = () => {
|
|
5079
5083
|
this.hide = true;
|
|
5080
5084
|
};
|
|
5081
|
-
this.identifier =
|
|
5085
|
+
this.identifier = Ne('mg-modal');
|
|
5082
5086
|
this.dialogRole = dialogRoles[0];
|
|
5083
5087
|
this.modalTitle = undefined;
|
|
5084
5088
|
this.closeButton = false;
|
|
5085
5089
|
this.hide = undefined;
|
|
5086
5090
|
this.hasActions = false;
|
|
5087
5091
|
this.hasContent = false;
|
|
5088
|
-
this.classCollection = new
|
|
5092
|
+
this.classCollection = new Be(['mg-c-modal']);
|
|
5089
5093
|
}
|
|
5090
5094
|
validateDialogRole(newValue) {
|
|
5091
5095
|
if (!dialogRoles.includes(newValue))
|
|
5092
5096
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
5093
5097
|
}
|
|
5094
5098
|
validateModalTitle(newValue) {
|
|
5095
|
-
if (!
|
|
5099
|
+
if (!Pe(newValue)) {
|
|
5096
5100
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
5097
5101
|
}
|
|
5098
5102
|
}
|
|
@@ -5239,7 +5243,7 @@ const MgPagination = class {
|
|
|
5239
5243
|
this.handleGoToPage = (action, disabled) => {
|
|
5240
5244
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
5241
5245
|
};
|
|
5242
|
-
this.identifier =
|
|
5246
|
+
this.identifier = Ne('mg-pagination');
|
|
5243
5247
|
this.label = undefined;
|
|
5244
5248
|
this.hideNavigationLabels = undefined;
|
|
5245
5249
|
this.hidePageCount = undefined;
|
|
@@ -5404,7 +5408,7 @@ const MgPanel = class {
|
|
|
5404
5408
|
];
|
|
5405
5409
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5406
5410
|
};
|
|
5407
|
-
this.identifier =
|
|
5411
|
+
this.identifier = Ne('mg-panel');
|
|
5408
5412
|
this.panelTitle = undefined;
|
|
5409
5413
|
this.titlePattern = undefined;
|
|
5410
5414
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5413,12 +5417,12 @@ const MgPanel = class {
|
|
|
5413
5417
|
this.expanded = false;
|
|
5414
5418
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5415
5419
|
this.expandToggleDisabled = undefined;
|
|
5416
|
-
this.classCollection = new
|
|
5420
|
+
this.classCollection = new Be(['mg-c-panel']);
|
|
5417
5421
|
this.isEditing = false;
|
|
5418
5422
|
this.updatedPanelTitle = undefined;
|
|
5419
5423
|
}
|
|
5420
5424
|
validatePanelTitle(newValue) {
|
|
5421
|
-
if (!
|
|
5425
|
+
if (!Pe(newValue))
|
|
5422
5426
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5423
5427
|
this.titleChange.emit(newValue);
|
|
5424
5428
|
}
|
|
@@ -7369,7 +7373,7 @@ const MgPopover = class {
|
|
|
7369
7373
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
7370
7374
|
}
|
|
7371
7375
|
};
|
|
7372
|
-
this.identifier =
|
|
7376
|
+
this.identifier = Ne('mg-popover');
|
|
7373
7377
|
this.placement = 'bottom';
|
|
7374
7378
|
this.arrowHide = false;
|
|
7375
7379
|
this.closeButton = false;
|
|
@@ -7412,7 +7416,7 @@ const MgPopover = class {
|
|
|
7412
7416
|
*/
|
|
7413
7417
|
componentWillLoad() {
|
|
7414
7418
|
// Get windows to attach events
|
|
7415
|
-
this.windows =
|
|
7419
|
+
this.windows = we(window);
|
|
7416
7420
|
// render mg-popover-content slot
|
|
7417
7421
|
this.renderPopoverContent();
|
|
7418
7422
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7430,6 +7434,10 @@ const MgPopover = class {
|
|
|
7430
7434
|
// Add aria attributes
|
|
7431
7435
|
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
7432
7436
|
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
7437
|
+
const fallbackPlacements = [];
|
|
7438
|
+
if (this.element.dataset.fallbackPlacement) {
|
|
7439
|
+
fallbackPlacements.push(this.element.dataset.fallbackPlacement);
|
|
7440
|
+
}
|
|
7433
7441
|
// Create popperjs popover
|
|
7434
7442
|
this.popper = createPopper(interactiveElement, this.mgPopover, {
|
|
7435
7443
|
placement: this.placement,
|
|
@@ -7444,7 +7452,7 @@ const MgPopover = class {
|
|
|
7444
7452
|
{
|
|
7445
7453
|
name: 'flip',
|
|
7446
7454
|
options: {
|
|
7447
|
-
fallbackPlacements: ['auto'],
|
|
7455
|
+
fallbackPlacements: [...fallbackPlacements, 'auto'],
|
|
7448
7456
|
},
|
|
7449
7457
|
},
|
|
7450
7458
|
],
|
|
@@ -7474,7 +7482,7 @@ const MgPopover = class {
|
|
|
7474
7482
|
* @returns HTML Element
|
|
7475
7483
|
*/
|
|
7476
7484
|
render() {
|
|
7477
|
-
return (h(Host, { key: '
|
|
7485
|
+
return (h(Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
|
|
7478
7486
|
}
|
|
7479
7487
|
get element() { return getElement(this); }
|
|
7480
7488
|
static get watchers() { return {
|
|
@@ -7500,7 +7508,7 @@ const MgPopoverContent = class {
|
|
|
7500
7508
|
this.hideContent.emit();
|
|
7501
7509
|
};
|
|
7502
7510
|
this.closeButton = false;
|
|
7503
|
-
this.classCollection = new
|
|
7511
|
+
this.classCollection = new Be(['mg-c-popover-content']);
|
|
7504
7512
|
}
|
|
7505
7513
|
/*************
|
|
7506
7514
|
* Lifecycle *
|
|
@@ -7518,7 +7526,7 @@ const MgPopoverContent = class {
|
|
|
7518
7526
|
componentDidLoad() {
|
|
7519
7527
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7520
7528
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7521
|
-
if (slottedTitleElement && !
|
|
7529
|
+
if (slottedTitleElement && !Ce(slottedTitleElement, headingTags)) {
|
|
7522
7530
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7523
7531
|
}
|
|
7524
7532
|
}
|
|
@@ -7554,7 +7562,7 @@ const MgSkipLinks = class {
|
|
|
7554
7562
|
this.links = undefined;
|
|
7555
7563
|
}
|
|
7556
7564
|
validateLinks(links) {
|
|
7557
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
7565
|
+
if (links === undefined || links.length === 0 || links.some(link => !Pe(link.href) || !link.href.startsWith('#') || !Pe(link.label))) {
|
|
7558
7566
|
throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
|
|
7559
7567
|
}
|
|
7560
7568
|
}
|
|
@@ -7706,7 +7714,7 @@ const MgTabs = class {
|
|
|
7706
7714
|
*/
|
|
7707
7715
|
this.resetFocus = () => {
|
|
7708
7716
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7709
|
-
|
|
7717
|
+
ze(() => {
|
|
7710
7718
|
this.tabFocus = undefined;
|
|
7711
7719
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7712
7720
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7721,16 +7729,16 @@ const MgTabs = class {
|
|
|
7721
7729
|
if (slots.length !== this.tabs.length)
|
|
7722
7730
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7723
7731
|
};
|
|
7724
|
-
this.identifier =
|
|
7732
|
+
this.identifier = Ne('mg-tabs');
|
|
7725
7733
|
this.label = undefined;
|
|
7726
7734
|
this.size = 'regular';
|
|
7727
7735
|
this.items = undefined;
|
|
7728
7736
|
this.activeTab = undefined;
|
|
7729
7737
|
this.tabs = [];
|
|
7730
|
-
this.classCollection = new
|
|
7738
|
+
this.classCollection = new Be(['mg-c-tabs']);
|
|
7731
7739
|
}
|
|
7732
7740
|
validateLabel(newValue) {
|
|
7733
|
-
if (!
|
|
7741
|
+
if (!Pe(newValue)) {
|
|
7734
7742
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7735
7743
|
}
|
|
7736
7744
|
}
|
|
@@ -7742,7 +7750,7 @@ const MgTabs = class {
|
|
|
7742
7750
|
}
|
|
7743
7751
|
validateItems(newValue) {
|
|
7744
7752
|
// String array
|
|
7745
|
-
if (
|
|
7753
|
+
if (Ue(newValue))
|
|
7746
7754
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7747
7755
|
// Object array
|
|
7748
7756
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7842,7 +7850,7 @@ const MgTag = class {
|
|
|
7842
7850
|
this.variant = variants[0];
|
|
7843
7851
|
this.outline = undefined;
|
|
7844
7852
|
this.soft = undefined;
|
|
7845
|
-
this.classCollection = new
|
|
7853
|
+
this.classCollection = new Be(['mg-c-tag']);
|
|
7846
7854
|
}
|
|
7847
7855
|
validateVariant(newValue, oldValue) {
|
|
7848
7856
|
if (!variants.includes(newValue)) {
|
|
@@ -7879,7 +7887,7 @@ const MgTag = class {
|
|
|
7879
7887
|
* @param textContent - html element textContent property
|
|
7880
7888
|
*/
|
|
7881
7889
|
validateTextContent(textContent) {
|
|
7882
|
-
if (!
|
|
7890
|
+
if (!Pe(textContent))
|
|
7883
7891
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7884
7892
|
}
|
|
7885
7893
|
/*************
|
|
@@ -7939,7 +7947,7 @@ const MgTooltip = class {
|
|
|
7939
7947
|
// Enable the event listeners
|
|
7940
7948
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7941
7949
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7942
|
-
|
|
7950
|
+
ze(() => {
|
|
7943
7951
|
this.windows.forEach((localWindow) => {
|
|
7944
7952
|
localWindow.addEventListener('click', this.clickOutside, false);
|
|
7945
7953
|
localWindow.addEventListener('keydown', this.pressEscape, false);
|
|
@@ -8110,7 +8118,7 @@ const MgTooltip = class {
|
|
|
8110
8118
|
});
|
|
8111
8119
|
});
|
|
8112
8120
|
};
|
|
8113
|
-
this.identifier =
|
|
8121
|
+
this.identifier = Ne('mg-tooltip');
|
|
8114
8122
|
this.message = undefined;
|
|
8115
8123
|
this.placement = 'bottom';
|
|
8116
8124
|
this.display = false;
|
|
@@ -8121,7 +8129,7 @@ const MgTooltip = class {
|
|
|
8121
8129
|
this.renderTooltipContent();
|
|
8122
8130
|
}
|
|
8123
8131
|
validateMessage(newValue) {
|
|
8124
|
-
if (!
|
|
8132
|
+
if (!Pe(newValue)) {
|
|
8125
8133
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
8126
8134
|
}
|
|
8127
8135
|
this.mgTooltipContent.message = newValue;
|
|
@@ -8170,7 +8178,7 @@ const MgTooltip = class {
|
|
|
8170
8178
|
*/
|
|
8171
8179
|
componentWillLoad() {
|
|
8172
8180
|
// Get windows to attach events
|
|
8173
|
-
this.windows =
|
|
8181
|
+
this.windows = we(window);
|
|
8174
8182
|
// Get tooltip element
|
|
8175
8183
|
this.renderTooltipContent();
|
|
8176
8184
|
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
@@ -8189,7 +8197,7 @@ const MgTooltip = class {
|
|
|
8189
8197
|
// get slotted element wich is not the tooltip
|
|
8190
8198
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8191
8199
|
// Get interactive element
|
|
8192
|
-
const interactiveElement = slotElement.matches(
|
|
8200
|
+
const interactiveElement = slotElement.matches(He) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(He);
|
|
8193
8201
|
// define selected element to become tooltip selector
|
|
8194
8202
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
8195
8203
|
// Check if slotted element is a disabled mg-button
|