@mgdis/mg-components 5.28.1 → 5.29.0

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as Ie, C as Ce, H as He, G as Ge } from './index.es.js';
+import { Z as Ze, z as ze, I as Ie, Y as Ye } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-badge2.js';
 import { d as defineCustomElement$5 } from './mg-button2.js';
@@ -112,7 +112,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 (!Ie(element.textContent))
+                    if (!Ze(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);
@@ -181,13 +181,13 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = Ce('mg-menu-item');
+        this.identifier = ze('mg-menu-item');
         this.href = undefined;
         this.target = undefined;
         this.status = Status.VISIBLE;
         this.expanded = false;
         this.size = 'regular';
-        this.navigationButtonClassList = new He([this.navigationButton]);
+        this.navigationButtonClassList = new Ie([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -334,7 +334,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
      * Emit event when component is updated
      */
     componentShouldUpdate() {
-        return Ge(() => {
+        return Ye(() => {
             this.itemUpdated.emit();
         });
     }

package/dist/components/mg-message.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as Ce, H as He } from './index.es.js';
+import { z as ze, I as Ie } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -83,13 +83,13 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
                     return 'exclamation-circle';
             }
         };
-        this.identifier = Ce('mg-message');
+        this.identifier = ze('mg-message');
         this.delay = undefined;
         this.variant = variants[0];
         this.closeButton = false;
         this.hide = false;
         this.noAriaRole = undefined;
-        this.classCollection = new He(['mg-c-message']);
+        this.classCollection = new Ie(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {

package/dist/components/mg-modal.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { W as We, C as Ce, H as He, I as Ie } from './index.es.js';
+import { K as Ke, z as ze, I as Ie, Z as Ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -59,12 +59,12 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
          */
         this.setFocus = () => {
             // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(We));
+            const slottedFocusableElements = Array.from(this.element.querySelectorAll(Ke));
             // If close button is enabled or at least one of the slotted element is focusable
             if (this.closeButton || slottedFocusableElements.length > 0) {
                 // Check if slotted focusable elements have shadowDom with focusable elements
                 this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(We) || focusableElement : focusableElement);
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(Ke) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -86,21 +86,21 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = Ce('mg-modal');
+        this.identifier = ze('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
         this.hide = undefined;
         this.hasActions = false;
         this.hasContent = false;
-        this.classCollection = new He(['mg-c-modal']);
+        this.classCollection = new Ie(['mg-c-modal']);
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
             throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
     }
     validateModalTitle(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }

package/dist/components/mg-pagination2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as Ce } from './index.es.js';
+import { z as ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$7 } from './mg-button2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -72,7 +72,7 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = Ce('mg-pagination');
+        this.identifier = ze('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;

package/dist/components/mg-panel.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as Ce, H as He, I as Ie } from './index.es.js';
+import { z as ze, I as Ie, Z as Ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$a } from './mg-button2.js';
 import { d as defineCustomElement$9 } from './mg-card2.js';
@@ -122,7 +122,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = Ce('mg-panel');
+        this.identifier = ze('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -131,12 +131,12 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new He(['mg-c-panel']);
+        this.classCollection = new Ie(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!Ie(newValue))
+        if (!Ze(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { H as He, B as Be } from './index.es.js';
+import { I as Ie, X as Xe } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-card2.js';
@@ -21,7 +21,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
             this.hideContent.emit();
         };
         this.closeButton = false;
-        this.classCollection = new He(['mg-c-popover-content']);
+        this.classCollection = new Ie(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -39,7 +39,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !Be(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !Xe(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
     }

package/dist/components/mg-popover2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as Ce, z as ze } from './index.es.js';
+import { z as ze, Q as Qe } from './index.es.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
@@ -103,7 +103,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = Ce('mg-popover');
+        this.identifier = ze('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -146,7 +146,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = ze(window);
+        this.windows = Qe(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { I as Ie } from './index.es.js';
+import { Z as Ze } from './index.es.js';
 
 const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;background:hsl(var(--color-light));opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:.64rem 1.8rem;margin:0;gap:.6rem;list-style:none}.mg-c-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-c-skip-links__link:hover{background:hsl(var(--color-dark)/10%)}";
 const MgSkipLinksStyle0 = mgSkipLinksCss;
@@ -25,7 +25,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !Ie(link.href) || !link.href.startsWith('#') || !Ie(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !Ze(link.href) || !link.href.startsWith('#') || !Ze(link.label))) {
             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.`);
         }
     }
@@ -44,7 +44,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '2dac1b6dab0eb2634b803240325822ea3c8bae63', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'e050de2426d080ede6a2b983ec0f9452b0e0f43b', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: 'e5a7020edfe2e491af48785f3d9fa9bede770ae5', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'da692631900bb61269803e93718d0dacdb6a5e8a', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"mg-skip-links.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,0dAA0d,CAAC;AAClf,0BAAe,cAAc;;MCUhBA,aAAW;;;;;;;;;;;;;QAwCd,oBAAe,GAAG,CAAC,KAAkD;YAC3E,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;SAChE,CAAC;;;IAtBF,aAAa,CAAC,KAAiB;QAC7B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,CAACC,EAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAACA,EAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;YAC1J,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;SAC5J;KACF;;;;;;;IA2BD,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,IACzF,2DAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAChB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgSkipLinks","isValidString"],"sources":["../styles/dist/components/mg-skip-links.css?tag=mg-skip-links&encapsulation=shadow","src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"sourcesContent":[".mg-c-skip-links{position:absolute;background:hsl(var(--color-light));opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:.64rem 1.8rem;margin:0;gap:.6rem;list-style:none}.mg-c-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-c-skip-links__link:hover{background:hsl(var(--color-dark)/10%)}/*# sourceMappingURL=mg-skip-links.css.map */\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';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css',\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 (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {\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-c-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-c-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-c-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}
+{"file":"mg-skip-links.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,0dAA0d,CAAC;AAClf,0BAAe,cAAc;;MCShBA,aAAW;;;;;;;;;;;;;QAwCd,oBAAe,GAAG,CAAC,KAAkD;YAC3E,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;SAChE,CAAC;;;IAtBF,aAAa,CAAC,KAAiB;QAC7B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,CAACC,EAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAACA,EAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;YAC1J,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;SAC5J;KACF;;;;;;;IA2BD,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,IACzF,2DAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAChB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgSkipLinks","isValidString"],"sources":["../styles/dist/components/mg-skip-links.css?tag=mg-skip-links&encapsulation=shadow","src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"sourcesContent":[".mg-c-skip-links{position:absolute;background:hsl(var(--color-light));opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:.64rem 1.8rem;margin:0;gap:.6rem;list-style:none}.mg-c-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-c-skip-links__link:hover{background:hsl(var(--color-dark)/10%)}/*# sourceMappingURL=mg-skip-links.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css',\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 (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {\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-c-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-c-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-c-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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { G as Ge, C as Ce, H as He, I as Ie, P as Pe } from './index.es.js';
+import { Y as Ye, z as ze, I as Ie, Z as Ze, G as Ge } from './index.es.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
@@ -129,7 +129,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            Ge(() => {
+            Ye(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -144,16 +144,16 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = Ce('mg-tabs');
+        this.identifier = ze('mg-tabs');
         this.label = undefined;
         this.size = 'regular';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new He(['mg-c-tabs']);
+        this.classCollection = new Ie(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -165,7 +165,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
     }
     validateItems(newValue) {
         // String array
-        if (Pe(newValue))
+        if (Ge(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))

package/dist/components/mg-tag.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { H as He, I as Ie } from './index.es.js';
+import { I as Ie, Z as Ze } from './index.es.js';
 
 /**
  * List of all possibles variants
@@ -23,7 +23,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new He(['mg-c-tag']);
+        this.classCollection = new Ie(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -60,7 +60,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!Ie(textContent))
+        if (!Ze(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************

package/dist/components/mg-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { G as Ge, C as Ce, I as Ie, z as ze, W as We } from './index.es.js';
+import { Y as Ye, z as ze, Z as Ze, Q as Qe, K as Ke } from './index.es.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 import { c as createPopper } from './popper.js';
 
@@ -34,7 +34,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             // Enable the event listeners
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            Ge(() => {
+            Ye(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -224,7 +224,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
                 element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
             }
         };
-        this.identifier = Ce('mg-tooltip');
+        this.identifier = ze('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
@@ -235,7 +235,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
@@ -290,7 +290,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = ze(window);
+        this.windows = Qe(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
@@ -308,7 +308,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(We) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(We);
+        const interactiveElement = slotElement.matches(Ke) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Ke);
         this.setTooltipedElement(interactiveElement || slotElement);
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip

package/dist/esm/{index-9ed65b6d.js → index-0df3b137.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'mg-components';
 const BUILD = /* mg-components */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: true, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
- Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.21.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -414,7 +414,20 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
+          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+            if (styleContainerNode.nodeName === "HEAD") {
+              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : document.querySelector("style");
+              styleContainerNode.insertBefore(styleElm, referenceNode2);
+            } else if ("host" in styleContainerNode) {
+              styleContainerNode.prepend(styleElm);
+            } else {
+              styleContainerNode.append(styleElm);
+            }
+          }
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
         }
         if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
           styleElm.innerHTML += SLOT_FB_CSS;
@@ -437,7 +450,7 @@ var attachStyles = (hostRef) => {
   const scopeId2 = addStyle(
     elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
+  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
     if (flags & 2 /* scopedCssEncapsulation */) {
@@ -509,7 +522,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if (memberName === "list") {
               isProp = false;
             } else if (oldValue == null || elm[memberName] != n) {
-              elm[memberName] = n;
+              if (typeof elm.__lookupSetter__(memberName) === "function") {
+                elm[memberName] = n;
+              } else {
+                elm.setAttribute(memberName, n);
+              }
             }
           } else {
             elm[memberName] = newValue;
@@ -618,7 +635,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if (isDef(scopeId) && elm["s-si"] !== scopeId) {
+    const rootNode = elm.getRootNode();
+    const isElementWithinShadowRoot = !rootNode.querySelector("body");
+    if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
     {
@@ -805,6 +824,15 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
     if (leftVNode.$tag$ === "slot") {
+      if (
+        // The component gets hydrated and no VDOM has been initialized.
+        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
+        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
+        // hydration comments to be removed
+        leftVNode.$elm$.nodeType !== 8
+      ) {
+        return false;
+      }
       return leftVNode.$name$ === rightVNode.$name$;
     }
     if (!isInitialRender) {
@@ -838,7 +866,10 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (oldChildren !== null) {
+    } else if (
+      // don't do this on initial render as it can cause non-hydrated content to be removed
+      !isInitialRender && BUILD.updatable && oldChildren !== null
+    ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
   } else if ((defaultHolder = elm["s-cr"])) {
@@ -1330,7 +1361,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
           if (this.hasOwnProperty(propName)) {
             newValue = this[propName];
             delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) {
+          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          this[propName] == newValue) {
             return;
           } else if (propName == null) {
             const hostRef = getHostRef(this);
@@ -1673,4 +1705,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-9ed65b6d.js.map
+//# sourceMappingURL=index-0df3b137.js.map