import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
import { c as m } from "./component.styles.CRO4Odto.js";
import { c as v } from "./custom-element.L4WJXn1j.js";
import { L as g } from "./i18n.BABe9hN4.js";
import { w as d } from "./watch.BCJD77bD.js";
import { i as b, x as h } from "./lit-element.jLBm65_O.js";
import { r as f } from "./state.CSDxrqLd.js";
import { e as _ } from "./query.BBf1UFkC.js";
import { e as y } from "./class-map.BiVq-cVR.js";
import { n as u } from "./when.Dr1es41R.js";
import k from "../components/icon.js";
import w from "../components/space.js";
var r = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(r || {});
const C = b`:host{-webkit-user-select:none;user-select:none;display:block}:host(:focus){outline:none}.option{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--option-font-weight,var(--cx-font-weight-regular));line-height:var(--cx-line-height-large);letter-spacing:var(--cx-letter-spacing-normal);color:var(--option-color,var(--cx-color-neutral-700));padding:var(--cx-spacing-x-small) var(--cx-spacing-medium) var(--cx-spacing-x-small) var(--cx-spacing-x-small);transition:var(--cx-transition-fast) fill;cursor:pointer;align-items:center;display:flex;position:relative}.option:not(.option--show-check){padding-inline:var(--cx-spacing-small)}.option--hover:not(.option--current):not(.option--disabled){background-color:var(--cx-menu-item-background-color-hover)}.option--current,.option--current.option--disabled{background-color:var(--cx-menu-item-background-color-hover);opacity:1}.option--selected{color:var(--option-selected-color,var(--cx-color-primary));font-weight:var(--option-selected-font-weight,var(--cx-font-weight-regular))}.option--disabled{opacity:.5;cursor:default;outline:none}.option__content{flex:1}.option__label{line-height:var(--cx-line-height-medium);flex:auto;display:inline-block}.option .option__check{visibility:hidden;flex:none;justify-content:center;align-items:center;padding-inline-end:var(--cx-spacing-2x-small);display:none}.option--show-check .option__check{display:block}.option--show-check.option--selected .option__check{visibility:visible}.option__help-text{color:var(--option-help-text-color,var(--cx-color-neutral-600));font-weight:var(--option-help-text-font-weight,var(--cx-font-weight-regular))}.option--selected .option__content .option__help-text{color:var(--option-selected-help-text-color,var(--cx-color-primary));font-weight:var(--option-selected-help-text-font-weight,var(--cx-font-weight-regular))}.option__prefix,.option__suffix{flex:none;align-items:center;display:flex}.option__prefix::slotted(*){margin-inline-end:var(--cx-spacing-x-small)}.option__suffix::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.option__prefix{align-self:var(--prefix-alignment,center)}.option__suffix{align-self:var(--suffix-alignment,center)}.option__check{align-self:var(--check-alignment,center)}@media (forced-colors:active){:host(:hover:not([aria-disabled=true])) .option{outline-offset:-1px;outline:1px dashed selecteditem}}`;
var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, n, i, l) => {
  for (var a = l > 1 ? void 0 : l ? E(n, i) : n, c = t.length - 1, p; c >= 0; c--)
    (p = t[c]) && (a = (l ? p(n, i, a) : p(a)) || a);
  return l && a && L(n, i, a), a;
};
let e = class extends x {
  constructor() {
    super(...arguments), this.localize = new g(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement = r.Left;
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
  }
  handleDefaultSlotChange() {
    const t = this.getTextLabel();
    if (typeof this.cachedTextLabel > "u") {
      this.cachedTextLabel = t;
      return;
    }
    t !== this.cachedTextLabel && (this.cachedTextLabel = t, this.emit("slotchange", {
      bubbles: !0,
      cancelable: !1,
      composed: !1
    }));
  }
  handleMouseEnter() {
    this.hasHover = !0;
  }
  handleMouseLeave() {
    this.hasHover = !1;
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleSelectedChange() {
    this.setAttribute("aria-selected", this.selected ? "true" : "false");
  }
  handleValueChange() {
    typeof this.value != "string" && (this.value = String(this.value)), this.value.includes(" ") && (console.error(
      "Option values cannot include a space. All spaces have been replaced with underscores.",
      this
    ), this.value = this.value.replace(/ /g, "_"));
  }
  /** Returns a plain text label based on the option's content. */
  getTextLabel() {
    const t = this.childNodes;
    let n = "";
    return [...t].forEach((i) => {
      i.nodeType === Node.ELEMENT_NODE && (i.hasAttribute("slot") || (n += i.textContent)), i.nodeType === Node.TEXT_NODE && (n += i.textContent);
    }), n.trim();
  }
  render() {
    return h`<div part="base" class=${y({
      option: !0,
      "option--current": this.current,
      "option--disabled": this.disabled,
      "option--hover": this.hasHover,
      "option--selected": this.selected,
      "option--show-check": this.showCheck
    })} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>${u(
      this.checkPlacement === r.Left,
      () => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
    )}<slot part="prefix" name="prefix" class="option__prefix"></slot><cx-space part="content" class="option__content" direction="vertical" spacing="3x-small"><slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot><slot part="help-text" name="help-text" class="option__help-text"></slot></cx-space><slot part="suffix" name="suffix" class="option__suffix"></slot>${u(
      this.checkPlacement === r.Right,
      () => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
    )}</div>`;
  }
};
e.styles = [m, C];
e.dependencies = { "cx-icon": k, "cx-space": w };
o([
  _(".option__label")
], e.prototype, "defaultSlot", 2);
o([
  f()
], e.prototype, "current", 2);
o([
  f()
], e.prototype, "selected", 2);
o([
  f()
], e.prototype, "hasHover", 2);
o([
  s({ reflect: !0 })
], e.prototype, "value", 2);
o([
  s({ reflect: !0, type: Boolean })
], e.prototype, "disabled", 2);
o([
  s({ attribute: "show-check", reflect: !0, type: Boolean })
], e.prototype, "showCheck", 2);
o([
  s({ attribute: "check-placement", reflect: !0, type: String })
], e.prototype, "checkPlacement", 2);
o([
  d("disabled")
], e.prototype, "handleDisabledChange", 1);
o([
  d("selected")
], e.prototype, "handleSelectedChange", 1);
o([
  d("value")
], e.prototype, "handleValueChange", 1);
e = o([
  v("cx-option")
], e);
export {
  e as C,
  r as a
};
