import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _hidden, _GdsOption_instances, emitSelect_fn;
import { property } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { IconCheckmark } from "../../components/icon/icons/checkmark.component.js";
import { GdsElement } from "../../gds-element.js";
import { gdsCustomElement, html } from "../../scoping.js";
import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
import { tokens } from "../../tokens.style.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { watch } from "../../utils/decorators/index.js";
import { Focusable } from "../../utils/mixins/focusable.js";
import OptionStyles from "./option.styles.js";
let GdsOption = class extends Focusable(GdsElement) {
  constructor() {
    super();
    __privateAdd(this, _GdsOption_instances);
    __privateAdd(this, _hidden, false);
    this.selected = false;
    this.isPlaceholder = false;
    this.addEventListener("click", __privateMethod(this, _GdsOption_instances, emitSelect_fn));
    this.addEventListener("keydown", (e) => {
      if (e.key !== "Enter" && e.key !== " ") return;
      e.preventDefault();
      __privateMethod(this, _GdsOption_instances, emitSelect_fn).call(this, e);
    });
  }
  get hidden() {
    return __privateGet(this, _hidden);
  }
  set hidden(value) {
    const strValue = value.toString();
    __privateSet(this, _hidden, strValue === "true");
    __privateGet(this, _hidden) ? this.setAttribute("inert", "") : this.removeAttribute("inert");
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "option");
    this.updateComplete.then(() => {
      if (this.isPlaceholder) {
        this.hidden = true;
      }
      TransitionalStyles.instance.apply(this, "gds-option");
    });
  }
  get parentElement() {
    return super.parentElement;
  }
  _handlePlaceholderStatusChange() {
    if (this.isPlaceholder) {
      this.hidden = true;
    } else {
      this.hidden = false;
    }
  }
  render() {
    const isMultiple = this.parentElement?.multiple;
    if (!isMultiple) {
      if (this.selected) this.setAttribute("highlighted", "");
      else this.removeAttribute("highlighted");
    }
    return html`<div class="item">
      ${when(
      isMultiple,
      () => checkboxToggle({
        checked: this.selected,
        indeterminate: false,
        disabled: false,
        invalid: false
      })
    )} <slot></slot>
    </div>`;
  }
};
_hidden = new WeakMap();
_GdsOption_instances = new WeakSet();
emitSelect_fn = function(e) {
  e.stopPropagation();
  this.dispatchCustomEvent("gds-select", {
    bubbles: true,
    composed: true,
    detail: {
      value: this.value
    }
  });
};
GdsOption.styles = [tokens, rbcbToggleStyles, OptionStyles];
__decorateClass([
  property()
], GdsOption.prototype, "value", 2);
__decorateClass([
  property({
    type: Boolean,
    reflect: true
  })
], GdsOption.prototype, "hidden", 1);
__decorateClass([
  property({
    attribute: "aria-selected",
    reflect: true
  })
], GdsOption.prototype, "selected", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsOption.prototype, "isPlaceholder", 2);
__decorateClass([
  watch("isPlaceholder")
], GdsOption.prototype, "_handlePlaceholderStatusChange", 1);
GdsOption = __decorateClass([
  gdsCustomElement("gds-option", { dependsOn: [IconCheckmark] })
], GdsOption);
export {
  GdsOption
};
