import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6191c26c.js';
import { c as cls } from './helpers-3d0ba5b1.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,x-segment.segment-fluid{display:block;width:100%}x-segment.segment-fluid{border-radius:0}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, #262626)}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, gray);white-space:nowrap}.is-dark-mode x-segment>div>x-segment-item{color:var(--color-text-light-shaded, #b2b2b2)}x-segment>div>x-segment-item:hover{color:var(--color-text-tint, #656565);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", 3);
        this.block = false;
        this.fluid = undefined;
        this.compact = false;
        this.align = 'left';
        this.active = '0';
        this.items = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildItems();
    }
    /**
     * On component will load action
     */
    componentWillLoad() {
        this.computeChildItems();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        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 items and render the result
     */
    computeChildItems() {
        this.items = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-segment-item')
            .map(item => 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: 'b4b8d892824dcd4b1f853296088a0b310202b6fe', class: cls(`segment-${this.align}`, {
                'segment-fluid': this.fluid,
                'segment-block': this.block,
                'segment-compact': this.compact,
            }) }, h("div", { key: '61e4775b5c6f36b0125b901ce85a2f8f0192decf', class: "segment-container" }, h("slot", { key: 'd3511b1ac797aa2fdd9b28e7d5ee42a352193bf5' })));
    }
    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: '2acfc541f36928f3e8178fce976979259be2625b', class: cls({ 'active': this.active }) }, this.icon && h("x-icon", { key: '839ffc967b02dfa6997f6994b2bb5ebae1580cf3', name: this.icon }), h("span", { key: '9098642ab7af1fffcc7cb58d5ded22294b844286' }, h("slot", { key: 'a53232f523b90736cb456d4e3252ab9eb2d3bf67' })));
    }
    get el() { return getElement(this); }
};

export { XSegment as x_segment, XSegmentItem as x_segment_item };
