npm - @mgdis/mg-components - Versions diffs - 5.21.1 → 5.23.0 - Mend

@mgdis/mg-components 5.21.1 → 5.23.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 (248) hide show

package/dist/components/mg-input-title2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,yOAAyO;;~~MCQpP~~,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,~~CAAC~~,~~aAAa~~,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,eAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/# sourceMappingURL=mg-input-title.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '~~../../../utils~~/~~components.utils~~';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /*\n Label input id\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() required: boolean;\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly: boolean;\n\n /\n Switch from label to fieldset sementic\n /\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /\n Component parent tagname\n /\n @State() tagName = 'label';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Init tag name\n /\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /\n Render\n * @returns HTML element\n /\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,yOAAyO,CAAC;AAClQ,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAACA,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,eAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValidString"],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/# sourceMappingURL=mg-input-title.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /*\n Label input id\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() required: boolean;\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly: boolean;\n\n /\n Switch from label to fieldset sementic\n /\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /\n Component parent tagname\n /\n @State() tagName = 'label';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Init tag name\n /\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /\n Render\n * @returns HTML element\n /\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-input-toggle.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { C as ClassList, d as allItemsAreString, i as isValidString } from './components.utils.js';
+import { F as Fe, D as De, H as He } from './index.es.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}";
+const MgInputToggleStyle0 = mgInputToggleCss;
 /**
  * type Option validation function
@@ -75,7 +76,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.disabled = false;
         this.tooltip = undefined;
         this.helpText = undefined;
-        this.classCollection = new ClassList(['mg-c-input--toggle']);
+        this.classCollection = new Fe(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
@@ -92,7 +93,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             throw new Error('<mg-input-toggle> prop "items" require 2 items.');
         }
         // String array
-        else if (allItemsAreString(newValue)) {
+        else if (De(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -148,7 +149,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (!He(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -215,7 +216,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "disabled": ["handleDisabled"],
         "checked": ["handleChecked"]
     }; }
-    static get style() { return mgInputToggleCss; }
+    static get style() { return MgInputToggleStyle0; }
 }, [1, "mg-input-toggle", {
         "value": [1032],
         "items": [16],

package/dist/components/mg-input-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)var(--line-height) + 2(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)var(--line-height) + 1rem);height:calc(var(--font-size)var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/# sourceMappingURL=mg-input-toggle.css.map /\n","/ eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: string[] \| ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: boolean): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-toggle.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,6uLAA6uL,CAAC;AACvwL,4BAAe,gBAAgB;;ACM/B;;;;;AAKA,MAAM,QAAQ,GAAG,CAAC,MAAmB,KAAc,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;MAOnIA,eAAa;;;;;;;;;;;QAMhB,kBAAa,GAAG,6BAA6B,CAAC;QAC9C,kBAAa,GAAG,6BAA6B,CAAC;QAC9C,kBAAa,GAAG,8BAA8B,CAAC;QAC/C,eAAU,GAAG,2BAA2B,CAAC;QACzC,cAAS,GAAG,yBAAyB,CAAC;;;;;QA6LtC,oBAAe,GAAG,CAAC,YAAqB;;YAE9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;;YAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE;gBAC7C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;aAClC;SACF,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAChD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAC5D;iBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;;;gBAGvB,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;aACrE;SACF,CAAC;;;;oBApKqB,IAAI,CAAC,UAAU;;;yBAelB,KAAK;uBAKP,KAAK;sBAUN,KAAK;wBAUH,KAAK;wBAUL,KAAK;;;+BAoBc,IAAIC,EAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;uBAoBxD,KAAK;;IA/HxB,WAAW,CAAC,QAAa;;QAEvB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAOD,aAAa,CAAC,QAAkC;QAC9C,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;;aAEI,IAAIC,EAAiB,CAAC,QAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,OAAO,GAAI,QAAqB,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SACnF;;aAEI,IAAI,QAAQ,IAAK,QAA0B,CAAC,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE;YAC9E,IAAI,CAAC,OAAO,GAAG,QAAyB,CAAC;SAC1C;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,8FAA8F,CAAC,CAAC;SACjH;KACF;IAiCD,aAAa,CAAC,QAAiB;QAC7B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;YACnD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACnD;IAOD,YAAY,CAAC,QAAiB;QAC5B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClD;IAOD,cAAc,CAAC,QAAiB;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACtD;IAOD,cAAc,CAAC,QAAiB;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACtD;IAqCD,aAAa,CAAC,QAAiB;;QAE7B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAGrD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;KACnD;;;;;;;;;IAqBD,MAAM,QAAQ,CAAC,KAAc,EAAE,YAAoB;QACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;SAC1F;aAAM,IAAI,CAACC,EAAa,CAAC,YAAY,CAAC,EAAE;YACvC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAC;SAChG;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;SACxD;KACF;;;;IAuCO,UAAU;QAChB,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAEzG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;YAKzC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAe,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;gBAC1G,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;;;YAID,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC;YAC9E,IAAI,CAAC,OAAO,GAAG,oBAAoB,KAAK,CAAC,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;SAC5E;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SACrD;KACF;;;;;;;IASD,iBAAiB;;QAEf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAE/B,IAAI,CAAC,aAAa,EAAE,CAAC;;QAErB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;IAMD,MAAM;QACJ,QACE,EAAC,OAAO,IACN,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,kBAAkB,EAAE,EAAE,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAe,EAC3B,aAAa,EAAE,SAAS,EACxB,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,KAAK,IAEjB,cACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,mBACtB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,2BAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACP,2BAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACA,CACD,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgInputToggle","ClassList","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)var(--line-height) + 2(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)var(--line-height) + 1rem);height:calc(var(--font-size)var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/# sourceMappingURL=mg-input-toggle.css.map /\n","/ eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: string[] \| ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: boolean): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-item-more.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
 import { D as Direction } from './mg-menu.conf.js';
-import { i as isValidString } from './components.utils.js';
+import { H as He } from './index.es.js';
 import { d as defineCustomElement$9 } from './mg-badge2.js';
 import { d as defineCustomElement$8 } from './mg-button2.js';
 import { d as defineCustomElement$7 } from './mg-card2.js';
@@ -153,6 +153,7 @@ class OverflowBehavior {
 }
 const mgItemMoreCss = ".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:not([hidden]){display:flex}";
+const MgItemMoreStyle0 = mgItemMoreCss;
 const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
     constructor() {
@@ -186,7 +187,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
                         navElement.click();
                 });
                 // add id suffix to prevent duplicate key. default html id is: '';
-                if (isValidString(proxy.id))
+                if (He(proxy.id))
                     proxy.id = `${proxy.id}-proxy`;
                 // manage status change miror in proxy
                 allMenuItem[index].addEventListener('status-change', (event) => {
@@ -270,7 +271,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
         "slotlabel": ["validateSlotLabel"],
         "size": ["validateSize"]
     }; }
-    static get style() { return mgItemMoreCss; }
+    static get style() { return MgItemMoreStyle0; }
 }, [1, "mg-item-more", {
         "icon": [16],
         "slotlabel": [16],

package/dist/components/mg-item-more.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-item-more.js","mappings":"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","names":["MgItemMore"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/*\n MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n /\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n BASE_INDEX = 'data-overflow-base-index',\n PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n // variables\n private _resizeObserver: ResizeObserver;\n private _moreElement: HTMLElement;\n private _baseChildren: Element[];\n private _proxyChildren: Element[];\n\n constructor(\n private element: Element,\n private render: () => HTMLElement,\n ) {\n if (this._resizeObserver === undefined) {\n // add resize observer\n this._resizeObserver = new ResizeObserver(entries => {\n entries.forEach(entry => {\n this.run(entry.contentRect.width);\n });\n });\n this._resizeObserver.observe(this.element);\n }\n this.run();\n }\n\n /********\n Public \n *******/\n\n /\n * Disconnect ResizeObserver\n /\n public disconnect = (): void => {\n this._resizeObserver.disconnect();\n };\n\n /**********\n Internal \n *********/\n\n /\n * run overflow behavior\n * @param width - width of the container. Optional.\n /\n private run = (width?: number): void => {\n if (this._moreElement === undefined) {\n // set moreElement\n this._moreElement = this.render();\n\n // set children\n this._baseChildren = this.getInteractiveItems(this.element);\n if (isMgItemMore(this._moreElement)) {\n this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n }\n\n // update children\n this._baseChildren.forEach((child, index) => {\n child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n // set moreElement children\n this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n });\n }\n\n if (width !== undefined) this.updateDisplayedItems(width);\n };\n\n /\n Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n * @param element - element to parse\n * @returns children\n /\n private getInteractiveItems = (element: Element) =>\n (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n /\n Update displayed items in container from a given available space\n * @param availableWidth - available width in container to display child items\n /\n private updateDisplayedItems = (availableWidth: number): void => {\n this.restoreItems();\n const acc = { accWidth: 0, previousItem: null };\n [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement \| HTMLMgItemMoreElement) => {\n acc.accWidth += child.offsetWidth;\n const hasPreviuosItem = acc.previousItem !== null;\n const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n // if previous item is hidden AND is NOT more element we hidde current\n // OR if item has an overflow we hidde current\n // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n // ELSE current is a display item\n this.toggleItem(\n child,\n (isPreviousItemHidden && !this.isMoreElement(child)) \|\| this.isOverflowElement(acc.accWidth, child, availableWidth) \|\| (this.isMoreElement(child) && !isPreviousItemHidden),\n );\n\n // update previous item with current item\n acc.previousItem = child;\n });\n };\n\n /\n Utility method to know if item overflow partialy or totaly in the container\n * @param cumulateWidth - previous sibling elements cumulate width + item width\n * @param item - item HTML element\n * @param availableWidth - container available width\n * @returns truthy if element is overflow\n /\n private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n if (item.previousElementSibling === null \|\| this.isMoreElement(item)) return false;\n else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n else return cumulateWidth > availableWidth;\n };\n\n /\n Utility method to know if a given element is the 'MORE' element\n * @param element - element to match with 'MORE' element\n * @returns truthy if element is the 'MORE' element\n /\n private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n /\n Toggle display item element\n * @param item - item to control\n * @param isHidden - is item hidden\n /\n private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n else if (mgActionMenuindex >= 0) {\n this.toggleElement(item, isHidden);\n this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n }\n };\n\n /\n Toggle element's hidde attribute\n * @param element - element to toggle\n * @param isHidden - element is hidden\n /\n private toggleElement = (element: Element, isHidden: boolean): void => {\n if (isHidden) element.setAttribute('hidden', '');\n else element.removeAttribute('hidden');\n };\n\n /\n Remove hidden attributes on all items\n /\n private restoreItems = (): void => {\n [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n };\n}\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}}:host:not([hidden]){display:flex}/# sourceMappingURL=mg-item-more.css.map /\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n tag: 'mg-item-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n shadow: true,\n})\nexport class MgItemMore {\n /**********\n Internal \n *********/\n private readonly name = 'mg-item-more';\n private messages: MessageType;\n private parentMenuItems: HTMLMgMenuItemElement[];\n private moreElementMenuItem: HTMLMgMenuItemElement;\n private overflowBehavior: OverflowBehavior;\n private canRenderMgMenuItemOverflowElement = true;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgItemMoreElement;\n\n /\n Define icon\n /\n @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n @Watch('icon')\n validateIcon(newValue: MgItemMore['icon']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n }\n\n /\n Define slot label element\n /\n @Prop() slotlabel: SlotLabelType = { display: false };\n @Watch('slotlabel')\n validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n }\n\n /\n Define component child menu size.\n /\n @Prop() size: SizeType;\n @Watch('size')\n validateSize(newValue: MgItemMore['size']): void {\n if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n }\n\n /\n Define component parent menu.\n /\n @State() parentMenu: HTMLMgMenuElement;\n\n /*********\n Methods \n ********/\n\n /\n * render mg-item-more overflow element\n * @returns mg-item-more element\n /\n private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n // create menu items proxy element from item clones\n this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n });\n\n const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n // manage click on proxy to mirror it on initial element\n proxy.addEventListener('click', () => {\n // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n if (navElement instanceof HTMLButtonElement \|\| navElement instanceof HTMLAnchorElement) navElement.click();\n });\n\n // add id suffix to prevent duplicate key. default html id is: '';\n if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n // manage status change miror in proxy\n allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n proxy.setAttribute('status', event.detail);\n });\n });\n\n return this.element;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Set variables and validate props\n /\n componentWillLoad(): void {\n // init variables\n this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n\n // validate props\n this.validateIcon(this.icon);\n this.validateSlotLabel(this.slotlabel);\n this.validateSize(this.size);\n }\n\n /\n Ensure parent DOM is fully rendered with timeout method before parse elements\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // ensure parent menu is fully rendered\n return setTimeout(() => {\n this.parentMenu = this.element.closest('mg-menu');\n });\n }\n\n /\n Set OverflowBehavior when parentMenu state is upate AND defined\n /\n componentDidUpdate(): void {\n if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n this.canRenderMgMenuItemOverflowElement = false;\n }\n }\n\n /\n Disconnect overflow ResizeObserver\n /\n disconnectedCallback(): void {\n this.overflowBehavior?.disconnect();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"listitem\">\n {this.parentMenu && (\n <mg-menu-item\n data-overflow-more\n data-size={this.parentMenu.size}\n ref={el => {\n if (el) this.moreElementMenuItem = el;\n }}\n >\n <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n {this.slotlabel.label}\n </span>\n <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n </mg-menu-item>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-item-more.js","mappings":"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","names":["MgItemMore","isValidString"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/*\n MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n /\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n BASE_INDEX = 'data-overflow-base-index',\n PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n // variables\n private _resizeObserver: ResizeObserver;\n private _moreElement: HTMLElement;\n private _baseChildren: Element[];\n private _proxyChildren: Element[];\n\n constructor(\n private element: Element,\n private render: () => HTMLElement,\n ) {\n if (this._resizeObserver === undefined) {\n // add resize observer\n this._resizeObserver = new ResizeObserver(entries => {\n entries.forEach(entry => {\n this.run(entry.contentRect.width);\n });\n });\n this._resizeObserver.observe(this.element);\n }\n this.run();\n }\n\n /********\n Public \n *******/\n\n /\n * Disconnect ResizeObserver\n /\n public disconnect = (): void => {\n this._resizeObserver.disconnect();\n };\n\n /**********\n Internal \n *********/\n\n /\n * run overflow behavior\n * @param width - width of the container. Optional.\n /\n private run = (width?: number): void => {\n if (this._moreElement === undefined) {\n // set moreElement\n this._moreElement = this.render();\n\n // set children\n this._baseChildren = this.getInteractiveItems(this.element);\n if (isMgItemMore(this._moreElement)) {\n this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n }\n\n // update children\n this._baseChildren.forEach((child, index) => {\n child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n // set moreElement children\n this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n });\n }\n\n if (width !== undefined) this.updateDisplayedItems(width);\n };\n\n /\n Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n * @param element - element to parse\n * @returns children\n /\n private getInteractiveItems = (element: Element) =>\n (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n /\n Update displayed items in container from a given available space\n * @param availableWidth - available width in container to display child items\n /\n private updateDisplayedItems = (availableWidth: number): void => {\n this.restoreItems();\n const acc = { accWidth: 0, previousItem: null };\n [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement \| HTMLMgItemMoreElement) => {\n acc.accWidth += child.offsetWidth;\n const hasPreviuosItem = acc.previousItem !== null;\n const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n // if previous item is hidden AND is NOT more element we hidde current\n // OR if item has an overflow we hidde current\n // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n // ELSE current is a display item\n this.toggleItem(\n child,\n (isPreviousItemHidden && !this.isMoreElement(child)) \|\| this.isOverflowElement(acc.accWidth, child, availableWidth) \|\| (this.isMoreElement(child) && !isPreviousItemHidden),\n );\n\n // update previous item with current item\n acc.previousItem = child;\n });\n };\n\n /\n Utility method to know if item overflow partialy or totaly in the container\n * @param cumulateWidth - previous sibling elements cumulate width + item width\n * @param item - item HTML element\n * @param availableWidth - container available width\n * @returns truthy if element is overflow\n /\n private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n if (item.previousElementSibling === null \|\| this.isMoreElement(item)) return false;\n else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n else return cumulateWidth > availableWidth;\n };\n\n /\n Utility method to know if a given element is the 'MORE' element\n * @param element - element to match with 'MORE' element\n * @returns truthy if element is the 'MORE' element\n /\n private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n /\n Toggle display item element\n * @param item - item to control\n * @param isHidden - is item hidden\n /\n private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n else if (mgActionMenuindex >= 0) {\n this.toggleElement(item, isHidden);\n this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n }\n };\n\n /\n Toggle element's hidde attribute\n * @param element - element to toggle\n * @param isHidden - element is hidden\n /\n private toggleElement = (element: Element, isHidden: boolean): void => {\n if (isHidden) element.setAttribute('hidden', '');\n else element.removeAttribute('hidden');\n };\n\n /\n Remove hidden attributes on all items\n /\n private restoreItems = (): void => {\n [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n };\n}\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}}:host:not([hidden]){display:flex}/# sourceMappingURL=mg-item-more.css.map /\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-item-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n shadow: true,\n})\nexport class MgItemMore {\n /**********\n Internal \n *********/\n private readonly name = 'mg-item-more';\n private messages: MessageType;\n private parentMenuItems: HTMLMgMenuItemElement[];\n private moreElementMenuItem: HTMLMgMenuItemElement;\n private overflowBehavior: OverflowBehavior;\n private canRenderMgMenuItemOverflowElement = true;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgItemMoreElement;\n\n /\n Define icon\n /\n @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n @Watch('icon')\n validateIcon(newValue: MgItemMore['icon']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n }\n\n /\n Define slot label element\n /\n @Prop() slotlabel: SlotLabelType = { display: false };\n @Watch('slotlabel')\n validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n }\n\n /\n Define component child menu size.\n /\n @Prop() size: SizeType;\n @Watch('size')\n validateSize(newValue: MgItemMore['size']): void {\n if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n }\n\n /\n Define component parent menu.\n /\n @State() parentMenu: HTMLMgMenuElement;\n\n /*********\n Methods \n ********/\n\n /\n * render mg-item-more overflow element\n * @returns mg-item-more element\n /\n private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n // create menu items proxy element from item clones\n this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n });\n\n const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n // manage click on proxy to mirror it on initial element\n proxy.addEventListener('click', () => {\n // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n if (navElement instanceof HTMLButtonElement \|\| navElement instanceof HTMLAnchorElement) navElement.click();\n });\n\n // add id suffix to prevent duplicate key. default html id is: '';\n if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n // manage status change miror in proxy\n allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n proxy.setAttribute('status', event.detail);\n });\n });\n\n return this.element;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Set variables and validate props\n /\n componentWillLoad(): void {\n // init variables\n this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n\n // validate props\n this.validateIcon(this.icon);\n this.validateSlotLabel(this.slotlabel);\n this.validateSize(this.size);\n }\n\n /\n Ensure parent DOM is fully rendered with timeout method before parse elements\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // ensure parent menu is fully rendered\n return setTimeout(() => {\n this.parentMenu = this.element.closest('mg-menu');\n });\n }\n\n /\n Set OverflowBehavior when parentMenu state is upate AND defined\n /\n componentDidUpdate(): void {\n if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n this.canRenderMgMenuItemOverflowElement = false;\n }\n }\n\n /\n Disconnect overflow ResizeObserver\n /\n disconnectedCallback(): void {\n this.overflowBehavior?.disconnect();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"listitem\">\n {this.parentMenu && (\n <mg-menu-item\n data-overflow-more\n data-size={this.parentMenu.size}\n ref={el => {\n if (el) this.moreElementMenuItem = el;\n }}\n >\n <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n {this.slotlabel.label}\n </span>\n <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n </mg-menu-item>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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 { i as isValidString, c as createID, C as ClassList } from './components.utils.js';
+import { H as He, j as je, F as Fe } from './index.es.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';
@@ -29,6 +29,7 @@ var Status;
 })(Status || (Status = {}));
 const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const MgMenuItemStyle0 = mgMenuItemCss;
 const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
     constructor() {
@@ -94,7 +95,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 (!isValidString(element.textContent))
+                    if (!He(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);
@@ -163,12 +164,12 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = createID('mg-menu-item');
+        this.identifier = je('mg-menu-item');
         this.href = undefined;
         this.status = Status.VISIBLE;
         this.expanded = false;
         this.size = 'regular';
-        this.navigationButtonClassList = new ClassList([this.navigationButton]);
+        this.navigationButtonClassList = new Fe([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -323,7 +324,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         "direction": ["validateDirection"],
         "hasChildren": ["validateHasChildren"]
     }; }
-    static get style() { return mgMenuItemCss; }
+    static get style() { return MgMenuItemStyle0; }
 }, [1, "mg-menu-item", {
         "identifier": [1],
         "href": [1],

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","../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(12rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(22rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(32rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(42rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(52rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(62rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}: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(13rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(23rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(33rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(43rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(53rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(63rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}: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(14rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(24rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(34rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(44rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(54rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(64rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}.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<HTMLMgMenuItemElement['status']>;\n\n /\n Emited event when item is loaded\n /\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /********\n States \n ******/\n\n /\n * Define menu-item size.\n /\n @State() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /\n Component button classes\n /\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /\n Parent menu direction\n /\n @State() direction: DirectionType;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction']): void {\n // manage menu items style depending to parent menu horientation\n this.element.setAttribute('data-style-direction', newValue);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n if (this.isDirection(Direction.VERTICAL, newValue)) {\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n item.dataset.level = `${(Number(item.dataset.level) \|\| 1) + 1}`;\n });\n }\n }\n\n /\n Does component is in main menu\n /\n @State() isInMainMenu: boolean;\n\n /\n Does element is item-more\n /\n @State() isItemMore: boolean;\n\n /\n Does component have children.\n /\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /\n Does component should display notification badge.\n /\n @State() displayNotificationBadge: boolean;\n\n /*********\n Methods \n *******/\n\n /\n * Toggle expanded prop value\n /\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n /\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /\n Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n /\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /\n Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n /\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null &&\n Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n };\n\n /\n Method to control if one of component children have active status\n * @returns truthy if component has active child\n /\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children \|\| []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n );\n\n /\n Validate slots\n * @param guard - prevent action with guard. Default: false.\n /\n private validateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && element.getAttribute('title') === null) \|\| !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /\n Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n /\n private updateStatus = (guard = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /\n Init event-listeners\n /\n private initListeners = (): void => {\n // manage first sub-level menu-items\n Array.from(this.element.querySelector('mg-menu')?.children \|\| []).forEach(item => {\n if (item.nodeName === 'MG-MENU-ITEM') {\n // manage child menu listener\n item.addEventListener('status-change', () => {\n this.updateStatus();\n });\n }\n });\n };\n\n /\n Get mg-popover identifier\n * @returns generated mg-popover identifier\n /\n private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n /\n Render popover clickoutside guard for content slot\n /\n private updatePopoverGuard(): void {\n if (this.displayPopover())\n Array.from(this.element.children)\n .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n }\n\n /\n Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n /\n private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n /**********\n Handlers \n *********/\n\n /\n * Handle interacrtive element click\n * @param event - click on element\n /\n private handleElementCLick = (event: MouseEvent): void => {\n if ((this.hasChildren && !this.isInMainMenu) \|\| this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // toggle expanded when mg-menu-item has child items\n if (this.hasChildren) this.toggleExpanded();\n };\n\n /\n Handle popover element display-change event\n * @param event - popover display event\n /\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' \| 'information' \| 'label' \| 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // Validate props\n this.validateStatus(this.status);\n this.validateExpanded(this.expanded);\n\n // Validate states\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.validateSlot(true);\n\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // define menu-item context states\n const menu = this.element.closest('mg-menu');\n this.direction = this.isItemMore \|\| menu === null ? Direction.HORIZONTAL : menu.direction;\n this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n if (menu?.size !== undefined) this.size = menu.size;\n\n if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when main menu item contain an active item it will get the active style\n // AND if item is in vertical menu it will be expanded\n if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n this.updateStatus([Status.ACTIVE]);\n this.updateDisplayNotificationBadge();\n this.updatePopoverGuard();\n\n // manage child dom changes with mutationObserver and listzners\n this.initListeners();\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n this.updateDisplayNotificationBadge();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Render ineractive element\n * @returns HTML Element\n /\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n </div>\n {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /\n Render slot\n * @returns HTML Element\n /\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu \|\| this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.displayPopover() ? (\n <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-menu-item2.js","mappings":"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","names":["isValidString","createID","ClassList"],"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(12rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(22rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(32rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(42rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(52rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(62rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}: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(13rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(23rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(33rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(43rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(53rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(63rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}: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(14rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(110)}: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(24rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(210)}: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(34rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(310)}: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(44rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(410)}: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(54rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(510)}: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(64rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(610)}.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 '@mgdis/stencil-helpers';\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<HTMLMgMenuItemElement['status']>;\n\n /\n Emited event when item is loaded\n /\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /********\n States \n ******/\n\n /\n * Define menu-item size.\n /\n @State() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /\n Component button classes\n /\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /\n Parent menu direction\n /\n @State() direction: DirectionType;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction']): void {\n // manage menu items style depending to parent menu horientation\n this.element.setAttribute('data-style-direction', newValue);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n if (this.isDirection(Direction.VERTICAL, newValue)) {\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n item.dataset.level = `${(Number(item.dataset.level) \|\| 1) + 1}`;\n });\n }\n }\n\n /\n Does component is in main menu\n /\n @State() isInMainMenu: boolean;\n\n /\n Does element is item-more\n /\n @State() isItemMore: boolean;\n\n /\n Does component have children.\n /\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /\n Does component should display notification badge.\n /\n @State() displayNotificationBadge: boolean;\n\n /*********\n Methods \n *******/\n\n /\n * Toggle expanded prop value\n /\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n /\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /\n Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n /\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /\n Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n /\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null &&\n Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n };\n\n /\n Method to control if one of component children have active status\n * @returns truthy if component has active child\n /\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children \|\| []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n );\n\n /\n Validate slots\n * @param guard - prevent action with guard. Default: false.\n /\n private validateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && element.getAttribute('title') === null) \|\| !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /\n Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n /\n private updateStatus = (guard = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /\n Init event-listeners\n /\n private initListeners = (): void => {\n // manage first sub-level menu-items\n Array.from(this.element.querySelector('mg-menu')?.children \|\| []).forEach(item => {\n if (item.nodeName === 'MG-MENU-ITEM') {\n // manage child menu listener\n item.addEventListener('status-change', () => {\n this.updateStatus();\n });\n }\n });\n };\n\n /\n Get mg-popover identifier\n * @returns generated mg-popover identifier\n /\n private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n /\n Render popover clickoutside guard for content slot\n /\n private updatePopoverGuard(): void {\n if (this.displayPopover())\n Array.from(this.element.children)\n .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n }\n\n /\n Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n /\n private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n /**********\n Handlers \n *********/\n\n /\n * Handle interacrtive element click\n * @param event - click on element\n /\n private handleElementCLick = (event: MouseEvent): void => {\n if ((this.hasChildren && !this.isInMainMenu) \|\| this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // toggle expanded when mg-menu-item has child items\n if (this.hasChildren) this.toggleExpanded();\n };\n\n /\n Handle popover element display-change event\n * @param event - popover display event\n /\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' \| 'information' \| 'label' \| 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // Validate props\n this.validateStatus(this.status);\n this.validateExpanded(this.expanded);\n\n // Validate states\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.validateSlot(true);\n\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // define menu-item context states\n const menu = this.element.closest('mg-menu');\n this.direction = this.isItemMore \|\| menu === null ? Direction.HORIZONTAL : menu.direction;\n this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n if (menu?.size !== undefined) this.size = menu.size;\n\n if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when main menu item contain an active item it will get the active style\n // AND if item is in vertical menu it will be expanded\n if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n this.updateStatus([Status.ACTIVE]);\n this.updateDisplayNotificationBadge();\n this.updatePopoverGuard();\n\n // manage child dom changes with mutationObserver and listzners\n this.initListeners();\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n this.updateDisplayNotificationBadge();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Render ineractive element\n * @returns HTML Element\n /\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n </div>\n {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /\n Render slot\n * @returns HTML Element\n /\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu \|\| this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.displayPopover() ? (\n <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"],"version":3}