@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/chunks/option.COnEtd3X.js

@@ -0,0 +1,123 @@
+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.BFqTRDCA.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
+};