@uplynk/lynk-design 1.8.2 → 1.8.3

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

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

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

@@ -0,0 +1,24 @@
+import {
+  tbody_styles_default
+} from "./chunk.7L5JIRWZ.js";
+import {
+  LynkElement
+} from "./chunk.IZO5TPX4.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+
+// src/components/tbody/tbody.component.ts
+var LynkTbody = class extends LynkElement {
+  render() {
+    return x` <slot></slot> `;
+  }
+};
+LynkTbody.styles = [component_styles_default, tbody_styles_default];
+
+export {
+  LynkTbody
+};

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

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

package/cdn/chunks/chunk.34QLVZQN.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.IZO5TPX4.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.37SKXIVG.js

@@ -0,0 +1,124 @@
+import {
+  card_styles_default
+} from "./chunk.ZBZI3JBR.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  e
+} from "./chunk.HISHZWHF.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.IZO5TPX4.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/card/card.component.ts
+var LynkCard = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "footer",
+      "header",
+      "image",
+      "image-top-start",
+      "image-top-end",
+      "image-bottom-start",
+      "image-bottom-end"
+    );
+    this.appearance = "outlined";
+    this.stealth = false;
+    this.size = "inherit";
+    this.interactive = false;
+    this.active = false;
+    this.pulse = false;
+    this.aspectRatio = "16:9";
+  }
+  render() {
+    const hasAnyImageSlot = this.hasSlotController.test("image") || this.hasSlotController.test("image-top-start") || this.hasSlotController.test("image-top-end") || this.hasSlotController.test("image-bottom-start") || this.hasSlotController.test("image-bottom-end");
+    return x`
+      <div
+        part="base"
+        class=${e({
+      card: true,
+      // Modifiers
+      "card--interactive": this.interactive,
+      "card--active": this.active,
+      "card--stealth": this.stealth,
+      "card--pulse": this.pulse,
+      // States
+      "card--primary": this.state === "primary",
+      "card--accent": this.state === "accent",
+      "card--danger": this.state === "danger",
+      "card--success": this.state === "success",
+      "card--neutral": this.state === "neutral",
+      "card--warning": this.state === "warning",
+      "card--info": this.state === "info",
+      // Sizes
+      "card--small": this.size === "small",
+      "card--medium": this.size === "medium",
+      "card--large": this.size === "large",
+      // Slots
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header")
+    })}
+      >
+        ${hasAnyImageSlot ? x`
+              <div part="image-block" class="card__image-block ${`aspect--${this.aspectRatio.replace(/[:.]/g, "-")}`}">
+                <div part="image" class="card__image">
+                  <slot name="image"></slot>
+                </div>
+
+                <slot name="image-top-start" part="image-top-start" class="card__image-top-start"></slot>
+                <slot name="image-top-end" part="image-top-end" class="card__image-top-end"></slot>
+                <slot name="image-bottom-start" part="image-bottom-start" class="card__image-bottom-start"></slot>
+                <slot name="image-bottom-end" part="image-bottom-end" class="card__image-bottom-end"></slot>
+              </div>
+            ` : ""}
+
+        <slot name="header" part="header" class="card__header"></slot>
+        <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" class="card__footer"></slot>
+      </div>
+    `;
+  }
+};
+LynkCard.styles = [component_styles_default, card_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "appearance", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "stealth", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "state", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "interactive", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "pulse", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "aspect-ratio" })
+], LynkCard.prototype, "aspectRatio", 2);
+
+export {
+  LynkCard
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  LynkRange
+} from "./chunk.NEGANX4T.js";
+
+// src/components/range/range.ts
+var range_default = LynkRange;
+LynkRange.define("lynk-range");
+
+export {
+  range_default
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  LynkSplit
+} from "./chunk.6EHVBWXT.js";
+
+// src/components/split/split.ts
+var split_default = LynkSplit;
+LynkSplit.define("lynk-split");
+
+export {
+  split_default
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  LynkTabPanel
+} from "./chunk.XCPGRUPS.js";
+
+// src/components/tab-panel/tab-panel.ts
+var tab_panel_default = LynkTabPanel;
+LynkTabPanel.define("lynk-tab-panel");
+
+export {
+  tab_panel_default
+};

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

@@ -0,0 +1,158 @@
+import {
+  menu_item_styles_default
+} from "./chunk.ZNRVDW5X.js";
+import {
+  LynkIcon
+} from "./chunk.ANOG4MSM.js";
+import {
+  getTextContent
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  e
+} from "./chunk.HISHZWHF.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.IZO5TPX4.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/menu-item/menu-item.component.ts
+var LynkMenuItem = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.type = "normal";
+    this.checked = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener("click", this.handleHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+  handleHostClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+    this.emit("ev-click");
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+    if (this.type === "checkbox") {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-checked");
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    if (this.type === "checkbox") {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+      this.removeAttribute("aria-checked");
+    }
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "menu-item": true,
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--has-submenu": false
+      // reserved for future use
+    })}
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <lynk-icon name="check" library="system" aria-hidden="true"></lynk-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span class="menu-item__chevron">
+          <lynk-icon name="chevron-right" library="system" aria-hidden="true"></lynk-icon>
+        </span>
+      </div>
+    `;
+  }
+};
+LynkMenuItem.styles = [component_styles_default, menu_item_styles_default];
+LynkMenuItem.dependencies = {
+  "lynk-icon": LynkIcon
+};
+__decorateClass([
+  e2("slot:not([name])")
+], LynkMenuItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  e2(".menu-item")
+], LynkMenuItem.prototype, "menuItem", 2);
+__decorateClass([
+  n()
+], LynkMenuItem.prototype, "type", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkMenuItem.prototype, "checked", 2);
+__decorateClass([
+  n()
+], LynkMenuItem.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], LynkMenuItem.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled")
+], LynkMenuItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("type")
+], LynkMenuItem.prototype, "handleTypeChange", 1);
+
+export {
+  LynkMenuItem
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkDateTimePicker
+} from "./chunk.SXFGX3D2.js";
+
+// src/components/date-time-picker/date-time-picker.ts
+var date_time_picker_default = LynkDateTimePicker;
+LynkDateTimePicker.define("lynk-date-time-picker");
+
+export {
+  date_time_picker_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkTr
+} from "./chunk.64WRFE6M.js";
+
+// src/components/tr/tr.ts
+var tr_default = LynkTr;
+LynkTr.define("lynk-tr");
+
+export {
+  tr_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkBreadcrumbItem
+} from "./chunk.OKSGRPLV.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var breadcrumb_item_default = LynkBreadcrumbItem;
+LynkBreadcrumbItem.define("lynk-breadcrumb-item");
+
+export {
+  breadcrumb_item_default
+};

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

@@ -0,0 +1,24 @@
+import {
+  LynkTh
+} from "./chunk.FJ3OYOMS.js";
+
+// src/react/th/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-th";
+LynkTh.define("lynk-th");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTh,
+  react: React,
+  events: {
+    EvTableSort: "ev-table-sort"
+  },
+  displayName: "LynkTh"
+});
+var th_default = reactWrapper;
+
+export {
+  th_default
+};