@uplynk/lynk-design 1.5.0 → 1.7.0

package/cdn/chunks/chunk.23RIRHWX.js

@@ -0,0 +1,24 @@
+import {
+  LynkMenu
+} from "./chunk.M4HJ4Y5Q.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-menu";
+LynkMenu.define("lynk-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkMenu,
+  react: React,
+  events: {
+    EvSelect: "ev-select"
+  },
+  displayName: "LynkMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

package/cdn/chunks/chunk.25JF4WH6.js

@@ -0,0 +1,24 @@
+import {
+  tbody_styles_default
+} from "./chunk.4H6ICGG5.js";
+import {
+  LynkElement
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.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.2GIUQEBX.js

@@ -0,0 +1,96 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.ZU2QVJYT.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  LynkIcon
+} from "./chunk.JQJIAYLE.js";
+import {
+  LynkElement,
+  e,
+  n
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+var LynkBreadcrumb = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "lynk-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return x`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <lynk-icon
+            name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"}
+            library="system"
+          ></lynk-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+LynkBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
+LynkBreadcrumb.dependencies = { "lynk-icon": LynkIcon };
+__decorateClass([
+  e("slot")
+], LynkBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  e('slot[name="separator"]')
+], LynkBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  n()
+], LynkBreadcrumb.prototype, "label", 2);
+
+export {
+  LynkBreadcrumb
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkDialog
+} from "./chunk.CRHJBTUS.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = LynkDialog;
+LynkDialog.define("lynk-dialog");
+
+export {
+  dialog_default
+};

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

@@ -0,0 +1,36 @@
+import {
+  page_styles_default
+} from "./chunk.DNXWQAWM.js";
+import {
+  LynkElement
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+
+// src/components/page/page.component.ts
+var LynkPage = class extends LynkElement {
+  render() {
+    return x`
+      <div part="base" class="page">
+        <slot name="header" part="header" class="page__header"></slot>
+        <slot name="left-sidebar" part="left-sidebar" class="page__left-sidebar"></slot>
+        <slot name="left-inset-sidebar" part="left-inset-sidebar" class="page__left-inset-sidebar"></slot>
+        <div part="main" class="page__main">
+          <slot></slot>
+        </div>
+        <slot name="right-sidebar" part="right-sidebar" class="page__right-sidebar"></slot>
+        <slot name="right-inset-sidebar" part="right-inset-sidebar" class="page__right-inset-sidebar"></slot>
+        <slot name="footer" part="footer" class="page__footer"></slot>
+      </div>
+    `;
+  }
+};
+LynkPage.styles = [component_styles_default, page_styles_default];
+
+export {
+  LynkPage
+};

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

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

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

@@ -0,0 +1,35 @@
+import {
+  thead_styles_default
+} from "./chunk.BUVPY76E.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/thead/thead.component.ts
+var LynkThead = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.sticky = false;
+  }
+  render() {
+    return x` <slot></slot> `;
+  }
+};
+LynkThead.styles = [component_styles_default, thead_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkThead.prototype, "sticky", 2);
+
+export {
+  LynkThead
+};

package/cdn/chunks/chunk.37IND4E6.js

@@ -0,0 +1,98 @@
+import {
+  button_group_styles_default
+} from "./chunk.ORG56WJX.js";
+import {
+  LynkElement,
+  e,
+  n,
+  r
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/button-group/button-group.component.ts
+var LynkButtonGroup = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-lynk-button-group__button", true);
+        button.toggleAttribute("data-lynk-button-group__button--first", index === 0);
+        button.toggleAttribute(
+          "data-lynk-button-group__button--inner",
+          index > 0 && index < slottedElements.length - 1
+        );
+        button.toggleAttribute("data-lynk-button-group__button--last", index === slottedElements.length - 1);
+        button.toggleAttribute(
+          "data-lynk-button-group__button--radio",
+          button.tagName.toLowerCase() === "lynk-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class="button-group"
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+LynkButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  e("slot")
+], LynkButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], LynkButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "lynk-button, lynk-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  LynkButtonGroup
+};

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

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

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

@@ -0,0 +1,21 @@
+import {
+  LynkScroller
+} from "./chunk.T5LGZGCG.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/cdn/chunks/chunk.3PYNWZFB.js

@@ -0,0 +1,216 @@
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  nav_styles_default
+} from "./chunk.SSNUOZWM.js";
+import {
+  nav_item_default
+} from "./chunk.NR6TZ2P2.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  e
+} from "./chunk.4VMW2AZ2.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.KIPDMNCO.js";
+import {
+  component_styles_default
+} from "./chunk.V6UNAAZX.js";
+import {
+  x
+} from "./chunk.Z3O73C4R.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/nav/nav.component.ts
+var LynkNav = class extends LynkElement {
+  constructor() {
+    super();
+    this.value = void 0;
+    this.squished = false;
+    this.localize = new LocalizeController(this);
+    this.handleFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!relatedTarget || !this.contains(relatedTarget)) {
+        this.tabIndex = 0;
+      }
+    };
+    this.handleFocusIn = (event) => {
+      const target = event.target;
+      if (event.target === this) {
+        this.focusItem(this.lastFocusedItem || this.getAllNavItems()[0]);
+      }
+      if (nav_item_default.isTreeItem(target) && !target.disabled) {
+        if (this.lastFocusedItem) {
+          this.lastFocusedItem.tabIndex = -1;
+        }
+        this.lastFocusedItem = target;
+        this.tabIndex = -1;
+        target.tabIndex = 0;
+      }
+    };
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    if (this.squished) {
+      this.handleSquishedChange();
+    }
+    this.setAttribute("role", "navigation");
+    this.setAttribute("tabindex", "0");
+    await this.updateComplete;
+    this.mutationObserver = new MutationObserver(this.handleNavChanged);
+    this.mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleNavChanged(mutations) {
+    for (const mutation of mutations) {
+      const removedNodes = [...mutation.removedNodes].filter(nav_item_default.isTreeItem);
+      if (removedNodes.includes(this.lastFocusedItem)) {
+        this.focusItem(this.getFocusableItems()[0]);
+      }
+    }
+  }
+  getAllNavItems() {
+    return [...this.querySelectorAll("lynk-nav-item")];
+  }
+  getNavGroups() {
+    return [...this.querySelectorAll("lynk-nav-group")];
+  }
+  getFocusableItems() {
+    const items = this.getAllNavItems();
+    const collapsedItems = /* @__PURE__ */ new Set();
+    return items.filter((item) => {
+      var _a;
+      if (item.disabled) return false;
+      const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("[role=treeitem]");
+      if (parent && (!parent.expanded || collapsedItems.has(parent))) {
+        collapsedItems.add(item);
+      }
+      return !collapsedItems.has(item);
+    });
+  }
+  focusItem(item) {
+    item == null ? void 0 : item.focus();
+  }
+  handleKeyDown(event) {
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Enter", "Tab", " "].includes(event.key)) {
+      return;
+    }
+    const items = this.getFocusableItems();
+    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.localize.dir() === "rtl";
+    if (items.length > 0) {
+      const activeItemIndex = items.findIndex((item) => item.matches(":focus"));
+      const activeItem = items[activeItemIndex];
+      const focusItemAt = (index) => {
+        const item = items[clamp(index, 0, items.length - 1)];
+        this.focusItem(item);
+      };
+      const toggleExpand = (expanded) => {
+        activeItem.expanded = expanded;
+      };
+      if (event.key === "Tab" && !event.shiftKey && activeItemIndex === items.length - 1) {
+        this.tabIndex = 0;
+        activeItem.tabIndex = 0;
+      } else if (event.key === "Tab" && event.shiftKey && activeItemIndex === 0) {
+        this.tabIndex = -1;
+        activeItem.tabIndex = -1;
+      } else {
+        event.preventDefault();
+        if (event.key === "ArrowDown" || event.key === "Tab" && !event.shiftKey) {
+          focusItemAt(activeItemIndex + 1);
+        } else if (event.key === "ArrowUp" || event.key === "Tab" && event.shiftKey) {
+          focusItemAt(activeItemIndex - 1);
+        } else if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+          if (!activeItem || activeItem.disabled || activeItem.isParent && activeItem.expanded || !activeItem.isParent) {
+            focusItemAt(activeItemIndex + 1);
+          } else {
+            toggleExpand(true);
+          }
+        } else if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+          if (!activeItem || activeItem.disabled || !activeItem.isParent || activeItem.isParent && !activeItem.expanded) {
+            focusItemAt(activeItemIndex - 1);
+          } else {
+            toggleExpand(false);
+          }
+        } else if (event.key === "Home") {
+          focusItemAt(0);
+        } else if (event.key === "End") {
+          focusItemAt(items.length - 1);
+        } else if (event.key === "Enter" || event.key === " ") {
+          if (!activeItem.disabled) {
+            activeItem.click();
+          }
+        }
+      }
+    }
+  }
+  handleClick(event) {
+    const target = event.target;
+    const item = target.closest("lynk-nav-item");
+    if (!item || item.disabled || item.inert) {
+      return;
+    }
+    this.emit("ev-nav-select", { detail: { item } });
+  }
+  handleSquishedChange() {
+    const items = this.getAllNavItems();
+    const groups = this.getNavGroups();
+    items.forEach((item) => {
+      item.squished = this.squished;
+      item.expanded = false;
+      item.isParent = false;
+    });
+    groups.forEach((item) => {
+      item.squished = this.squished;
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      nav: true,
+      "nav--squished": this.squished
+    })}
+        role="tree"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot part="list"></slot>
+      </div>
+    `;
+  }
+};
+LynkNav.styles = [component_styles_default, nav_styles_default];
+__decorateClass([
+  e2("slot:not([name])")
+], LynkNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkNav.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkNav.prototype, "squished", 2);
+__decorateClass([
+  watch("squished", { waitUntilFirstUpdate: true })
+], LynkNav.prototype, "handleSquishedChange", 1);
+
+export {
+  LynkNav
+};