import { r as registerInstance, d as createEvent, h, c as getElement } from './core-1db051ba.js';
import { N as NativeValidationStrategy } from './native-validation-strategy-a4373eb1.js';
import { g as derivedId, o as onBoolValueChanged, j as hasValue } from './utils-3aef1637.js';

let selectId = 0;
const Select = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inited = false;
        this.optionListListener = (e) => this.onSelect(e);
        this.expanded = false;
        this.labels = null;
        this.options = [];
        /**
         * Is the select disabled
         */
        this.disabled = false;
        /**
         * The select id
         */
        this.inputId = `anj-select-${selectId++}`;
        /**
         * Id for the label
         */
        this.labelId = derivedId(this.inputId, 'label');
        /**
         * Does the select support multiple options
         */
        this.multiple = false;
        /**
         * The name of the select
         */
        this.name = this.inputId;
        /**
         * If true, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * @internal
         * The validation strategy to use
         */
        this.validationStrategy = new NativeValidationStrategy();
        this.anjControlDidLoad = createEvent(this, "anjControlDidLoad", 7);
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjChange = createEvent(this, "anjChange", 7);
        this.anjFocus = createEvent(this, "anjFocus", 7);
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    valueChanged(value) {
        if (this.inited) {
            this.updateOptions();
            if (this.nativeInput && this.nativeInput.value !== value) {
                this.nativeInput.value = value;
            }
            this.anjChange.emit({ value: this.value });
        }
    }
    async componentDidLoad() {
        this.anjControlDidLoad.emit();
        this.inited = true;
    }
    disconnectedCallback() {
        this.unbindOptionList();
        this.overlay = null;
    }
    async onOptionsChanged({ detail }) {
        if (!hasValue(this.value)) {
            this.value = this.valueFromSelected();
        }
        this.options = detail;
        this.updateOptions();
        this.updateValue();
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        if (!this.nativeInput)
            return;
        this.nativeInput.checkValidity();
        return this.validationStrategy.onValidChange(this.element, this.nativeInput);
    }
    async onClick() {
        if (this.expanded) {
            this.toggle.blur();
            return;
        }
        this.overlay = this.bindOverlay();
        this.optionList = this.bindOptionList();
        await this.optionList.reset(this.options.find(o => o.selected));
        this.anjFocus.emit();
        await this.overlay.open(this.element);
        this.expanded = true;
        this.optionList.focus();
    }
    async onBlur(event, refocusToggle = false) {
        if (event && event.relatedTarget === this.optionList) {
            return;
        }
        if (refocusToggle) {
            this.toggle.focus();
        }
        else {
            this.anjBlur.emit();
        }
        if (this.overlay) {
            await this.overlay.close();
            this.overlay = null;
        }
        this.expanded = false;
        this.unbindOptionList();
        return this.validationStrategy.onTouched(this.element);
    }
    async onSelect(event) {
        if (this.multiple) {
            this.value = this.updateMultiValue(event.detail);
        }
        else {
            this.value = event.detail;
            return this.onBlur(undefined, true);
        }
    }
    getLabels() {
        const labels = this.options.filter(opt => opt.selected).map(opt => opt.textContent);
        return labels.length > 0 ? labels : undefined;
    }
    updateValue() {
        const values = this.options.map(opt => opt.value);
        if (this.multiple) {
            const validVals = this.value.filter(val => values.includes(val));
            if (validVals.length !== this.value.length) {
                this.value = validVals;
            }
        }
        else {
            if (!values.includes(this.value)) {
                this.value = null;
            }
        }
    }
    updateMultiValue(value) {
        if (this.value.includes(value)) {
            return this.value.filter(val => val !== value);
        }
        else {
            this.value.push(value);
            return this.value.slice(0);
        }
    }
    updateOptions() {
        this.options.forEach(opt => opt.selected = this.valueSelected(opt.value));
        this.labels = this.getLabels();
    }
    valueFromSelected() {
        if (this.multiple) {
            return this.options.filter(opt => opt.selected).map(opt => opt.value);
        }
        else {
            const selected = this.options.find(opt => opt.selected);
            return selected ? selected.value : null;
        }
    }
    valueSelected(value) {
        if (Array.isArray(this.value)) {
            return this.value.includes(value);
        }
        return value === this.value;
    }
    toggleClasses() {
        const classList = ['anj-select-toggle'];
        if (!this.labels) {
            classList.push('anj-placeholder');
        }
        if (this.expanded) {
            classList.push('anj-active');
        }
        return classList.join(' ');
    }
    bindOptionList() {
        const el = this.element.querySelector('anj-option-list');
        if (el) {
            el.addEventListener('anjSelect', this.optionListListener);
        }
        return el;
    }
    unbindOptionList() {
        if (!this.optionList)
            return;
        this.optionList.removeEventListener('anjSelect', this.optionListListener);
        this.optionList = null;
    }
    bindOverlay() {
        return this.element.querySelector('anj-overlay');
    }
    render() {
        const ariaLabelBy = this.labels ? this.inputId : this.labelId;
        const overlayWidth = this.element.offsetWidth;
        return [
            h("button", { type: "button", "aria-haspopup": "listbox", "aria-label": this.labels ? this.labels.join(' ') : null, "aria-labelledby": ariaLabelBy, "aria-required": this.required, disabled: this.disabled, id: this.inputId, class: this.toggleClasses(), onClick: () => this.onClick(), onBlur: e => this.onBlur(e), ref: ref => this.toggle = ref }, h("div", { class: "values-wrapper" }, this.labels ? this.labels.map(label => h("span", { class: "anj-selected-label" }, label)) : this.placeholder), h("anj-icon-opener", { open: this.expanded })),
            h("anj-overlay", { class: "anj-dropdown-menu anj-select-menu", placement: "bottom-start", style: { 'min-width': `${overlayWidth}px` } }, h("anj-option-list", { "aria-labelledby": ariaLabelBy, "aria-multiselectable": this.multiple, expanded: this.expanded, onBlur: e => this.onBlur(e, true) }, h("slot", null))),
            h("input", { class: "anj-hidden-control", "aria-hidden": "true", tabindex: "-1", name: this.name, disabled: this.disabled, required: this.required, value: this.value, onInvalid: () => this.validationStrategy.onValidChange(this.element, this.nativeInput), ref: ref => this.nativeInput = ref })
        ];
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "invalid": ["invalidChanged"],
        "value": ["valueChanged"]
    }; }
    static get style() { return ".sc-anj-select-h {\n  display: inline-block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  width: 100%;\n}\n.sc-anj-select-h, .sc-anj-select-h::before, .sc-anj-select-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-select-h:focus, .sc-anj-select-h:active, .sc-anj-select-h *.sc-anj-select:focus, .sc-anj-select-h *.sc-anj-select:active {\n  outline: none;\n}\n.sc-anj-select-h .anj-hidden-control.sc-anj-select {\n  clip: rect(0 0 0 0);\n  height: 0;\n  left: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\n.sc-anj-select-h input.sc-anj-select, .sc-anj-select-h textarea.sc-anj-select, .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  display: block;\n  width: 100%;\n  height: calc(1.5em + 0.75rem + 2px);\n  padding: 0.375rem 0.75rem;\n  color: var(--anj-text-dark);\n  background-color: var(--anj-light);\n  background-clip: padding-box;\n  border: 1px solid var(--anj-form-control-border);\n  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  overflow: visible;\n}\n.sc-anj-select-h input.sc-anj-select::-ms-expand, .sc-anj-select-h textarea.sc-anj-select::-ms-expand, .sc-anj-select-h .anj-select-toggle.sc-anj-select::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.sc-anj-select-h input.sc-anj-select::-webkit-input-placeholder, .sc-anj-select-h textarea.sc-anj-select::-webkit-input-placeholder, .sc-anj-select-h .anj-select-toggle.sc-anj-select::-webkit-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select::-moz-placeholder, .sc-anj-select-h textarea.sc-anj-select::-moz-placeholder, .sc-anj-select-h .anj-select-toggle.sc-anj-select::-moz-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select:-ms-input-placeholder, .sc-anj-select-h textarea.sc-anj-select:-ms-input-placeholder, .sc-anj-select-h .anj-select-toggle.sc-anj-select:-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select::-ms-input-placeholder, .sc-anj-select-h textarea.sc-anj-select::-ms-input-placeholder, .sc-anj-select-h .anj-select-toggle.sc-anj-select::-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select::placeholder, .sc-anj-select-h textarea.sc-anj-select::placeholder, .sc-anj-select-h .anj-select-toggle.sc-anj-select::placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select:disabled, .sc-anj-select-h input[readonly].sc-anj-select, .sc-anj-select-h textarea.sc-anj-select:disabled, .sc-anj-select-h textarea[readonly].sc-anj-select, .sc-anj-select-h .anj-select-toggle.sc-anj-select:disabled, .sc-anj-select-h .anj-select-toggle[readonly].sc-anj-select {\n  background-color: var(--anj-light);\n  opacity: 1;\n}\n.sc-anj-select-h input.sc-anj-select:focus, .sc-anj-select-h textarea.sc-anj-select:focus, .sc-anj-select-h .anj-select-toggle.sc-anj-select:focus {\n  outline: none;\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  padding-right: 2.25rem;\n}\n[readonly].sc-anj-select-h {\n  --anj-form-control-border: var(--anj-border-dark);\n}\n[readonly].sc-anj-select-h input.sc-anj-select, [readonly].sc-anj-select-h textarea.sc-anj-select, [readonly].sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  background-color: var(--anj-background);\n}\n[disabled].sc-anj-select-h input.sc-anj-select, [disabled].sc-anj-select-h textarea.sc-anj-select, [disabled].sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  color: var(--anj-text-muted);\n}\n.sc-anj-select-h td.sc-anj-select-h input.sc-anj-select, td .sc-anj-select-h input.sc-anj-select, .sc-anj-select-h td.sc-anj-select-h textarea.sc-anj-select, td .sc-anj-select-h textarea.sc-anj-select, .sc-anj-select-h td.sc-anj-select-h .anj-select-toggle.sc-anj-select, td .sc-anj-select-h .anj-select-toggle.sc-anj-select, .sc-anj-select-h anj-filter.sc-anj-select-h input.sc-anj-select, anj-filter .sc-anj-select-h input.sc-anj-select, .sc-anj-select-h anj-filter.sc-anj-select-h textarea.sc-anj-select, anj-filter .sc-anj-select-h textarea.sc-anj-select, .sc-anj-select-h anj-filter.sc-anj-select-h .anj-select-toggle.sc-anj-select, anj-filter .sc-anj-select-h .anj-select-toggle.sc-anj-select, .sc-anj-select-h anj-type-ahead[search].sc-anj-select-h input.sc-anj-select, anj-type-ahead[search] .sc-anj-select-h input.sc-anj-select, .sc-anj-select-h anj-type-ahead[search].sc-anj-select-h textarea.sc-anj-select, anj-type-ahead[search] .sc-anj-select-h textarea.sc-anj-select, .sc-anj-select-h anj-type-ahead[search].sc-anj-select-h .anj-select-toggle.sc-anj-select, anj-type-ahead[search] .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n  border-top: 0;\n}\n.sc-anj-select-h td.sc-anj-select-h input.sc-anj-select, td .sc-anj-select-h input.sc-anj-select, .sc-anj-select-h td.sc-anj-select-h .anj-select-toggle.sc-anj-select, td .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  background-color: inherit;\n}\n.sc-anj-select-h td.sc-anj-select-h input[type=number].sc-anj-select, td .sc-anj-select-h input[type=number].sc-anj-select, .sc-anj-select-h td.sc-anj-select-h .anj-select-toggle[type=number].sc-anj-select, td .sc-anj-select-h .anj-select-toggle[type=number].sc-anj-select {\n  text-align: right;\n}\n.sc-anj-select-h td.sc-anj-select-h input.sc-anj-select, td .sc-anj-select-h input.sc-anj-select {\n  padding: 0 0 8.5px;\n}\n.sc-anj-select-h td.sc-anj-select-h .anj-select-toggle.sc-anj-select, td .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  padding-bottom: 0.5rem;\n  padding-left: 0;\n  padding-top: 0;\n}\n.sc-anj-select-h td.sc-anj-select-h .anj-select-toggle.sc-anj-select anj-icon-opener.sc-anj-select, td .sc-anj-select-h .anj-select-toggle.sc-anj-select anj-icon-opener.sc-anj-select {\n  margin-top: -0.25rem;\n}\n[multiple].sc-anj-select-h .anj-selected-label.sc-anj-select:not(:last-child)::after {\n  content: \", \";\n}\n[disabled].sc-anj-select-h anj-icon-opener.sc-anj-select {\n  display: none;\n}\n[disabled].sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  color: var(--anj-text-muted);\n  cursor: default !important;\n}\n.sc-anj-select-h:not([invalid]) .anj-select-toggle.sc-anj-select:focus, .sc-anj-select-h:not([invalid]) .anj-select-toggle.anj-active.sc-anj-select {\n  border-color: var(--anj-highlight);\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  position: relative;\n  text-align: left;\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select anj-icon-opener.sc-anj-select {\n  height: 18px;\n  margin-top: -1px;\n  position: absolute;\n  right: 0.5rem;\n  top: calc(50%);\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  -webkit-transition: color 0.3s ease;\n  transition: color 0.3s ease;\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select anj-icon-opener.sc-anj-select svg.sc-anj-select {\n  fill: var(--anj-neutral-light);\n}\n.sc-anj-select-h .anj-select-toggle.anj-placeholder.sc-anj-select {\n  color: var(--anj-neutral-dark);\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select > .values-wrapper.sc-anj-select {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.sc-anj-select-h .anj-select-toggle.sc-anj-select .anj-selected-label.sc-anj-select {\n  display: inline;\n  position: relative;\n  white-space: nowrap;\n}\n\nanj-pager.sc-anj-select-h .anj-select-toggle.sc-anj-select, anj-pager .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  border-bottom: 0;\n  font-size: 0.75rem;\n  height: auto;\n  padding-left: 0;\n  padding-right: 0;\n}\nanj-pager.sc-anj-select-h .anj-dropdown-menu.sc-anj-select, anj-pager .sc-anj-select-h .anj-dropdown-menu.sc-anj-select {\n  min-width: 2.25rem;\n}\n\nanj-time-picker-clock.sc-anj-select-h .anj-select-toggle.sc-anj-select, anj-time-picker-clock .sc-anj-select-h .anj-select-toggle.sc-anj-select {\n  padding-right: 1.75rem;\n}"; }
};

export { Select as anj_select };
