@synergy-design-system/components/dist/chunks/chunk.H44OLU6E.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  option_custom_styles_default
} from "./chunk.G3KRSXVI.js";
import {
  option_styles_default
} from "./chunk.IVM3BGRH.js";
import {
  delimiterToWhiteSpace
} from "./chunk.ARR23WUY.js";
import {
  SynIcon
} from "./chunk.WFJVDRQR.js";
import {
  LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
  watch
} from "./chunk.BVZQ6QSY.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/option/option.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property, query, state } from "lit/decorators.js";
var SynOption = class extends SynergyElement {
  constructor() {
    super(...arguments);
    // @ts-expect-error - Controller is currently unused
    this.localize = new LocalizeController(this);
    this.isInitialized = false;
    this.delimiter = " ";
    this.current = false;
    this.selected = false;
    this.hasHover = false;
    this.value = "";
    this.disabled = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "option");
    this.setAttribute("aria-selected", "false");
  }
  handleDefaultSlotChange() {
    if (this.isInitialized) {
      customElements.whenDefined("syn-combobox").then(() => {
        const controller = this.closest("syn-combobox");
        if (controller) {
          controller.handleDefaultSlotChange();
        }
      });
      customElements.whenDefined("syn-select").then(() => {
        const controller = this.closest("syn-select");
        if (controller) {
          controller.handleDefaultSlotChange();
        }
      });
    } else {
      this.isInitialized = true;
    }
  }
  handleMouseEnter() {
    this.hasHover = true;
  }
  handleMouseLeave() {
    this.hasHover = false;
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleSelectedChange() {
    this.setAttribute("aria-selected", this.selected ? "true" : "false");
  }
  handleValueChange() {
    if (typeof this.value === "number") {
      return;
    }
    if (typeof this.value !== "string") {
      this.value = String(this.value);
    }
    const { delimiter } = this;
    if (this.value.includes(delimiter)) {
      console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
      this.value = delimiterToWhiteSpace(this.value, this.delimiter);
    }
  }
  /** Returns a plain text label based on the option's content. */
  getTextLabel() {
    const nodes = this.childNodes;
    let label = "";
    [...nodes].forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        if (!node.hasAttribute("slot")) {
          label += node.textContent;
        }
      }
      if (node.nodeType === Node.TEXT_NODE) {
        label += node.textContent;
      }
    });
    return label.trim();
  }
  render() {
    return html`
      <div
        part="base"
        class=${classMap({
      option: true,
      "option--current": this.current,
      "option--disabled": this.disabled,
      "option--selected": this.selected,
      "option--hover": this.hasHover
    })}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        <syn-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></syn-icon>
        <slot part="prefix" name="prefix" class="option__prefix"></slot>
        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
        <slot part="suffix" name="suffix" class="option__suffix"></slot>
      </div>
    `;
  }
};
SynOption.styles = [component_styles_default, option_styles_default, option_custom_styles_default];
SynOption.dependencies = { "syn-icon": SynIcon };
__decorateClass([
  query(".option__label")
], SynOption.prototype, "defaultSlot", 2);
__decorateClass([
  state()
], SynOption.prototype, "delimiter", 2);
__decorateClass([
  state()
], SynOption.prototype, "current", 2);
__decorateClass([
  state()
], SynOption.prototype, "selected", 2);
__decorateClass([
  state()
], SynOption.prototype, "hasHover", 2);
__decorateClass([
  property({ reflect: true })
], SynOption.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SynOption.prototype, "disabled", 2);
__decorateClass([
  watch("disabled")
], SynOption.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch("selected")
], SynOption.prototype, "handleSelectedChange", 1);
__decorateClass([
  watch("value")
], SynOption.prototype, "handleValueChange", 1);

export {
  SynOption
};
//# sourceMappingURL=chunk.H44OLU6E.js.map