@uplynk/lynk-design 1.8.0 → 1.8.2

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

@@ -0,0 +1,28 @@
+import {
+  LynkTextarea
+} from "./chunk.SOHZNCPF.js";
+
+// src/react/textarea/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-textarea";
+LynkTextarea.define("lynk-textarea");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTextarea,
+  react: React,
+  events: {
+    EvChange: "ev-change",
+    EvInput: "ev-input",
+    EvFocus: "ev-focus",
+    EvBlur: "ev-blur",
+    EvInvalid: "ev-invalid"
+  },
+  displayName: "LynkTextarea"
+});
+var textarea_default = reactWrapper;
+
+export {
+  textarea_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkStack
+} from "./chunk.W4TRSOIS.js";
+
+// src/components/stack/stack.ts
+var stack_default = LynkStack;
+LynkStack.define("lynk-stack");
+
+export {
+  stack_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkFormatNumber
+} from "./chunk.RXVDCLGB.js";
+
+// src/components/format-number/format-number.ts
+var format_number_default = LynkFormatNumber;
+LynkFormatNumber.define("lynk-format-number");
+
+export {
+  format_number_default
+};

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

@@ -0,0 +1,79 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.5T267NJU.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  LynkElement,
+  e,
+  n,
+  r
+} from "./chunk.JMUZMDRT.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+var LynkProgressRing = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+LynkProgressRing.styles = [component_styles_default, progress_ring_styles_default];
+__decorateClass([
+  e(".progress-ring__indicator")
+], LynkProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], LynkProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], LynkProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], LynkProgressRing.prototype, "label", 2);
+
+export {
+  LynkProgressRing
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkAvatar
+} from "./chunk.WJZX5ODA.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = LynkAvatar;
+LynkAvatar.define("lynk-avatar");
+
+export {
+  avatar_default
+};

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

@@ -0,0 +1,24 @@
+import {
+  LynkClock
+} from "./chunk.HEIOKSHL.js";
+
+// src/react/clock/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-clock";
+LynkClock.define("lynk-clock");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkClock,
+  react: React,
+  events: {
+    EvChange: "ev-change"
+  },
+  displayName: "LynkClock"
+});
+var clock_default = reactWrapper;
+
+export {
+  clock_default
+};

package/cdn/chunks/chunk.336P5BWD.js

@@ -0,0 +1,186 @@
+import {
+  icon_styles_default
+} from "./chunk.7RGBM4TT.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.5VFYSM76.js";
+import {
+  e
+} from "./chunk.W7GVO3BQ.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  LynkElement,
+  n,
+  r
+} from "./chunk.JMUZMDRT.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/icon/icon.component.ts
+var CACHEABLE_ERROR = Symbol();
+var RETRYABLE_ERROR = Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var LynkIcon = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.initialRender = false;
+    this.svg = null;
+    this.label = "";
+    this.library = "default";
+  }
+  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
+  async resolveIcon(url, library) {
+    var _a;
+    let fileData;
+    if (library == null ? void 0 : library.spriteSheet) {
+      this.svg = x`<svg part="svg">
+        <use part="use" href="${url}"></use>
+      </svg>`;
+      return this.svg;
+    }
+    try {
+      fileData = await fetch(url, { mode: "cors" });
+      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
+    } catch (e2) {
+      return RETRYABLE_ERROR;
+    }
+    try {
+      const div = document.createElement("div");
+      div.innerHTML = await fileData.text();
+      const svg = div.firstElementChild;
+      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
+      if (!parser) parser = new DOMParser();
+      const doc = parser.parseFromString(svg.outerHTML, "text/html");
+      const svgEl = doc.body.querySelector("svg");
+      if (!svgEl) return CACHEABLE_ERROR;
+      svgEl.part.add("svg");
+      return document.adoptNode(svgEl);
+    } catch (e2) {
+      return CACHEABLE_ERROR;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    this.initialRender = true;
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  getIconSource() {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return {
+        url: library.resolver(this.name),
+        fromLibrary: true
+      };
+    }
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const { url, fromLibrary } = this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
+    if (!url) {
+      this.svg = null;
+      return;
+    }
+    let iconResolver = iconCache.get(url);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon(url, library);
+      iconCache.set(url, iconResolver);
+    }
+    if (!this.initialRender) {
+      return;
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(url);
+    }
+    if (url !== this.getIconSource().url) {
+      return;
+    }
+    if (e(svg)) {
+      this.svg = svg;
+      if (library) {
+        await this.updateComplete;
+        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
+        if (typeof library.mutator === "function" && shadowSVG) {
+          library.mutator(shadowSVG);
+        }
+      }
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.emit("ev-error");
+        break;
+      default:
+        this.svg = svg.cloneNode(true);
+        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
+        this.emit("ev-load");
+    }
+  }
+  render() {
+    return this.svg;
+  }
+};
+LynkIcon.styles = [component_styles_default, icon_styles_default];
+__decorateClass([
+  r()
+], LynkIcon.prototype, "svg", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkIcon.prototype, "name", 2);
+__decorateClass([
+  n()
+], LynkIcon.prototype, "src", 2);
+__decorateClass([
+  n()
+], LynkIcon.prototype, "label", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], LynkIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], LynkIcon.prototype, "setIcon", 1);
+
+export {
+  LynkIcon
+};

package/cdn/chunks/chunk.3IO7XEZD.js

@@ -0,0 +1,135 @@
+import {
+  menu_styles_default
+} from "./chunk.PZXNJSHE.js";
+import {
+  LynkElement,
+  e
+} from "./chunk.JMUZMDRT.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/menu/menu.component.ts
+var LynkMenu = class extends LynkElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const target = event.target;
+    const item = target.closest("lynk-menu-item");
+    if (!item || item.disabled || item.inert) {
+      return;
+    }
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("ev-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const isInput = target.closest("lynk-input") !== null;
+    if (event.key === "Enter") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      item == null ? void 0 : item.click();
+    }
+    if (event.key === " " && !isInput) {
+      event.preventDefault();
+    }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (isInput) {
+        index = -1;
+      }
+      if (items.length > 0) {
+        event.preventDefault();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "lynk-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return x`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+LynkMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  e("slot")
+], LynkMenu.prototype, "defaultSlot", 2);
+
+export {
+  LynkMenu
+};

package/cdn/chunks/chunk.3P5D6RW6.js

@@ -0,0 +1,11 @@
+import {
+  LynkRadio
+} from "./chunk.I53SDNR6.js";
+
+// src/components/radio/radio.ts
+var radio_default = LynkRadio;
+LynkRadio.define("lynk-radio");
+
+export {
+  radio_default
+};

package/cdn/chunks/chunk.3UKGAQEV.js

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

package/cdn/chunks/chunk.3ZDT2TZC.js

@@ -0,0 +1,27 @@
+import {
+  LynkDropdown
+} from "./chunk.YOJZT6OZ.js";
+
+// src/react/dropdown/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-dropdown";
+LynkDropdown.define("lynk-dropdown");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkDropdown,
+  react: React,
+  events: {
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide"
+  },
+  displayName: "LynkDropdown"
+});
+var dropdown_default = reactWrapper;
+
+export {
+  dropdown_default
+};

package/cdn/chunks/chunk.42LSOIGQ.js

@@ -0,0 +1,11 @@
+import {
+  LynkCard
+} from "./chunk.JLQ2SVGA.js";
+
+// src/components/card/card.ts
+var card_default = LynkCard;
+LynkCard.define("lynk-card");
+
+export {
+  card_default
+};

package/cdn/chunks/chunk.47MSHVL6.js

@@ -0,0 +1,11 @@
+import {
+  LynkScroller
+} from "./chunk.7MQX4BC5.js";
+
+// src/components/scroller/scroller.ts
+var scroller_default = LynkScroller;
+LynkScroller.define("lynk-scroller");
+
+export {
+  scroller_default
+};

package/cdn/chunks/chunk.4GUXCZ3M.js

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