@senx/discovery-code/dist/components/wc-tabs-header2.js

Discovery Code Editor

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';

class Utils {
  /**
   *
   * @param value
   * @returns {boolean}
   */
  static isUndefined(value) {
    return value === undefined || value === 'undefined';
  }
  /**
   *
   * @returns {string}
   */
  static generateId() {
    return Math.random().toString(36).substr(2, 10);
  }
}

const wcTabsHeaderCss = ":host .wc-tab-header{padding:0.5rem 1rem;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:var(--wc-tab-header-bg-color, transparent);color:var(--wc-tab-header-color, #007bff);text-decoration:none;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-color:1px solid var(--wc-tab-header-border-color, #dee2e6) var(--wc-tab-header-border-color, #dee2e6) transparent;margin-bottom:-1px}@media (max-width: 599px){:host .wc-tab-header{min-width:100px}}:host .wc-tab-header-selected{color:var(--wc-tab-header-selected-color, #495057);background-color:var(--wc-tab-header-selected-bg-color, #fff);border-color:var(--wc-tab-header-selected-border-color, #dee2e6) var(--wc-tab-header-selected-border-color, #dee2e6) var(--wc-tab-header-selected-bg-color, #fff)}:host .wc-tab-header-disabled{pointer-events:none;cursor:default;color:var(--wc-tab-header-disabled-color, #6c757d);background-color:var(--wc-tab-header-disabled-bg-color, transparent);border-color:var(--wc-tab-header-disabled-border-color, #dee2e6) var(--wc-tab-header-disabled-border-color, #dee2e6) var(--wc-tab-header-disabled-bg-color, #fff)}";
const WcTabsHeaderStyle0 = wcTabsHeaderCss;

const StcTabHeader = /*@__PURE__*/ proxyCustomElement(class StcTabHeader extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.tabSelect = createEvent(this, "tabSelect", 7);
        this.id = Utils.generateId();
        this.isSelected = false;
    }
    async getChild() {
        return new Promise(resolve => resolve({
            select: this.handleSelect.bind(this),
            unselect: this.unselect.bind(this),
            name: this.name,
            id: this.id
        }));
    }
    /**
     *
     */
    unselect() {
        this.isSelected = false;
    }
    /**
     *
     */
    handleSelect() {
        this.isSelected = true;
    }
    /**
     *
     */
    onClick() {
        if (!this.disabled) {
            this.getChild().then(child => this.tabSelect.emit(child));
        }
    }
    render() {
        const classes = {
            'wc-tab-header': true,
            'wc-tab-header-selected': this.isSelected,
            'wc-tab-header-disabled': this.disabled,
        };
        // noinspection JSXNamespaceValidation
        return h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", null));
    }
    static get style() { return WcTabsHeaderStyle0; }
}, [1, "wc-tabs-header", {
        "name": [1],
        "disabled": [4],
        "isSelected": [32],
        "getChild": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["wc-tabs-header"];
    components.forEach(tagName => { switch (tagName) {
        case "wc-tabs-header":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, StcTabHeader);
            }
            break;
    } });
}

export { StcTabHeader as S, defineCustomElement as d };