@aqua-ds/web-components/components-build/aq-tab-items.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { S as Sizes } from './sizes.js';

const aqTabItemsCss = ":host{display:block}.aq-tab-items{width:100%;margin-left:var(--spacing-size-moderate)}.aq-tab-items--vertical{margin-top:var(--spacing-size-short)}";

const AqTabItems$1 = /*@__PURE__*/ proxyCustomElement(class AqTabItems extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.tabItemChange = createEvent(this, "tabItemChange", 7);
        this.maxHeight = '';
        this.minHeight = '';
        this.maxWidth = '';
        this.minWidth = '';
        this.height = '';
        this.width = '';
        this.selectedIndex = 1;
        this.SizesHelper = Sizes(this);
    }
    async updateSelectTab(val) {
        this.selectedIndex = val;
        this.tabItemChange.emit(this.selectedIndex);
    }
    async registerTabItem(tab) {
        const tabsItems = this.el.closest('aq-tab-items');
        const TabItem = tabsItems.querySelectorAll('aq-tab-item');
        const Item = tab;
        const tabIndex = Array.from(TabItem).indexOf(Item);
        return tabIndex + 1;
    }
    async componentWillLoad() {
        await this.updateSelectTab(this.selectedIndex);
    }
    get isVertical() {
        const tabGroup = this.el.previousElementSibling;
        if (!tabGroup)
            return false;
        return tabGroup.vertical;
    }
    getClassAqTabItems() {
        return {
            'aq-tab-items': !this.isVertical,
            'aq-tab-items--vertical': this.isVertical,
            'aq-scroll-bar': true,
        };
    }
    render() {
        const cssClaaAqTabItems = this.getClassAqTabItems();
        return (h(Host, { key: 'e05c2e565577ef53de1ced4cf980b8795d0ad67d', class: cssClaaAqTabItems, style: this.SizesHelper.mixinSizeStyle }, h("slot", { key: '031e3e92364dc19dbe5f523904fe5abcae824672' })));
    }
    get el() { return this; }
    static get style() { return aqTabItemsCss; }
}, [260, "aq-tab-items", {
        "maxHeight": [1, "max-height"],
        "minHeight": [1, "min-height"],
        "maxWidth": [1, "max-width"],
        "minWidth": [1, "min-width"],
        "height": [1],
        "width": [1],
        "selectedIndex": [32],
        "updateSelectTab": [64],
        "registerTabItem": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-tab-items"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-tab-items":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqTabItems$1);
            }
            break;
    } });
}

const AqTabItems = AqTabItems$1;
const defineCustomElement = defineCustomElement$1;

export { AqTabItems, defineCustomElement };