import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { a as ariaBooleanToString } from './aria.js';
import { B as BEM } from './bem.js';
import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
import { s as stopEventBubbling } from './form-input.js';
import { L as Logger } from './log.js';
import { d as defineCustomElement$3 } from './bal-check2.js';
import { d as defineCustomElement$2 } from './bal-icon2.js';
import { d as defineCustomElement$1 } from './bal-stack2.js';

const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";

const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balOptionChange = createEvent(this, "balOptionChange", 7);
        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
        this.inputId = `bal-option-${balOptionIds++}`;
        this.checkbox = false;
        this.interactionState = BalElementStateListener.DefaultState;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Label will be shown in the input element when it got selected
         */
        this.label = '';
        /**
         * The value of the select option. This value will be returned by the parent `<bal-select>` element.
         */
        this.value = '';
        /**
         * If `true`, the user cannot interact with the option.
         */
        this.disabled = false;
        /**
         * If `true`, the option can present in more than one line.
         */
        this.multiline = false;
        /**
         * If `true`, the option is shown in red.
         */
        this.invalid = false;
        /**
         * If `true`, the option is selected.
         */
        this.selected = false;
        /**
         * If `true`, the option is focused.
         */
        this.focused = false;
        /**
         * If `true`, the option is hidden.
         */
        this.hidden = false;
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onClick = (ev) => {
            const listEl = this.el.closest('bal-option-list');
            if (this.disabled || (listEl && listEl.disabled)) {
                stopEventBubbling(ev);
            }
            else {
                if (listEl && listEl.required && !listEl.multiple) {
                    if (!this.selected) {
                        this.select(true);
                    }
                }
                else {
                    this.select(!this.selected);
                }
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    componentWillRender() {
        if (this.el) {
            const optionListEl = this.el.closest('bal-option-list');
            if (optionListEl) {
                this.checkbox = !!optionListEl.multiple;
            }
        }
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    listenToMouseEnter() {
        const { label, value, selected, disabled, hidden } = this;
        if (!hidden && !disabled) {
            this.balOptionFocus.emit({ label, value, selected });
        }
    }
    elementStateListener(info) {
        this.interactionChildElements.forEach(element => {
            element.hovered = info.hovered;
            element.pressed = info.pressed;
        });
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * Selects or deselects the option and informs other components
     */
    async select(selected = true) {
        this.selected = selected;
        const { label, value } = this;
        this.balOptionChange.emit({ label, value, selected });
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    get interactionChildElements() {
        return Array.from(this.el.querySelectorAll('bal-check'));
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('option');
        return (h(Host, { key: 'dca805aa021ad35c2ea4153008a8a5ba4f37931c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'cfcf978a82159a6e7ad2dcddccdb40dd6b9f74a4', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'e92a9c019432d29f6153371daca316c8136c75e9', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '639a99194ed6e86787e9eb2b3adc993161d58a07' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
    }
    get el() { return this; }
    static get style() { return balOptionCss; }
}, [260, "bal-option", {
        "label": [513],
        "value": [513],
        "disabled": [4],
        "multiline": [4],
        "invalid": [4],
        "selected": [1028],
        "focused": [1028],
        "hidden": [4],
        "checkbox": [32],
        "interactionState": [32],
        "select": [64]
    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
__decorate([
    Logger('bal-option'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Option.prototype, "createLogger", null);
__decorate([
    ListenToElementStates(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Option.prototype, "elementStateListener", null);
let balOptionIds = 0;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-option", "bal-check", "bal-icon", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-option":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Option);
            }
            break;
        case "bal-check":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Option as O, defineCustomElement as d };
