wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/tabs-group/vds-tabs-group.js

@@ -0,0 +1,387 @@
+import { Host, h, forceUpdate } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsTabsGroup {
+    constructor() {
+        /** Sets the type for the tabs group */
+        this.type = 'default';
+        /** Sets the alignment for the tabs */
+        this.tabAlignment = 'flex-start';
+        /** Shows the indicator track under the tab*/
+        this.showTrack = false;
+        /** Sets the index to select the active tab inside the group.
+         * If not specified, loads the first tab.
+         */
+        this.activeTabIndex = 0;
+        /** Sets tab group to disable state */
+        this.disabled = false;
+        this.internalActiveTabIndex = 0;
+        this.tabs = [];
+    }
+    handleTabSelection(evt) {
+        const target = evt.target;
+        this.internalActiveTabIndex = Number(target === null || target === void 0 ? void 0 : target.getAttribute('vds-tabindex')) || 0;
+        this.activeTabIndex = this.internalActiveTabIndex;
+        this.updateTabsState(this.tabs);
+    }
+    handleValueChanged() {
+        this.updateIndicatorPosition();
+        forceUpdate(this);
+    }
+    componentWillLoad() {
+        try {
+            this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));
+            if (this.tabs.length > 0) {
+                this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length
+                    ? this.activeTabIndex
+                    : 0;
+                this.updateTabsState(this.tabs);
+            }
+        }
+        catch (e) {
+            console.error('componentWillLoad Error: ', e);
+        }
+    }
+    componentDidRender() {
+        if (this.tabs.length > 0) {
+            this.observeActiveTabContent();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    observeActiveTabContent() {
+        var _a;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.activeTab) {
+            const content = (_a = this.activeTab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds__tab--content-active');
+            if (content) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.defineAttributes();
+                    this.updateIndicatorPosition();
+                });
+                this.resizeObserver.observe(content);
+            }
+        }
+    }
+    handleActiveTabIndexChange() {
+        this.updateTabsState(this.tabs);
+    }
+    setDisabledState() {
+        (this.tabs || []).forEach(tab => {
+            tab.disabled = this.disabled;
+        });
+    }
+    /**
+     * Gets the currently active tab index
+     *
+     * @returns {Promise<number>} A promise that resolves with the active tab index.
+     */
+    async getActive() {
+        return this.internalActiveTabIndex;
+    }
+    /**
+     * Sets the active tab index
+     *
+     * @param {number} index - The index of the tab to set as active.
+     */
+    async setActive(index) {
+        this.setActiveTab(index);
+    }
+    setActiveTab(index) {
+        if (this.tabs.length > 0) {
+            this.internalActiveTabIndex = this.validateTabIndex(index);
+            this.activeTabIndex = this.internalActiveTabIndex;
+        }
+    }
+    validateTabIndex(index) {
+        var _a;
+        const isValidIndex = index >= 0 && index < this.tabs.length;
+        const isEnabled = isValidIndex && !((_a = this.tabs[index]) === null || _a === void 0 ? void 0 : _a.disabled);
+        if (isValidIndex && isEnabled) {
+            return index;
+        }
+        const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);
+        return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+    }
+    defineAttributes() {
+        var _a;
+        if (this.activeTab && this.tabsGroupContainer) {
+            const content = (_a = this.activeTab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds__tab--content-active');
+            if (content) {
+                this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);
+            }
+        }
+    }
+    updateIndicatorPosition() {
+        if (this.activeTab && this.indicatorEl) {
+            const tabLeft = this.activeTab.offsetLeft;
+            const tabWidth = this.activeTab.offsetWidth;
+            const parentLeft = this.indicatorEl.parentElement.offsetLeft;
+            this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;
+            this.indicatorEl.style.width = `${tabWidth}px`;
+        }
+    }
+    renderActiveTabIndicator() {
+        return this.activeTab && (h("div", { class: "vds__tabs-group--active-tab-indicator", ref: (el) => (this.indicatorEl = el) }));
+    }
+    updateTabsState(tabs) {
+        this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);
+        tabs.forEach((tab, tabIndex) => {
+            const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;
+            tab.isActive = isActiveTab;
+            if (isActiveTab) {
+                this.activeTab = tab;
+                this.updateIndicatorPosition();
+            }
+            tab.setAttribute('vds-tabindex', `${tabIndex}`);
+            tab.type = this.type;
+            tab.width = this.width;
+            tab.maxWidth = this.maxWidth;
+        });
+        this.defineAttributes();
+    }
+    render() {
+        return (h(Host, { key: '76bdfd7b81e08a0b1dd0e728986f1b006d47680d', class: this.disabled ? 'vds__tabs-group--disabled' : '' }, h("div", { key: 'b1d420eb1c561e3d2b5edb7ce81dfc06cd077377', ref: (el) => {
+                if (!el)
+                    return;
+                this.tabsGroupContainer = el;
+            }, class: "vds__tabs-group" }, h("div", { key: '3702b48c6dfa2757f8c31c7e6dda03ba578d302f', class: combineClasses('vds__tabs-group--header', 'vds__tabs-group--header-tabs-' + this.tabAlignment, this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : '') }, h("div", { key: 'cdc273f03dab09fb375ce2a809948ab45273b3bd', class: "vds__tabs-group--header-content" }, h("slot", { key: 'ffe7399a3d5f31121df4c2b1157763e5d5e4e0b5', name: "header-content" })), h("div", { key: 'b1212f299317b12b48f12e6836963ae63a631a2a', class: "vds__tabs-group--header-tabs-nav", role: "tablist" }, h("slot", { key: 'd5ea7e292a327c8523aab29b299a4fab93a9eecb', name: "tab-list" })), this.renderActiveTabIndicator()))));
+    }
+    static get is() { return "vds-tabs-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-tabs-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-tabs-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'icon' | 'withAction' | 'text' | 'custom'",
+                    "resolved": "\"custom\" | \"default\" | \"icon\" | \"text\" | \"withAction\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the type for the tabs group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the width for the tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the max width for the tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "tabAlignment": {
+                "type": "string",
+                "attribute": "tab-alignment",
+                "mutable": true,
+                "complexType": {
+                    "original": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'",
+                    "resolved": "\"center\" | \"flex-end\" | \"flex-start\" | \"space-around\" | \"space-between\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the alignment for the tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'flex-start'"
+            },
+            "showTrack": {
+                "type": "boolean",
+                "attribute": "show-track",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the indicator track under the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "activeTabIndex": {
+                "type": "number",
+                "attribute": "active-tab-index",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the index to select the active tab inside the group.\nIf not specified, loads the first tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab group to disable state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalActiveTabIndex": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getActive": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Gets the currently active tab index",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves with the active tab index."
+                        }]
+                }
+            },
+            "setActive": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "- The index of the tab to set as active."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the active tab index",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index - The index of the tab to set as active."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTabIndex",
+                "methodName": "handleActiveTabIndexChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "setDisabledState"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "isSelected",
+                "method": "handleTabSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "valueChanged",
+                "method": "handleValueChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-tabs-group.js.map

package/dist/collection/components/tabs-group/vds-tabs-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-tabs-group.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-tabs-group',\n  styleUrl: 'vds-tabs-group.scss',\n  shadow: true,\n})\nexport class VdsTabsGroup {\n  @Element() hostEl: HTMLElement;\n  /** Sets the type for the tabs group */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n  /** Sets the width for the tabs */\n  @Prop({ mutable: true }) width?: string;\n  /** Sets the max width for the tabs */\n  @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n  /** Sets the alignment for the tabs */\n  @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n  /** Shows the indicator track under the tab*/\n  @Prop({ mutable: true }) showTrack: boolean = false;\n  /** Sets the index to select the active tab inside the group.\n   * If not specified, loads the first tab.\n   */\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  /** Sets tab group to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  @State() internalActiveTabIndex: number = 0;\n\n  private activeTab: HTMLVdsTabElement;\n  private tabsGroupContainer: HTMLDivElement;\n  private indicatorEl: HTMLDivElement;\n  private tabs: HTMLVdsTabElement[] = [];\n  private resizeObserver: ResizeObserver;\n\n  @Listen('isSelected')\n  handleTabSelection(evt: CustomEvent): void {\n    const target = evt.target as HTMLElement;\n    this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n    this.activeTabIndex = this.internalActiveTabIndex;\n    this.updateTabsState(this.tabs);\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(): void {\n    this.updateIndicatorPosition();\n    forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    try {\n      this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n      if (this.tabs.length > 0) {\n        this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n          ? this.activeTabIndex\n          : 0;\n        this.updateTabsState(this.tabs);\n      }\n    } catch (e) {\n      console.error('componentWillLoad Error: ', e);\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.tabs.length > 0) {\n      this.observeActiveTabContent();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private observeActiveTabContent() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    if (this.activeTab) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n      if (content) {\n        this.resizeObserver = new ResizeObserver(() => {\n          this.defineAttributes();\n          this.updateIndicatorPosition()\n        });\n        this.resizeObserver.observe(content);\n      }\n    }\n  }\n\n  @Watch('activeTabIndex')\n  handleActiveTabIndexChange() {\n    this.updateTabsState(this.tabs);\n  }\n\n  @Watch(\"disabled\")\n  setDisabledState() {\n    (this.tabs || []).forEach(tab => {\n      tab.disabled = this.disabled;\n    });\n  }\n\n  /**\n   * Gets the currently active tab index\n   * \n   * @returns {Promise<number>} A promise that resolves with the active tab index.\n   */\n  @Method()\n  public async getActive(): Promise<number> {\n    return this.internalActiveTabIndex;\n  }\n\n  /**\n   * Sets the active tab index\n   * \n   * @param {number} index - The index of the tab to set as active.\n   */\n  @Method()\n  public async setActive(index: number) {\n    this.setActiveTab(index);\n  }\n\n  private setActiveTab(index: number) {\n    if (this.tabs.length > 0) {\n      this.internalActiveTabIndex = this.validateTabIndex(index);\n      this.activeTabIndex = this.internalActiveTabIndex;\n    }\n  }\n\n  private validateTabIndex(index: number): number {\n    const isValidIndex = index >= 0 && index < this.tabs.length;\n    const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n    if (isValidIndex && isEnabled) {\n      return index;\n    }\n    const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n    return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n  }\n\n  private defineAttributes() {\n    if (this.activeTab && this.tabsGroupContainer) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n      if (content) {\n        this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n      }\n    }\n  }\n\n  private updateIndicatorPosition() {\n    if (this.activeTab && this.indicatorEl) {\n      const tabLeft = this.activeTab.offsetLeft;\n      const tabWidth = this.activeTab.offsetWidth;\n      const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n      this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n      this.indicatorEl.style.width = `${tabWidth}px`;\n    }\n  }\n\n  private renderActiveTabIndicator() {\n    return this.activeTab && (\n      <div\n        class=\"vds__tabs-group--active-tab-indicator\"\n        ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n      />\n    );\n  }\n\n  private updateTabsState(tabs: HTMLVdsTabElement[]) {\n    this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n    tabs.forEach((tab, tabIndex) => {\n      const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n      tab.isActive = isActiveTab;\n      if (isActiveTab) {\n        this.activeTab = tab;\n        this.updateIndicatorPosition();\n      }\n      tab.setAttribute('vds-tabindex', `${tabIndex}`);\n      tab.type = this.type;\n      tab.width = this.width;\n      tab.maxWidth = this.maxWidth;\n    });\n    this.defineAttributes();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n        <div\n          ref={(el: HTMLDivElement): void => {\n            if (!el) return;\n            this.tabsGroupContainer = el;\n          }}\n          class=\"vds__tabs-group\"\n        >\n          <div class={\n            combineClasses(\n              'vds__tabs-group--header',\n              'vds__tabs-group--header-tabs-' + this.tabAlignment,\n              this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n            )}\n          >\n            <div class=\"vds__tabs-group--header-content\">\n              <slot name=\"header-content\"></slot>\n            </div>\n            <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n              <slot name=\"tab-list\"></slot>\n            </div>\n            {this.renderActiveTabIndicator()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs-group/vds-tabs-group.stories.js

@@ -0,0 +1,149 @@
+export default {
+    title: 'VDS/Components/Tabs/Tabs-Group',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        type: {
+            options: ['custom', 'default', 'icon', 'text', 'withAction'],
+            control: { type: 'select' },
+        },
+        tabAlignment: {
+            options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
+            control: { type: 'select' },
+        },
+        showTrack: {
+            control: 'boolean',
+        }
+    },
+};
+const styles = `
+    .container {
+        position: relative;
+        padding:50px;
+        display: block;
+        width:80%;
+    }
+    .content {
+        text-align: left;
+        padding-top: var(--spacing-05);
+    }
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+  <vds-tabs-group
+    type="${args.type}"
+    tab-alignment="${args.tabAlignment}"
+    width="${args.width}"
+    show-track="${args.showTrack}"
+    active-tab-index="${args.activeTabIndex}"
+  >
+  <vds-tab     
+    value="Tab 1"
+    slot="tab-list"
+    icon="user"
+    action-icon="administration"
+  >
+  <div slot="tab-content">
+    <div class="content">   
+      Tab 1 content.
+      <br>
+      <vds-button>Example button</vds-button>
+    </div>
+  </div>  
+  </vds-tab>
+  <vds-tab 
+    value="Tab 2"
+    slot="tab-list"
+    icon="add"
+    action-icon="administration"
+  >
+  <div slot="tab-content">
+      <div class="content">   
+      Tab 2 content.
+      <br>
+      <vds-button>Example button</vds-button>
+    </div>
+  </div>
+  </vds-tab>
+  <vds-tab 
+    value="Tab 3"
+    slot="tab-list"
+    icon="train"
+    action-icon="administration"
+    disabled="true"
+  >
+  <div slot="tab-content">
+      <div class="content">   
+      Tab 3 content.
+      <br>
+      <vds-button>Example button</vds-button>
+    </div>
+  </div>
+  </vds-tab>  
+  </vds-tabs-group>
+</div>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    tabAlignment: 'flex-start',
+    type: 'default',
+    width: '',
+    showTrack: false,
+    activeTabIndex: 0,
+};
+const codeTemplateCustom = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+  <vds-tabs-group
+    type="${args.type}"
+    tab-alignment="${args.tabAlignment}"
+    width="${args.width}"
+    show-track="${args.showTrack}"
+    active-tab-index="${args.activeTabIndex}"
+  >
+      <vds-tab slot="tab-list">
+      <div slot="tab-header-content">
+        <span>Tab 1</span>
+        <vds-badge-pill value="99" size="2xsmall" status-color="healthy"></vds-badge-pill>
+      </div>
+      <div slot="tab-content">
+        <div class="content">
+          Tab Custom 1 content.
+          <br>
+          <vds-button>Example button</vds-button>
+        </div>
+      </div>
+    </vds-tab>
+    <vds-tab slot="tab-list">
+      <div slot="tab-header-content">
+        <span>Tab 2</span>
+        <vds-badge-pill value="27" size="2xsmall" status-color="warning"></vds-badge-pill>
+      </div>
+      <div slot="tab-content">
+        <div class="content">
+          Tab Custom 2 content.
+          <br>
+          <vds-button>Example button</vds-button>
+        </div>
+      </div>
+    </vds-tab>
+  </vds-tabs-group>
+</div>
+    `;
+};
+export const CustomUsage = codeTemplateCustom.bind({});
+CustomUsage.args = {
+    tabAlignment: 'flex-start',
+    type: 'custom',
+    width: '',
+    showTrack: false,
+    activeTabIndex: 0,
+};
+//# sourceMappingURL=vds-tabs-group.stories.js.map

package/dist/collection/components/tabs-group/vds-tabs-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-tabs-group.stories.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,CAAC;YAC9E,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;SACnB;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;CAWd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;YAGH,IAAI,CAAC,IAAI;qBACA,IAAI,CAAC,YAAY;aACzB,IAAI,CAAC,KAAK;kBACL,IAAI,CAAC,SAAS;wBACR,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CtC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;SACA,MAAM;;;YAGH,IAAI,CAAC,IAAI;qBACA,IAAI,CAAC,YAAY;aACzB,IAAI,CAAC,KAAK;kBACL,IAAI,CAAC,SAAS;wBACR,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BtC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,WAAW,CAAC,IAAI,GAAG;IACjB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC;CAClB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Tabs/Tabs-Group',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    type: {\n      options: ['custom','default', 'icon', 'text', 'withAction'],\n      control: { type: 'select' },\n    },\n    tabAlignment: {\n      options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],\n      control: { type: 'select' },\n    },\n    showTrack: {\n      control: 'boolean',\n    }\n  },\n};\n\nconst styles = `\n    .container {\n        position: relative;\n        padding:50px;\n        display: block;\n        width:80%;\n    }\n    .content {\n        text-align: left;\n        padding-top: var(--spacing-05);\n    }\n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-tabs-group\n    type=\"${args.type}\"\n    tab-alignment=\"${args.tabAlignment}\"\n    width=\"${args.width}\"\n    show-track=\"${args.showTrack}\"\n    active-tab-index=\"${args.activeTabIndex}\"\n  >\n  <vds-tab     \n    value=\"Tab 1\"\n    slot=\"tab-list\"\n    icon=\"user\"\n    action-icon=\"administration\"\n  >\n  <div slot=\"tab-content\">\n    <div class=\"content\">   \n      Tab 1 content.\n      <br>\n      <vds-button>Example button</vds-button>\n    </div>\n  </div>  \n  </vds-tab>\n  <vds-tab \n    value=\"Tab 2\"\n    slot=\"tab-list\"\n    icon=\"add\"\n    action-icon=\"administration\"\n  >\n  <div slot=\"tab-content\">\n      <div class=\"content\">   \n      Tab 2 content.\n      <br>\n      <vds-button>Example button</vds-button>\n    </div>\n  </div>\n  </vds-tab>\n  <vds-tab \n    value=\"Tab 3\"\n    slot=\"tab-list\"\n    icon=\"train\"\n    action-icon=\"administration\"\n    disabled=\"true\"\n  >\n  <div slot=\"tab-content\">\n      <div class=\"content\">   \n      Tab 3 content.\n      <br>\n      <vds-button>Example button</vds-button>\n    </div>\n  </div>\n  </vds-tab>  \n  </vds-tabs-group>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  tabAlignment: 'flex-start',\n  type: 'default',\n  width: '',\n  showTrack: false,\n  activeTabIndex: 0,\n};\n\nconst codeTemplateCustom = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-tabs-group\n    type=\"${args.type}\"\n    tab-alignment=\"${args.tabAlignment}\"\n    width=\"${args.width}\"\n    show-track=\"${args.showTrack}\"\n    active-tab-index=\"${args.activeTabIndex}\"\n  >\n      <vds-tab slot=\"tab-list\">\n      <div slot=\"tab-header-content\">\n        <span>Tab 1</span>\n        <vds-badge-pill value=\"99\" size=\"2xsmall\" status-color=\"healthy\"></vds-badge-pill>\n      </div>\n      <div slot=\"tab-content\">\n        <div class=\"content\">\n          Tab Custom 1 content.\n          <br>\n          <vds-button>Example button</vds-button>\n        </div>\n      </div>\n    </vds-tab>\n    <vds-tab slot=\"tab-list\">\n      <div slot=\"tab-header-content\">\n        <span>Tab 2</span>\n        <vds-badge-pill value=\"27\" size=\"2xsmall\" status-color=\"warning\"></vds-badge-pill>\n      </div>\n      <div slot=\"tab-content\">\n        <div class=\"content\">\n          Tab Custom 2 content.\n          <br>\n          <vds-button>Example button</vds-button>\n        </div>\n      </div>\n    </vds-tab>\n  </vds-tabs-group>\n</div>\n    `;\n};\n\nexport const CustomUsage = codeTemplateCustom.bind({});\n\nCustomUsage.args = {\n  tabAlignment: 'flex-start',\n  type: 'custom',\n  width: '',\n  showTrack: false,\n  activeTabIndex: 0,\n};\n"]}