@mgdis/mg-components 3.2.0 → 4.0.1

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -9,25 +9,34 @@
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 1rem 0 0.3rem;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .mg-panel__header-left,
 .mg-panel__header-right {
   display: flex;
-  flex-grow: 1;
   margin: 0.3rem 0;
 }
 
+.mg-panel__header-left--full {
+  flex: 1 1 auto;
+}
+
+.mg-panel__header-right {
+  flex: 1 auto;
+}
+
 .mg-panel__header-left mg-input-text {
   flex-grow: 1;
 }
 
-.mg-panel__collapse-button {
+.mg-panel__header-left mg-button:not([slot=append-input]) {
+  margin: 0 0.3rem 0 0;
+}
+.mg-panel__header-left mg-button:not([slot=append-input]) > *:first-of-type {
   font-family: var(--font-family-heading);
   font-size: 1.4rem;
   font-weight: 500;
-  margin: 0 0.3rem 0 0;
 }
 
 .mg-panel__content {

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -1,11 +1,8 @@
-import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch, Event } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPanel {
   constructor() {
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -15,6 +12,10 @@ export class MgPanel {
      * Panel is opened
      */
     this.expanded = false;
+    /**
+     * Disable possibility to toggle expand
+     */
+    this.expandToggleDisabled = false;
     /**
      * Panel title is editabled
      */
@@ -47,7 +48,9 @@ export class MgPanel {
      * @returns {void}
      */
     this.handleCollapseButton = () => {
-      this.expanded = !this.expanded;
+      if (!this.expandToggleDisabled) {
+        this.expanded = !this.expanded;
+      }
     };
     /**
      * Edit button click handler
@@ -81,13 +84,12 @@ export class MgPanel {
      * @returns {void}
      */
     this.handleValidateEditButton = () => {
-      if (this.updatedPanelTitle !== undefined)
-        this.panelTitle = this.updatedPanelTitle;
-      this.toggleIsEditing();
+      if (this.editInputElement.valid) {
+        if (this.updatedPanelTitle !== undefined)
+          this.panelTitle = this.updatedPanelTitle;
+        this.toggleIsEditing();
+      }
     };
-    /*************
-     * Lifecycle *
-     *************/
     /**
      * Header left conditional render
      *
@@ -95,23 +97,23 @@ export class MgPanel {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content` },
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled },
         h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }),
         !this.isEditing && this.panelTitle));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "secondary", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
+          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
             h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
-            h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
+          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
+            h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
               h("mg-icon", { icon: "cross" })),
-            h("mg-button", { slot: "append-input", label: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
+            h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
               h("mg-icon", { icon: "check" }))),
         ];
       }
@@ -121,6 +123,31 @@ export class MgPanel {
   handelTileChange(newValue) {
     this.titleChange.emit(newValue);
   }
+  validatetitlePattern(newValue) {
+    if (newValue && !this.titleEditable) {
+      throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
+    }
+    if (newValue && this.titlePatternErrorMessage === undefined) {
+      throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
+    }
+  }
+  handleExpanded(newValue) {
+    this.expandedChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
+    this.validatetitlePattern(this.titlePattern);
+  }
   /**
    * Edit DOM after render
    *
@@ -140,7 +167,7 @@ export class MgPanel {
   render() {
     return (h("section", { class: this.classList.join(), id: this.identifier },
       h("header", { class: "mg-panel__header", id: `${this.identifier}-header` },
-        h("div", { class: "mg-panel__header-left" }, this.headerLeft()),
+        h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()),
         h("div", { class: "mg-panel__header-right" },
           h("slot", { name: "header-right" }))),
       h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded },
@@ -190,6 +217,40 @@ export class MgPanel {
       "attribute": "panel-title",
       "reflect": false
     },
+    "titlePattern": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title pattern"
+      },
+      "attribute": "title-pattern",
+      "reflect": false
+    },
+    "titlePatternErrorMessage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title pattern error message"
+      },
+      "attribute": "title-pattern-error-message",
+      "reflect": false
+    },
     "expanded": {
       "type": "boolean",
       "mutable": true,
@@ -208,6 +269,24 @@ export class MgPanel {
       "reflect": false,
       "defaultValue": "false"
     },
+    "expandToggleDisabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable possibility to toggle expand"
+      },
+      "attribute": "expand-toggle-disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "titleEditable": {
       "type": "boolean",
       "mutable": false,
@@ -247,9 +326,31 @@ export class MgPanel {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "expandedChange",
+      "name": "expanded-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when expanded change"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "panelTitle",
       "methodName": "handelTileChange"
+    }, {
+      "propName": "titlePattern",
+      "methodName": "validatetitlePattern"
+    }, {
+      "propName": "expanded",
+      "methodName": "handleExpanded"
     }]; }
 }

package/dist/collection/components/molecules/mg-popover/{mg-popover.stories.js → doc/mg-popover.stories.js}

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
   title: 'Molecules/mg-popover',
@@ -6,6 +7,15 @@ export default {
     layout: 'centered',
     docs: { iframeHeight: 600 },
   },
+  argTypes: {
+    placement: {
+      options: placements,
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: placements[0] },
+      },
+    },
+  },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}

package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js

@@ -0,0 +1,20 @@
+/**
+ * List of all possibles placements
+ */
+export const placements = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+];

package/dist/collection/components/molecules/mg-popover/mg-popover.js

@@ -1,7 +1,7 @@
 import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
@@ -32,8 +32,6 @@ export class MgPopover {
      * @param {MouseEvent} event mouse event
      * @returns {void}
      */
-    // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
-    /* istanbul ignore next */
     this.clickOutside = (event) => {
       var _a;
       if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
@@ -55,8 +53,6 @@ export class MgPopover {
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
-        // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
-        /* istanbul ignore next */
         document.addEventListener('click', this.clickOutside, false);
       }, 0);
     };
@@ -70,7 +66,7 @@ export class MgPopover {
       this.popover.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove even listener
+      // Remove event listener
       document.removeEventListener('click', this.clickOutside, false);
     };
     /**
@@ -93,6 +89,15 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
   /**
    * Check if component props are well configured on init
    *
@@ -149,7 +154,7 @@ export class MgPopover {
     return (h(Host, null,
       h("slot", null),
       h("div", { id: this.identifier, class: "mg-popover" },
-        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.general.close, onClick: this.handleCloseButton },
+        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton },
           h("mg-icon", { icon: "cross" }))),
         h("div", { class: "mg-popover__title" },
           h("slot", { name: "title" })),
@@ -187,9 +192,14 @@ export class MgPopover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "original": "Placement",
         "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "./mg-popover.conf"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/molecules/mg-tabs/{mg-tabs.stories.js → doc/mg-tabs.stories.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { sizes } from './mg-tabs.conf';
+import { sizes, Status } from '../mg-tabs.conf';
 export default {
   component: 'mg-tabs',
   title: 'Molecules/mg-tabs',
@@ -9,6 +9,7 @@ export default {
       control: { type: 'select' },
     },
   },
+  parameters: { actions: { handles: ['active-tab-change'] } },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
@@ -21,17 +22,18 @@ const Template = args => {
   return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
     h("div", { slot: "tab_content-1" }, "Content 1"),
     h("div", { slot: "tab_content-2" }, "Content 2"),
-    h("div", { slot: "tab_content-3" }, "Content 3")));
+    h("div", { slot: "tab_content-3" }, "Content 3"),
+    h("div", { slot: "tab_content-4" }, "Content 4")));
 };
 export const MgTabs = Template.bind({});
 MgTabs.args = {
-  items: ['Tab 1', 'Tab 2', 'Tab 3'],
+  items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
   label: 'Short tabs description. Needed for accessibility',
   activeTab: undefined,
   size: sizes[0], // regular
 };
 export const MgTabsItems = Template.bind({});
-MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3, items: [
     {
       label: 'Tab 1',
       icon: 'check',
@@ -40,10 +42,15 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
     {
       label: 'Tab 2',
       badge: { value: 5, label: 'messages' },
-      disabled: true,
+      status: Status.DISABLED,
     },
     {
       label: 'Tab 3',
       icon: 'cross',
     },
+    {
+      label: 'Tab 4',
+      icon: 'trash',
+      status: Status.HIDDEN,
+    },
   ] });

package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js

@@ -1,3 +1,10 @@
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
 /**
  * List of all possibles sizes
  */

package/dist/collection/components/molecules/mg-tabs/mg-tabs.css

@@ -35,6 +35,9 @@
   border-bottom-color: hsl(var(--color-info));
   font-weight: 700;
 }
+.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden {
+  display: none;
+}
 
 .mg-tabs__content-container:focus-visible {
   outline: none;

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -1,6 +1,6 @@
-import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
-import { sizes } from './mg-tabs.conf';
+import { sizes, Status } from './mg-tabs.conf';
 /**
  * type TabItem validation function
  *
@@ -10,6 +10,12 @@ import { sizes } from './mg-tabs.conf';
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    this.tabPanel = 'panel';
+    this.startIndex = 1;
+    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -32,6 +38,46 @@ export class MgTabs {
      * Component classes
      */
     this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
      *
@@ -41,6 +87,14 @@ export class MgTabs {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -51,16 +105,14 @@ export class MgTabs {
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -86,7 +138,7 @@ export class MgTabs {
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -97,9 +149,12 @@ export class MgTabs {
     }
   }
   validateActiveTab(newValue) {
-    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+    if (newValue < 1 || newValue > this.tabs.length) {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
+    else {
+      this.setActiveTab(newValue);
+    }
   }
   /*************
    * Lifecycle *
@@ -124,25 +179,19 @@ export class MgTabs {
   render() {
     return (h(Host, null,
       h("div", { class: this.classList.join() },
-        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
-          const tabIndex = index + 1;
-          return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
-              'mg-tabs__navigation-button': true,
-              'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
-              'mg-tabs__navigation-button--disabled': tab.disabled,
-            }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled },
-            tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
-            tab.label,
-            tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-        })),
-        this.tabs.map((_tab, index) => {
-          const tabIndex = index + 1;
-          return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" },
-            h("slot", { name: `tab_content-${tabIndex}` })));
-        }))));
+        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+            [`${this.buttonTabBaseClass}`]: true,
+            [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+            [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+            [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+          }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
+          tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
+          tab.label,
+          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
+        this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
+          h("slot", { name: this.getElementId('tab_content', index) })))))));
   }
   static get is() { return "mg-tabs"; }
-  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["mg-tabs.scss"]
   }; }
@@ -246,6 +295,22 @@ export class MgTabs {
     "tabs": {},
     "classList": {}
   }; }
+  static get events() { return [{
+      "method": "activeTabChange",
+      "name": "active-tab-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emited event when active tab change"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "size",