npm - @mgdis/mg-components - Versions diffs - 5.18.0 → 5.19.0 - Mend

@mgdis/mg-components 5.18.0 → 5.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (327) hide show

package/dist/components/mg-menu-item2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { i as isValidString, c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { D as Direction } from './mg-menu.conf.js';
 import { d as defineCustomElement$6 } from './mg-badge2.js';
@@ -28,7 +28,7 @@ var Status;
   Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
-const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+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}";
 const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
   constructor() {
@@ -41,7 +41,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
      * Internal *
      ************/
     this.name = 'mg-menu-item';
-    this.navigationButton = `${this.name}__navigation-button`;
+    this.navigationButton = 'mg-c-menu-item__navigation-button';
     /***********
      * Methods *
      **********/
@@ -94,7 +94,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         throw new Error(`<${this.name}> slot "label" is required.`);
       ['label', 'metadata'].forEach(slot => {
         Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-          if (element.textContent.trim().length < 1)
+          if (!isValidString(element.textContent))
             throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
           if ((guard && element.getAttribute('title') === null) || !guard)
             element.setAttribute('title', element.textContent);
@@ -296,10 +296,9 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
-        'mg-a11y-animation': true,
       } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
@@ -308,8 +307,8 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
    */
   render() {
     const getContainerClasses = () => ({
-      [`${this.name}__collapse-container`]: true,
-      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
+      ['mg-c-menu-item__collapse-container']: true,
+      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
     });
     return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),

package/dist/components/mg-menu-item2.js.map CHANGED Viewed

	@@ -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","src/components/molecules/menu/mg-menu-item/mg-menu-item.scss?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","@use 'sass:map';\n\n@import '../../../../styles/a11y.scss';\n@import '../../../../styles/mixins/navigation-button.scss';\n@import '../../../../styles/mixins/mg-icon-animation.scss';\n\n$navigation-vertical-spacing: 1rem;\n$navigation-button-sizes: (\n 'regular': (\n 'vertical': $navigation-vertical-spacing,\n 'horizontal': 2rem,\n 'height': 3.8rem,\n ),\n 'medium': (\n 'vertical': $navigation-vertical-spacing,\n 'horizontal': 3rem,\n 'height': 5.1rem,\n ),\n 'large': (\n 'vertical': $navigation-vertical-spacing,\n 'horizontal': 4rem,\n 'height': 7.1rem,\n ),\n);\n\n@mixin level($button-sizes) {\n @each $name, $size in $button-sizes {\n // Building level from 1 to 6\n @for $i from 1 through 6 {\n :host([data-style-direction-vertical][data-level='#{$i}']) {\n .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-#{$name} {\n padding-left: calc(#{$i} #{map.get($size, 'horizontal')} - 0.3rem);\n }\n }\n :host([data-level='#{$i}']) {\n .mg-menu-item__collapse-container {\n z-index: calc(#{$i} * 10);\n }\n }\n }\n }\n}\n\n@include navigation-button('mg-menu-item', $navigation-button-sizes);\n@include level($navigation-button-sizes);\n\n:host {\n position: relative;\n display: flex;\n --mg-popover-padding-vertical: 0;\n --mg-popover-padding-horizontal: 0;\n --mg-popover-max-width: unset;\n}\n\n// vertical item style\n:host([data-style-direction-vertical]) {\n flex-direction: column;\n .mg-menu-item {\n &__navigation-button {\n width: 100%;\n }\n &__collapse-container {\n left: unset;\n top: unset;\n position: unset;\n width: unset;\n }\n &-chevron {\n margin-left: auto;\n }\n }\n}\n\n// horizontal item style\n:host([data-style-direction-horizontal]),\n:host([data-overflow-more]) {\n .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {\n background-color: hsl(var(--color-light));\n ::slotted(mg-menu) {\n padding: 1rem 0;\n }\n }\n}\n\n// more menu-item element\n:host([data-overflow-more]) {\n --mg-menu-item-navigation-button-column-gap: 0;\n .mg-menu-item__navigation-button {\n &-chevron {\n display: none;\n }\n &-text-content ::slotted([slot='information']) {\n margin-left: 0;\n }\n }\n ::slotted(mg-menu) {\n --mg-menu-item-navigation-button-column-gap: #{$navigation-button-column-gap};\n }\n}\n\n.mg-menu-item {\n max-width: var(--mg-menu-item-navigation-button-max-width);\n &__collapse-container {\n width: max-content;\n z-index: 10;\n }\n &__navigation-button {\n &-center {\n min-width: 0;\n }\n &-text-content {\n width: 100%;\n display: flex;\n align-items: center;\n &-notification,\n ::slotted([slot='information']) {\n margin-left: 1rem;\n font-size: var(--font-size);\n }\n }\n &-chevron {\n margin-left: auto;\n @include rotate('.mg-menu-item__navigation-button-chevron', 200ms);\n }\n }\n}\n\n::slotted([slot='label']),\n::slotted([slot='metadata']) {\n display: block;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n::slotted() {\n display: flex;\n flex-direction: column;\n}\n\n// Prevent click propagation when disabled\n:host([status='disabled']) {\n pointer-events: none;\n}\n\n// fix missing \"hidden\" style in browser\n:host([hidden]) {\n display: none;\n}\n","import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID } 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: 'mg-menu-item.scss',\n shadow: true,\n})\nexport class MgMenuItem {\n /**********\n Internal \n *********/\n\n private readonly name = 'mg-menu-item';\n private readonly navigationButton = `${this.name}__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 (element.textContent.trim().length < 1) 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=\"mg-menu-item__navigation-button-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 'mg-a11y-animation': 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 [`${this.name}__collapse-container`]: true,\n [`${this.name}__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 - 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}

package/dist/components/mg-menu2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { D as Direction, s as sizes } from './mg-menu.conf.js';
-const mgMenuCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
+const mgMenuCss = ".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}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
 const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
   constructor() {

package/dist/components/mg-menu2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-menu2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu/mg-menu.scss?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":["@import '../../../../styles/a11y.scss';\n\n:host {\n display: flex;\n background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));\n}\n\n:host([direction='vertical']) {\n flex-direction: column;\n height: 100%;\n overflow-y: auto;\n}\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: 'mg-menu.scss',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\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 // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-menu2.js","mappings":"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","names":[],"sources":["../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":[".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}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/# sourceMappingURL=mg-menu.css.map /\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\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 // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-message.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
-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-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-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-message,mg-message{max-width:100%}";
+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;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%}";
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLElement {
   constructor() {
@@ -23,7 +23,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
      * Internal *
      ************/
     // Classes
-    this.classHide = 'mg-message--hide';
+    this.classHide = 'mg-c-message--hide';
     // IDs
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
@@ -87,7 +87,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     this.variant = variants[0];
     this.closeButton = false;
     this.hide = false;
-    this.classCollection = new ClassList(['mg-message']);
+    this.classCollection = new ClassList(['mg-c-message']);
     this.hasActions = false;
   }
   validateDelay(newValue) {
@@ -101,9 +101,9 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-message--${oldValue}`);
+        this.classCollection.delete(`mg-c-message--${oldValue}`);
       }
-      this.classCollection.add(`mg-message--${newValue}`);
+      this.classCollection.add(`mg-c-message--${newValue}`);
     }
   }
   validateCloseButton(newValue) {
@@ -152,7 +152,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.validateCloseButton(this.closeButton);
     if (this.closeButton) {
-      this.classCollection.add('mg-message--close-button');
+      this.classCollection.add('mg-c-message--close-button');
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     this.validateDelay(this.delay);
@@ -163,7 +163,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
    * @returns HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-c-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-c-message__content" }, h("span", { class: "mg-c-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/mg-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-message.js","mappings":"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","names":["MgMessage"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","src/components/molecules/mg-message/mg-message.scss?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","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n@mixin message-variants($variants...) {\n @each $variant in $variants {\n &.mg-message--#{$variant} .mg-message__icon {\n color: hsl(var(--color-#{$variant}));\n }\n }\n}\n\n:host {\n // Set mg-card variables\n --mg-card-padding: 0;\n --mg-card-border-radius: var(--mg-message-border-radius);\n --mg-card-border: none;\n --mg-card-overflow: hidden;\n}\n\n:host([hide]) {\n display: none;\n}\n\n.mg-message {\n // Display\n display: inline-block;\n min-height: var(--default-size);\n\n @include message-variants('info', 'warning', 'success', 'danger');\n\n &.mg-message--close-button {\n --mg-card-padding: 0 3.4rem 0 0;\n }\n\n &.mg-message--hide {\n display: none;\n }\n\n ::slotted() {\n // Removing default marging to slotted element\n margin: 0;\n padding: 0;\n }\n\n &__icon {\n // Display\n position: absolute;\n top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);\n left: 1.3rem;\n // Font\n line-height: 1;\n }\n\n &__content {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-content: stretch;\n padding: 0 1rem 0 3.8rem;\n }\n\n &__content-slot {\n flex-grow: 1;\n margin: 0.84rem 0;\n }\n\n &__content-separator {\n display: inline-block;\n width: 4.5rem;\n height: 0;\n }\n\n &__content-actions-slot {\n padding: 1rem 0;\n text-align: right;\n }\n\n &__close-button {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @include reset-slot-card-variables();\n}\n\n.mg-message,\nmg-message {\n max-width: 100%;\n}\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: 'mg-message.scss',\n shadow: true,\n})\nexport class MgMessage {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classHide = 'mg-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-message--${oldValue}`);\n }\n this.classCollection.add(`mg-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-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-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-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-message__content\">\n <span class=\"mg-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-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;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}

package/dist/components/mg-modal.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { f as focusableElements, c as createID, C as ClassList } from './components.utils.js';
+import { f as focusableElements, c as createID, C as ClassList, i as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const dialogRoles = ['dialog', 'alertdialog'];
-const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-modal ::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}";
+const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::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}";
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
   constructor() {
@@ -25,7 +25,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
     // Modal focusable elements
     this.modalFocusableElements = [];
     // Classes
-    this.classHide = 'mg-modal--hide';
+    this.classHide = 'mg-c-modal--hide';
     // IDs
     this.titleId = '';
     /**
@@ -91,14 +91,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
     this.hide = undefined;
     this.hasActions = false;
     this.hasContent = false;
-    this.classCollection = new ClassList(['mg-modal']);
+    this.classCollection = new ClassList(['mg-c-modal']);
   }
   validateDialogRole(newValue) {
     if (!dialogRoles.includes(newValue))
       throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
   }
   validateModalTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-modal> prop "modalTitle" is required.');
     }
   }
@@ -166,14 +166,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
    * @returns HTML Element
    */
   render() {
-    return (h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+    return (h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-c-modal__dialog" }, h("header", { class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
         if (el !== null) {
           // store closeButton Element
           this.closeButtonElement = el;
           // add close button element to modalFocusableElements when it is render
           this.modalFocusableElements.unshift(this.closeButtonElement);
         }
-      } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+      } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   get element() { return this; }
   static get watchers() { return {