@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, allItemsAreString, isValidString } from "../../../utils/components.utils";
+import { createID, ClassList, allItemsAreString, isValidString, nextTick } from "../../../utils/components.utils";
 import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
@@ -8,361 +8,366 @@ import { sizes, Status } from "./mg-tabs.conf";
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    // classes
-    this.tabPanel = 'panel';
-    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
-     * @param status - status to valide
-     * @returns status comparaison
-     */
-    this.tabHasStatus = (tab, status) => tab.status === status;
-    /**
-     * Method to get element id from index
-     * @param element - to get id
-     * @param index - to generate id
-     * @returns generated element id
-     */
-    this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
-    /**
-     * Method to get tab item index
-     * @param index - to get
-     * @returns index
-     */
-    this.getTabItemIndex = (index) => index + this.startIndex;
-    /**
-     * Handle click events on tabs
-     * @param event - mouse event
-     */
-    this.handleClick = (event) => {
-      const tabId = event.currentTarget.dataset.index;
-      if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
-        event.preventDefault();
-      }
-      else {
-        this.activeTab = Number(tabId);
-        this.tabFocus = undefined;
-      }
-    };
-    /**
-     * get navigation button class from given status
-     * @param status - button tab status
-     * @returns button class/selector variant
-     */
-    this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
-    /**
-     * Handle keyboard event on tabs
-     * @param event - mouse event
-     */
-    this.handleKeydown = (event) => {
-      const parent = event.target.parentElement;
-      if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-        this.tabFocus = Number(event.target.dataset.index);
-        parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
-        // Move right
-        if (event.key === 'ArrowRight') {
-          this.tabFocus++;
-          // If we're at the end, go to the start
-          if (this.tabFocus > this.tabs.length)
-            this.tabFocus = this.startIndex;
-          // Move left
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        // classes
+        this.tabPanel = 'panel';
+        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
+         * @param status - status to valide
+         * @returns status comparaison
+         */
+        this.tabHasStatus = (tab, status) => tab.status === status;
+        /**
+         * Method to get element id from index
+         * @param element - to get id
+         * @param index - to generate id
+         * @returns generated element id
+         */
+        this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
+        /**
+         * Method to get tab item index
+         * @param index - to get
+         * @returns index
+         */
+        this.getTabItemIndex = (index) => index + this.startIndex;
+        /**
+         * Handle click events on tabs
+         * @param event - mouse event
+         */
+        this.handleClick = (event) => {
+            const tabId = event.currentTarget.dataset.index;
+            if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
+                event.preventDefault();
+            }
+            else {
+                this.activeTab = Number(tabId);
+                this.tabFocus = undefined;
+            }
+        };
+        /**
+         * get navigation button class from given status
+         * @param status - button tab status
+         * @returns button class/selector variant
+         */
+        this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
+        /**
+         * Handle keyboard event on tabs
+         * @param event - mouse event
+         */
+        this.handleKeydown = (event) => {
+            const parent = event.target.parentElement;
+            if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+                this.tabFocus = Number(event.target.dataset.index);
+                parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
+                // Move right
+                if (event.key === 'ArrowRight') {
+                    this.tabFocus++;
+                    // If we're at the end, go to the start
+                    if (this.tabFocus > this.tabs.length)
+                        this.tabFocus = this.startIndex;
+                    // Move left
+                }
+                else if (event.key === 'ArrowLeft') {
+                    this.tabFocus--;
+                    // If we're at the start, move to the end
+                    if (this.tabFocus < this.startIndex)
+                        this.tabFocus = this.tabs.length;
+                }
+                const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
+                // if focus item is ['hidden'] we recursively repeat action
+                if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
+                    parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+                    // else run focus methods on tabFocus element
+                }
+                else {
+                    parentButtonElement.setAttribute('tabindex', '0');
+                    parentButtonElement.focus();
+                }
+            }
+            else if (event.key === 'Tab') {
+                this.resetFocus();
+            }
+        };
+        /**
+         * Method to reset focus behavior
+         */
+        this.resetFocus = () => {
+            // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
+            nextTick(() => {
+                this.tabFocus = undefined;
+                Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
+                    tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
+                });
+            });
+        };
+        /**
+         * Validate slots setting
+         */
+        this.validateSlots = () => {
+            const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+            if (slots.length !== this.tabs.length)
+                throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
+        };
+        this.identifier = createID('mg-tabs');
+        this.label = undefined;
+        this.size = 'regular';
+        this.items = undefined;
+        this.activeTab = undefined;
+        this.tabs = [];
+        this.classCollection = new ClassList(['mg-c-tabs']);
+    }
+    validateLabel(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error('<mg-tabs> prop "label" is required.');
+        }
+    }
+    validateSize(newValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
         }
-        else if (event.key === 'ArrowLeft') {
-          this.tabFocus--;
-          // If we're at the start, move to the end
-          if (this.tabFocus < this.startIndex)
-            this.tabFocus = this.tabs.length;
+        this.classCollection.add(`mg-c-tabs--size-${this.size}`);
+    }
+    validateItems(newValue) {
+        // String array
+        if (allItemsAreString(newValue))
+            this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+        // Object array
+        else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
+            this.tabs = newValue;
+        else
+            throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+    }
+    validateActiveTab(newValue) {
+        // 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;
         }
-        const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
-        // if focus item is ['hidden'] we recursively repeat action
-        if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
-          parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
-          // else run focus methods on tabFocus element
+        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 (this.isActivableTab(tab) && isNewActiveTab)
+                    tab.status = Status.ACTIVE;
+            });
+            // emit change active tab key event
+            this.activeTabChange.emit(newValue);
         }
         else {
-          parentButtonElement.setAttribute('tabindex', '0');
-          parentButtonElement.focus();
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
         }
-      }
-      else if (event.key === 'Tab') {
-        this.resetFocus();
-      }
-    };
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Method to reset focus behavior
+     * Check if component props are well configured on init
      */
-    this.resetFocus = () => {
-      // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-      setTimeout(() => {
-        this.tabFocus = undefined;
-        Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
-          tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
-        });
-      }, 0);
-    };
+    componentWillLoad() {
+        // Check tabs format
+        this.validateLabel(this.label);
+        this.validateItems(this.items);
+        this.validateActiveTab(this.activeTab);
+        this.validateSize(this.size);
+        this.validateSlots();
+    }
     /**
-     * Validate slots setting
+     * add listners
      */
-    this.validateSlots = () => {
-      const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-      if (slots.length !== this.tabs.length)
-        throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-    };
-    this.identifier = createID('mg-tabs');
-    this.label = undefined;
-    this.size = 'regular';
-    this.items = undefined;
-    this.activeTab = undefined;
-    this.tabs = [];
-    this.classCollection = new ClassList(['mg-c-tabs']);
-  }
-  validateLabel(newValue) {
-    if (!isValidString(newValue)) {
-      throw new Error('<mg-tabs> prop "label" is required.');
+    componentDidLoad() {
+        document.addEventListener('click', (event) => {
+            if (event.target.closest('mg-tabs') !== this.element)
+                this.resetFocus();
+        }, false);
     }
-  }
-  validateSize(newValue) {
-    if (!sizes.includes(newValue)) {
-      throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
-    }
-    this.classCollection.add(`mg-c-tabs--size-${this.size}`);
-  }
-  validateItems(newValue) {
-    // String array
-    if (allItemsAreString(newValue))
-      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
-    // Object array
-    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
-      this.tabs = newValue;
-    else
-      throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
-  }
-  validateActiveTab(newValue) {
-    // 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;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        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-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
     }
-    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 (this.isActivableTab(tab) && isNewActiveTab)
-          tab.status = Status.ACTIVE;
-      });
-      // emit change active tab key event
-      this.activeTabChange.emit(newValue);
+    static get is() { return "mg-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
+        };
     }
-    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".`);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
+        };
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Check tabs format
-    this.validateLabel(this.label);
-    this.validateItems(this.items);
-    this.validateActiveTab(this.activeTab);
-    this.validateSize(this.size);
-    this.validateSlots();
-  }
-  /**
-   * add listners
-   */
-  componentDidLoad() {
-    document.addEventListener('click', (event) => {
-      if (event.target.closest('mg-tabs') !== this.element)
-        this.resetFocus();
-    }, false);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    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-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
-  }
-  static get is() { return "mg-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-tabs')"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tabs label. Include short tabs description.\nRequired for accessibility"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SizeType",
-          "resolved": "\"large\" | \"regular\"",
-          "references": {
-            "SizeType": {
-              "location": "import",
-              "path": "./mg-tabs.conf",
-              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::SizeType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define tabs size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'regular'"
-      },
-      "items": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | TabItem[]",
-          "resolved": "TabItem[] | string[]",
-          "references": {
-            "TabItem": {
-              "location": "import",
-              "path": "./mg-tabs.conf",
-              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::TabItem"
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-tabs')"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tabs label. Include short tabs description.\nRequired for accessibility"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SizeType",
+                    "resolved": "\"large\" | \"regular\"",
+                    "references": {
+                        "SizeType": {
+                            "location": "import",
+                            "path": "./mg-tabs.conf",
+                            "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::SizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tabs size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | TabItem[]",
+                    "resolved": "TabItem[] | string[]",
+                    "references": {
+                        "TabItem": {
+                            "location": "import",
+                            "path": "./mg-tabs.conf",
+                            "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::TabItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tabs items"
+                }
+            },
+            "activeTab": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active tab number"
+                },
+                "attribute": "active-tab",
+                "reflect": true
             }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tabs items"
-        }
-      },
-      "activeTab": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Active tab number"
-        },
-        "attribute": "active-tab",
-        "reflect": true
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "classCollection": {}
-    };
-  }
-  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": "label",
-        "methodName": "validateLabel"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }, {
-        "propName": "items",
-        "methodName": "validateItems"
-      }, {
-        "propName": "activeTab",
-        "methodName": "validateActiveTab"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "tabs": {},
+            "classCollection": {}
+        };
+    }
+    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": "HTMLMgTabsElement['activeTab']",
+                    "resolved": "number",
+                    "references": {
+                        "HTMLMgTabsElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgTabsElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "validateLabel"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "items",
+                "methodName": "validateItems"
+            }, {
+                "propName": "activeTab",
+                "methodName": "validateActiveTab"
+            }];
+    }
 }
 //# sourceMappingURL=mg-tabs.js.map