import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2bf16536.js';

const checkboxCss = ".checkbox{display:inline}.checkbox input[type=checkbox]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;margin:0}.checkbox input[type=checkbox]:focus{outline:0}.checkbox__icon{background:var(--color-surface-1, #F6F6F6);position:relative}.checkbox__icon::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.checkbox__icon:focus-visible{outline:none}.checkbox__icon:focus-visible::before{border-color:var(--color-focus, #c226fb)}.checkbox__icon:hover{border-color:var(--color-brand, #0096fa)}.checkbox--selected .checkbox__icon{background-color:var(--color-brand, #0096fa);border-color:var(--color-brand, #0096fa)}.checkbox--selected .checkbox__icon__svg{color:var(--color-content-bright, #ffffff)}.checkbox--selected .checkbox__icon:hover{background-color:var(--color-brand, #0096fa)}.checkbox--selected-disabled .checkbox__label{cursor:not-allowed}.checkbox--selected-disabled .checkbox__icon{color:var(--color-content-default, #454545);border-color:var(--color-content-default, #454545);background-color:var(--color-surface-3, #CFCFCF);opacity:50%}.checkbox--selected-disabled .checkbox__text{opacity:50%}.checkbox--deselected .checkbox__icon__svg{display:none}.checkbox--deselected-disabled .checkbox__label{cursor:not-allowed}.checkbox--deselected-disabled .checkbox__icon{opacity:50%;background-color:var(--color-surface-1, #F6F6F6);border:1px solid var(--color-brand, #0096fa)}.checkbox--deselected-disabled .checkbox__icon__svg{display:none}.checkbox__label{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.checkbox__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:18px;width:18px;border-radius:4px;color:var(--color-surface-1, #F6F6F6);border:1px solid var(--color-content-default, #454545);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s}.checkbox__text{margin-left:8px;color:var(--color-content-default, #454545)}";
const BdsCheckboxStyle0 = checkboxCss;

let checkBoxIds = 0;
const Checkbox = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.bdsChange = createEvent(this, "bdsChange", 7);
        this.bdsInput = createEvent(this, "bdsInput", 7);
        this.onClick = () => {
            this.checked = !this.checked;
            this.bdsChange.emit({
                checked: this.checked,
            });
        };
        this.refNativeInput = (input) => {
            this.nativeInput = input;
        };
        this.getStyleState = () => {
            if (this.checked && !this.disabled) {
                return 'checkbox--selected';
            }
            if (!this.checked && !this.disabled) {
                return 'checkbox--deselected';
            }
            if (this.checked && this.disabled) {
                return 'checkbox--selected-disabled';
            }
            if (!this.checked && this.disabled) {
                return 'checkbox--deselected-disabled';
            }
            return '';
        };
        this.checkBoxId = undefined;
        this.refer = undefined;
        this.label = undefined;
        this.name = undefined;
        this.checked = false;
        this.disabled = false;
        this.dataTest = null;
    }
    connectedCallback() {
        this.checkBoxId = this.refer || `bds-checkbox-${checkBoxIds++}`;
    }
    getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    getValue() {
        return Promise.resolve(this.nativeInput.checked);
    }
    async toggle() {
        this.checked = !this.checked;
        this.bdsChange.emit({
            checked: this.checked,
        });
    }
    handleKeyDown(event) {
        if (event.key == 'Enter') {
            this.checked = !this.checked;
            this.bdsChange.emit({
                checked: this.checked,
            });
        }
    }
    render() {
        const styleState = this.getStyleState();
        return (h("div", { key: 'cc68ceb600bd09553be051f2e6eff7e97026bde2', class: {
                checkbox: true,
                [styleState]: true,
            } }, h("input", { key: 'a7e607fffc3854632391df4475e44681173cfddf', type: "checkbox", ref: this.refNativeInput, id: this.checkBoxId, name: this.name, onClick: this.onClick, checked: this.checked, disabled: this.disabled, "data-test": this.dataTest }), h("label", { key: 'eceadce1eb501b149a7637d78c36b360730a0675', class: "checkbox__label", htmlFor: this.checkBoxId }, h("div", { key: 'edb58c27c3fa1fc744f2a5b58b9a5dfd3cbd6e26', class: "checkbox__icon", tabindex: "0", onKeyDown: this.handleKeyDown.bind(this) }, h("bds-icon", { key: 'ec2253da42693429d455606ac5424650e85ef2f5', class: "checkbox__icon__svg", size: "x-small", name: "true", color: "inherit" })), this.label && (h("bds-typo", { key: '120dc175bad4c87114fd5bb9eef735904664c6d3', class: "checkbox__text", variant: "fs-14", tag: "span" }, this.label)))));
    }
};
Checkbox.style = BdsCheckboxStyle0;

const selectOptionCss = ":host(.option-checked){-ms-flex-order:-1;order:-1}.load-spinner{background-color:var(--color-surface-1, #F6F6F6);height:200px}.select-option{display:grid;width:100%;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;background-color:var(--color-surface-1, #F6F6F6);padding:8px;padding-left:12px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;outline:none;-ms-flex-order:1;order:1}.select-option--selected .select-option__container--value{color:var(--color-primary, #1e6bf1)}.select-option--disabled .select-option__container--value,.select-option--disabled .select-option__container--bulk{cursor:not-allowed;color:var(--color-content-disable, #636363)}.select-option--disabled .select-option__container--value:hover,.select-option--disabled .select-option__container--bulk:hover{background-color:var(--color-surface-1, #F6F6F6)}.select-option ::slotted(bds-icon){margin-right:10px}.select-option__container{color:var(--color-content-default, #454545);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.select-option__container__checkbox{cursor:pointer;background-color:var(--color-surface-1, #F6F6F6);padding:8px;padding-left:12px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;gap:8px;-ms-flex-align:center;align-items:center;outline:none;-ms-flex-direction:row;flex-direction:row}.select-option__container__fill_space{width:100%}.select-option__container--bulk,.select-option__container--status{color:var(--color-content-ghost, #8C8C8C)}.select-option__container--status{margin-left:4px}.select-option__container__overflow{overflow:hidden;padding-right:16px}.select-option__container:hover>.select-option__container--value,.select-option__container:hover>.select-option__container--bulk,.select-option__container:hover>.select-option__container--status{color:var(--color-primary, #1e6bf1)}.select-option__container:active>.select-option__container--value,.select-option__container:active>.select-option__container--bulk,.select-option__container:active>.select-option__container--status{color:var(--color-primary, #1e6bf1)}.select-option:hover{background-color:var(--color-surface-2, #E0E0E0)}.select-option:focus{background-color:var(--color-surface-2, #E0E0E0);color:#3f7de8}.select-option--selected{background-color:var(--color-surface-2, #E0E0E0)}.select-option--invisible{display:none}";
const BdsSelectOptionStyle0 = selectOptionCss;

const SelectOption = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.optionSelected = createEvent(this, "optionSelected", 7);
        this.optionChecked = createEvent(this, "optionChecked", 7);
        this.refNativeInput = (input) => {
            this.nativeInput = input;
        };
        this.checkedCurrent = () => {
            if (this.typeOption !== 'checkbox')
                return;
            this.nativeInput.toggle();
        };
        this.onClickSelectOption = () => {
            if (this.typeOption == 'checkbox')
                return;
            if (!this.disabled) {
                this.optionSelected.emit({ value: this.value, label: this.element.innerHTML });
            }
        };
        this.optionHandle = (ev) => {
            const elementChecked = ev.target;
            const data = { value: elementChecked.name, label: this.element.innerHTML, checked: elementChecked.checked };
            this.checked = !this.checked;
            this.optionChecked.emit(data);
        };
        this.attachOptionKeyboardListeners = (event) => {
            const element = event.target;
            switch (event.key) {
                case "Enter" /* Keyboard.ENTER */:
                    this.onClickSelectOption();
                    break;
                case "ArrowDown" /* Keyboard.ARROW_DOWN */:
                    if (element.parentElement.nextElementSibling &&
                        !element.parentElement.nextElementSibling.hasAttribute('invisible')) {
                        event.preventDefault();
                        event.stopPropagation();
                        element.parentElement.nextElementSibling.firstElementChild.focus();
                    }
                    break;
                case "ArrowUp" /* Keyboard.ARROW_UP */:
                    if (element.parentElement.previousElementSibling &&
                        !element.parentElement.previousElementSibling.hasAttribute('invisible')) {
                        event.preventDefault();
                        event.stopPropagation();
                        element.parentElement.previousElementSibling.firstElementChild.focus();
                    }
            }
        };
        this.value = undefined;
        this.selected = false;
        this.disabled = false;
        this.invisible = false;
        this.danger = false;
        this.bulkOption = '';
        this.slotAlign = 'center';
        this.titleText = undefined;
        this.status = undefined;
        this.typeOption = 'default';
        this.checked = false;
        this.dataTest = null;
    }
    changeSelectionType() {
        this.typeOption = this.typeOption;
    }
    async toggle() {
        this.checked = !this.checked;
    }
    async toMark() {
        this.checked = true;
    }
    async markOff() {
        this.checked = false;
    }
    render() {
        return (h("div", { key: '199a7b4b6cf208861dc2f8d4bd9fa50ef921a01c', id: `bds-select-option-${this.value}`, "data-event": "click", role: "button", onKeyDown: this.attachOptionKeyboardListeners, onClick: this.onClickSelectOption, "data-value": this.value, "data-test": this.dataTest, class: {
                'select-option': this.typeOption != 'checkbox',
                'select-option--selected': this.selected,
                'select-option--disabled': this.disabled,
                'select-option--invisible': this.invisible,
            } }, h("div", { key: '9ed8f55b785a6864724d95430efcfd59edc82ffa', style: { alignSelf: this.slotAlign } }, h("slot", { key: 'c15c3a7ffc26bdd00abf376bb473b1a85c1dab72', name: "input-left" })), h("div", { key: 'e2c9d11e5c96ff3d38ad97d8bbb6163e03e6d9ff', class: {
                'select-option__container': true,
                'select-option__container__fill_space': !!this.status,
                'select-option__container__checkbox': this.typeOption == 'checkbox',
            }, onClick: () => this.checkedCurrent() }, this.titleText && (h("bds-typo", { key: '8954e493dd100def771dce67c0854a60bf57757f', class: "select-option__container--value", variant: "fs-16", bold: "semi-bold" }, this.titleText)), this.typeOption === 'checkbox' ? (h("bds-checkbox", { ref: this.refNativeInput, refer: `html-for-${this.value}`, label: this.element.innerHTML, name: this.value, checked: this.checked, onBdsChange: (ev) => this.optionHandle(ev) })) : (h("bds-typo", { class: {
                'select-option__container--value': true,
                'select-option__container__overflow': !!this.status,
            }, noWrap: !!this.status, variant: "fs-14" }, h("slot", null)))), this.bulkOption && (h("bds-typo", { key: '95137999ebdef7901c3d965400db97b11b09d41b', class: "select-option__container--bulk", variant: "fs-10" }, this.bulkOption)), this.status && (h("bds-typo", { key: '6455287cabfd290c30de6b20e04c6f072285ad1c', class: "select-option__container--status", noWrap: true, variant: "fs-10" }, this.status))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "typeOption": ["changeSelectionType"]
    }; }
};
SelectOption.style = BdsSelectOptionStyle0;

export { Checkbox as bds_checkbox, SelectOption as bds_select_option };

//# sourceMappingURL=bds-checkbox_2.entry.js.map