@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
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const index$1 = require('./index-
|
|
5
|
+
const index = require('./index-7bb96ccc.js');
|
|
6
|
+
const index$1 = require('./index-8e9b0d9b.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Available menu-item positions
|
|
@@ -79,7 +79,7 @@ const MgActionMore = class {
|
|
|
79
79
|
************/
|
|
80
80
|
this.name = 'mg-action-more';
|
|
81
81
|
this.classBase = 'mg-c-action-more';
|
|
82
|
-
this.mgPopoverIdentifier = index$1.
|
|
82
|
+
this.mgPopoverIdentifier = index$1.Ne(this.name);
|
|
83
83
|
/************
|
|
84
84
|
* Methods *
|
|
85
85
|
***********/
|
|
@@ -203,7 +203,7 @@ const MgBadge = class {
|
|
|
203
203
|
this.label = undefined;
|
|
204
204
|
this.variant = variants$5[0];
|
|
205
205
|
this.outline = undefined;
|
|
206
|
-
this.classCollection = new index$1.
|
|
206
|
+
this.classCollection = new index$1.Be(['mg-c-badge']);
|
|
207
207
|
}
|
|
208
208
|
validateValue(newValue) {
|
|
209
209
|
if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
|
|
@@ -211,7 +211,7 @@ const MgBadge = class {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
validateLabel(newValue) {
|
|
214
|
-
if (!index$1.
|
|
214
|
+
if (!index$1.Pe(newValue)) {
|
|
215
215
|
throw new Error('<mg-badge> prop "label" is required.');
|
|
216
216
|
}
|
|
217
217
|
}
|
|
@@ -322,7 +322,7 @@ const MgButton = class {
|
|
|
322
322
|
this.isIcon = false;
|
|
323
323
|
this.disableOnClick = false;
|
|
324
324
|
this.loading = false;
|
|
325
|
-
this.classCollection = new index$1.
|
|
325
|
+
this.classCollection = new index$1.Be(['mg-c-button']);
|
|
326
326
|
}
|
|
327
327
|
validateVariant(newValue, oldValue) {
|
|
328
328
|
if (!variants$4.includes(newValue)) {
|
|
@@ -381,7 +381,7 @@ const MgButton = class {
|
|
|
381
381
|
this.validateFullWidth(this.fullWidth);
|
|
382
382
|
if (this.isIcon) {
|
|
383
383
|
this.classCollection.add(`mg-c-button--icon`);
|
|
384
|
-
if (!index$1.
|
|
384
|
+
if (!index$1.Pe(this.label)) {
|
|
385
385
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
386
386
|
}
|
|
387
387
|
}
|
|
@@ -393,7 +393,7 @@ const MgButton = class {
|
|
|
393
393
|
* Add listners
|
|
394
394
|
*/
|
|
395
395
|
componentDidLoad() {
|
|
396
|
-
index$1.
|
|
396
|
+
index$1.ze(() => {
|
|
397
397
|
var _a;
|
|
398
398
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
399
399
|
// submit buttons should trigger form submition;
|
|
@@ -452,7 +452,7 @@ const MgCard = class {
|
|
|
452
452
|
};
|
|
453
453
|
this.variant = undefined;
|
|
454
454
|
this.variantStyle = undefined;
|
|
455
|
-
this.classCollection = new index$1.
|
|
455
|
+
this.classCollection = new index$1.Be([this.classBase]);
|
|
456
456
|
}
|
|
457
457
|
validateVariant(newValue, oldValue) {
|
|
458
458
|
if (newValue && !variants$3.includes(newValue))
|
|
@@ -557,7 +557,7 @@ const MgDetails = class {
|
|
|
557
557
|
this.expanded = false;
|
|
558
558
|
}
|
|
559
559
|
validateTitles(newValue) {
|
|
560
|
-
if (!index$1.
|
|
560
|
+
if (!index$1.Pe(newValue)) {
|
|
561
561
|
throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
|
|
562
562
|
}
|
|
563
563
|
}
|
|
@@ -715,7 +715,7 @@ const MgForm = class {
|
|
|
715
715
|
}
|
|
716
716
|
});
|
|
717
717
|
};
|
|
718
|
-
this.identifier = index$1.
|
|
718
|
+
this.identifier = index$1.Ne('mg-form');
|
|
719
719
|
this.name = this.identifier;
|
|
720
720
|
this.readonly = false;
|
|
721
721
|
this.requiredMessage = undefined;
|
|
@@ -724,7 +724,7 @@ const MgForm = class {
|
|
|
724
724
|
this.disabled = false;
|
|
725
725
|
this.valid = undefined;
|
|
726
726
|
this.invalid = undefined;
|
|
727
|
-
this.classCollection = new index$1.
|
|
727
|
+
this.classCollection = new index$1.Be(['mg-c-form']);
|
|
728
728
|
this.requiredMessageText = undefined;
|
|
729
729
|
}
|
|
730
730
|
validateRequiredMessage(newValue) {
|
|
@@ -865,7 +865,7 @@ const MgIcon = class {
|
|
|
865
865
|
this.variant = undefined;
|
|
866
866
|
this.variantStyle = undefined;
|
|
867
867
|
this.spin = false;
|
|
868
|
-
this.classCollection = new index$1.
|
|
868
|
+
this.classCollection = new index$1.Be(['mg-c-icon']);
|
|
869
869
|
}
|
|
870
870
|
validateIcon(newValue, oldValue) {
|
|
871
871
|
if (!Object.keys(icons).includes(newValue))
|
|
@@ -964,7 +964,7 @@ const MgIllustratedMessage = class {
|
|
|
964
964
|
componentDidLoad() {
|
|
965
965
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
966
966
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
967
|
-
if (!index$1.
|
|
967
|
+
if (!index$1.Ce(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
968
968
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
969
969
|
}
|
|
970
970
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1064,7 +1064,7 @@ const MgInput = class {
|
|
|
1064
1064
|
this.isVerticalList = false;
|
|
1065
1065
|
}
|
|
1066
1066
|
watchIdentifier(newValue) {
|
|
1067
|
-
if (!index$1.
|
|
1067
|
+
if (!index$1.Pe(newValue)) {
|
|
1068
1068
|
throw new Error('<mg-input> prop "identifier" is required.');
|
|
1069
1069
|
}
|
|
1070
1070
|
else {
|
|
@@ -1149,7 +1149,7 @@ const MgInput = class {
|
|
|
1149
1149
|
*/
|
|
1150
1150
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1151
1151
|
watchLabel() {
|
|
1152
|
-
if (!index$1.
|
|
1152
|
+
if (!index$1.Pe(this.label)) {
|
|
1153
1153
|
throw new Error('<mg-input> prop "label" is required.');
|
|
1154
1154
|
}
|
|
1155
1155
|
else {
|
|
@@ -1445,7 +1445,7 @@ const MgInputCheckbox = class {
|
|
|
1445
1445
|
* Method to update searchResults
|
|
1446
1446
|
*/
|
|
1447
1447
|
this.updateSearchResults = () => {
|
|
1448
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.
|
|
1448
|
+
this.searchResults = this.checkboxItems.filter(item => index$1.We(item.title).includes(index$1.We(this.searchValue)));
|
|
1449
1449
|
};
|
|
1450
1450
|
/**
|
|
1451
1451
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1519,7 +1519,7 @@ const MgInputCheckbox = class {
|
|
|
1519
1519
|
this.helpText = undefined;
|
|
1520
1520
|
this.valid = undefined;
|
|
1521
1521
|
this.invalid = undefined;
|
|
1522
|
-
this.classCollection = new index$1.
|
|
1522
|
+
this.classCollection = new index$1.Be([this.baseClassName, classFieldset]);
|
|
1523
1523
|
this.errorMessage = undefined;
|
|
1524
1524
|
this.checkboxItems = [];
|
|
1525
1525
|
this.displaySearchInput = undefined;
|
|
@@ -1627,7 +1627,7 @@ const MgInputCheckbox = class {
|
|
|
1627
1627
|
if (typeof valid !== 'boolean') {
|
|
1628
1628
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1629
1629
|
}
|
|
1630
|
-
else if (!index$1.
|
|
1630
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
1631
1631
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1632
1632
|
}
|
|
1633
1633
|
else {
|
|
@@ -1890,7 +1890,7 @@ const MgInputDate = class {
|
|
|
1890
1890
|
* @param value - value to test
|
|
1891
1891
|
* @returns truthy when value match the pattern
|
|
1892
1892
|
*/
|
|
1893
|
-
this.isValidPattern = (value) => index$1.
|
|
1893
|
+
this.isValidPattern = (value) => index$1.Pe(value) && index$1.pe.test(value);
|
|
1894
1894
|
/**
|
|
1895
1895
|
* Format help text to display
|
|
1896
1896
|
* @param helpText - help text format
|
|
@@ -1898,10 +1898,10 @@ const MgInputDate = class {
|
|
|
1898
1898
|
*/
|
|
1899
1899
|
this.formatHelpText = (helpText) => {
|
|
1900
1900
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1901
|
-
let text = index$1.
|
|
1901
|
+
let text = index$1.Pe(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1902
1902
|
if (text.includes(defaultHelpTextVariable))
|
|
1903
1903
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1904
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.
|
|
1904
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.ge(index$1.Xe(new Date('2023-12-24')), this.systemLocale));
|
|
1905
1905
|
};
|
|
1906
1906
|
/**
|
|
1907
1907
|
* Handle input event
|
|
@@ -1993,8 +1993,8 @@ const MgInputDate = class {
|
|
|
1993
1993
|
// min, max & minMax
|
|
1994
1994
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
1995
1995
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
1996
|
-
.replace('{min}', index$1.
|
|
1997
|
-
.replace('{max}', index$1.
|
|
1996
|
+
.replace('{min}', index$1.ge(this.min, this.systemLocale))
|
|
1997
|
+
.replace('{max}', index$1.ge(this.max, this.systemLocale));
|
|
1998
1998
|
}
|
|
1999
1999
|
// wrong date format
|
|
2000
2000
|
// element.validity.badInput is default error message
|
|
@@ -2008,7 +2008,7 @@ const MgInputDate = class {
|
|
|
2008
2008
|
* @returns translated html pattern
|
|
2009
2009
|
*/
|
|
2010
2010
|
this.renderPattern = () => {
|
|
2011
|
-
let patternLocal = index$1.
|
|
2011
|
+
let patternLocal = index$1.Ge(this.systemLocale);
|
|
2012
2012
|
for (const key in this.messages.input.date.pattern) {
|
|
2013
2013
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2014
2014
|
}
|
|
@@ -2030,7 +2030,7 @@ const MgInputDate = class {
|
|
|
2030
2030
|
this.helpText = undefined;
|
|
2031
2031
|
this.valid = undefined;
|
|
2032
2032
|
this.invalid = undefined;
|
|
2033
|
-
this.classCollection = new index$1.
|
|
2033
|
+
this.classCollection = new index$1.Be(['mg-c-input--date']);
|
|
2034
2034
|
this.errorMessage = undefined;
|
|
2035
2035
|
}
|
|
2036
2036
|
validateValue(newValue) {
|
|
@@ -2038,7 +2038,7 @@ const MgInputDate = class {
|
|
|
2038
2038
|
if (newValue === '')
|
|
2039
2039
|
newValue = null;
|
|
2040
2040
|
// check value validity
|
|
2041
|
-
if (newValue && !index$1.
|
|
2041
|
+
if (newValue && !index$1.Pe(newValue)) {
|
|
2042
2042
|
throw new Error("<mg-input-date> props 'value' must be a valid string");
|
|
2043
2043
|
}
|
|
2044
2044
|
else if (!newValue || (newValue && this.isValidPattern(newValue))) {
|
|
@@ -2095,7 +2095,7 @@ const MgInputDate = class {
|
|
|
2095
2095
|
if (typeof valid !== 'boolean') {
|
|
2096
2096
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2097
2097
|
}
|
|
2098
|
-
else if (!index$1.
|
|
2098
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
2099
2099
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2100
2100
|
}
|
|
2101
2101
|
else {
|
|
@@ -2149,7 +2149,7 @@ const MgInputDate = class {
|
|
|
2149
2149
|
* @returns HTML Element
|
|
2150
2150
|
*/
|
|
2151
2151
|
render() {
|
|
2152
|
-
return (index.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: index$1.
|
|
2152
|
+
return (index.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: index$1.ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.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) => {
|
|
2153
2153
|
if (el !== null)
|
|
2154
2154
|
this.input = el;
|
|
2155
2155
|
} })));
|
|
@@ -2280,9 +2280,9 @@ const MgInputNumeric = class {
|
|
|
2280
2280
|
this.formatValue = (value) => {
|
|
2281
2281
|
switch (this.format) {
|
|
2282
2282
|
case 'number':
|
|
2283
|
-
return index$1.
|
|
2283
|
+
return index$1.Qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2284
2284
|
case 'currency':
|
|
2285
|
-
return index$1.
|
|
2285
|
+
return index$1.Ke(value, this.locale, this.currency);
|
|
2286
2286
|
case 'none':
|
|
2287
2287
|
return value.toString();
|
|
2288
2288
|
}
|
|
@@ -2319,7 +2319,7 @@ const MgInputNumeric = class {
|
|
|
2319
2319
|
this.decimalLength = 2;
|
|
2320
2320
|
this.valid = undefined;
|
|
2321
2321
|
this.invalid = undefined;
|
|
2322
|
-
this.classCollection = new index$1.
|
|
2322
|
+
this.classCollection = new index$1.Be(['mg-c-input--numeric']);
|
|
2323
2323
|
this.errorMessage = undefined;
|
|
2324
2324
|
this.hasFocus = undefined;
|
|
2325
2325
|
}
|
|
@@ -2415,7 +2415,7 @@ const MgInputNumeric = class {
|
|
|
2415
2415
|
if (typeof valid !== 'boolean') {
|
|
2416
2416
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2417
2417
|
}
|
|
2418
|
-
else if (!index$1.
|
|
2418
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
2419
2419
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2420
2420
|
}
|
|
2421
2421
|
else {
|
|
@@ -2607,7 +2607,7 @@ const MgInputPassword = class {
|
|
|
2607
2607
|
this.helpText = undefined;
|
|
2608
2608
|
this.valid = undefined;
|
|
2609
2609
|
this.invalid = undefined;
|
|
2610
|
-
this.classCollection = new index$1.
|
|
2610
|
+
this.classCollection = new index$1.Be(['mg-c-input--password']);
|
|
2611
2611
|
this.errorMessage = undefined;
|
|
2612
2612
|
this.displayPassword = false;
|
|
2613
2613
|
}
|
|
@@ -2665,7 +2665,7 @@ const MgInputPassword = class {
|
|
|
2665
2665
|
if (typeof valid !== 'boolean') {
|
|
2666
2666
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2667
2667
|
}
|
|
2668
|
-
else if (!index$1.
|
|
2668
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
2669
2669
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2670
2670
|
}
|
|
2671
2671
|
else {
|
|
@@ -2812,7 +2812,7 @@ const MgInputRadio = class {
|
|
|
2812
2812
|
this.helpText = undefined;
|
|
2813
2813
|
this.valid = undefined;
|
|
2814
2814
|
this.invalid = undefined;
|
|
2815
|
-
this.classCollection = new index$1.
|
|
2815
|
+
this.classCollection = new index$1.Be(['mg-c-input--radio', classFieldset]);
|
|
2816
2816
|
this.errorMessage = undefined;
|
|
2817
2817
|
this.options = undefined;
|
|
2818
2818
|
}
|
|
@@ -2825,7 +2825,7 @@ const MgInputRadio = class {
|
|
|
2825
2825
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2826
2826
|
}
|
|
2827
2827
|
// String array
|
|
2828
|
-
else if (index$1.
|
|
2828
|
+
else if (index$1.Ue(newValue)) {
|
|
2829
2829
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2830
2830
|
}
|
|
2831
2831
|
// Object array
|
|
@@ -2884,7 +2884,7 @@ const MgInputRadio = class {
|
|
|
2884
2884
|
if (typeof valid !== 'boolean') {
|
|
2885
2885
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2886
2886
|
}
|
|
2887
|
-
else if (!index$1.
|
|
2887
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
2888
2888
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2889
2889
|
}
|
|
2890
2890
|
else {
|
|
@@ -3031,7 +3031,7 @@ const MgInputSelect = class {
|
|
|
3031
3031
|
if (this.input.value === '') {
|
|
3032
3032
|
this.setValue(null);
|
|
3033
3033
|
}
|
|
3034
|
-
else if (index$1.
|
|
3034
|
+
else if (index$1.Ue(this.items) && this.items.includes(this.input.value)) {
|
|
3035
3035
|
this.setValue(this.input.value);
|
|
3036
3036
|
}
|
|
3037
3037
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3105,7 +3105,7 @@ const MgInputSelect = class {
|
|
|
3105
3105
|
this.helpText = undefined;
|
|
3106
3106
|
this.valid = undefined;
|
|
3107
3107
|
this.invalid = undefined;
|
|
3108
|
-
this.classCollection = new index$1.
|
|
3108
|
+
this.classCollection = new index$1.Be(['mg-c-input--select']);
|
|
3109
3109
|
this.errorMessage = undefined;
|
|
3110
3110
|
this.options = undefined;
|
|
3111
3111
|
this.valueExist = undefined;
|
|
@@ -3113,7 +3113,7 @@ const MgInputSelect = class {
|
|
|
3113
3113
|
}
|
|
3114
3114
|
validateValue(newValue) {
|
|
3115
3115
|
var _a, _b;
|
|
3116
|
-
if (index$1.
|
|
3116
|
+
if (index$1.Ue(this.items) && typeof newValue === 'string') {
|
|
3117
3117
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3118
3118
|
}
|
|
3119
3119
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3130,7 +3130,7 @@ const MgInputSelect = class {
|
|
|
3130
3130
|
this.options = [];
|
|
3131
3131
|
}
|
|
3132
3132
|
// String array
|
|
3133
|
-
else if (index$1.
|
|
3133
|
+
else if (index$1.Ue(newValue)) {
|
|
3134
3134
|
if (typeof this.value === 'string')
|
|
3135
3135
|
this.valueExist = newValue.includes(this.value);
|
|
3136
3136
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3202,7 +3202,7 @@ const MgInputSelect = class {
|
|
|
3202
3202
|
if (typeof valid !== 'boolean') {
|
|
3203
3203
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3204
3204
|
}
|
|
3205
|
-
else if (!index$1.
|
|
3205
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
3206
3206
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3207
3207
|
}
|
|
3208
3208
|
else {
|
|
@@ -3314,7 +3314,7 @@ const MgInputText = class {
|
|
|
3314
3314
|
*/
|
|
3315
3315
|
this.handleFocus = () => {
|
|
3316
3316
|
this.classCollection.add(this.classFocus);
|
|
3317
|
-
this.classCollection = new index$1.
|
|
3317
|
+
this.classCollection = new index$1.Be(this.classCollection.classes);
|
|
3318
3318
|
};
|
|
3319
3319
|
/**
|
|
3320
3320
|
* Handle blur event
|
|
@@ -3322,7 +3322,7 @@ const MgInputText = class {
|
|
|
3322
3322
|
this.handleBlur = () => {
|
|
3323
3323
|
// Manage focus
|
|
3324
3324
|
this.classCollection.delete(this.classFocus);
|
|
3325
|
-
this.classCollection = new index$1.
|
|
3325
|
+
this.classCollection = new index$1.Be(this.classCollection.classes);
|
|
3326
3326
|
// Display Error
|
|
3327
3327
|
this.handlerInProgress = Handler.BLUR;
|
|
3328
3328
|
this.displayError().finally(() => {
|
|
@@ -3397,7 +3397,7 @@ const MgInputText = class {
|
|
|
3397
3397
|
this.helpText = undefined;
|
|
3398
3398
|
this.valid = undefined;
|
|
3399
3399
|
this.invalid = undefined;
|
|
3400
|
-
this.classCollection = new index$1.
|
|
3400
|
+
this.classCollection = new index$1.Be(['mg-c-input--text']);
|
|
3401
3401
|
this.errorMessage = undefined;
|
|
3402
3402
|
}
|
|
3403
3403
|
handleValue(newValue) {
|
|
@@ -3448,7 +3448,7 @@ const MgInputText = class {
|
|
|
3448
3448
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3449
3449
|
}
|
|
3450
3450
|
validatePattern(newValue) {
|
|
3451
|
-
if (newValue !== undefined && !(index$1.
|
|
3451
|
+
if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
|
|
3452
3452
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3453
3453
|
}
|
|
3454
3454
|
}
|
|
@@ -3478,7 +3478,7 @@ const MgInputText = class {
|
|
|
3478
3478
|
if (typeof valid !== 'boolean') {
|
|
3479
3479
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3480
3480
|
}
|
|
3481
|
-
else if (!index$1.
|
|
3481
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
3482
3482
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3483
3483
|
}
|
|
3484
3484
|
else {
|
|
@@ -3587,7 +3587,7 @@ const MgInputTextarea = class {
|
|
|
3587
3587
|
*/
|
|
3588
3588
|
this.handleFocus = () => {
|
|
3589
3589
|
this.classCollection.add(this.classFocus);
|
|
3590
|
-
this.classCollection = new index$1.
|
|
3590
|
+
this.classCollection = new index$1.Be(this.classCollection.classes);
|
|
3591
3591
|
};
|
|
3592
3592
|
/**
|
|
3593
3593
|
* Handle blur event
|
|
@@ -3595,7 +3595,7 @@ const MgInputTextarea = class {
|
|
|
3595
3595
|
this.handleBlur = () => {
|
|
3596
3596
|
// Manage focus
|
|
3597
3597
|
this.classCollection.delete(this.classFocus);
|
|
3598
|
-
this.classCollection = new index$1.
|
|
3598
|
+
this.classCollection = new index$1.Be(this.classCollection.classes);
|
|
3599
3599
|
// Display Error
|
|
3600
3600
|
this.handlerInProgress = Handler.BLUR;
|
|
3601
3601
|
this.displayError().finally(() => {
|
|
@@ -3658,7 +3658,7 @@ const MgInputTextarea = class {
|
|
|
3658
3658
|
this.valid = undefined;
|
|
3659
3659
|
this.invalid = undefined;
|
|
3660
3660
|
this.resizable = 'none';
|
|
3661
|
-
this.classCollection = new index$1.
|
|
3661
|
+
this.classCollection = new index$1.Be(['mg-c-input--textarea']);
|
|
3662
3662
|
this.errorMessage = undefined;
|
|
3663
3663
|
}
|
|
3664
3664
|
handleValue(newValue) {
|
|
@@ -3697,7 +3697,7 @@ const MgInputTextarea = class {
|
|
|
3697
3697
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3698
3698
|
}
|
|
3699
3699
|
validatePattern(newValue) {
|
|
3700
|
-
if (newValue !== undefined && !(index$1.
|
|
3700
|
+
if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
|
|
3701
3701
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3702
3702
|
}
|
|
3703
3703
|
}
|
|
@@ -3729,7 +3729,7 @@ const MgInputTextarea = class {
|
|
|
3729
3729
|
if (typeof valid !== 'boolean') {
|
|
3730
3730
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3731
3731
|
}
|
|
3732
|
-
else if (!index$1.
|
|
3732
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
3733
3733
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3734
3734
|
}
|
|
3735
3735
|
else {
|
|
@@ -3818,7 +3818,7 @@ const MgInputTitle = class {
|
|
|
3818
3818
|
this.tagName = 'label';
|
|
3819
3819
|
}
|
|
3820
3820
|
validateIdentifier(newValue) {
|
|
3821
|
-
if (!index$1.
|
|
3821
|
+
if (!index$1.Pe(newValue)) {
|
|
3822
3822
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3823
3823
|
}
|
|
3824
3824
|
}
|
|
@@ -3932,7 +3932,7 @@ const MgInputToggle = class {
|
|
|
3932
3932
|
this.tooltip = undefined;
|
|
3933
3933
|
this.tooltipPosition = 'input';
|
|
3934
3934
|
this.helpText = undefined;
|
|
3935
|
-
this.classCollection = new index$1.
|
|
3935
|
+
this.classCollection = new index$1.Be(['mg-c-input--toggle']);
|
|
3936
3936
|
this.options = undefined;
|
|
3937
3937
|
this.errorMessage = undefined;
|
|
3938
3938
|
this.valid = undefined;
|
|
@@ -3949,7 +3949,7 @@ const MgInputToggle = class {
|
|
|
3949
3949
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3950
3950
|
}
|
|
3951
3951
|
// String array
|
|
3952
|
-
else if (index$1.
|
|
3952
|
+
else if (index$1.Ue(newValue)) {
|
|
3953
3953
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3954
3954
|
}
|
|
3955
3955
|
// Object array
|
|
@@ -4005,7 +4005,7 @@ const MgInputToggle = class {
|
|
|
4005
4005
|
if (typeof valid !== 'boolean') {
|
|
4006
4006
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
4007
4007
|
}
|
|
4008
|
-
else if (!index$1.
|
|
4008
|
+
else if (!index$1.Pe(errorMessage)) {
|
|
4009
4009
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
4010
4010
|
}
|
|
4011
4011
|
else {
|
|
@@ -4251,7 +4251,7 @@ const MgItemMore = class {
|
|
|
4251
4251
|
navElement.click();
|
|
4252
4252
|
});
|
|
4253
4253
|
// add id suffix to prevent duplicate key. default html id is: '';
|
|
4254
|
-
if (index$1.
|
|
4254
|
+
if (index$1.Pe(proxy.id))
|
|
4255
4255
|
proxy.id = `${proxy.id}-proxy`;
|
|
4256
4256
|
// update properties and DOM when proxyfied item is updated
|
|
4257
4257
|
proxified.addEventListener('item-updated', (event) => {
|
|
@@ -4281,7 +4281,7 @@ const MgItemMore = class {
|
|
|
4281
4281
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4282
4282
|
}
|
|
4283
4283
|
validateSize(newValue) {
|
|
4284
|
-
if (newValue &&
|
|
4284
|
+
if (newValue && !sizes$2.includes(newValue))
|
|
4285
4285
|
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
|
|
4286
4286
|
}
|
|
4287
4287
|
/*************
|
|
@@ -4330,10 +4330,10 @@ const MgItemMore = class {
|
|
|
4330
4330
|
* @returns HTML Element
|
|
4331
4331
|
*/
|
|
4332
4332
|
render() {
|
|
4333
|
-
return (index.h(index.Host, { key: '
|
|
4333
|
+
return (index.h(index.Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
|
|
4334
4334
|
if (el)
|
|
4335
4335
|
this.moreElementMenuItem = el;
|
|
4336
|
-
} }, index.h("mg-icon", { key: '
|
|
4336
|
+
} }, index.h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4337
4337
|
}
|
|
4338
4338
|
get element() { return index.getElement(this); }
|
|
4339
4339
|
static get watchers() { return {
|
|
@@ -4369,16 +4369,11 @@ const MgMenu = class {
|
|
|
4369
4369
|
item.expanded = false;
|
|
4370
4370
|
}
|
|
4371
4371
|
};
|
|
4372
|
-
/**
|
|
4373
|
-
* get mg-item-more element
|
|
4374
|
-
* @returns mg-item-more element
|
|
4375
|
-
*/
|
|
4376
|
-
this.getItemMore = () => this.element.querySelector('mg-item-more');
|
|
4377
4372
|
/**
|
|
4378
4373
|
* get mg-item-more child mg-menu-item element
|
|
4379
4374
|
* @returns mg-menu-item element
|
|
4380
4375
|
*/
|
|
4381
|
-
this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.
|
|
4376
|
+
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'); };
|
|
4382
4377
|
/**
|
|
4383
4378
|
* Set item listend
|
|
4384
4379
|
* @param item - mg-menu-item element
|
|
@@ -4414,20 +4409,25 @@ const MgMenu = class {
|
|
|
4414
4409
|
* render mg-item-more
|
|
4415
4410
|
*/
|
|
4416
4411
|
this.renderMgItemMore = () => {
|
|
4417
|
-
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
|
|
4412
|
+
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
|
|
4418
4413
|
return;
|
|
4419
4414
|
}
|
|
4420
|
-
//
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4426
|
-
Object.assign(mgItemMore, this.itemmore || {});
|
|
4427
|
-
this.element.appendChild(mgItemMore);
|
|
4415
|
+
// Insert mg-item-more outside the mg-menu shadowdom
|
|
4416
|
+
if (!this.itemMoreElement) {
|
|
4417
|
+
this.itemMoreElement = document.createElement('mg-item-more');
|
|
4418
|
+
this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4419
|
+
this.element.appendChild(this.itemMoreElement);
|
|
4428
4420
|
}
|
|
4429
|
-
|
|
4430
|
-
|
|
4421
|
+
// update mg-item-more props
|
|
4422
|
+
for (const attribute in this.itemmore) {
|
|
4423
|
+
const newValue = this.itemmore[attribute];
|
|
4424
|
+
// to improve rendering we use HTML attributes as much as possible
|
|
4425
|
+
if (['string', 'number'].includes(typeof newValue)) {
|
|
4426
|
+
this.itemMoreElement.setAttribute(attribute, newValue);
|
|
4427
|
+
}
|
|
4428
|
+
else {
|
|
4429
|
+
this.itemMoreElement[attribute] = newValue;
|
|
4430
|
+
}
|
|
4431
4431
|
}
|
|
4432
4432
|
};
|
|
4433
4433
|
this.label = undefined;
|
|
@@ -4450,6 +4450,9 @@ const MgMenu = class {
|
|
|
4450
4450
|
if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
|
|
4451
4451
|
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
|
|
4452
4452
|
}
|
|
4453
|
+
else if (newValue) {
|
|
4454
|
+
this.renderMgItemMore();
|
|
4455
|
+
}
|
|
4453
4456
|
}
|
|
4454
4457
|
validateSize(newValue) {
|
|
4455
4458
|
if (!sizes$2.includes(newValue)) {
|
|
@@ -4500,7 +4503,7 @@ const MgMenu = class {
|
|
|
4500
4503
|
* @returns HTML Element
|
|
4501
4504
|
*/
|
|
4502
4505
|
render() {
|
|
4503
|
-
return (index.h(index.Host, { key: '
|
|
4506
|
+
return (index.h(index.Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, index.h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
|
|
4504
4507
|
}
|
|
4505
4508
|
get element() { return index.getElement(this); }
|
|
4506
4509
|
static get watchers() { return {
|
|
@@ -4512,7 +4515,7 @@ const MgMenu = class {
|
|
|
4512
4515
|
};
|
|
4513
4516
|
MgMenu.style = MgMenuStyle0;
|
|
4514
4517
|
|
|
4515
|
-
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}";
|
|
4518
|
+
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}";
|
|
4516
4519
|
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4517
4520
|
|
|
4518
4521
|
const MgMenuItem = class {
|
|
@@ -4578,7 +4581,7 @@ const MgMenuItem = class {
|
|
|
4578
4581
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4579
4582
|
['label', 'metadata'].forEach(slot => {
|
|
4580
4583
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4581
|
-
if (!index$1.
|
|
4584
|
+
if (!index$1.Pe(element.textContent))
|
|
4582
4585
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4583
4586
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4584
4587
|
element.setAttribute('title', element.textContent);
|
|
@@ -4647,13 +4650,13 @@ const MgMenuItem = class {
|
|
|
4647
4650
|
* @returns HTML Element
|
|
4648
4651
|
*/
|
|
4649
4652
|
this.renderSlot = () => index.h("slot", null);
|
|
4650
|
-
this.identifier = index$1.
|
|
4653
|
+
this.identifier = index$1.Ne('mg-menu-item');
|
|
4651
4654
|
this.href = undefined;
|
|
4652
4655
|
this.target = undefined;
|
|
4653
4656
|
this.status = Status$1.VISIBLE;
|
|
4654
4657
|
this.expanded = false;
|
|
4655
4658
|
this.size = 'regular';
|
|
4656
|
-
this.navigationButtonClassList = new index$1.
|
|
4659
|
+
this.navigationButtonClassList = new index$1.Be([this.navigationButton]);
|
|
4657
4660
|
this.direction = undefined;
|
|
4658
4661
|
this.isInMainMenu = undefined;
|
|
4659
4662
|
this.isItemMore = undefined;
|
|
@@ -4800,7 +4803,7 @@ const MgMenuItem = class {
|
|
|
4800
4803
|
* Emit event when component is updated
|
|
4801
4804
|
*/
|
|
4802
4805
|
componentShouldUpdate() {
|
|
4803
|
-
return index$1.
|
|
4806
|
+
return index$1.ze(() => {
|
|
4804
4807
|
this.itemUpdated.emit();
|
|
4805
4808
|
});
|
|
4806
4809
|
}
|
|
@@ -4813,7 +4816,8 @@ const MgMenuItem = class {
|
|
|
4813
4816
|
['mg-c-menu-item__collapse-container']: true,
|
|
4814
4817
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
4815
4818
|
});
|
|
4816
|
-
return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier()
|
|
4819
|
+
return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.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
|
|
4820
|
+
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
4817
4821
|
this.renderInteractiveElement(),
|
|
4818
4822
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
4819
4823
|
])));
|
|
@@ -4906,13 +4910,13 @@ const MgMessage = class {
|
|
|
4906
4910
|
return 'exclamation-circle';
|
|
4907
4911
|
}
|
|
4908
4912
|
};
|
|
4909
|
-
this.identifier = index$1.
|
|
4913
|
+
this.identifier = index$1.Ne('mg-message');
|
|
4910
4914
|
this.delay = undefined;
|
|
4911
4915
|
this.variant = variants$1[0];
|
|
4912
4916
|
this.closeButton = false;
|
|
4913
4917
|
this.hide = false;
|
|
4914
4918
|
this.noAriaRole = undefined;
|
|
4915
|
-
this.classCollection = new index$1.
|
|
4919
|
+
this.classCollection = new index$1.Be(['mg-c-message']);
|
|
4916
4920
|
this.hasActions = false;
|
|
4917
4921
|
}
|
|
4918
4922
|
validateDelay(newValue) {
|
|
@@ -5055,12 +5059,12 @@ const MgModal = class {
|
|
|
5055
5059
|
*/
|
|
5056
5060
|
this.setFocus = () => {
|
|
5057
5061
|
// Get all focusable elements
|
|
5058
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.
|
|
5062
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.He));
|
|
5059
5063
|
// If close button is enabled or at least one of the slotted element is focusable
|
|
5060
5064
|
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5061
5065
|
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5062
5066
|
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5063
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.
|
|
5067
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.He) || focusableElement : focusableElement);
|
|
5064
5068
|
return acc;
|
|
5065
5069
|
}, []);
|
|
5066
5070
|
// When close button is enabled it's the first focusable element.
|
|
@@ -5082,21 +5086,21 @@ const MgModal = class {
|
|
|
5082
5086
|
this.handleClose = () => {
|
|
5083
5087
|
this.hide = true;
|
|
5084
5088
|
};
|
|
5085
|
-
this.identifier = index$1.
|
|
5089
|
+
this.identifier = index$1.Ne('mg-modal');
|
|
5086
5090
|
this.dialogRole = dialogRoles[0];
|
|
5087
5091
|
this.modalTitle = undefined;
|
|
5088
5092
|
this.closeButton = false;
|
|
5089
5093
|
this.hide = undefined;
|
|
5090
5094
|
this.hasActions = false;
|
|
5091
5095
|
this.hasContent = false;
|
|
5092
|
-
this.classCollection = new index$1.
|
|
5096
|
+
this.classCollection = new index$1.Be(['mg-c-modal']);
|
|
5093
5097
|
}
|
|
5094
5098
|
validateDialogRole(newValue) {
|
|
5095
5099
|
if (!dialogRoles.includes(newValue))
|
|
5096
5100
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
5097
5101
|
}
|
|
5098
5102
|
validateModalTitle(newValue) {
|
|
5099
|
-
if (!index$1.
|
|
5103
|
+
if (!index$1.Pe(newValue)) {
|
|
5100
5104
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
5101
5105
|
}
|
|
5102
5106
|
}
|
|
@@ -5243,7 +5247,7 @@ const MgPagination = class {
|
|
|
5243
5247
|
this.handleGoToPage = (action, disabled) => {
|
|
5244
5248
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
5245
5249
|
};
|
|
5246
|
-
this.identifier = index$1.
|
|
5250
|
+
this.identifier = index$1.Ne('mg-pagination');
|
|
5247
5251
|
this.label = undefined;
|
|
5248
5252
|
this.hideNavigationLabels = undefined;
|
|
5249
5253
|
this.hidePageCount = undefined;
|
|
@@ -5408,7 +5412,7 @@ const MgPanel = class {
|
|
|
5408
5412
|
];
|
|
5409
5413
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5410
5414
|
};
|
|
5411
|
-
this.identifier = index$1.
|
|
5415
|
+
this.identifier = index$1.Ne('mg-panel');
|
|
5412
5416
|
this.panelTitle = undefined;
|
|
5413
5417
|
this.titlePattern = undefined;
|
|
5414
5418
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5417,12 +5421,12 @@ const MgPanel = class {
|
|
|
5417
5421
|
this.expanded = false;
|
|
5418
5422
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5419
5423
|
this.expandToggleDisabled = undefined;
|
|
5420
|
-
this.classCollection = new index$1.
|
|
5424
|
+
this.classCollection = new index$1.Be(['mg-c-panel']);
|
|
5421
5425
|
this.isEditing = false;
|
|
5422
5426
|
this.updatedPanelTitle = undefined;
|
|
5423
5427
|
}
|
|
5424
5428
|
validatePanelTitle(newValue) {
|
|
5425
|
-
if (!index$1.
|
|
5429
|
+
if (!index$1.Pe(newValue))
|
|
5426
5430
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5427
5431
|
this.titleChange.emit(newValue);
|
|
5428
5432
|
}
|
|
@@ -7373,7 +7377,7 @@ const MgPopover = class {
|
|
|
7373
7377
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
7374
7378
|
}
|
|
7375
7379
|
};
|
|
7376
|
-
this.identifier = index$1.
|
|
7380
|
+
this.identifier = index$1.Ne('mg-popover');
|
|
7377
7381
|
this.placement = 'bottom';
|
|
7378
7382
|
this.arrowHide = false;
|
|
7379
7383
|
this.closeButton = false;
|
|
@@ -7416,7 +7420,7 @@ const MgPopover = class {
|
|
|
7416
7420
|
*/
|
|
7417
7421
|
componentWillLoad() {
|
|
7418
7422
|
// Get windows to attach events
|
|
7419
|
-
this.windows = index$1.
|
|
7423
|
+
this.windows = index$1.we(window);
|
|
7420
7424
|
// render mg-popover-content slot
|
|
7421
7425
|
this.renderPopoverContent();
|
|
7422
7426
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7434,6 +7438,10 @@ const MgPopover = class {
|
|
|
7434
7438
|
// Add aria attributes
|
|
7435
7439
|
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
7436
7440
|
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
7441
|
+
const fallbackPlacements = [];
|
|
7442
|
+
if (this.element.dataset.fallbackPlacement) {
|
|
7443
|
+
fallbackPlacements.push(this.element.dataset.fallbackPlacement);
|
|
7444
|
+
}
|
|
7437
7445
|
// Create popperjs popover
|
|
7438
7446
|
this.popper = createPopper(interactiveElement, this.mgPopover, {
|
|
7439
7447
|
placement: this.placement,
|
|
@@ -7448,7 +7456,7 @@ const MgPopover = class {
|
|
|
7448
7456
|
{
|
|
7449
7457
|
name: 'flip',
|
|
7450
7458
|
options: {
|
|
7451
|
-
fallbackPlacements: ['auto'],
|
|
7459
|
+
fallbackPlacements: [...fallbackPlacements, 'auto'],
|
|
7452
7460
|
},
|
|
7453
7461
|
},
|
|
7454
7462
|
],
|
|
@@ -7478,7 +7486,7 @@ const MgPopover = class {
|
|
|
7478
7486
|
* @returns HTML Element
|
|
7479
7487
|
*/
|
|
7480
7488
|
render() {
|
|
7481
|
-
return (index.h(index.Host, { key: '
|
|
7489
|
+
return (index.h(index.Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, index.h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), index.h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
|
|
7482
7490
|
}
|
|
7483
7491
|
get element() { return index.getElement(this); }
|
|
7484
7492
|
static get watchers() { return {
|
|
@@ -7504,7 +7512,7 @@ const MgPopoverContent = class {
|
|
|
7504
7512
|
this.hideContent.emit();
|
|
7505
7513
|
};
|
|
7506
7514
|
this.closeButton = false;
|
|
7507
|
-
this.classCollection = new index$1.
|
|
7515
|
+
this.classCollection = new index$1.Be(['mg-c-popover-content']);
|
|
7508
7516
|
}
|
|
7509
7517
|
/*************
|
|
7510
7518
|
* Lifecycle *
|
|
@@ -7522,7 +7530,7 @@ const MgPopoverContent = class {
|
|
|
7522
7530
|
componentDidLoad() {
|
|
7523
7531
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7524
7532
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7525
|
-
if (slottedTitleElement && !index$1.
|
|
7533
|
+
if (slottedTitleElement && !index$1.Ce(slottedTitleElement, headingTags)) {
|
|
7526
7534
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7527
7535
|
}
|
|
7528
7536
|
}
|
|
@@ -7558,7 +7566,7 @@ const MgSkipLinks = class {
|
|
|
7558
7566
|
this.links = undefined;
|
|
7559
7567
|
}
|
|
7560
7568
|
validateLinks(links) {
|
|
7561
|
-
if (links === undefined || links.length === 0 || links.some(link => !index$1.
|
|
7569
|
+
if (links === undefined || links.length === 0 || links.some(link => !index$1.Pe(link.href) || !link.href.startsWith('#') || !index$1.Pe(link.label))) {
|
|
7562
7570
|
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.`);
|
|
7563
7571
|
}
|
|
7564
7572
|
}
|
|
@@ -7710,7 +7718,7 @@ const MgTabs = class {
|
|
|
7710
7718
|
*/
|
|
7711
7719
|
this.resetFocus = () => {
|
|
7712
7720
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7713
|
-
index$1.
|
|
7721
|
+
index$1.ze(() => {
|
|
7714
7722
|
this.tabFocus = undefined;
|
|
7715
7723
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7716
7724
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7725,16 +7733,16 @@ const MgTabs = class {
|
|
|
7725
7733
|
if (slots.length !== this.tabs.length)
|
|
7726
7734
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7727
7735
|
};
|
|
7728
|
-
this.identifier = index$1.
|
|
7736
|
+
this.identifier = index$1.Ne('mg-tabs');
|
|
7729
7737
|
this.label = undefined;
|
|
7730
7738
|
this.size = 'regular';
|
|
7731
7739
|
this.items = undefined;
|
|
7732
7740
|
this.activeTab = undefined;
|
|
7733
7741
|
this.tabs = [];
|
|
7734
|
-
this.classCollection = new index$1.
|
|
7742
|
+
this.classCollection = new index$1.Be(['mg-c-tabs']);
|
|
7735
7743
|
}
|
|
7736
7744
|
validateLabel(newValue) {
|
|
7737
|
-
if (!index$1.
|
|
7745
|
+
if (!index$1.Pe(newValue)) {
|
|
7738
7746
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7739
7747
|
}
|
|
7740
7748
|
}
|
|
@@ -7746,7 +7754,7 @@ const MgTabs = class {
|
|
|
7746
7754
|
}
|
|
7747
7755
|
validateItems(newValue) {
|
|
7748
7756
|
// String array
|
|
7749
|
-
if (index$1.
|
|
7757
|
+
if (index$1.Ue(newValue))
|
|
7750
7758
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7751
7759
|
// Object array
|
|
7752
7760
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7846,7 +7854,7 @@ const MgTag = class {
|
|
|
7846
7854
|
this.variant = variants[0];
|
|
7847
7855
|
this.outline = undefined;
|
|
7848
7856
|
this.soft = undefined;
|
|
7849
|
-
this.classCollection = new index$1.
|
|
7857
|
+
this.classCollection = new index$1.Be(['mg-c-tag']);
|
|
7850
7858
|
}
|
|
7851
7859
|
validateVariant(newValue, oldValue) {
|
|
7852
7860
|
if (!variants.includes(newValue)) {
|
|
@@ -7883,7 +7891,7 @@ const MgTag = class {
|
|
|
7883
7891
|
* @param textContent - html element textContent property
|
|
7884
7892
|
*/
|
|
7885
7893
|
validateTextContent(textContent) {
|
|
7886
|
-
if (!index$1.
|
|
7894
|
+
if (!index$1.Pe(textContent))
|
|
7887
7895
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7888
7896
|
}
|
|
7889
7897
|
/*************
|
|
@@ -7943,7 +7951,7 @@ const MgTooltip = class {
|
|
|
7943
7951
|
// Enable the event listeners
|
|
7944
7952
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7945
7953
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7946
|
-
index$1.
|
|
7954
|
+
index$1.ze(() => {
|
|
7947
7955
|
this.windows.forEach((localWindow) => {
|
|
7948
7956
|
localWindow.addEventListener('click', this.clickOutside, false);
|
|
7949
7957
|
localWindow.addEventListener('keydown', this.pressEscape, false);
|
|
@@ -8114,7 +8122,7 @@ const MgTooltip = class {
|
|
|
8114
8122
|
});
|
|
8115
8123
|
});
|
|
8116
8124
|
};
|
|
8117
|
-
this.identifier = index$1.
|
|
8125
|
+
this.identifier = index$1.Ne('mg-tooltip');
|
|
8118
8126
|
this.message = undefined;
|
|
8119
8127
|
this.placement = 'bottom';
|
|
8120
8128
|
this.display = false;
|
|
@@ -8125,7 +8133,7 @@ const MgTooltip = class {
|
|
|
8125
8133
|
this.renderTooltipContent();
|
|
8126
8134
|
}
|
|
8127
8135
|
validateMessage(newValue) {
|
|
8128
|
-
if (!index$1.
|
|
8136
|
+
if (!index$1.Pe(newValue)) {
|
|
8129
8137
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
8130
8138
|
}
|
|
8131
8139
|
this.mgTooltipContent.message = newValue;
|
|
@@ -8174,7 +8182,7 @@ const MgTooltip = class {
|
|
|
8174
8182
|
*/
|
|
8175
8183
|
componentWillLoad() {
|
|
8176
8184
|
// Get windows to attach events
|
|
8177
|
-
this.windows = index$1.
|
|
8185
|
+
this.windows = index$1.we(window);
|
|
8178
8186
|
// Get tooltip element
|
|
8179
8187
|
this.renderTooltipContent();
|
|
8180
8188
|
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
@@ -8193,7 +8201,7 @@ const MgTooltip = class {
|
|
|
8193
8201
|
// get slotted element wich is not the tooltip
|
|
8194
8202
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8195
8203
|
// Get interactive element
|
|
8196
|
-
const interactiveElement = slotElement.matches(index$1.
|
|
8204
|
+
const interactiveElement = slotElement.matches(index$1.He) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.He);
|
|
8197
8205
|
// define selected element to become tooltip selector
|
|
8198
8206
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
8199
8207
|
// Check if slotted element is a disabled mg-button
|