@uplynk/lynk-design 1.11.1 → 1.11.3

package/dist/chunks/chunk.EKR23TDB.js

@@ -0,0 +1,11 @@
+import {
+  LynkTree
+} from "./chunk.B4EN7XIJ.js";
+
+// src/components/tree/tree.ts
+var tree_default = LynkTree;
+LynkTree.define("lynk-tree");
+
+export {
+  tree_default
+};

package/dist/chunks/chunk.ERKQINGD.js

@@ -0,0 +1,11 @@
+import {
+  LynkPopup
+} from "./chunk.HX54CHGM.js";
+
+// src/components/popup/popup.ts
+var popup_default = LynkPopup;
+LynkPopup.define("lynk-popup");
+
+export {
+  popup_default
+};

package/dist/chunks/chunk.EXEEDQVA.js

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

package/dist/chunks/chunk.F7XYGM4A.js

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

package/dist/chunks/chunk.FEQ5C6QW.js

@@ -0,0 +1,197 @@
+import {
+  truncate_styles_default
+} from "./chunk.GJSBWWXK.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/truncate/truncate.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var LynkTruncate = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasDefaultSlot = false;
+    this.hasEndSlot = false;
+    this.isExpanded = false;
+    this.isTruncated = false;
+    this.title = "";
+    this.expandable = false;
+    this.moreText = "[more]";
+    this.lessText = "[less]";
+  }
+  handleDefaultSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedNodes({ flatten: true })];
+    const hasSlot = slottedElements.some((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return (node.textContent || "").trim() !== "";
+      }
+      return true;
+    });
+    if (this.hasDefaultSlot !== hasSlot) {
+      this.hasDefaultSlot = hasSlot;
+      this.cachedElements = void 0;
+      this.debouncedCheckTruncation();
+    }
+  }
+  handleEndSlotChange() {
+    const slottedElements = [...this.endSlot.assignedNodes({ flatten: true })];
+    const hasSlot = slottedElements.some((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return (node.textContent || "").trim() !== "";
+      }
+      return true;
+    });
+    if (this.hasEndSlot !== hasSlot) {
+      this.hasEndSlot = hasSlot;
+      this.cachedElements = void 0;
+      this.debouncedCheckTruncation();
+    }
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    return (this.textContent || "").trim();
+  }
+  handleMoreClick() {
+    this.isExpanded = true;
+    this.emit("ev-expand");
+  }
+  handleLessClick() {
+    this.isExpanded = false;
+    this.emit("ev-collapse");
+  }
+  checkTruncation() {
+    if (!this.expandable || this.isExpanded) return;
+    if (!this.cachedElements) {
+      const shadowRoot = this.shadowRoot;
+      this.cachedElements = {
+        start: shadowRoot ? shadowRoot.querySelector(".truncate__start") : null,
+        end: shadowRoot ? shadowRoot.querySelector(".truncate__end") : null
+      };
+    }
+    const { start: startElement, end: endElement } = this.cachedElements;
+    let isTruncated = false;
+    if (this.clamp && startElement) {
+      isTruncated = startElement.scrollHeight > startElement.clientHeight;
+    } else if (!this.hasDefaultSlot && this.hasEndSlot && endElement) {
+      isTruncated = endElement.scrollWidth > endElement.clientWidth;
+    } else if (this.hasDefaultSlot && this.hasEndSlot && startElement && endElement) {
+      isTruncated = startElement.scrollWidth > startElement.clientWidth || endElement.scrollWidth > endElement.clientWidth;
+    } else if (this.hasDefaultSlot && !this.hasEndSlot && startElement) {
+      isTruncated = startElement.scrollWidth > startElement.clientWidth;
+    }
+    if (this.isTruncated !== isTruncated) {
+      this.isTruncated = isTruncated;
+    }
+  }
+  debouncedCheckTruncation() {
+    if (this.checkTimeout) {
+      clearTimeout(this.checkTimeout);
+    }
+    this.checkTimeout = window.setTimeout(() => {
+      requestAnimationFrame(() => this.checkTruncation());
+    }, 33);
+  }
+  firstUpdated() {
+    if (this.expandable) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.debouncedCheckTruncation();
+      });
+      const parent = this.parentElement;
+      if (parent) {
+        this.resizeObserver.observe(parent);
+      }
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    if (this.checkTimeout) {
+      clearTimeout(this.checkTimeout);
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("expandable") || changedProperties.has("clamp") || changedProperties.has("isExpanded")) {
+      this.cachedElements = void 0;
+      this.debouncedCheckTruncation();
+    }
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        title=${this.title || this.getTextLabel()}
+        class=${classMap({
+      truncate: true,
+      "truncate--end": this.hasDefaultSlot && !this.hasEndSlot,
+      "truncate--middle": this.hasDefaultSlot && this.hasEndSlot,
+      "truncate--start": !this.hasDefaultSlot && this.hasEndSlot,
+      "truncate--expanded": this.isExpanded,
+      "truncate--expandable": this.expandable
+    })}
+      >
+        ${this.expandable ? html`
+              <slot class="truncate__start" @slotchange=${this.handleDefaultSlotChange}></slot>
+              ${this.isTruncated || this.isExpanded ? html`
+                    <span
+                      class="truncate__toggle"
+                      @click=${this.isExpanded ? this.handleLessClick : this.handleMoreClick}
+                    >
+                      ${this.isExpanded ? this.lessText : this.moreText}
+                    </span>
+                  ` : ""}
+              <slot name="end" class="truncate__end" @slotchange=${this.handleEndSlotChange}></slot>
+            ` : html`
+              <slot class="truncate__start" @slotchange=${this.handleDefaultSlotChange}></slot>
+              <slot name="end" class="truncate__end" @slotchange=${this.handleEndSlotChange}></slot>
+            `}
+      </span>
+    `;
+  }
+};
+LynkTruncate.styles = [component_styles_default, truncate_styles_default];
+__decorateClass([
+  query("slot")
+], LynkTruncate.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="end"]')
+], LynkTruncate.prototype, "endSlot", 2);
+__decorateClass([
+  state()
+], LynkTruncate.prototype, "hasDefaultSlot", 2);
+__decorateClass([
+  state()
+], LynkTruncate.prototype, "hasEndSlot", 2);
+__decorateClass([
+  state()
+], LynkTruncate.prototype, "isExpanded", 2);
+__decorateClass([
+  state()
+], LynkTruncate.prototype, "isTruncated", 2);
+__decorateClass([
+  property()
+], LynkTruncate.prototype, "title", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkTruncate.prototype, "clamp", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTruncate.prototype, "expandable", 2);
+__decorateClass([
+  property({ attribute: "more-text" })
+], LynkTruncate.prototype, "moreText", 2);
+__decorateClass([
+  property({ attribute: "less-text" })
+], LynkTruncate.prototype, "lessText", 2);
+
+export {
+  LynkTruncate
+};

package/dist/chunks/chunk.FFO3Q2VA.js

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

package/dist/chunks/chunk.FJPE6IAR.js

@@ -0,0 +1,11 @@
+import {
+  LynkIconButton
+} from "./chunk.OE2HMZ5Y.js";
+
+// src/components/icon-button/icon-button.ts
+var icon_button_default = LynkIconButton;
+LynkIconButton.define("lynk-icon-button");
+
+export {
+  icon_button_default
+};

package/dist/chunks/chunk.FLTOV45C.js

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

package/dist/chunks/chunk.FMP43SFN.js

@@ -0,0 +1,115 @@
+import {
+  radio_styles_default
+} from "./chunk.3K5NR5DK.js";
+import {
+  LynkIcon
+} from "./chunk.HZ6GAOLV.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/radio/radio.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var LynkRadio = class extends LynkElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.hasFocus = false;
+    this.size = "medium";
+    this.disabled = false;
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.emit("ev-blur");
+    };
+    this.handleClick = () => {
+      if (!this.disabled) {
+        this.checked = true;
+      }
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.emit("ev-focus");
+    };
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setInitialAttributes();
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large"
+    })}
+      >
+        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
+          ${this.checked ? html`
+                <lynk-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></lynk-icon>
+              ` : ""}
+        </span>
+
+        <slot part="label" class="radio__label"></slot>
+      </span>
+    `;
+  }
+};
+LynkRadio.styles = [component_styles_default, radio_styles_default];
+LynkRadio.dependencies = { "lynk-icon": LynkIcon };
+__decorateClass([
+  state()
+], LynkRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], LynkRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], LynkRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadio.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], LynkRadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkRadio.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkRadio
+};