import { r as registerInstance, e as createEvent, h, g as getElement } from './index-06929dd0.js';

const selectOptionCss = ":host(.option-checked){-ms-flex-order:-1;order:-1}.load-spinner{background-color:var(--color-surface-0, #ffffff);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-0, #ffffff);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-1, #f6f6f6)}.select-option:focus{background-color:var(--color-surface-1, #f6f6f6);color:#3f7de8}.select-option--selected{background-color:var(--color-surface-1, #f6f6f6)}.select-option--invisible{display:none}";

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", { 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", { style: { alignSelf: this.slotAlign } }, h("slot", { name: "input-left" })), h("div", { 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", { 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", { class: "select-option__container--bulk", variant: "fs-10" }, this.bulkOption)), this.status && (h("bds-typo", { 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 = selectOptionCss;

export { SelectOption as bds_select_option };
