@mgdis/mg-components 5.18.0 → 5.19.0

package/dist/components/mg-tabs.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, a as allItemsAreString } from './components.utils.js';
+import { c as createID, C as ClassList, i as isValidString, d as allItemsAreString } from './components.utils.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
@@ -18,7 +18,7 @@ var Status;
  */
 const sizes = ['regular', 'large'];
 
-const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-tabs__navigation-button:focus-visible{z-index:10}.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled),.mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl), 0.1)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-tabs__navigation-button.mg-tabs__navigation-button--vertical{border-left:0.3rem solid transparent}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap;border-bottom:var(--mg-tabs-border-bottom)}.mg-tabs__content-container:focus-visible{outline:none}.mg-tabs__navigation-button-text{flex:0 0 content}";
+const mgTabsCss = ".mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl)/10%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-tabs-border-bottom)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
 
 /**
  * type TabItem validation function
@@ -37,8 +37,14 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
      ************/
     // classes
     this.tabPanel = 'panel';
-    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
+    this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
     this.startIndex = 1;
+    /**
+     * Validate that new tab status can be `Status.ACTIVE`
+     * @param tab - tab item
+     * @returns true when tab match condition to get a `Status.ACTIVE`
+     */
+    this.isActivableTab = (tab) => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);
     /**
      * Method to know if given tab has the given status
      * @param tab - item tab key to set to ACTIVE status
@@ -59,19 +65,13 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
      * @returns index
      */
     this.getTabItemIndex = (index) => index + this.startIndex;
-    /**
-     * Method to get the active-tab value
-     * @returns of the active-tab
-     */
-    this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
      * @param event - mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.dataset.index;
-      const tab = this.tabs[Number(tabId) - this.startIndex];
-      if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
+      if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
         event.preventDefault();
       }
       else {
@@ -131,7 +131,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
       setTimeout(() => {
         this.tabFocus = undefined;
         Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
-          tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');
+          tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
         });
       }, 0);
     };
@@ -149,10 +149,10 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
     this.items = undefined;
     this.activeTab = undefined;
     this.tabs = [];
-    this.classCollection = new ClassList(['mg-tabs']);
+    this.classCollection = new ClassList(['mg-c-tabs']);
   }
   validateLabel(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-tabs> prop "label" is required.');
     }
   }
@@ -160,42 +160,42 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
     if (!sizes.includes(newValue)) {
       throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
-    this.classCollection.add(`mg-tabs--size-${this.size}`);
+    this.classCollection.add(`mg-c-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
-    if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));
-    }
+    if (allItemsAreString(newValue))
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     // Object array
-    else if (newValue && newValue.length > 0 && newValue.every(item => isTabItem(item))) {
+    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
       this.tabs = newValue;
-      // init active tabs if not set. Default: index 0.
-      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined)
-        this.tabs[0].status = Status.ACTIVE;
-    }
-    else {
+    else
       throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
-    }
   }
   validateActiveTab(newValue) {
-    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {
+    // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
+    // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
+    if (newValue === undefined) {
+      this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
+        ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
+        : this.startIndex;
+    }
+    else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
+      // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
       this.tabs.forEach((tab, index) => {
         const isNewActiveTab = index === newValue - this.startIndex;
         // reset active tabs
         if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
           tab.status = Status.VISIBLE;
         // set active tab from given tab key
-        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab)
+        else if (this.isActivableTab(tab) && isNewActiveTab)
           tab.status = Status.ACTIVE;
       });
       // emit change active tab key event
-      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {
-        this.activeTabChange.emit(newValue);
-      }
+      this.activeTabChange.emit(newValue);
     }
-    else if (newValue !== undefined) {
-      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    else {
+      throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
     }
   }
   /*************
@@ -226,13 +226,13 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
    * @returns HTML Element
    */
   render() {
-    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
         [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
         [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   get element() { return this; }
   static get watchers() { return {

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

@@ -1 +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}
+{"file":"mg-tabs.js","mappings":"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","names":["MgTabs"],"sources":["src/components/molecules/mg-tabs/mg-tabs.conf.ts","../styles/dist/components/mg-tabs.css?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",".mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl)/10%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-tabs-border-bottom)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}/*# sourceMappingURL=mg-tabs.css.map */\n","import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString } 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: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-c-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 (!isValidString(newValue)) {\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-c-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)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n    // Object array\n    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n    else throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\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    // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n    // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n    if (newValue === undefined) {\n      this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n        ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n        : this.startIndex;\n    } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n      // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\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 (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      this.activeTabChange.emit(newValue);\n    } else {\n      throw new Error(`<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\".`);\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-c-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<number>;\n\n  /**\n   * Validate that new tab status can be `Status.ACTIVE`\n   * @param tab - tab item\n   * @returns true when tab match condition to get a `Status.ACTIVE`\n   */\n  private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\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   * 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    if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\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.activeTab - 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-c-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-c-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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 
 /**
  * List of all possibles variants
  */
 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 mgTagCss = ":host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-tag-height) - .2rem - var(--mg-tag-font-size)*var(--line-height))/2) .6rem;border:.1rem solid;border-radius:var(--mg-tag-border-radius);font-size:var(--mg-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));background-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));background-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}::slotted(mg-icon){margin-right:.4rem}slot{display:inline-flex;align-items:center}";
 
 const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement {
   constructor() {
@@ -17,12 +17,12 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
      * Internal *
      ************/
     // Classes
-    this.classOutline = 'mg-tag--outline';
-    this.classSoft = 'mg-tag--soft';
+    this.classOutline = 'mg-c-tag--outline';
+    this.classSoft = 'mg-c-tag--soft';
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
-    this.classCollection = new ClassList(['mg-tag']);
+    this.classCollection = new ClassList(['mg-c-tag']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -30,9 +30,9 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-tag--${oldValue}`);
+        this.classCollection.delete(`mg-c-tag--${oldValue}`);
       }
-      this.classCollection.add(`mg-tag--${newValue}`);
+      this.classCollection.add(`mg-c-tag--${newValue}`);
     }
   }
   validateOutline(newValue) {
@@ -59,7 +59,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
    * @param textContent - html element textContent property
    */
   validateTextContent(textContent) {
-    if (typeof textContent !== 'string' || textContent.trim() === '')
+    if (!isValidString(textContent))
       throw new Error('<mg-tag> slot must contain a text content.');
   }
   /*************

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

@@ -1 +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}
+{"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,y9HAAy9H;;MCQ79HA,OAAK;;;;;;;;;IAMC,iBAAY,GAAG,mBAAmB,CAAC;IACnC,cAAS,GAAG,gBAAgB,CAAC;mBAcZ,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;EAtCjE,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,aAAa,QAAQ,EAAE,CAAC,CAAC;OACtD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;KACnD;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,CAAC,aAAa,CAAC,WAAW,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;GAChG;;;;;;;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","../styles/dist/components/mg-tag.css?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",":host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-tag-height) - .2rem - var(--mg-tag-font-size)*var(--line-height))/2) .6rem;border:.1rem solid;border-radius:var(--mg-tag-border-radius);font-size:var(--mg-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));background-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));background-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}::slotted(mg-icon){margin-right:.4rem}slot{display:inline-flex;align-items:center}/*# sourceMappingURL=mg-tag.css.map */\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-tag',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css',\n  shadow: true,\n})\nexport class MgTag {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = 'mg-c-tag--outline';\n  private readonly classSoft = 'mg-c-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-c-tag--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-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-c-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 (!isValidString(textContent)) 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-content2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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 mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:40rem;box-sizing:border-box;padding:.5rem .8rem;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}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:.8rem;height:.8rem;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-0.4rem}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-0.4rem}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-0.4rem}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-0.4rem}";
 
 const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
   constructor() {

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

@@ -1 +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}
+{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,o3BAAo3B;;MCOn4B,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":["../styles/dist/components/mg-tooltip-content.css?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host{z-index:1000;display:none;max-width:40rem;box-sizing:border-box;padding:.5rem .8rem;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}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:.8rem;height:.8rem;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-0.4rem}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-0.4rem}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-0.4rem}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-0.4rem}/*# sourceMappingURL=mg-tooltip-content.css.map */\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip-content.css',\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-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createID, g as getWindows, f as focusableElements } from './components.utils.js';
+import { c as createID, i as isValidString, g as getWindows, f as focusableElements } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 import { c as createPopper } from './popper.js';
 
@@ -115,12 +115,12 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
     this.setMgButtonWrapper = (mgButton) => {
       if (mgButton.disabled) {
         const div = document.createElement('div');
-        div.classList.add('mg-tooltip__mg-button-wrapper');
+        div.classList.add('mg-c-tooltip__mg-button-wrapper');
         mgButton.parentNode.insertBefore(div, mgButton);
         div.appendChild(mgButton);
         this.tooltipedElement = div;
       }
-      else if (mgButton.parentElement.classList.contains('mg-tooltip__mg-button-wrapper')) {
+      else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {
         this.element.firstElementChild.replaceWith(mgButton);
         this.tooltipedElement = mgButton;
       }
@@ -206,7 +206,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
     this.renderTooltipContent();
   }
   validateMessage(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
     this.mgTooltipContent.message = newValue;

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

@@ -1 +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}
+{"file":"mg-tooltip2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?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{display:inline-block}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValidString } 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: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\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: MgTooltip['message']): void {\n    if (!isValidString(newValue)) {\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: MgTooltip['display']): 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: MgTooltip['display'], 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-c-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-c-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}