@uplynk/lynk-design 1.4.0 → 1.5.0

package/cdn/chunks/chunk.2F4P2J5Q.js

@@ -0,0 +1,21 @@
+import {
+  LynkOption
+} from "./chunk.2LQ65Y7Y.js";
+
+// src/react/option/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-option";
+LynkOption.define("lynk-option");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkOption,
+  react: React,
+  events: {},
+  displayName: "LynkOption"
+});
+var option_default = reactWrapper;
+
+export {
+  option_default
+};

package/cdn/chunks/chunk.2LQ65Y7Y.js

@@ -0,0 +1,165 @@
+import {
+  option_styles_default
+} from "./chunk.36K4UGHT.js";
+import {
+  LocalizeController
+} from "./chunk.AFESEORB.js";
+import {
+  LynkIcon
+} from "./chunk.KX27Q3T5.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  e
+} from "./chunk.4VMW2AZ2.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.66NTDOZJ.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/option/option.component.ts
+var LynkOption = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.isInitialized = false;
+    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("lynk-combobox").then(() => {
+        const controller = this.closest("lynk-combobox");
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+      customElements.whenDefined("lynk-select").then(() => {
+        const controller = this.closest("lynk-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 !== "string") {
+      this.value = String(this.value);
+    }
+    if (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 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 x`
+      <div
+        part="base"
+        class=${e({
+      option: true,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <lynk-icon
+          part="checked-icon"
+          class="option__check"
+          name="check"
+          library="system"
+          aria-hidden="true"
+        ></lynk-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>
+    `;
+  }
+};
+LynkOption.styles = [component_styles_default, option_styles_default];
+LynkOption.dependencies = { "lynk-icon": LynkIcon };
+__decorateClass([
+  e2(".option__label")
+], LynkOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkOption.prototype, "current", 2);
+__decorateClass([
+  r()
+], LynkOption.prototype, "selected", 2);
+__decorateClass([
+  r()
+], LynkOption.prototype, "hasHover", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkOption.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkOption.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], LynkOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], LynkOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("value")
+], LynkOption.prototype, "handleValueChange", 1);
+
+export {
+  LynkOption
+};