@mgdis/mg-components 5.8.0 → 5.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_31.cjs.entry.js +148 -48
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-item-more.cjs.entry.js +3 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +14 -10
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +91 -21
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +52 -20
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +4 -2
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +18 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +2 -1
- package/dist/collection/utils/components.utils.js +2 -4
- package/dist/collection/utils/unit.test.utils.js +25 -0
- package/dist/components/components.utils.js +2 -4
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-input-checkbox.js +5 -4
- package/dist/components/mg-input-select2.js +83 -17
- package/dist/components/mg-item-more.js +2 -1
- package/dist/components/mg-menu-item2.js +5 -2
- package/dist/components/mg-menu2.js +52 -20
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_31.entry.js +148 -48
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-item-more.entry.js +3 -2
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-0b68c4b4.entry.js +1 -0
- package/dist/mg-components/{p-1221773c.entry.js → p-67ce7cb8.entry.js} +1 -1
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +3 -3
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +39 -4
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +31 -5
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +4 -0
- package/dist/types/components.d.ts +11 -7
- package/dist/types/utils/components.utils.d.ts +2 -2
- package/dist/types/utils/unit.test.utils.d.ts +11 -0
- package/package.json +9 -14
- package/dist/mg-components/p-6aeded97.entry.js +0 -1
- /package/dist/cjs/{index-5e7ede97.js → index-9e1091ab.js} +0 -0
- /package/dist/esm/{index-03cceb11.js → index-3249671d.js} +0 -0
- /package/dist/mg-components/{p-e126dd84.js → p-8fbc0d87.js} +0 -0
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-9e1091ab.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"
|
|
17
|
+
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-9e1091ab.js');
|
|
6
6
|
const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -92,12 +92,10 @@ class ClassList {
|
|
|
92
92
|
/**
|
|
93
93
|
* Check if all items are string
|
|
94
94
|
*
|
|
95
|
-
* @param {
|
|
95
|
+
* @param {unknown} items items to check
|
|
96
96
|
* @returns {boolean} all items are string
|
|
97
97
|
*/
|
|
98
|
-
const allItemsAreString = (items) =>
|
|
99
|
-
return items && items.every(item => typeof item === 'string');
|
|
100
|
-
};
|
|
98
|
+
const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
|
|
101
99
|
/**
|
|
102
100
|
* Check if element is a heading
|
|
103
101
|
*
|
|
@@ -823,7 +821,7 @@ const MgForm = class {
|
|
|
823
821
|
// submit buttons should trigger form submition;
|
|
824
822
|
if (['submit', null].includes(mgButton.getAttribute('type'))) {
|
|
825
823
|
mgButton.addEventListener('click', () => {
|
|
826
|
-
this.form.dispatchEvent(new
|
|
824
|
+
this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
|
|
827
825
|
});
|
|
828
826
|
}
|
|
829
827
|
});
|
|
@@ -1311,10 +1309,11 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
|
|
|
1311
1309
|
/**
|
|
1312
1310
|
* type CheckboxItem validation function
|
|
1313
1311
|
*
|
|
1314
|
-
* @param {
|
|
1315
|
-
* @returns {boolean} match item
|
|
1312
|
+
* @param {unknown} items Checkbox item
|
|
1313
|
+
* @returns {boolean} match item type
|
|
1316
1314
|
*/
|
|
1317
|
-
const
|
|
1315
|
+
const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
1316
|
+
items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
|
|
1318
1317
|
const MgInputCheckbox = class {
|
|
1319
1318
|
constructor(hostRef) {
|
|
1320
1319
|
index.registerInstance(this, hostRef);
|
|
@@ -1395,7 +1394,7 @@ const MgInputCheckbox = class {
|
|
|
1395
1394
|
this.checkboxItems = [];
|
|
1396
1395
|
}
|
|
1397
1396
|
validateValue(newValue) {
|
|
1398
|
-
if (newValue
|
|
1397
|
+
if (isCheckboxItems(newValue)) {
|
|
1399
1398
|
this.checkboxItems = newValue.map((item, index) => ({
|
|
1400
1399
|
id: `${this.identifier}_${index.toString()}`,
|
|
1401
1400
|
title: item.title,
|
|
@@ -2244,10 +2243,24 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
|
|
|
2244
2243
|
/**
|
|
2245
2244
|
* Check if item is a well configured option
|
|
2246
2245
|
*
|
|
2247
|
-
* @param {
|
|
2246
|
+
* @param {unknown} option select option
|
|
2248
2247
|
* @returns {boolean} select option type is valid
|
|
2249
2248
|
*/
|
|
2250
2249
|
const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
|
|
2250
|
+
/**
|
|
2251
|
+
* Check if items[] is SelectOption
|
|
2252
|
+
*
|
|
2253
|
+
* @param {unknown[]} items select option
|
|
2254
|
+
* @returns {boolean} select option array type is valid
|
|
2255
|
+
*/
|
|
2256
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$1(item));
|
|
2257
|
+
/**
|
|
2258
|
+
* Check if item is a well configured optgroup
|
|
2259
|
+
*
|
|
2260
|
+
* @param {unknown} optgroup select option
|
|
2261
|
+
* @returns {boolean} select optgroup type is valid
|
|
2262
|
+
*/
|
|
2263
|
+
const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
|
|
2251
2264
|
/**
|
|
2252
2265
|
* Group options
|
|
2253
2266
|
*
|
|
@@ -2286,17 +2299,50 @@ const MgInputSelect = class {
|
|
|
2286
2299
|
this.hasDisplayedError = false;
|
|
2287
2300
|
/**
|
|
2288
2301
|
* Handle input event
|
|
2302
|
+
*
|
|
2303
|
+
* @returns {void}
|
|
2289
2304
|
*/
|
|
2290
2305
|
this.handleInput = () => {
|
|
2291
|
-
this.
|
|
2292
|
-
if (this.hasDisplayedError)
|
|
2306
|
+
this.updateValue();
|
|
2307
|
+
if (this.hasDisplayedError)
|
|
2293
2308
|
this.setErrorMessage();
|
|
2309
|
+
};
|
|
2310
|
+
/**
|
|
2311
|
+
* Method to compare item.title with input.value
|
|
2312
|
+
*
|
|
2313
|
+
* @param {SelectOption} item item to compare with
|
|
2314
|
+
* @returns {boolean} truthy if input.value is an item
|
|
2315
|
+
*/
|
|
2316
|
+
this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
|
|
2317
|
+
/**
|
|
2318
|
+
* value props setter
|
|
2319
|
+
*
|
|
2320
|
+
* @param {MgInputSelect['value']} newValue value to update with
|
|
2321
|
+
* @returns {void}
|
|
2322
|
+
*/
|
|
2323
|
+
this.setValue = (newValue) => {
|
|
2324
|
+
this.checkValidity();
|
|
2325
|
+
this.value = newValue;
|
|
2326
|
+
};
|
|
2327
|
+
/**
|
|
2328
|
+
* Update value from input.value
|
|
2329
|
+
*
|
|
2330
|
+
* @returns {void}
|
|
2331
|
+
*/
|
|
2332
|
+
this.updateValue = () => {
|
|
2333
|
+
if (this.input.value === '') {
|
|
2334
|
+
this.setValue(null);
|
|
2294
2335
|
}
|
|
2295
|
-
if (this.input.value
|
|
2296
|
-
this.
|
|
2336
|
+
else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
|
|
2337
|
+
this.setValue(this.input.value);
|
|
2338
|
+
}
|
|
2339
|
+
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
2340
|
+
this.setValue(this.items.find(this.isInputValue).value);
|
|
2297
2341
|
}
|
|
2298
2342
|
else {
|
|
2299
|
-
|
|
2343
|
+
// before set newValue with push to options[] the unknown input.value with a disable satus
|
|
2344
|
+
this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
|
|
2345
|
+
this.setValue(this.input.value);
|
|
2300
2346
|
}
|
|
2301
2347
|
};
|
|
2302
2348
|
/**
|
|
@@ -2305,12 +2351,18 @@ const MgInputSelect = class {
|
|
|
2305
2351
|
this.handleBlur = () => {
|
|
2306
2352
|
this.displayError();
|
|
2307
2353
|
};
|
|
2354
|
+
/**
|
|
2355
|
+
* Input value is disabled
|
|
2356
|
+
*
|
|
2357
|
+
* @returns {boolean} truthy if input value is disabled
|
|
2358
|
+
*/
|
|
2359
|
+
this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
|
|
2308
2360
|
/**
|
|
2309
2361
|
* Check if input is valid
|
|
2310
2362
|
*/
|
|
2311
2363
|
this.checkValidity = () => {
|
|
2312
2364
|
var _a;
|
|
2313
|
-
this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
|
|
2365
|
+
this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
|
|
2314
2366
|
this.invalid = !this.valid;
|
|
2315
2367
|
// We need to send valid event even if it is the same value
|
|
2316
2368
|
this.inputValid.emit(this.valid);
|
|
@@ -2325,6 +2377,13 @@ const MgInputSelect = class {
|
|
|
2325
2377
|
this.errorMessage = this.messages.errors.required;
|
|
2326
2378
|
}
|
|
2327
2379
|
};
|
|
2380
|
+
/**
|
|
2381
|
+
* Render option
|
|
2382
|
+
*
|
|
2383
|
+
* @param {SelectOption} option to render
|
|
2384
|
+
* @returns {HTMLElement} render option
|
|
2385
|
+
*/
|
|
2386
|
+
this.renderOption = (option) => (index.h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
|
|
2328
2387
|
this.value = undefined;
|
|
2329
2388
|
this.items = undefined;
|
|
2330
2389
|
this.identifier = undefined;
|
|
@@ -2349,9 +2408,13 @@ const MgInputSelect = class {
|
|
|
2349
2408
|
this.valueExist = undefined;
|
|
2350
2409
|
this.readonlyValue = undefined;
|
|
2351
2410
|
}
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2411
|
+
validateValue(newValue) {
|
|
2412
|
+
var _a, _b;
|
|
2413
|
+
if (allItemsAreString(this.items) && typeof newValue === 'string') {
|
|
2414
|
+
this.readonlyValue = Boolean((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
2415
|
+
}
|
|
2416
|
+
else if (allItemsAreOptions(this.items)) {
|
|
2417
|
+
this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
|
|
2355
2418
|
}
|
|
2356
2419
|
else {
|
|
2357
2420
|
this.readonlyValue = null;
|
|
@@ -2365,14 +2428,15 @@ const MgInputSelect = class {
|
|
|
2365
2428
|
}
|
|
2366
2429
|
// String array
|
|
2367
2430
|
else if (allItemsAreString(newValue)) {
|
|
2368
|
-
|
|
2369
|
-
|
|
2431
|
+
if (typeof this.value === 'string')
|
|
2432
|
+
this.valueExist = newValue.includes(this.value);
|
|
2433
|
+
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
2370
2434
|
}
|
|
2371
2435
|
// Object array
|
|
2372
|
-
else if (newValue
|
|
2436
|
+
else if (allItemsAreOptions(newValue)) {
|
|
2373
2437
|
this.valueExist = newValue.map(item => item.value).includes(this.value);
|
|
2374
2438
|
// Grouped object options
|
|
2375
|
-
if (newValue.some(item => item.group
|
|
2439
|
+
if (newValue.some(item => Boolean(item.group))) {
|
|
2376
2440
|
this.options = newValue.reduce(groupOptions, []);
|
|
2377
2441
|
}
|
|
2378
2442
|
// Standart object options
|
|
@@ -2417,6 +2481,7 @@ const MgInputSelect = class {
|
|
|
2417
2481
|
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
2418
2482
|
// Validate
|
|
2419
2483
|
this.validateItems(this.items);
|
|
2484
|
+
this.validateValue(this.value);
|
|
2420
2485
|
// Set default placeholder
|
|
2421
2486
|
if (this.placeholder === undefined || this.placeholder === '') {
|
|
2422
2487
|
this.placeholder = this.messages.input.select.placeholder;
|
|
@@ -2434,15 +2499,15 @@ const MgInputSelect = class {
|
|
|
2434
2499
|
* @returns {HTMLElement} HTML Element
|
|
2435
2500
|
*/
|
|
2436
2501
|
render() {
|
|
2437
|
-
return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value:
|
|
2502
|
+
return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
|
|
2438
2503
|
if (el !== null)
|
|
2439
2504
|
this.input = el;
|
|
2440
2505
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
2441
|
-
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option
|
|
2506
|
+
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? index.h("optgroup", { label: option.group }, option.options.map(this.renderOption)) : isOption$1(option) && this.renderOption(option)))));
|
|
2442
2507
|
}
|
|
2443
2508
|
get element() { return index.getElement(this); }
|
|
2444
2509
|
static get watchers() { return {
|
|
2445
|
-
"value": ["
|
|
2510
|
+
"value": ["validateValue"],
|
|
2446
2511
|
"items": ["validateItems"],
|
|
2447
2512
|
"required": ["handleValidityChange"],
|
|
2448
2513
|
"readonly": ["handleValidityChange"],
|
|
@@ -3099,6 +3164,9 @@ const MgMenu = class {
|
|
|
3099
3164
|
this.name = 'mg-menu';
|
|
3100
3165
|
this.menuItems = [];
|
|
3101
3166
|
this.focusedMenuItem = 0;
|
|
3167
|
+
/*************
|
|
3168
|
+
* Methods *
|
|
3169
|
+
*************/
|
|
3102
3170
|
/**
|
|
3103
3171
|
* Close matching menu-item
|
|
3104
3172
|
*
|
|
@@ -3111,9 +3179,36 @@ const MgMenu = class {
|
|
|
3111
3179
|
item.expanded = false;
|
|
3112
3180
|
}
|
|
3113
3181
|
};
|
|
3114
|
-
|
|
3115
|
-
*
|
|
3116
|
-
|
|
3182
|
+
/**
|
|
3183
|
+
* get mg-item-more element
|
|
3184
|
+
*
|
|
3185
|
+
* @returns {HTMLMgItemMoreElement} mg-item-more element
|
|
3186
|
+
*/
|
|
3187
|
+
this.getItemMore = () => this.element.querySelector('mg-item-more');
|
|
3188
|
+
/**
|
|
3189
|
+
* get mg-item-more >>> mg-menu-item element
|
|
3190
|
+
*
|
|
3191
|
+
* @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
|
|
3192
|
+
*/
|
|
3193
|
+
this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
|
|
3194
|
+
/**
|
|
3195
|
+
* Set item listend
|
|
3196
|
+
*
|
|
3197
|
+
* @param {HTMLMgMenuItemElement} item mg-menu-item element
|
|
3198
|
+
* @param {MgMenu['focusedMenuItem']} index number
|
|
3199
|
+
* @returns {void}
|
|
3200
|
+
*/
|
|
3201
|
+
this.setItemListener = (item, index) => {
|
|
3202
|
+
['click', 'focus'].forEach(trigger => {
|
|
3203
|
+
(item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
|
|
3204
|
+
this.focusedMenuItem = index;
|
|
3205
|
+
// reset expanded on previous active menu item
|
|
3206
|
+
(Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
|
|
3207
|
+
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
3208
|
+
});
|
|
3209
|
+
});
|
|
3210
|
+
});
|
|
3211
|
+
};
|
|
3117
3212
|
/**
|
|
3118
3213
|
* Store menu-items on component init and add listeners
|
|
3119
3214
|
*
|
|
@@ -3121,18 +3216,18 @@ const MgMenu = class {
|
|
|
3121
3216
|
*/
|
|
3122
3217
|
this.initMenuItemsListeners = () => {
|
|
3123
3218
|
// add listeners on menu item and edit index
|
|
3124
|
-
this.menuItems.forEach((item,
|
|
3125
|
-
|
|
3126
|
-
(item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
|
|
3127
|
-
this.focusedMenuItem = menuItemIndex;
|
|
3128
|
-
// reset expanded on previous active menu item
|
|
3129
|
-
this.menuItems.forEach((item, index) => {
|
|
3130
|
-
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
3131
|
-
});
|
|
3132
|
-
});
|
|
3133
|
-
});
|
|
3219
|
+
this.menuItems.forEach((item, index) => {
|
|
3220
|
+
this.setItemListener(item, index);
|
|
3134
3221
|
});
|
|
3135
3222
|
};
|
|
3223
|
+
/**
|
|
3224
|
+
* Handle item-loaded event on mg-item-more element
|
|
3225
|
+
*
|
|
3226
|
+
* @returns {void}
|
|
3227
|
+
*/
|
|
3228
|
+
this.handleItemLoaded = () => {
|
|
3229
|
+
this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
|
|
3230
|
+
};
|
|
3136
3231
|
/**
|
|
3137
3232
|
* render mg-item-more
|
|
3138
3233
|
*
|
|
@@ -3143,12 +3238,13 @@ const MgMenu = class {
|
|
|
3143
3238
|
// by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
|
|
3144
3239
|
const item = 'mg-item-more';
|
|
3145
3240
|
const mgItemMore = document.createElement(item);
|
|
3146
|
-
Object.assign(mgItemMore, this.
|
|
3241
|
+
Object.assign(mgItemMore, this.itemmore);
|
|
3242
|
+
mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
|
|
3147
3243
|
this.element.appendChild(mgItemMore);
|
|
3148
3244
|
};
|
|
3149
3245
|
this.label = undefined;
|
|
3150
3246
|
this.direction = mgMenu_conf.Direction.HORIZONTAL;
|
|
3151
|
-
this.
|
|
3247
|
+
this.itemmore = undefined;
|
|
3152
3248
|
this.size = 'regular';
|
|
3153
3249
|
this.isChildMenu = undefined;
|
|
3154
3250
|
}
|
|
@@ -3164,7 +3260,7 @@ const MgMenu = class {
|
|
|
3164
3260
|
}
|
|
3165
3261
|
validateItemMore(newValue) {
|
|
3166
3262
|
if (newValue !== undefined && this.direction !== mgMenu_conf.Direction.HORIZONTAL) {
|
|
3167
|
-
throw new Error(`<${this.name}> prop "
|
|
3263
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${mgMenu_conf.Direction.HORIZONTAL}.`);
|
|
3168
3264
|
}
|
|
3169
3265
|
}
|
|
3170
3266
|
validateSize(newValue) {
|
|
@@ -3183,7 +3279,7 @@ const MgMenu = class {
|
|
|
3183
3279
|
componentWillLoad() {
|
|
3184
3280
|
this.validateDirection(this.direction);
|
|
3185
3281
|
this.validateLabel(this.label);
|
|
3186
|
-
this.validateItemMore(this.
|
|
3282
|
+
this.validateItemMore(this.itemmore);
|
|
3187
3283
|
this.validateSize(this.size);
|
|
3188
3284
|
}
|
|
3189
3285
|
/**
|
|
@@ -3204,13 +3300,14 @@ const MgMenu = class {
|
|
|
3204
3300
|
this.renderMgItemMore();
|
|
3205
3301
|
// use mutation observer to improve reactivity
|
|
3206
3302
|
new MutationObserver(entries => {
|
|
3207
|
-
const mgItemMore = this.
|
|
3303
|
+
const mgItemMore = this.getItemMore();
|
|
3208
3304
|
// prevent infinit loop by exclude mg-item-more deletion entry
|
|
3209
3305
|
if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
|
|
3210
3306
|
return;
|
|
3211
3307
|
else if (mgItemMore !== null) {
|
|
3212
3308
|
// render a new mg-item-more
|
|
3213
3309
|
mgItemMore.remove();
|
|
3310
|
+
mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
|
|
3214
3311
|
this.renderMgItemMore();
|
|
3215
3312
|
}
|
|
3216
3313
|
}).observe(this.element, { childList: true, characterData: true, subtree: true });
|
|
@@ -3236,18 +3333,19 @@ const MgMenu = class {
|
|
|
3236
3333
|
static get watchers() { return {
|
|
3237
3334
|
"label": ["validateLabel"],
|
|
3238
3335
|
"direction": ["validateDirection"],
|
|
3239
|
-
"
|
|
3336
|
+
"itemmore": ["validateItemMore"],
|
|
3240
3337
|
"size": ["validateSize"]
|
|
3241
3338
|
}; }
|
|
3242
3339
|
};
|
|
3243
3340
|
MgMenu.style = mgMenuCss;
|
|
3244
3341
|
|
|
3245
|
-
const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-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}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
3342
|
+
const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-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}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
3246
3343
|
|
|
3247
3344
|
const MgMenuItem = class {
|
|
3248
3345
|
constructor(hostRef) {
|
|
3249
3346
|
index.registerInstance(this, hostRef);
|
|
3250
3347
|
this.statusChange = index.createEvent(this, "status-change", 7);
|
|
3348
|
+
this.itemLoaded = index.createEvent(this, "item-loaded", 7);
|
|
3251
3349
|
/************
|
|
3252
3350
|
* Internal *
|
|
3253
3351
|
************/
|
|
@@ -3515,6 +3613,8 @@ const MgMenuItem = class {
|
|
|
3515
3613
|
this.updatePopoverGuard();
|
|
3516
3614
|
// manage child dom changes with mutationObserver and listzners
|
|
3517
3615
|
this.initListeners();
|
|
3616
|
+
// emit loaded event when component is fully loaded
|
|
3617
|
+
this.itemLoaded.emit();
|
|
3518
3618
|
new MutationObserver(mutationsList => {
|
|
3519
3619
|
if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
|
|
3520
3620
|
this.updateStatus();
|
|
@@ -3545,7 +3645,7 @@ const MgMenuItem = class {
|
|
|
3545
3645
|
render() {
|
|
3546
3646
|
const getContainerClasses = () => ({
|
|
3547
3647
|
[`${this.name}__collapse-container`]: true,
|
|
3548
|
-
[`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
|
|
3648
|
+
[`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
|
|
3549
3649
|
});
|
|
3550
3650
|
return (index.h(index.Host, { role: !this.isItemMore && 'menuitem', "aria-haspopup": !this.isItemMore && this.hasChildren.toString() }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
3551
3651
|
this.renderInteractiveElement(),
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-9e1091ab.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"
|
|
20
|
+
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-9e1091ab.js');
|
|
6
6
|
const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -188,7 +188,8 @@ const MgItemMore = class {
|
|
|
188
188
|
Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
|
|
189
189
|
// manage click on proxy to mirror it on initial element
|
|
190
190
|
proxy.addEventListener('click', () => {
|
|
191
|
-
|
|
191
|
+
// be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
|
|
192
|
+
allMenuItem[index].shadowRoot.querySelector('a, button').click();
|
|
192
193
|
});
|
|
193
194
|
// add id suffix to prevent duplicate key. default html id is: '';
|
|
194
195
|
if (proxy.id.trim() !== '')
|