import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { i as inheritAttributes } from './attributes.js';
import { B as BEM } from './bem.js';
import { d as defaultBalAriaForm } from './form.js';
import { p as addEventListener, r as raf, q as removeEventListener } from './helpers.js';
import { d as defineCustomElement$5 } from './bal-content2.js';
import { d as defineCustomElement$4 } from './bal-icon2.js';
import { d as defineCustomElement$3 } from './bal-label2.js';
import { d as defineCustomElement$2 } from './bal-stack2.js';

const balSegmentItemCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;-webkit-transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:\"\";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{-webkit-transform-origin:top;transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;-webkit-transform:none;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;-webkit-transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;-webkit-transform:translateX(0.1rem);transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;-webkit-transform:translateX(-4px);transform:translateX(-4px);-webkit-transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media (hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;-webkit-transition:border 300ms ease-in-out;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}";

let SegmentItemIds = 0;
const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.segmentEl = null;
        this.inheritedAttributes = {};
        this.internalId = SegmentItemIds++;
        this.inputId = `bal-si-${this.internalId}`;
        this.hasSlotContent = false;
        this.isFocusable = false;
        this.isVertical = false;
        this.isLast = false;
        this.isFirst = false;
        this.hasEmptyValue = true;
        this.ariaForm = defaultBalAriaForm;
        /**
         * If `true`, the user cannot interact with the segment button.
         */
        this.disabled = false;
        /**
         * If `true`, the segment is shown in red.
         */
        this.invalid = false;
        /**
         * @internal
         * Sets focus state for key navigation
         */
        this.focused = false;
        /**
         * @internal
         * Sets checked state for key navigation
         */
        this.checked = false;
        /**
         * Label of the segment control
         */
        this.label = '';
        /**
         * The value of the segment button.
         */
        this.value = 'bal-si-' + this.internalId;
        this.updateVertical = (ev) => {
            this.isVertical = ev.detail;
        };
        this.updateState = () => {
            const { segmentEl } = this;
            if (segmentEl) {
                if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
                    const items = this.allAvailableOptions;
                    if (items.length > 0) {
                        const first = items[0];
                        this.checked = false;
                        this.isFocusable = first === this.el;
                    }
                }
                else {
                    this.checked = segmentEl.value === this.value;
                    this.isFocusable = segmentEl.value === this.value;
                }
                if (segmentEl.disabled) {
                    this.disabled = true;
                }
                if (segmentEl.invalid) {
                    this.invalid = true;
                }
                this.isLast = segmentEl.lastElementChild === this.el;
                this.isFirst = segmentEl.firstElementChild === this.el;
                this.calculateEmptyValue();
            }
        };
        this.onSlottedItemsChange = () => {
            /**
             * When the slotted segment buttons change we need to
             * ensure that the new segment buttons are checked if
             * the value matches the segment button value.
             */
            this.checkSlotContent();
        };
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.updateState();
        }
    }
    componentWillLoad() {
        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
    }
    connectedCallback() {
        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
        if (segmentEl && segmentEl.vertical) {
            this.isVertical = segmentEl.vertical;
        }
    }
    componentDidLoad() {
        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
        if (segmentEl) {
            addEventListener(segmentEl, 'balSelect', this.updateState);
            addEventListener(segmentEl, 'balVertical', this.updateVertical);
        }
        raf(() => {
            this.checkSlotContent();
            this.updateState();
        });
    }
    disconnectedCallback() {
        const segmentEl = this.segmentEl;
        if (segmentEl) {
            removeEventListener(segmentEl, 'balSelect', this.updateState);
            removeEventListener(segmentEl, 'balVertical', this.updateVertical);
            this.segmentEl = null;
        }
    }
    calculateEmptyValue() {
        if (this.segmentEl) {
            const segments = Array.from(this.segmentEl.querySelectorAll('bal-segment-item'));
            this.hasEmptyValue = !segments.some(item => item.value === this.segmentEl.value);
        }
        else {
            this.hasEmptyValue = false;
        }
    }
    /**
     * @internal
     * Focuses the native <button> element
     * inside of ion-segment-button.
     */
    async setFocus() {
        const { nativeEl } = this;
        if (nativeEl !== undefined) {
            nativeEl.focus();
        }
    }
    /**
     * @internal
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    get allAvailableOptions() {
        return this.allOptions.filter(item => !item.disabled);
    }
    get allOptions() {
        const { segmentEl } = this;
        if (segmentEl) {
            return Array.from(segmentEl.querySelectorAll('bal-segment-item'));
        }
        return [];
    }
    checkSlotContent() {
        const slot = this.el.querySelector('[part="slot"]');
        const children = slot ? slot.innerHTML.trim() : '';
        this.hasSlotContent = children.length > 0;
    }
    render() {
        const { checked, focused, segmentEl, label, isFocusable, isFirst, hasEmptyValue } = this;
        const block = BEM.block('segment-item');
        const buttonBem = block.element('button');
        const indicatorBem = block.element('indicator');
        const invalid = this.invalid || (segmentEl && segmentEl.invalid);
        const disabled = this.disabled || (segmentEl && segmentEl.disabled);
        const vertical = this.isVertical;
        const hasTabindex = (hasEmptyValue && isFirst) || (isFocusable && !disabled);
        const id = (hasTabindex && this.ariaForm.controlId) || this.inputId;
        let buttonAttributes = {};
        if (hasTabindex) {
            buttonAttributes = {
                'aria-labelledby': this.ariaForm.labelId,
                'aria-describedby': this.ariaForm.messageId,
            };
        }
        return (h(Host, { key: '55e0754b091fb723f2e5d90f7bdb50190abbea52', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: '8b7d3b58c59e02b98eeb131696fc0b0540780353', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: 'a8da51b21fe49d7e7dc56d1089710a905ebf5df7', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '47d5eb2ef471654c05343ae83b4ac2b4fb0e9839', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '833e34ce4261d88906d220ac92acf68691aa5d88', space: "none" }, h("bal-label", { key: 'a7fffd217d6823c4234c76f2e4a7fc645148a453', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '695a0cf23d40a0b19ef4a76248838b27dbe481be', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '2fb05a58ea4850f5196804f69fb0d84e3dc1145e', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'a6b5024e4e04af2be2d7830a656bdf0c2cb213a1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
    }
    get el() { return this; }
    static get watchers() { return {
        "value": ["valueChanged"]
    }; }
    static get style() { return balSegmentItemCss; }
}, [4, "bal-segment-item", {
        "disabled": [1028],
        "invalid": [1028],
        "focused": [1028],
        "checked": [1028],
        "label": [1],
        "value": [1032],
        "hasSlotContent": [32],
        "isFocusable": [32],
        "isVertical": [32],
        "isLast": [32],
        "isFirst": [32],
        "hasEmptyValue": [32],
        "ariaForm": [32],
        "setFocus": [64],
        "setAriaForm": [64]
    }, undefined, {
        "value": ["valueChanged"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-segment-item", "bal-content", "bal-icon", "bal-label", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-segment-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SegmentItem);
            }
            break;
        case "bal-content":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalSegmentItem = SegmentItem;
const defineCustomElement = defineCustomElement$1;

export { BalSegmentItem, defineCustomElement };
