@mgdis/mg-components 5.19.2 → 5.19.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/{components.utils-dc9c8a53.js → components.utils-69435877.js} +2 -2
- package/dist/cjs/components.utils-69435877.js.map +1 -0
- package/dist/cjs/{index-c042e24b.js → index-60dd0c56.js} +143 -58
- package/dist/cjs/index-60dd0c56.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_34.cjs.entry.js +306 -238
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +2 -2
- package/dist/cjs/mg-item-more.cjs.entry.js.map +1 -1
- package/dist/collection/assets/icons/index.js +190 -182
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/atoms/mg-button/mg-button.js +15 -0
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/test/mg-button.e2e.js +1 -1
- package/dist/collection/components/atoms/mg-button/test/mg-button.e2e.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/test/mg-button.spec.js +54 -4
- package/dist/collection/components/atoms/mg-button/test/mg-button.spec.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/test/mg-card.e2e.js +2 -2
- package/dist/collection/components/atoms/mg-card/test/mg-card.e2e.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/test/mg-tooltip.spec.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/test/mg-tooltip.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/MgInput.conf.js +8 -0
- package/dist/collection/components/molecules/inputs/MgInput.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/MgInput.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +13 -12
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.spec.js +4 -10
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/test/mg-input-date.spec.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input-date/test/mg-input-date.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +11 -4
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/test/mg-input-numeric.spec.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input-numeric/test/mg-input-numeric.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/test/mg-input-password.spec.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input-password/test/mg-input-password.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +7 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/test/mg-input-radio.spec.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input-radio/test/mg-input-radio.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/test/mg-input-select.spec.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input-select/test/mg-input-select.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js +0 -4
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/test/mg-input-text.spec.js +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-text/test/mg-input-text.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/test/mg-input-textarea.spec.js +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-textarea/test/mg-input-textarea.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.js +2 -2
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -2
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.js +8 -0
- package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js +8 -0
- package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -9
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/test/mg-form.spec.js +44 -29
- package/dist/collection/components/molecules/mg-form/test/mg-form.spec.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.playwright.js +1 -1
- package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.playwright.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js +1 -1
- package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/components.utils.js +1 -1
- package/dist/collection/utils/components.utils.js.map +1 -1
- package/dist/collection/utils/components.utils.spec.js +5 -0
- package/dist/collection/utils/components.utils.spec.js.map +1 -1
- package/dist/components/MgInput.js +9 -1
- package/dist/components/MgInput.js.map +1 -1
- package/dist/components/components.utils.js +1 -1
- package/dist/components/components.utils.js.map +1 -1
- package/dist/components/mg-action-more.js +1 -1
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-button2.js +15 -0
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-form.js +1 -9
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +198 -182
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +2 -2
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +13 -12
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +9 -3
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +11 -5
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +9 -3
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +8 -3
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +9 -3
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +9 -3
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +9 -3
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-item-more.js.map +1 -1
- package/dist/components/mg-menu-item2.js +2 -2
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message.js +1 -1
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/popper.js +6 -12
- package/dist/components/popper.js.map +1 -1
- package/dist/esm/{components.utils-0f76010d.js → components.utils-6cf27db1.js} +2 -2
- package/dist/esm/components.utils-6cf27db1.js.map +1 -0
- package/dist/esm/{index-ce01e63b.js → index-0f833068.js} +143 -58
- package/dist/esm/index-0f833068.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_34.entry.js +306 -238
- package/dist/esm/mg-action-more_34.entry.js.map +1 -1
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-item-more.entry.js +2 -2
- package/dist/esm/mg-item-more.entry.js.map +1 -1
- package/dist/mg-components/mg-components.css +1 -1
- 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-10ed4425.entry.js +2 -0
- package/dist/mg-components/p-10ed4425.entry.js.map +1 -0
- package/dist/mg-components/{p-c9e2c669.js → p-36a51c5e.js} +2 -2
- package/dist/mg-components/p-36a51c5e.js.map +1 -0
- package/dist/mg-components/{p-01ebc95a.entry.js → p-91feda5a.entry.js} +2 -2
- package/dist/mg-components/p-91feda5a.entry.js.map +1 -0
- package/dist/mg-components/p-9b12021b.js +3 -0
- package/dist/mg-components/p-9b12021b.js.map +1 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +4 -0
- package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +7 -0
- package/dist/types/components/molecules/inputs/MgInput.d.ts +2 -1
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts +1 -6
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +1 -0
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +1 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +1 -0
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +0 -1
- package/dist/types/components.d.ts +2 -2
- package/package.json +35 -35
- package/dist/cjs/components.utils-dc9c8a53.js.map +0 -1
- package/dist/cjs/index-c042e24b.js.map +0 -1
- package/dist/esm/components.utils-0f76010d.js.map +0 -1
- package/dist/esm/index-ce01e63b.js.map +0 -1
- package/dist/mg-components/p-01ebc95a.entry.js.map +0 -1
- package/dist/mg-components/p-1aa89acf.js +0 -3
- package/dist/mg-components/p-1aa89acf.js.map +0 -1
- package/dist/mg-components/p-71a5a848.entry.js +0 -2
- package/dist/mg-components/p-71a5a848.entry.js.map +0 -1
- package/dist/mg-components/p-c9e2c669.js.map +0 -1
|
@@ -28,7 +28,7 @@ var Status;
|
|
|
28
28
|
Status["ACTIVE"] = "active";
|
|
29
29
|
})(Status || (Status = {}));
|
|
30
30
|
|
|
31
|
-
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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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-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}";
|
|
31
|
+
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-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}";
|
|
32
32
|
|
|
33
33
|
const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
|
|
34
34
|
constructor() {
|
|
@@ -85,7 +85,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
|
|
|
85
85
|
};
|
|
86
86
|
/**
|
|
87
87
|
* Validate slots
|
|
88
|
-
* @param guard - prevent action
|
|
88
|
+
* @param guard - prevent action with guard. Default: false.
|
|
89
89
|
*/
|
|
90
90
|
this.validateSlot = (guard = false) => {
|
|
91
91
|
// slot title AND metadata validation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-menu-item2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts","../styles/dist/components/mg-menu-item.css?tag=mg-menu-item&encapsulation=shadow","src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n FIRST = 'first',\n LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n VISIBLE = 'visible',\n HIDDEN = 'hidden',\n DISABLED = 'disabled',\n ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n",".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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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 - 0.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-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}/*# sourceMappingURL=mg-menu-item.css.map */\n","import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n tag: 'mg-menu-item',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n shadow: true,\n})\nexport class MgMenuItem {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu-item';\n private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n private badgeLabel: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuItemElement;\n\n /************\n * Props *\n ************/\n\n /**\n * Identifier is used to control mg-popover\n */\n @Prop() identifier = createID('mg-menu-item');\n\n /**\n * Define menu-item href\n * when defined menu-item contain an anchor instead of button\n */\n @Prop() href: string;\n\n /**\n * Define menu-item status.\n */\n @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n @Watch('status')\n validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n if (oldValue !== undefined) {\n this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n }\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n this.statusChange.emit(newValue);\n }\n\n /**\n * Define menu-item content expanded.\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n validateExpanded(newValue: MgMenuItem['expanded']): void {\n if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n // if menu-item has sub-menu we have to apply some updates:\n if (this.hasChildren) {\n const subItems = Array.from(this.element.querySelectorAll(this.name));\n if (!newValue) {\n // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n subItems.forEach(item => {\n item.expanded = false;\n });\n } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n // - when expanded and contain an active item parents are expended too\n subItems.forEach(item => {\n if (this.hasStatus(item, Status.ACTIVE)) {\n item.expanded = true;\n }\n });\n }\n }\n }\n\n /**********\n * Events *\n *********/\n\n /**\n * Emited event when status change\n */\n @Event({ eventName: 'status-change' }) statusChange: EventEmitter<MgMenuItem['status']>;\n\n /**\n * Emited event when item is loaded\n */\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /**********\n * States *\n *********/\n\n /**\n * Define menu-item size.\n */\n @State() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /**\n * Component button classes\n */\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /**\n * Parent menu direction\n */\n @State() direction: DirectionType;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction']): void {\n // manage menu items style depending to parent menu horientation\n this.element.setAttribute(`data-style-direction-${newValue}`, '');\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n if (this.isDirection(Direction.VERTICAL, newValue)) {\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n });\n }\n }\n\n /**\n * Does component is in main menu\n */\n @State() isInMainMenu: boolean;\n\n /**\n * Does element is item-more\n */\n @State() isItemMore: boolean;\n\n /**\n * Does component have children.\n */\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /**\n * Does component should display notification badge.\n */\n @State() displayNotificationBadge: boolean;\n\n /***********\n * Methods *\n **********/\n\n /**\n * Toggle expanded prop value\n */\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n */\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /**\n * Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n */\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /**\n * Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n */\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null &&\n Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n };\n\n /**\n * Method to control if one of component children have active status\n * @returns truthy if component has active child\n */\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n );\n\n /**\n * Validate slots\n * @param guard - prevent action whith guard. Default: false.\n */\n private validateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /**\n * Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n */\n private updateStatus = (guard = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /**\n * Init event-listeners\n */\n private initListeners = (): void => {\n // manage first sub-level menu-items\n Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n if (item.nodeName === 'MG-MENU-ITEM') {\n // manage child menu listener\n item.addEventListener('status-change', () => {\n this.updateStatus();\n });\n }\n });\n };\n\n /**\n * Get mg-popover identifier\n * @returns generated mg-popover identifier\n */\n private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n /**\n * Render popover clickoutside guard for content slot\n */\n private updatePopoverGuard(): void {\n if (this.displayPopover())\n Array.from(this.element.children)\n .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n }\n\n /**\n * Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n */\n private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n /************\n * Handlers *\n ************/\n\n /**\n * Handle interacrtive element click\n * @param event - click on element\n */\n private handleElementCLick = (event: MouseEvent): void => {\n if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // toggle expanded when mg-menu-item has child items\n if (this.hasChildren) this.toggleExpanded();\n };\n\n /**\n * Handle popover element display-change event\n * @param event - popover display event\n */\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // Validate props\n this.validateStatus(this.status);\n this.validateExpanded(this.expanded);\n\n // Validate states\n this.validateSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n * @returns timeout\n */\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.validateSlot(true);\n\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // define menu-item context states\n const menu = this.element.closest('mg-menu');\n this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n if (menu?.size !== undefined) this.size = menu.size;\n\n if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when main menu item contain an active item it will get the active style\n // AND if item is in vertical menu it will be expanded\n if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n this.updateStatus([Status.ACTIVE]);\n this.updateDisplayNotificationBadge();\n this.updatePopoverGuard();\n\n // manage child dom changes with mutationObserver and listzners\n this.initListeners();\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n this.updateDisplayNotificationBadge();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /**\n * Render ineractive element\n * @returns HTML Element\n */\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n </div>\n {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /**\n * Render slot\n * @returns HTML Element\n */\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.displayPopover() ? (\n <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-menu-item2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts","../styles/dist/components/mg-menu-item.css?tag=mg-menu-item&encapsulation=shadow","src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n FIRST = 'first',\n LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n VISIBLE = 'visible',\n HIDDEN = 'hidden',\n DISABLED = 'disabled',\n ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n",".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-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}/*# sourceMappingURL=mg-menu-item.css.map */\n","import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n tag: 'mg-menu-item',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n shadow: true,\n})\nexport class MgMenuItem {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu-item';\n private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n private badgeLabel: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuItemElement;\n\n /************\n * Props *\n ************/\n\n /**\n * Identifier is used to control mg-popover\n */\n @Prop() identifier = createID('mg-menu-item');\n\n /**\n * Define menu-item href\n * when defined menu-item contain an anchor instead of button\n */\n @Prop() href: string;\n\n /**\n * Define menu-item status.\n */\n @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n @Watch('status')\n validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n if (oldValue !== undefined) {\n this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n }\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n this.statusChange.emit(newValue);\n }\n\n /**\n * Define menu-item content expanded.\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n validateExpanded(newValue: MgMenuItem['expanded']): void {\n if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n // if menu-item has sub-menu we have to apply some updates:\n if (this.hasChildren) {\n const subItems = Array.from(this.element.querySelectorAll(this.name));\n if (!newValue) {\n // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n subItems.forEach(item => {\n item.expanded = false;\n });\n } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n // - when expanded and contain an active item parents are expended too\n subItems.forEach(item => {\n if (this.hasStatus(item, Status.ACTIVE)) {\n item.expanded = true;\n }\n });\n }\n }\n }\n\n /**********\n * Events *\n *********/\n\n /**\n * Emited event when status change\n */\n @Event({ eventName: 'status-change' }) statusChange: EventEmitter<MgMenuItem['status']>;\n\n /**\n * Emited event when item is loaded\n */\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /**********\n * States *\n *********/\n\n /**\n * Define menu-item size.\n */\n @State() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /**\n * Component button classes\n */\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /**\n * Parent menu direction\n */\n @State() direction: DirectionType;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction']): void {\n // manage menu items style depending to parent menu horientation\n this.element.setAttribute(`data-style-direction-${newValue}`, '');\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n if (this.isDirection(Direction.VERTICAL, newValue)) {\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n });\n }\n }\n\n /**\n * Does component is in main menu\n */\n @State() isInMainMenu: boolean;\n\n /**\n * Does element is item-more\n */\n @State() isItemMore: boolean;\n\n /**\n * Does component have children.\n */\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /**\n * Does component should display notification badge.\n */\n @State() displayNotificationBadge: boolean;\n\n /***********\n * Methods *\n **********/\n\n /**\n * Toggle expanded prop value\n */\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n */\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /**\n * Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n */\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /**\n * Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n */\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null &&\n Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n };\n\n /**\n * Method to control if one of component children have active status\n * @returns truthy if component has active child\n */\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n );\n\n /**\n * Validate slots\n * @param guard - prevent action with guard. Default: false.\n */\n private validateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /**\n * Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n */\n private updateStatus = (guard = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /**\n * Init event-listeners\n */\n private initListeners = (): void => {\n // manage first sub-level menu-items\n Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n if (item.nodeName === 'MG-MENU-ITEM') {\n // manage child menu listener\n item.addEventListener('status-change', () => {\n this.updateStatus();\n });\n }\n });\n };\n\n /**\n * Get mg-popover identifier\n * @returns generated mg-popover identifier\n */\n private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n /**\n * Render popover clickoutside guard for content slot\n */\n private updatePopoverGuard(): void {\n if (this.displayPopover())\n Array.from(this.element.children)\n .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n }\n\n /**\n * Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n */\n private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n /************\n * Handlers *\n ************/\n\n /**\n * Handle interacrtive element click\n * @param event - click on element\n */\n private handleElementCLick = (event: MouseEvent): void => {\n if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // toggle expanded when mg-menu-item has child items\n if (this.hasChildren) this.toggleExpanded();\n };\n\n /**\n * Handle popover element display-change event\n * @param event - popover display event\n */\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // Validate props\n this.validateStatus(this.status);\n this.validateExpanded(this.expanded);\n\n // Validate states\n this.validateSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n * @returns timeout\n */\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.validateSlot(true);\n\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // define menu-item context states\n const menu = this.element.closest('mg-menu');\n this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n if (menu?.size !== undefined) this.size = menu.size;\n\n if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when main menu item contain an active item it will get the active style\n // AND if item is in vertical menu it will be expanded\n if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n this.updateStatus([Status.ACTIVE]);\n this.updateDisplayNotificationBadge();\n this.updatePopoverGuard();\n\n // manage child dom changes with mutationObserver and listzners\n this.initListeners();\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n this.updateDisplayNotificationBadge();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /**\n * Render ineractive element\n * @returns HTML Element\n */\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n </div>\n {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /**\n * Render slot\n * @returns HTML Element\n */\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.displayPopover() ? (\n <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
|
|
|
10
10
|
*/
|
|
11
11
|
const variants = ['info', 'warning', 'success', 'danger'];
|
|
12
12
|
|
|
13
|
-
const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;
|
|
13
|
+
const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 1rem 0 3.8rem;place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}";
|
|
14
14
|
|
|
15
15
|
const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLElement {
|
|
16
16
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-message.js","mappings":"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","names":["MgMessage"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","../styles/dist/components/mg-message.css?tag=mg-message&encapsulation=shadow","src/components/molecules/mg-message/mg-message.tsx"],"sourcesContent":["/**\n * List of all possibles message variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n",":host{--mg-card-padding: 0;--mg-card-border-radius: var(--mg-message-border-radius);--mg-card-border: none;--mg-card-overflow: hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding: 0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;align-content:stretch;justify-content:flex-end;padding:0 1rem 0 3.8rem}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}/*# sourceMappingURL=mg-message.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classHide = 'mg-c-message--hide';\n\n // IDs\n private closeButtonId = '';\n\n // Stored timer setted when hide action is run from setTimeOut\n private storedTimer: ReturnType<typeof setTimeout> = null;\n\n // Manage hover\n private isFocused = false;\n private isHovered = false;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMessageElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-message');\n\n /**\n * Add a delay to hide/close message when it passed\n * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n */\n @Prop() delay: number;\n @Watch('delay')\n validateDelay(newValue: MgMessage['delay']): void {\n if (newValue !== undefined && newValue < 2) {\n throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n }\n }\n\n /**\n * Message variant\n */\n @Prop() variant: VariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-message--${oldValue}`);\n }\n this.classCollection.add(`mg-c-message--${newValue}`);\n }\n }\n\n /**\n * Define if message has a cross button\n * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n */\n @Prop({ mutable: true }) closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgMessage['closeButton']): void {\n if (newValue && this.hasActions) {\n this.closeButton = false;\n throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n }\n }\n\n /**\n * Define if message is hidden\n */\n @Prop({ mutable: true }) hide = false;\n @Watch('hide')\n validateHide(newValue: MgMessage['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n // Remove event Listener\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.removeEventListener(event, this.timerEvents);\n });\n // Clear Timer\n this.clearTimer();\n } else {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n // If delay is set\n if (this.delay > 1) {\n // Start timer\n this.setTimer();\n // Stop timer when get focus or mouse enter\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.addEventListener(event, this.timerEvents);\n });\n }\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /**\n * Define if component is using actions slot\n */\n @State() hasActions = false;\n\n /**\n * Emited event when message is diplayed\n */\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n /**\n * Emited event when message is hidden\n */\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n /**\n * Set timer\n */\n private setTimer = (): void => {\n this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n };\n\n /**\n * Clear timer\n */\n private clearTimer = (): void => {\n clearTimeout(this.storedTimer);\n };\n\n /**\n * Event to add on element\n * @param event - event\n */\n private timerEvents = (event: MouseEvent | FocusEvent): void => {\n this.clearTimer();\n const isMouseEvent: boolean = event.type === 'mouseenter';\n // Needed to ensure we don't start the timer\n this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n // Restart timer when loose focus AND mouse leave\n this.element.addEventListener(\n isMouseEvent ? 'mouseleave' : 'focusout',\n eventOut => {\n this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n // Start timer if needed\n if (!this.isFocused && !this.isHovered) this.setTimer();\n },\n { once: true },\n );\n };\n\n /**\n * Handle close button\n */\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /**\n * Get icon corresponding to variant\n * @returns icon\n */\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateVariant(this.variant);\n // Check if close button is an can be activated\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.validateCloseButton(this.closeButton);\n if (this.closeButton) {\n this.classCollection.add('mg-c-message--close-button');\n this.closeButtonId = `${this.identifier}-close-button`;\n }\n this.validateDelay(this.delay);\n this.validateHide(this.hide);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\n <mg-card variant={this.variant} variant-style=\"bar-left\">\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-c-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-c-message__close-button\">\n <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-message.js","mappings":"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","names":["MgMessage"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","../styles/dist/components/mg-message.css?tag=mg-message&encapsulation=shadow","src/components/molecules/mg-message/mg-message.tsx"],"sourcesContent":["/**\n * List of all possibles message variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n",":host{--mg-card-padding: 0;--mg-card-border-radius: var(--mg-message-border-radius);--mg-card-border: none;--mg-card-overflow: hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding: 0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 1rem 0 3.8rem;place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}/*# sourceMappingURL=mg-message.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classHide = 'mg-c-message--hide';\n\n // IDs\n private closeButtonId = '';\n\n // Stored timer setted when hide action is run from setTimeOut\n private storedTimer: ReturnType<typeof setTimeout> = null;\n\n // Manage hover\n private isFocused = false;\n private isHovered = false;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMessageElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-message');\n\n /**\n * Add a delay to hide/close message when it passed\n * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n */\n @Prop() delay: number;\n @Watch('delay')\n validateDelay(newValue: MgMessage['delay']): void {\n if (newValue !== undefined && newValue < 2) {\n throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n }\n }\n\n /**\n * Message variant\n */\n @Prop() variant: VariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-message--${oldValue}`);\n }\n this.classCollection.add(`mg-c-message--${newValue}`);\n }\n }\n\n /**\n * Define if message has a cross button\n * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n */\n @Prop({ mutable: true }) closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgMessage['closeButton']): void {\n if (newValue && this.hasActions) {\n this.closeButton = false;\n throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n }\n }\n\n /**\n * Define if message is hidden\n */\n @Prop({ mutable: true }) hide = false;\n @Watch('hide')\n validateHide(newValue: MgMessage['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n // Remove event Listener\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.removeEventListener(event, this.timerEvents);\n });\n // Clear Timer\n this.clearTimer();\n } else {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n // If delay is set\n if (this.delay > 1) {\n // Start timer\n this.setTimer();\n // Stop timer when get focus or mouse enter\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.addEventListener(event, this.timerEvents);\n });\n }\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /**\n * Define if component is using actions slot\n */\n @State() hasActions = false;\n\n /**\n * Emited event when message is diplayed\n */\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n /**\n * Emited event when message is hidden\n */\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n /**\n * Set timer\n */\n private setTimer = (): void => {\n this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n };\n\n /**\n * Clear timer\n */\n private clearTimer = (): void => {\n clearTimeout(this.storedTimer);\n };\n\n /**\n * Event to add on element\n * @param event - event\n */\n private timerEvents = (event: MouseEvent | FocusEvent): void => {\n this.clearTimer();\n const isMouseEvent: boolean = event.type === 'mouseenter';\n // Needed to ensure we don't start the timer\n this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n // Restart timer when loose focus AND mouse leave\n this.element.addEventListener(\n isMouseEvent ? 'mouseleave' : 'focusout',\n eventOut => {\n this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n // Start timer if needed\n if (!this.isFocused && !this.isHovered) this.setTimer();\n },\n { once: true },\n );\n };\n\n /**\n * Handle close button\n */\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /**\n * Get icon corresponding to variant\n * @returns icon\n */\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateVariant(this.variant);\n // Check if close button is an can be activated\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.validateCloseButton(this.closeButton);\n if (this.closeButton) {\n this.classCollection.add('mg-c-message--close-button');\n this.closeButtonId = `${this.identifier}-close-button`;\n }\n this.validateDelay(this.delay);\n this.validateHide(this.hide);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\n <mg-card variant={this.variant} variant-style=\"bar-left\">\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-c-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-c-message__close-button\">\n <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './mg-button2.js';
|
|
|
5
5
|
import { d as defineCustomElement$2 } from './mg-card2.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './mg-icon2.js';
|
|
7
7
|
|
|
8
|
-
const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:1rem;color:hsl(var(--mg-popover-font-color))}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-c-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size)*var(--line-height))/2);margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size))/2);margin-left:3rem;float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem
|
|
8
|
+
const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:1rem;color:hsl(var(--mg-popover-font-color))}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-c-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size)*var(--line-height))/2);margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size))/2);margin-left:3rem;float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem/2) solid rgba(0,0,0,0);border-left:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem/2) solid rgba(0,0,0,0);border-bottom:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2*var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-card-border-radius)}";
|
|
9
9
|
|
|
10
10
|
const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
|
|
11
11
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,42IAA42I;;MCS33I,gBAAgB;;;;;;;;;IAmCnB,sBAAiB,GAAG;MAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;uBAjBoB,KAAK;2BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;;;;;;;EAqB7E,iBAAiB;;IAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;EAKD,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;MACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5F;GACF;;;;;EAMD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACxC,IAAI,CAAC,WAAW,KACf,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnG,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb,EACD,WAAK,KAAK,EAAC,6BAA6B,IACtC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB,EACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-popover-content.css?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":[":host{position:relative;z-index:2000;display:none;padding:1rem;color:hsl(var(--mg-popover-font-color))}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-c-popover-content{--mg-card-max-width: var(--mg-popover-max-width);--mg-card-min-width: var(--mg-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size)*var(--line-height))/2);margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size))/2);margin-left:3rem;float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem/2) solid rgba(0,0,0,0);border-left:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem/2) solid rgba(0,0,0,0);border-bottom:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2*var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-card-border-radius)}/*# sourceMappingURL=mg-popover-content.css.map */\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-popover-content',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n shadow: true,\n})\nexport class MgPopoverContent {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPopoverContentElement;\n\n /**\n * Define if popover has a cross button\n */\n @Prop() closeButton = false;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n /**\n * Emited event when close button is clicked\n */\n @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<string>;\n\n /**\n * Handle action for close button\n */\n private handleCloseButton = (): void => {\n this.hideContent.emit();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are valide\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Check if component slots are valide\n */\n componentDidLoad(): void {\n const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <mg-card class={this.classCollection.join()}>\n {this.closeButton && (\n <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n )}\n <div class=\"mg-c-popover-content__title\">\n <slot name=\"title\"></slot>\n </div>\n <slot name=\"content\"></slot>\n </mg-card>\n <slot name=\"arrow\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -449,7 +449,6 @@ function effect$1(_ref2) {
|
|
|
449
449
|
}
|
|
450
450
|
|
|
451
451
|
if (!contains(state.elements.popper, arrowElement)) {
|
|
452
|
-
|
|
453
452
|
return;
|
|
454
453
|
}
|
|
455
454
|
|
|
@@ -591,7 +590,6 @@ function computeStyles(_ref5) {
|
|
|
591
590
|
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
|
|
592
591
|
_options$roundOffsets = options.roundOffsets,
|
|
593
592
|
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
|
|
594
|
-
|
|
595
593
|
var commonStyles = {
|
|
596
594
|
placement: getBasePlacement(state.placement),
|
|
597
595
|
variation: getVariation(state.placement),
|
|
@@ -1659,8 +1657,7 @@ function popperGenerator(generatorOptions) {
|
|
|
1659
1657
|
|
|
1660
1658
|
state.orderedModifiers = orderedModifiers.filter(function (m) {
|
|
1661
1659
|
return m.enabled;
|
|
1662
|
-
});
|
|
1663
|
-
|
|
1660
|
+
});
|
|
1664
1661
|
runModifierEffects();
|
|
1665
1662
|
return instance.update();
|
|
1666
1663
|
},
|
|
@@ -1680,7 +1677,6 @@ function popperGenerator(generatorOptions) {
|
|
|
1680
1677
|
// anymore
|
|
1681
1678
|
|
|
1682
1679
|
if (!areValidElements(reference, popper)) {
|
|
1683
|
-
|
|
1684
1680
|
return;
|
|
1685
1681
|
} // Store the reference and popper rects to be read by modifiers
|
|
1686
1682
|
|
|
@@ -1705,7 +1701,6 @@ function popperGenerator(generatorOptions) {
|
|
|
1705
1701
|
});
|
|
1706
1702
|
|
|
1707
1703
|
for (var index = 0; index < state.orderedModifiers.length; index++) {
|
|
1708
|
-
|
|
1709
1704
|
if (state.reset === true) {
|
|
1710
1705
|
state.reset = false;
|
|
1711
1706
|
index = -1;
|
|
@@ -1743,7 +1738,6 @@ function popperGenerator(generatorOptions) {
|
|
|
1743
1738
|
};
|
|
1744
1739
|
|
|
1745
1740
|
if (!areValidElements(reference, popper)) {
|
|
1746
|
-
|
|
1747
1741
|
return instance;
|
|
1748
1742
|
}
|
|
1749
1743
|
|
|
@@ -1758,11 +1752,11 @@ function popperGenerator(generatorOptions) {
|
|
|
1758
1752
|
// one.
|
|
1759
1753
|
|
|
1760
1754
|
function runModifierEffects() {
|
|
1761
|
-
state.orderedModifiers.forEach(function (
|
|
1762
|
-
var name =
|
|
1763
|
-
|
|
1764
|
-
options =
|
|
1765
|
-
effect =
|
|
1755
|
+
state.orderedModifiers.forEach(function (_ref) {
|
|
1756
|
+
var name = _ref.name,
|
|
1757
|
+
_ref$options = _ref.options,
|
|
1758
|
+
options = _ref$options === void 0 ? {} : _ref$options,
|
|
1759
|
+
effect = _ref.effect;
|
|
1766
1760
|
|
|
1767
1761
|
if (typeof effect === 'function') {
|
|
1768
1762
|
var cleanupFn = effect({
|