@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/components/mg-popover-content2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 const mgPopoverContentCss = ":host{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color));position:relative}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-popover-content mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);}::slotted([slot=arrow]):before{visibility:visible;content:\"\";position:absolute}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2 * var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before{top:var(--mg-card-border-radius)}";
 
-const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -86,3 +86,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopoverContent as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-popover-content2.js.map

package/dist/components/mg-popover-content2.js.map

@@ -0,0 +1 @@
+{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,q2IAAq2I;;MCSp3I,gBAAgB;;;;;;;;;IAmCnB,sBAAiB,GAAG;MAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;uBAjBoB,KAAK;2BAKW,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;EAqB3E,iBAAiB;;IAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;EAKD,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;MACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5F;GACF;;;;;EAMD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACxC,IAAI,CAAC,WAAW,KACf,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnG,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb,EACD,WAAK,KAAK,EAAC,2BAA2B,IACpC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB,EACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.scss?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":["@import '../../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n$popover-space: 1rem;\n$arrow-height: 1rem;\n$arrow-width: 3rem;\n$border-arrow-head: $arrow-height solid hsl(var(--mg-popover-background-color));\n$border-arrow-side: calc(#{$arrow-width} / 2) solid transparent;\n\n:host {\n  display: none;\n  padding: $popover-space;\n  z-index: 2000;\n  color: hsl(var(--mg-popover-font-color));\n  position: relative;\n}\n\n:host([data-show]) {\n  display: block;\n}\n\n:host([data-popper-placement^='left-start']),\n:host([data-popper-placement^='left-end']),\n:host([data-popper-placement^='right-start']),\n:host([data-popper-placement^='right-end']) {\n  padding: 0 $popover-space;\n}\n\n.mg-popover-content {\n  --mg-card-max-width: var(--mg-popover-max-width);\n  --mg-card-min-width: var(--mg-popover-min-width);\n\n  mg-button {\n    float: right;\n    margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2); // Without unit (rem) the value can not be negative\n    margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);\n    margin-left: 3rem;\n  }\n\n  &__title ::slotted([slot='title']) {\n    margin: 0 0 1rem !important;\n    font-size: var(--mg-popover-title-font-size) !important;\n    font-weight: 600;\n  }\n\n  @include reset-slot-card-variables();\n}\n\n/**\n* Arrow hide\n*/\n:host([data-popper-placement^='top'][data-arrow-hide]) {\n  padding-bottom: 0;\n}\n\n:host([data-popper-placement^='bottom'][data-arrow-hide]) {\n  padding-top: 0;\n}\n\n:host([data-popper-placement$='end'][data-arrow-hide]),\n:host([data-popper-placement^='left'][data-arrow-hide]) {\n  padding-right: 0;\n}\n\n:host([data-popper-placement$='start'][data-arrow-hide]),\n:host([data-popper-placement^='right'][data-arrow-hide]) {\n  padding-left: 0;\n}\n\n/**\n* Arrow style\n*/\n::slotted([slot='arrow']) {\n  position: absolute;\n  visibility: hidden;\n  // Need to set the max size to ensure it will be well centered\n  width: calc($arrow-width + 2 * var(--mg-card-border-radius) + 2 * $popover-space);\n  height: calc($arrow-width + 2 * var(--mg-card-border-radius) + 2 * $popover-space);\n\n  &:before {\n    visibility: visible;\n    content: '';\n    position: absolute;\n  }\n\n  :host([data-arrow-hide]) & {\n    display: none;\n  }\n\n  /**\n  * Arrow position\n  */\n  :host([data-popper-placement^='top']) &,\n  :host([data-popper-placement^='bottom']) & {\n    height: $arrow-height;\n\n    &:before {\n      left: calc(var(--mg-card-border-radius) + $popover-space);\n      border-right: $border-arrow-side;\n      border-left: $border-arrow-side;\n    }\n  }\n\n  :host([data-popper-placement^='top']) & {\n    bottom: 0.1rem;\n    filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));\n\n    &:before {\n      border-top: $border-arrow-head;\n    }\n  }\n\n  :host([data-popper-placement^='bottom']) & {\n    top: 0.1rem;\n    filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));\n\n    &:before {\n      border-bottom: $border-arrow-head;\n    }\n  }\n\n  :host([data-popper-placement^='left']) &,\n  :host([data-popper-placement^='right']) & {\n    width: $arrow-height;\n\n    &:before {\n      top: calc(var(--mg-card-border-radius) + $popover-space);\n      border-top: $border-arrow-side;\n      border-bottom: $border-arrow-side;\n    }\n  }\n\n  :host([data-popper-placement^='left']) & {\n    right: 0.1rem;\n    filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));\n\n    &:before {\n      border-left: $border-arrow-head;\n    }\n  }\n\n  :host([data-popper-placement^='right']) & {\n    left: 0.1rem;\n    filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));\n\n    &:before {\n      border-right: $border-arrow-head;\n    }\n  }\n\n  :host([data-popper-placement^='left-start']) &,\n  :host([data-popper-placement^='left-end']) &,\n  :host([data-popper-placement^='right-start']) &,\n  :host([data-popper-placement^='right-end']) & {\n    height: calc($arrow-width + 2 * var(--mg-card-border-radius));\n\n    &:before {\n      top: var(--mg-card-border-radius);\n    }\n  }\n}\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: 'mg-popover-content.scss',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<string>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-popover.js

@@ -4,3 +4,5 @@ const MgPopover = MgPopover$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPopover, defineCustomElement };
+
+//# sourceMappingURL=mg-popover.js.map

package/dist/components/mg-popover.js.map

@@ -0,0 +1 @@
+{"file":"mg-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-popover2.js

@@ -8,7 +8,7 @@ import { c as createPopper } from './popper.js';
 
 const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}";
 
-const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -63,21 +63,27 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Render popover content element
      */
     this.renderPopoverContent = () => {
-      this.mgPopoverContent = document.createElement('mg-popover-content');
-      this.mgPopoverContent.setAttribute('slot', 'content');
-      this.mgPopoverContent.setAttribute('id', this.identifier);
-      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
-      const arrow = document.createElement('div');
-      arrow.setAttribute('slot', 'arrow');
-      arrow.dataset.popperArrow = '';
-      this.mgPopoverContent.appendChild(arrow);
-      // insert elements in DOM
-      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
-        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
-          this.mgPopoverContent.appendChild(slot);
+      const mgPopoverContent = this.element.querySelector('mg-popover-content');
+      if (mgPopoverContent === null) {
+        this.mgPopoverContent = document.createElement('mg-popover-content');
+        this.mgPopoverContent.setAttribute('slot', 'content');
+        this.mgPopoverContent.setAttribute('id', this.identifier);
+        this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+        const arrow = document.createElement('div');
+        arrow.setAttribute('slot', 'arrow');
+        arrow.dataset.popperArrow = '';
+        this.mgPopoverContent.appendChild(arrow);
+        // insert elements in DOM
+        ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+          Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+            this.mgPopoverContent.appendChild(slot);
+          });
         });
-      });
-      this.element.appendChild(this.mgPopoverContent);
+        this.element.appendChild(this.mgPopoverContent);
+      }
+      else {
+        mgPopoverContent.setAttribute('id', this.identifier);
+      }
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
@@ -86,6 +92,10 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderPopoverContent to update popover-content id
+    this.renderPopoverContent();
+  }
   validateArrowHide(newValue) {
     if (newValue)
       this.mgPopoverContent.dataset.arrowHide = '';
@@ -122,6 +132,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // render mg-popover-content slot
     this.renderPopoverContent();
     this.validateCloseButton(this.closeButton);
+    this.validateIdentifier();
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -146,6 +157,12 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             offset: [0, 0],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['auto'],
+          },
+        },
       ],
     });
     // add resize observer
@@ -175,6 +192,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get element() { return this; }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "arrowHide": ["validateArrowHide"],
     "closeButton": ["validateCloseButton"],
     "display": ["handleDisplay"]
@@ -187,6 +205,11 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "closeButton": [4, "close-button"],
     "display": [1028],
     "disabled": [4]
+  }, undefined, {
+    "identifier": ["validateIdentifier"],
+    "arrowHide": ["validateArrowHide"],
+    "closeButton": ["validateCloseButton"],
+    "display": ["handleDisplay"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -224,3 +247,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopover as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-popover2.js.map

package/dist/components/mg-popover2.js.map

@@ -0,0 +1 @@
+{"file":"mg-popover2.js","mappings":"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","names":[],"sources":["src/components/molecules/mg-popover/mg-popover.scss?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["$mg-popover-padding-vertical: var(--mg-popover-padding-vertical, 1.5rem);\n\n:host {\n  --mg-card-padding: #{$mg-popover-padding-vertical} var(--mg-popover-padding-horizontal, #{$mg-popover-padding-vertical});\n  --mg-card-border: none;\n  --mg-card-border-radius: 0.5rem;\n  --mg-card-background: hsl(var(--mg-popover-background-color));\n  position: relative;\n\n  display: contents;\n  &::slotted(*) {\n    display: inline-block;\n  }\n}\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n@Component({\n  tag: 'mg-popover',\n  styleUrl: 'mg-popover.scss',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['arrowHide']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<boolean>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    const closestElement: HTMLElement = event.target.closest(`[data-mg-popover-guard]`);\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && closestElement?.dataset.mgPopoverGuard !== this.identifier) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n      });\n    }, 0);\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier();\n    this.validateArrowHide(this.arrowHide);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    //Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Create popperjs popover\n    this.popper = createPopper(interactiveElement, this.mgPopover, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 0],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // add resize observer\n    new ResizeObserver(() => {\n      this.popper.update();\n    }).observe(this.element.querySelector('mg-popover-content'));\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-skip-links.js

@@ -3,7 +3,7 @@ import { i as initLocales } from './index2.js';
 
 const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
 
-const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -53,6 +53,8 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return mgSkipLinksCss; }
 }, [1, "mg-skip-links", {
     "links": [16]
+  }, undefined, {
+    "links": ["validateLinks"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -73,3 +75,5 @@ const MgSkipLinks = MgSkipLinks$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgSkipLinks, defineCustomElement };
+
+//# sourceMappingURL=mg-skip-links.js.map

package/dist/components/mg-skip-links.js.map

@@ -0,0 +1 @@
+{"file":"mg-skip-links.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,mdAAmd;;MCU7dA,aAAW;;;;;;;;;;;;;IA4Cd,oBAAe,GAAG,CAAC,KAAkD;MAC3E,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;KAChE,CAAC;;;EA1BF,aAAa,CAAC,KAAiB;IAC7B,IACE,KAAK,KAAK,SAAS;MACnB,KAAK,CAAC,MAAM,KAAK,CAAC;MAClB,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EACjI;MACA,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;KAC5J;GACF;;;;;;;EA2BD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,IACvF,UAAI,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAChB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC1E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgSkipLinks"],"sources":["src/components/molecules/mg-skip-links/mg-skip-links.scss?tag=mg-skip-links&encapsulation=shadow","src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"sourcesContent":[".mg-skip-links {\n  position: absolute;\n  transform: translateY(-100%);\n  opacity: 0;\n  background: hsl(var(--color-light));\n\n  &:focus-within {\n    position: relative;\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  &__list {\n    // Display\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.6rem;\n    margin: 0;\n    padding: 0.64rem 1.8rem;\n    // Decoration\n    list-style: none;\n  }\n\n  &__link {\n    // Display\n    display: inline-block;\n    padding: 1.2rem;\n    // Decoration\n    color: hsl(var(--color-dark));\n\n    &:hover {\n      background: hsl(var(--color-dark), 0.1);\n    }\n  }\n}\n","/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: 'mg-skip-links.scss',\n  shadow: true,\n})\nexport class MgSkipLinks {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgSkipLinksElement;\n\n  /**\n   * Skip links\n   */\n  @Prop() links: SkipLink[];\n  @Watch('links')\n  validateLinks(links: SkipLink[]): void {\n    if (\n      links === undefined ||\n      links.length === 0 ||\n      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')\n    ) {\n      throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n    }\n  }\n\n  /**\n   * Emited event when link is clicked\n   */\n  @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Handle link click and emit go-to-anchor event\n   * @param event - mouse event\n   */\n  private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    event.currentTarget.blur();\n    this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateLinks(this.links);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <nav class=\"mg-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-tabs.js

@@ -26,7 +26,7 @@ const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.m
  * @returns tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
-const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -250,6 +250,11 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activeTab": [1538, "active-tab"],
     "tabs": [32],
     "classCollection": [32]
+  }, undefined, {
+    "label": ["validateLabel"],
+    "size": ["validateSize"],
+    "items": ["validateItems"],
+    "activeTab": ["validateActiveTab"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -280,3 +285,5 @@ const MgTabs = MgTabs$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTabs, defineCustomElement };
+
+//# sourceMappingURL=mg-tabs.js.map

package/dist/components/mg-tabs.js.map

@@ -0,0 +1 @@
+{"file":"mg-tabs.js","mappings":";;;;;AAGA;;;AAGA,IAAY,MAKX;AALD,WAAY,MAAM;EAChB,6BAAmB,CAAA;EACnB,2BAAiB,CAAA;EACjB,+BAAqB,CAAA;EACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAaD;;;AAGO,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU;;AC3BlD,MAAM,SAAS,GAAG,s5HAAs5H;;ACIx6H;;;;;AAKA,MAAM,SAAS,GAAG,CAAC,GAAY,KAAc,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC;MAOzFA,QAAM;;;;;;;;;;IAMA,aAAQ,GAAG,OAAO,CAAC;IACnB,uBAAkB,GAAG,4BAA4B,CAAC;IAI3D,eAAU,GAAG,CAAC,CAAC;;;;;;;IAyGf,iBAAY,GAAG,CAAC,GAAY,EAAE,MAAc,KAAc,GAAG,CAAC,MAAM,KAAK,MAAM,CAAC;;;;;;;IAQhF,iBAAY,GAAG,CAAC,OAAe,EAAE,KAAa,KAAa,GAAG,OAAO,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;;;;;;IAOvG,oBAAe,GAAG,CAAC,KAAa,KAAa,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;;;;;IAMrE,iBAAY,GAAG,MACrB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,sCAAW,GAAG,KAAE,KAAK,IAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;;;;IAM9I,gBAAW,GAAG,CAAC,KAAkD;MACvE,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;MAChD,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;MACvD,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;QACpF,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;WAAM;QACL,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;OAC3B;KACF,CAAC;;;;;;IAOM,6BAAwB,GAAG,CAAC,MAAc,KAAa,GAAG,IAAI,CAAC,kBAAkB,KAAK,MAAM,EAAE,CAAC;;;;;IAM/F,kBAAa,GAAG,CAAC,KAA8C;MACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;MAC1C,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QACnD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,CAAC,aAAa,CAAC,gBAAgB,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;;QAGvF,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;UAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;;UAEhB,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;;SAEvE;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;UACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;;UAEhB,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;SACvE;QAED,MAAM,mBAAmB,GAAsB,MAAM,CAAC,aAAa,CAAC,gBAAgB,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;;QAEvG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;UAClE,mBAAmB,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;;SAEpG;aAAM;UACL,mBAAmB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;UAClD,mBAAmB,CAAC,KAAK,EAAE,CAAC;SAC7B;OACF;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;OACnB;KACF,CAAC;;;;IAKM,eAAU,GAAG;;MAEnB,UAAU,CAAC;QACT,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK;UACtF,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,CAAC,CAAC;SAC5F,CAAC,CAAC;OACJ,EAAE,CAAC,CAAC,CAAC;KACP,CAAC;;;;IAKM,kBAAa,GAAG;MACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,cAAI,OAAA,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,0CAAE,QAAQ,CAAC,cAAc,CAAC,CAAA,EAAA,CAAC,CAAC;MACpH,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACjH,CAAC;sBA/L2B,QAAQ,CAAC,SAAS,CAAC;;gBAiBvB,SAAS;;;gBAuDP,EAAE;2BAKS,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;;EArEhE,aAAa,CAAC,QAAyB;IACrC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;KACxD;GACF;EAOD,YAAY,CAAC,QAAwB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAC7B,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC9E;IACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;GACxD;EAOD,aAAa,CAAC,QAAyB;;IAErC,IAAI,iBAAiB,CAAC,QAAoB,CAAC,EAAE;MAC3C,IAAI,CAAC,IAAI,GAAI,QAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;KAClI;;SAEI,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAK,QAAsB,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE;MAClG,IAAI,CAAC,IAAI,GAAG,QAAqB,CAAC;;MAElC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,SAAS;QAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;KACrH;SAAM;MACL,MAAM,IAAI,KAAK,CAAC,kFAAkF,CAAC,CAAC;KACrG;GACF;EAOD,iBAAiB,CAAC,QAA6B;IAC7C,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,IAAI,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACjF,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK;QAC3B,MAAM,cAAc,GAAG,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;;QAE5D,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc;UAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;;aAErF,IAAI,CAAC,GAAG,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,cAAc;UAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;OAC7H,CAAC,CAAC;;MAEH,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,SAAS,EAAE;QAC9E,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;OACrC;KACF;SAAM,IAAI,QAAQ,KAAK,SAAS,EAAE;MACjC,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;KAClF;GACF;;;;;;;EAqID,iBAAiB;;IAEf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;;;;EAKD,gBAAgB;IACd,QAAQ,CAAC,gBAAgB,CACvB,OAAO,EACP,CAAC,KAA2C;MAC1C,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,OAAO;QAAE,IAAI,CAAC,UAAU,EAAE,CAAC;KACzE,EACD,KAAK,CACN,CAAC;GACH;;;;;EAMD,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACrC,cAAQ,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,iBAAiB,IACnE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,cACE,GAAG,EAAE,GAAG,CAAC,KAAK,EACd,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAC7C,KAAK,EAAE;QACL,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,IAAI;QACpC,CAAC,GAAG,IAAI,CAAC,kBAAkB,cAAc,GAAG,IAAI;QAChD,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC;QAC1F,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC;QAC9F,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC;OAC3F,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,mBACzC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,mBAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,mBACvC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,EACtD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,gBACjB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAEtC,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,eAAS,IAAI,EAAE,GAAG,CAAC,IAAI,GAAY,EAC7D,GAAG,CAAC,KAAK,EACT,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,gBAAU,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,aAAa,GAAa,CAC1J,CACV,CAAC,CACK,EACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,eACE,GAAG,EAAE,GAAG,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,qBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACxD,KAAK,EAAC,4BAA4B,IAElC,YAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,GAAS,CACpD,CACX,CAAC,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgTabs"],"sources":["src/components/molecules/mg-tabs/mg-tabs.conf.ts","src/components/molecules/mg-tabs/mg-tabs.scss?tag=mg-tabs&encapsulation=shadow","src/components/molecules/mg-tabs/mg-tabs.tsx"],"sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n  label: string;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n  status: Status;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = (typeof sizes)[number];\n","@import '../../../styles/mixins/navigation-button.scss';\n\n$navigation-button-sizes: (\n  'regular': (\n    'vertical': 1rem,\n    'horizontal': 2rem,\n  ),\n  'large': (\n    'vertical': 1.5rem,\n    'horizontal': 3rem,\n  ),\n);\n\n@include navigation-button('mg-tabs', $navigation-button-sizes);\n\n.mg-tabs {\n  &__header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    border-bottom: var(--mg-tabs-border-bottom);\n  }\n  &__content-container:focus-visible {\n    outline: none;\n  }\n  &__navigation-button-text {\n    flex: 0 0 content;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: TabItem): boolean => typeof tab === 'object' && typeof tab.label === 'string';\n\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: 'mg-tabs.scss',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-tabs__navigation-button';\n\n  // variables\n  private tabFocus: number;\n  private startIndex = 1;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTabsElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-tabs');\n\n  /**\n   * Tabs label. Include short tabs description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgTabs['label']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-tabs> prop \"label\" is required.');\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgTabs['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    }\n    this.classCollection.add(`mg-tabs--size-${this.size}`);\n  }\n\n  /**\n   * Tabs items\n   */\n  @Prop() items!: string[] | TabItem[];\n  @Watch('items')\n  validateItems(newValue: MgTabs['items']): void {\n    // String array\n    if (allItemsAreString(newValue as string[])) {\n      this.tabs = (newValue as string[]).map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));\n    }\n    // Object array\n    else if (newValue && newValue.length > 0 && (newValue as TabItem[]).every(item => isTabItem(item))) {\n      this.tabs = newValue as TabItem[];\n      // init active tabs if not set. Default: index 0.\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined) this.tabs[0].status = Status.ACTIVE;\n    } else {\n      throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\n    }\n  }\n\n  /**\n   * Active tab number\n   */\n  @Prop({ reflect: true, mutable: true }) activeTab: number;\n  @Watch('activeTab')\n  validateActiveTab(newValue: MgTabs['activeTab']): void {\n    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {\n      this.tabs.forEach((tab, index) => {\n        const isNewActiveTab = index === newValue - this.startIndex;\n        // reset active tabs\n        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n        // set active tab from given tab key\n        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {\n        this.activeTabChange.emit(newValue);\n      }\n    } else if (newValue !== undefined) {\n      throw new Error('<mg-tabs> prop \"activeTab\" must be between 1 and tabs length.');\n    }\n  }\n\n  /**\n   * Component tabs\n   */\n  @State() tabs: TabItem[] = [];\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<number>;\n\n  /**\n   * Method to know if given tab has the given status\n   * @param tab - item tab key to set to ACTIVE status\n   * @param status - status to valide\n   * @returns status comparaison\n   */\n  private tabHasStatus = (tab: TabItem, status: Status): boolean => tab.status === status;\n\n  /**\n   * Method to get element id from index\n   * @param element - to get id\n   * @param index - to generate id\n   * @returns generated element id\n   */\n  private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n  /**\n   * Method to get tab item index\n   * @param index - to get\n   * @returns index\n   */\n  private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n  /**\n   * Method to get the active-tab value\n   * @returns of the active-tab\n   */\n  private getActiveTab = (): number =>\n    this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => ({ ...tab, index })).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);\n\n  /**\n   * Handle click events on tabs\n   * @param event - mouse event\n   */\n  private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    const tabId = event.currentTarget.dataset.index;\n    const tab = this.tabs[Number(tabId) - this.startIndex];\n    if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {\n      event.preventDefault();\n    } else {\n      this.activeTab = Number(tabId);\n      this.tabFocus = undefined;\n    }\n  };\n\n  /**\n   * get navigation button class from given status\n   * @param status - button tab status\n   * @returns button class/selector variant\n   */\n  private getNavigationButtonClass = (status: Status): string => `${this.buttonTabBaseClass}--${status}`;\n\n  /**\n   * Handle keyboard event on tabs\n   * @param event - mouse event\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    const parent = event.target.parentElement;\n    if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      this.tabFocus = Number(event.target.dataset.index);\n      parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n      // Move right\n      if (event.key === 'ArrowRight') {\n        this.tabFocus++;\n        // If we're at the end, go to the start\n        if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n        // Move left\n      } else if (event.key === 'ArrowLeft') {\n        this.tabFocus--;\n        // If we're at the start, move to the end\n        if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n      }\n\n      const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n      // if focus item is ['hidden'] we recursively repeat action\n      if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n        parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n        // else run focus methods on tabFocus element\n      } else {\n        parentButtonElement.setAttribute('tabindex', '0');\n        parentButtonElement.focus();\n      }\n    } else if (event.key === 'Tab') {\n      this.resetFocus();\n    }\n  };\n\n  /**\n   * Method to reset focus behavior\n   */\n  private resetFocus = (): void => {\n    // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n    setTimeout(() => {\n      this.tabFocus = undefined;\n      Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n        tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');\n      });\n    }, 0);\n  };\n\n  /**\n   * Validate slots setting\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n    if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check tabs format\n    this.validateLabel(this.label);\n    this.validateItems(this.items);\n    this.validateActiveTab(this.activeTab);\n    this.validateSize(this.size);\n    this.validateSlots();\n  }\n\n  /**\n   * add listners\n   */\n  componentDidLoad(): void {\n    document.addEventListener(\n      'click',\n      (event: MouseEvent & { target: HTMLElement }) => {\n        if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n      },\n      false,\n    );\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <header role=\"tablist\" aria-label={this.label} class=\"mg-tabs__header\">\n          {this.tabs.map((tab, index) => (\n            <button\n              key={tab.label}\n              role=\"tab\"\n              id={this.getElementId(this.identifier, index)}\n              class={{\n                [`${this.buttonTabBaseClass}`]: true,\n                [`${this.buttonTabBaseClass}--horizontal`]: true,\n                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n              }}\n              tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n              aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n              aria-controls={this.getElementId(this.tabPanel, index)}\n              aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n              onClick={this.handleClick}\n              onKeyDown={this.handleKeydown}\n              data-index={this.getTabItemIndex(index)}\n            >\n              {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n              {tab.label}\n              {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n            </button>\n          ))}\n        </header>\n        {this.tabs.map((tab, index) => (\n          <article\n            key={tab.label}\n            role=\"tabpanel\"\n            id={this.getElementId(this.tabPanel, index)}\n            hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n            aria-labelledby={this.getElementId(this.identifier, index)}\n            tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n            class=\"mg-tabs__content-container\"\n          >\n            <slot name={this.getElementId('tab_content', index)}></slot>\n          </article>\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-tag.js

@@ -8,7 +8,7 @@ const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'
 
 const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--secondary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--success.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--warning.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--danger.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag.mg-tag--info.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}::slotted(mg-icon){margin-right:0.4rem}";
 
-const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -93,6 +93,10 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "outline": [4],
     "soft": [4],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"],
+    "soft": ["validateSoft"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -113,3 +117,5 @@ const MgTag = MgTag$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTag, defineCustomElement };
+
+//# sourceMappingURL=mg-tag.js.map

package/dist/components/mg-tag.js.map

@@ -0,0 +1 @@
+{"file":"mg-tag.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAU;;ACHjG,MAAM,QAAQ,GAAG,qwHAAqwH;;MCQzwHA,OAAK;;;;;;;;;IAMC,iBAAY,GAAG,iBAAiB,CAAC;IACjC,cAAS,GAAG,cAAc,CAAC;mBAcV,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;;EAtC/D,eAAe,CAAC,QAA0B,EAAE,QAA2B;IACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;OACpD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;KACjD;GACF;EAOD,eAAe,CAAC,QAA0B;IACxC,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;EAOD,YAAY,CAAC,QAAuB;;IAElC,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;MAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;;IAG3G,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;MAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAClD;;;;;;;;EAeO,mBAAmB,CAAC,WAAmB;IAC7C,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;GACjI;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgTag"],"sources":["src/components/atoms/mg-tag/mg-tag.conf.ts","src/components/atoms/mg-tag/mg-tag.scss?tag=mg-tag&encapsulation=shadow","src/components/atoms/mg-tag/mg-tag.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;\n\n/**\n * TagVariantType type from tag variants\n */\nexport type TagVariantType = (typeof variants)[number];\n","/* Variables */\n$mg-tag-border-width: 0.1rem;\n$mg-tag-padding-horizontal: 0.7rem;\n\n/* Mixins */\n@mixin tag-variant($name, $backgroundColor, $color) {\n  &.mg-tag--#{$name} {\n    // Decoration\n    background-color: hsl(var(--color-#{$backgroundColor}));\n    border-color: hsl(var(--color-#{$backgroundColor}));\n    // Font\n    color: hsl(var(--color-#{$color}));\n\n    &.mg-tag--outline {\n      // Decoration\n      background-color: transparent;\n      // Font\n      color: hsl(var(--color-#{$backgroundColor}));\n    }\n    &.mg-tag--soft {\n      $fill-color: hsl(var(--color-#{$backgroundColor}-h), var(--color-#{$backgroundColor}-s), var(--mg-color-soft-l));\n      font-weight: 400;\n      background-color: $fill-color;\n      border-color: $fill-color;\n      color: hsl(var(--color-dark));\n      ::slotted(mg-icon) {\n        @if $name == 'secondary' {\n          color: hsl(var(--color-dark));\n        } @else {\n          color: hsl(var(--color-#{$backgroundColor}));\n        }\n      }\n    }\n  }\n}\n\n/* Styles */\n.mg-tag {\n  // Display\n  padding: calc((var(--mg-tag-height) - (2 * $mg-tag-border-width) - (var(--mg-tag-font-size) * var(--line-height))) / 2) $mg-tag-padding-horizontal - $mg-tag-border-width;\n  min-height: var(--mg-tag-height);\n  box-sizing: border-box;\n  // Decoration\n  border-radius: var(--mg-tag-border-radius);\n  border: $mg-tag-border-width solid;\n  // Font\n  font-size: var(--mg-tag-font-size);\n  font-weight: 600;\n  text-align: center;\n\n  // Variant\n  @include tag-variant('primary', 'dark', 'light');\n  @include tag-variant('secondary', 'light', 'dark');\n  @include tag-variant('success', 'success', 'dark');\n  @include tag-variant('warning', 'warning', 'dark');\n  @include tag-variant('danger', 'danger', 'light');\n  @include tag-variant('info', 'info', 'light');\n}\n\n.mg-tag,\nmg-tag {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n::slotted(mg-icon) {\n  margin-right: 0.4rem;\n}\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-tag',\n  styleUrl: 'mg-tag.scss',\n  shadow: true,\n})\nexport class MgTag {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = 'mg-tag--outline';\n  private readonly classSoft = 'mg-tag--soft';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTagElement;\n\n  /**\n   * Define tag variant\n   */\n  @Prop() variant: TagVariantType = variants[0]; // primary\n  @Watch('variant')\n  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-tag--${oldValue}`);\n      }\n      this.classCollection.add(`mg-tag--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if tag is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgTag['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Define if tag is using soft style\n   */\n  @Prop() soft: boolean;\n  @Watch('soft')\n  validateSoft(newValue: MgTag['soft']): void {\n    // usage validation\n    if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n    // apply class\n    if (newValue) this.classCollection.add(this.classSoft);\n    else this.classCollection.delete(this.classSoft);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tag']);\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Validate the given textContent\n   * @param textContent - html element textContent property\n   */\n  private validateTextContent(textContent: string): void {\n    if (typeof textContent !== 'string' || textContent.trim() === '') throw new Error('<mg-tag> slot must contain a text content.');\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n    this.validateSoft(this.soft);\n    this.validateTextContent(this.element.textContent);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-tooltip-content.js

@@ -4,3 +4,5 @@ const MgTooltipContent = MgTooltipContent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTooltipContent, defineCustomElement };
+
+//# sourceMappingURL=mg-tooltip-content.js.map

package/dist/components/mg-tooltip-content.js.map

@@ -0,0 +1 @@
+{"file":"mg-tooltip-content.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-tooltip-content2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const mgTooltipContentCss = ":host{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start;max-width:40rem;box-sizing:border-box}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{visibility:visible;content:\"\";transform:rotate(45deg)}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-4px}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-4px}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-4px}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-4px}";
 
-const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -39,3 +39,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgTooltipContent as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-tooltip-content2.js.map

package/dist/components/mg-tooltip-content2.js.map

@@ -0,0 +1 @@
+{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,42BAA42B;;MCO33B,gBAAgB;;;;;;;;;;;;;;EAc3B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,IAClB,YAAM,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,GAAQ,EAC1E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.scss?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host {\n  // Display\n  display: none;\n  padding: 0.5rem 0.8rem;\n  z-index: 1000;\n  // Decoration\n  border-radius: var(--mg-tooltip-border-radius);\n  background-color: hsl(var(--mg-tooltip-background-color));\n  // Font\n  color: hsl(var(--mg-tooltip-font-color));\n  text-align: start;\n  max-width: 40rem;\n  box-sizing: border-box;\n}\n\n:host([data-show]) {\n  display: block;\n}\n\n::slotted([slot='arrow']) {\n  visibility: hidden;\n\n  &::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &,\n  &::before {\n    // Display\n    position: absolute;\n    width: 0.8rem;\n    height: 0.8rem;\n    z-index: 9999;\n    // Decoration\n    background-color: hsl(var(--mg-tooltip-background-color));\n  }\n\n  :host([data-popper-placement^='top']) > & {\n    bottom: -4px;\n  }\n\n  :host([data-popper-placement^='bottom']) > & {\n    top: -4px;\n  }\n\n  :host([data-popper-placement^='left']) > & {\n    right: -4px;\n  }\n\n  :host([data-popper-placement^='right']) > & {\n    left: -4px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: 'mg-tooltip-content.scss',\n  shadow: true,\n})\nexport class MgTooltipContent {\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"tooltip\">\n        <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-tooltip.js

@@ -4,3 +4,5 @@ const MgTooltip = MgTooltip$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTooltip, defineCustomElement };
+
+//# sourceMappingURL=mg-tooltip.js.map

package/dist/components/mg-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"mg-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-tooltip2.js

@@ -18,7 +18,7 @@ const mgTooltipCss = ":host{display:inline-block}";
  * @returns return true if type is HTMLMgButtonElement
  */
 const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
-const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -158,6 +158,12 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
               offset: [0, 8],
             },
           },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['auto'],
+            },
+          },
         ],
       });
       // Manage tooltipedElement focus/blur events
@@ -195,6 +201,10 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderTooltipContent to update tooltip-content id
+    this.renderTooltipContent();
+  }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
@@ -220,16 +230,22 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /**
    * Render tooltip content element
    */
-  renderTooltip() {
-    const mgTooltipContent = document.createElement('mg-tooltip-content');
-    mgTooltipContent.setAttribute('slot', 'content');
-    mgTooltipContent.setAttribute('id', this.identifier);
-    const arrow = document.createElement('div');
-    arrow.setAttribute('slot', 'arrow');
-    arrow.dataset.popperArrow = '';
-    mgTooltipContent.appendChild(arrow);
-    // append tooltip element to component
-    this.element.appendChild(mgTooltipContent);
+  renderTooltipContent() {
+    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');
+    if (mgTooltipContent === null) {
+      const mgTooltipContent = document.createElement('mg-tooltip-content');
+      mgTooltipContent.setAttribute('slot', 'content');
+      mgTooltipContent.setAttribute('id', this.identifier);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      mgTooltipContent.appendChild(arrow);
+      // append tooltip element to component
+      this.element.appendChild(mgTooltipContent);
+    }
+    else {
+      mgTooltipContent.setAttribute('id', this.identifier);
+    }
   }
   /*************
    * Lifecycle *
@@ -241,11 +257,12 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // Get windows to attach events
     this.windows = getWindows(window);
     // Get tooltip element
-    this.renderTooltip();
+    this.renderTooltipContent();
     this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
     //validate properties
     this.validateDisabled(this.disabled);
     this.validateMessage(this.message);
+    this.validateIdentifier();
   }
   /**
    * Get slotted element
@@ -293,6 +310,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get element() { return this; }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "message": ["validateMessage"],
     "display": ["handleDisplay"],
     "disabled": ["validateDisabled"]
@@ -304,6 +322,11 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "placement": [1],
     "display": [1028],
     "disabled": [4]
+  }, undefined, {
+    "identifier": ["validateIdentifier"],
+    "message": ["validateMessage"],
+    "display": ["handleDisplay"],
+    "disabled": ["validateDisabled"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -326,3 +349,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgTooltip as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-tooltip2.js.map

package/dist/components/mg-tooltip2.js.map

@@ -0,0 +1 @@
+{"file":"mg-tooltip2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","src/components/atoms/mg-tooltip/mg-tooltip.scss?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export enum Guard {\n  FOCUS = 'focus',\n  HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n  HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n}\n",":host {\n  display: inline-block;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n@Component({\n  tag: 'mg-tooltip',\n  styleUrl: 'mg-tooltip.scss',\n  shadow: true,\n})\nexport class MgTooltip {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgTooltipContent: HTMLMgTooltipContentElement;\n  private tooltipedElement: HTMLElement;\n  private windows: Window[];\n  private hasCustomTabIndex: boolean;\n\n  // tooltip actions guards\n  private guard: Guard;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTooltipElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-tooltip');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderTooltipContent to update tooltip-content id\n    this.renderTooltipContent();\n  }\n\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n  @Watch('message')\n  validateMessage(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-tooltip> prop \"message\" is required.');\n    }\n    this.mgTooltipContent.message = newValue;\n  }\n\n  /**\n   * Tooltip placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Display tooltip\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n  }\n\n  /**\n   * Disable tooltip\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  validateDisabled(newValue: MgTooltip['disabled']): void {\n    if (this.hasCustomTabIndex) {\n      if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n      else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Show tooltip\n   */\n  private show = (): void => {\n    // Make the tooltip visible\n    this.mgTooltipContent.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n        localWindow.addEventListener('keydown', this.pressEscape, false);\n      });\n    }, 0);\n  };\n\n  /**\n   * Hide tooltip\n   */\n  private hide = (): void => {\n    // Hide the tooltip\n    this.mgTooltipContent.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n      localWindow.removeEventListener('keyboard', this.pressEscape, false);\n    });\n  };\n\n  /**\n   * Check if clicked outside of component and hidde tooltip\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n  };\n\n  /**\n   * Check if 'Escape' key is pressed of component and hidde tooltip\n   * @param event - keyboard event\n   */\n  private pressEscape = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape') {\n      this.setDisplay(false);\n      this.resetGuard();\n    }\n  };\n\n  /**\n   * Method to set display prop\n   * @param newValue - display prop new value\n   * @param condition - additionnal condition to apply display prop newValue\n   */\n  private setDisplay = (newValue: boolean, condition = true): void => {\n    if (!this.disabled && condition) this.display = newValue;\n  };\n\n  /**\n   * Action for tooltip element and tooltiped element mouse listener\n   * @param elementGuard -  tooltip element guard\n   * @param isMouseenter - mouseenter validation\n   * @param conditionalGuard - guard condition\n   */\n  private tooltipMouseListenerAction = (elementGuard: Guard, isMouseenter: boolean, conditionalGuard: Guard): void => {\n    // we mutate elementGuard\n    if (this.guard !== Guard.FOCUS) {\n      this.guard = elementGuard;\n      if (!isMouseenter) {\n        setTimeout(() => {\n          this.setDisplay(isMouseenter, this.guard !== conditionalGuard);\n          this.resetGuard();\n        }, 100);\n      } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n        this.setDisplay(isMouseenter);\n      }\n    }\n  };\n\n  /**\n   * Method to reset guard value\n   */\n  private resetGuard = (): void => {\n    this.guard = undefined;\n  };\n\n  /**\n   * Update slot content when it is a mg-button\n   * @param mgButton - slotted mg-button\n   */\n  private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n    if (mgButton.disabled) {\n      const div = document.createElement('div');\n      div.classList.add('mg-tooltip__mg-button-wrapper');\n      mgButton.parentNode.insertBefore(div, mgButton);\n      div.appendChild(mgButton);\n      this.tooltipedElement = div;\n    } else if (mgButton.parentElement.classList.contains('mg-tooltip__mg-button-wrapper')) {\n      this.element.firstElementChild.replaceWith(mgButton);\n      this.tooltipedElement = mgButton;\n    }\n  };\n\n  /**\n   * Init tooltip\n   * @param slotElement - slotted element\n   * @param interactiveElement - interactive element\n   */\n  private initTooltip = (slotElement: HTMLElement, interactiveElement: HTMLElement): void => {\n    // Add tabindex to slotted element if we can't find any interactive element\n    if (!this.disabled && !Boolean(interactiveElement)) {\n      this.hasCustomTabIndex = true;\n      slotElement.tabIndex = 0;\n      // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n      slotElement.setAttribute('role', 'button');\n    }\n    // Set aria-describedby\n    const ariaDescribedby = slotElement.getAttribute('aria-describedby');\n\n    if (ariaDescribedby === null) {\n      this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n    } else {\n      // We ensure to have uniq ids\n      slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n    }\n\n    // Create popperjs tooltip\n    this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 8],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // Manage tooltipedElement focus/blur events\n    this.tooltipedElement.addEventListener('focus', () => {\n      this.guard = Guard.FOCUS;\n      this.setDisplay(true);\n    });\n\n    // as `click` event is the composition of `mousedown` and `mouseup` event,\n    // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n    // we reset the guard on `mouseup` event to unlock tooltip\n    this.tooltipedElement.addEventListener('mouseup', () => {\n      this.resetGuard();\n    });\n\n    this.tooltipedElement.addEventListener('blur', () => {\n      this.resetGuard();\n      this.setDisplay(false);\n    });\n\n    document.addEventListener('keydown', this.pressEscape);\n\n    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n    ['mouseenter', 'mouseleave'].forEach(eventType => {\n      const isMouseenter = eventType === 'mouseenter';\n      [\n        { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },\n        { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },\n      ].forEach(({ element, action }) => {\n        element.addEventListener(eventType, () => {\n          action();\n        });\n      });\n    });\n  };\n\n  /**\n   * Render tooltip content element\n   */\n  private renderTooltipContent(): void {\n    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');\n    if (mgTooltipContent === null) {\n      const mgTooltipContent = document.createElement('mg-tooltip-content');\n      mgTooltipContent.setAttribute('slot', 'content');\n      mgTooltipContent.setAttribute('id', this.identifier);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      mgTooltipContent.appendChild(arrow);\n\n      // append tooltip element to component\n      this.element.appendChild(mgTooltipContent);\n    } else {\n      mgTooltipContent.setAttribute('id', this.identifier);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * set variables\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n\n    // Get tooltip element\n    this.renderTooltipContent();\n    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n    //validate properties\n    this.validateDisabled(this.disabled);\n    this.validateMessage(this.message);\n    this.validateIdentifier();\n  }\n\n  /**\n   * Get slotted element\n   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n   * We need to attach the focused element to the tooltip (aria-describedby)\n   */\n  componentDidLoad(): void {\n    // get slotted element wich is not the tooltip\n    const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n    // Get interactive element\n    const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n    // define selected element to become tooltip selector\n    this.tooltipedElement = interactiveElement || slotElement;\n\n    // Check if slotted element is a disabled mg-button\n    // In this case we wrap the mg-button into a div to enable the tooltip\n    if (isButton(slotElement)) {\n      new MutationObserver(mutationList => {\n        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {\n          this.setMgButtonWrapper(slotElement);\n          // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n          // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n          this.resetGuard();\n          this.initTooltip(slotElement, interactiveElement);\n        }\n      }).observe(slotElement, { attributes: true });\n      this.setMgButtonWrapper(slotElement);\n    }\n\n    // Init Tooltip\n    this.initTooltip(slotElement, interactiveElement);\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/popper.js

@@ -1796,3 +1796,5 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 export { createPopper as c };
+
+//# sourceMappingURL=popper.js.map