import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-da72c774.js';
import { c as cls } from './helpers-bcb19b84.js';

const styleCss = "x-segment{display:inline-block;height:50px;position:relative;border-radius:0.5rem;-webkit-transition:0.4s;transition:0.4s;padding:0.35rem;overflow-y:hidden;overflow-x:auto;max-width:100%;background-color:var(--color-default-lucid, #f0f0f0)}x-segment.segment-block{display:block;width:100%}x-segment.segment-compact>div>x-segment-item:not(.active) span{display:none}x-segment.segment-compact>div>x-segment-item:not(.active) x-icon{margin-left:0 !important;margin-right:0 !important}x-segment::-webkit-scrollbar{opacity:0;height:1px}.is-dark-mode x-segment{background-color:var(--color-black-tint)}x-segment.segment-left>div{-ms-flex-pack:start;justify-content:start}x-segment.segment-center>div{-ms-flex-pack:center;justify-content:center}x-segment.segment-right>div{-ms-flex-pack:end;justify-content:end}x-segment.segment-evenly>div{-ms-flex-pack:space-evenly;justify-content:space-evenly}x-segment.segment-between>div{-ms-flex-pack:justify;justify-content:space-between}x-segment>div{padding:0;margin:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;width:100%}x-segment>div>x-segment-item{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:calc(50px - 0.7rem);-webkit-transition:0.4s;transition:0.4s;border-radius:0.45rem;margin-right:0.35rem;padding-left:1rem;padding-right:1rem;color:var(--color-text-tinted);white-space:nowrap}.is-dark-mode x-segment>div>x-segment-item{color:var(--color-text-light-shaded)}x-segment>div>x-segment-item:hover{color:var(--color-text-tint);background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.2)}.is-dark-mode x-segment>div>x-segment-item:hover{color:var(--color-text-light, #FEFEFE);background-color:var(--color-dark-tinted, #626262)}.is-dark-mode x-segment>div>x-segment-item:hover x-icon{color:var(--color-text-light, #FEFEFE)}x-segment>div>x-segment-item.active{-webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px rgba(0, 0, 0, 0.1);background-color:var(--color-white, #FFFFFF) !important;color:var(--color-text, #4A4A4A) !important}x-segment>div>x-segment-item.active x-icon{color:var(--color-text, #4A4A4A) !important}x-segment>div>x-segment-item:last-child{margin-right:0}x-segment>div>x-segment-item a{color:inherit}x-segment>div>x-segment-item a:hover{color:inherit}x-segment>div>x-segment-item x-icon{color:inherit;font-size:1.25em;margin-left:-0.25rem;margin-right:0.5rem;-webkit-transition:0.3s;transition:0.3s}.is-dark-mode x-segment>div>x-segment-item x-icon{color:var(--color-text-light-shaded, #b2b2b2)}";
const XSegmentStyle0 = styleCss;

const XSegment = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.selected = createEvent(this, "selected", 7);
        this.block = false;
        this.compact = false;
        this.align = 'left';
        this.active = '0';
        this.items = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildItems();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.computeChildItems();
        if (!this.items.length) {
            return;
        }
        setTimeout(() => {
            if (!this.el.querySelectorAll('x-segment-item.active').length) {
                this.selectItem(this.el.querySelectorAll('x-segment-item').item(0));
            }
        }, 10);
    }
    /**
     * Select the segment and set as active
     *
     * @param index
     * @param segment
     */
    selectItem(segment) {
        this.el.querySelectorAll('x-segment-item.active').forEach(item => {
            item.setAttribute('active', 'false');
            item.classList.remove('active');
        });
        setTimeout(() => {
            segment.setAttribute('active', 'true');
            segment.classList.add('active');
            this.active = segment.getAttribute('value');
            this.selected.emit(this.active);
        }, 10);
    }
    /**
     * Update the child tabs and render the result
     */
    computeChildItems() {
        this.items = Array.from(this.el.querySelector('div').children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-segment-item');
        this.items.forEach((item, index) => {
            if (!item.hasAttribute('value')) {
                item.setAttribute('value', index.toString());
            }
            if (this.active == item.getAttribute('value')) {
                this.selectItem(item);
            }
            item.addEventListener('click', () => {
                this.selectItem(item);
            });
        });
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '38a73d9ffe053b5285d9ad91da1be70b0bb72a31', class: cls(`segment-${this.align}`, {
                'segment-block': this.block,
                'segment-compact': this.compact,
            }) }, h("div", { key: '8c0171636a97adc3d26db69461af77f3c0a58ae9', class: "segment-container" }, h("slot", { key: '91cd460c23d704da6421fc4e556c2d1010ab7d65' })));
    }
    get el() { return getElement(this); }
};
XSegment.style = XSegmentStyle0;

const XSegmentItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.value = undefined;
        this.icon = undefined;
        this.active = false;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'e254ca0b13cbc931fc5bf61379b0d8234c1a478a', class: cls({ 'active': this.active }) }, this.icon && h("x-icon", { key: 'dac2d8cb90bb17da69ed011860a32de52d071ad4', name: this.icon }), h("span", { key: 'fce8631fa3c0c7d4505c07f07b0a949a2a25ff8c' }, h("slot", { key: 'b4e561b62792af9b105cbea79772b773f1ba5476' })));
    }
    get el() { return getElement(this); }
};

export { XSegment as x_segment, XSegmentItem as x_segment_item };
