@uplynk/lynk-design 1.19.2 → 1.20.0

package/dist/chunks/chunk.OEHS4S6B.js

@@ -0,0 +1,343 @@
+import {
+  nav_item_styles_default
+} from "./chunk.RXKPYQAX.js";
+import {
+  LynkTooltip
+} from "./chunk.LGVGRCL2.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.POQ2R5WV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.HKGM3EFE.js";
+import {
+  LocalizeController
+} from "./chunk.VIBAEA26.js";
+import {
+  LynkIcon
+} from "./chunk.JHTDTNM2.js";
+import {
+  getTextContent
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.SPANRPKG.js";
+import {
+  LynkElement
+} from "./chunk.OVBPFU7N.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/nav-item/nav-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var _LynkNavItem = class _LynkNavItem extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.childItems = [];
+    this.isParent = false;
+    this.isChild = false;
+    this.loading = false;
+    this.depth = 0;
+    this.squished = false;
+    this.title = "";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.selected = false;
+    this.expanded = false;
+    this.disabled = false;
+    this.noLabel = false;
+  }
+  static isTreeItem(node) {
+    return node instanceof Element && node.getAttribute("role") === "treeitem";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "treeitem");
+    this.setAttribute("tabindex", "-1");
+    if (this.isNestedItem()) {
+      this.slot = "children";
+      this.isChild = true;
+      this.depth = this.getDepth();
+    }
+  }
+  firstUpdated() {
+    if (this.childrenContainer) {
+      this.childrenContainer.hidden = !this.expanded;
+      this.childrenContainer.style.height = this.expanded ? "auto" : "0";
+    }
+    this.isParent = this.hasChildren;
+    this.handleExpandedChange();
+    this.handleSquished();
+  }
+  /** Simulates a click on the nav item. */
+  click() {
+    this.navItem.click();
+  }
+  async animateCollapse() {
+    this.emit("ev-collapse");
+    await stopAnimations(this.childrenContainer);
+    const { keyframes, options } = getAnimation(this, "nav-item.collapse", { dir: this.localize.dir() });
+    await animateTo(
+      this.childrenContainer,
+      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
+      options
+    );
+    this.childrenContainer.hidden = true;
+    this.emit("ev-after-collapse");
+  }
+  async animateExpand() {
+    this.emit("ev-expand");
+    await stopAnimations(this.childrenContainer);
+    this.childrenContainer.hidden = false;
+    const { keyframes, options } = getAnimation(this, "nav-item.expand", { dir: this.localize.dir() });
+    await animateTo(
+      this.childrenContainer,
+      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
+      options
+    );
+    this.childrenContainer.style.height = "auto";
+    this.emit("ev-after-expand");
+  }
+  // Checks whether the item is nested into an item
+  isNestedItem() {
+    const parent = this.parentElement;
+    return !!parent && _LynkNavItem.isTreeItem(parent);
+  }
+  handleChildrenSlotChange() {
+    this.childItems = this.getChildrenItems();
+    this.isParent = this.childItems.length > 0;
+  }
+  get hasChildren() {
+    return this.childItems.length > 0;
+  }
+  getDepth() {
+    let depth = 0;
+    let element = this.parentElement;
+    while (element instanceof _LynkNavItem) {
+      depth++;
+      element = element.parentElement;
+    }
+    return depth;
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleExpandedChange() {
+    if (this.hasChildren) {
+      this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-expanded");
+    }
+  }
+  handleExpandAnimation() {
+    if (this.expanded) {
+      this.animateExpand();
+    } else {
+      this.animateCollapse();
+    }
+  }
+  handleSquished() {
+    if (this.squished) {
+      this.setAttribute("squished", this.squished ? "true" : "false");
+    } else {
+      this.removeAttribute("squished");
+    }
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (this.hasChildren) {
+      this.expanded = !this.expanded;
+      event.stopPropagation();
+    }
+  }
+  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 });
+    }
+  }
+  /** Gets all the nested tree items in this node. */
+  getChildrenItems({ includeDisabled = true } = {}) {
+    return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: true })].filter(
+      (item) => _LynkNavItem.isTreeItem(item) && (includeDisabled || !item.disabled)
+    ) : [];
+  }
+  render() {
+    const isLink = Boolean(this.href);
+    const tag = isLink ? literal`a` : literal`button`;
+    const isRtl = this.localize.dir() === "rtl";
+    return html`
+      <${tag}
+        class=${classMap({
+      "nav-item": true,
+      "nav-item--disabled": this.disabled,
+      "nav-item--selected": this.selected,
+      "nav-item--has-children": this.isParent,
+      "nav-item--expanded": this.expanded,
+      "nav-item--squished": this.squished,
+      "nav-item--rtl": isRtl
+    })}
+        ?disabled=${this.disabled}
+        title=${this.title}
+        part="nav-item"
+        name=${ifDefined(isLink ? void 0 : this.name)}
+        value=${ifDefined(isLink ? void 0 : this.value)}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}
+        data-level=${this.depth}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @click=${this.handleClick}
+        tabindex="-1"
+        aria-current=${ifDefined(this.selected && this.href ? "page" : void 0)}
+      >
+        <slot name="prefix" part="prefix" class="nav-item__prefix"></slot>
+        <slot part="label" class="nav-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="nav-item__suffix"></slot>
+
+        ${this.isParent ? html`
+                <span class="nav-item__chevron">
+                  <lynk-icon
+                    library="system"
+                    aria-hidden="true"
+                    name=${this.squished ? "chevron-down" : isRtl ? "chevron-left" : "chevron-right"}
+                  ></lynk-icon>
+                </span>
+              ` : ""}
+
+        ${this.target === "_blank" ? html`
+                <span class="nav-item__external">
+                  <lynk-icon library="system" aria-hidden="true" name="external"></lynk-icon>
+                </span>
+              ` : ""}
+
+      </${tag}>
+
+      <div
+        part="children"
+        class="nav-item__children"
+        role="group"
+        ?inert=${!this.expanded}
+      >
+        <slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
+      </div>
+    `;
+  }
+};
+_LynkNavItem.styles = [component_styles_default, nav_item_styles_default];
+_LynkNavItem.dependencies = { "lynk-icon": LynkIcon, "lynk-tooltip": LynkTooltip };
+__decorateClass([
+  state()
+], _LynkNavItem.prototype, "isParent", 2);
+__decorateClass([
+  state()
+], _LynkNavItem.prototype, "isChild", 2);
+__decorateClass([
+  state()
+], _LynkNavItem.prototype, "loading", 2);
+__decorateClass([
+  state()
+], _LynkNavItem.prototype, "depth", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "squished", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "title", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "name", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "value", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], _LynkNavItem.prototype, "download", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "no-label", type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "noLabel", 2);
+__decorateClass([
+  query("slot:not([name])")
+], _LynkNavItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("slot[name=children]")
+], _LynkNavItem.prototype, "childrenSlot", 2);
+__decorateClass([
+  query(".nav-item")
+], _LynkNavItem.prototype, "navItem", 2);
+__decorateClass([
+  query(".nav-item__children")
+], _LynkNavItem.prototype, "childrenContainer", 2);
+__decorateClass([
+  watch("disabled")
+], _LynkNavItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], _LynkNavItem.prototype, "handleExpandedChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], _LynkNavItem.prototype, "handleExpandAnimation", 1);
+__decorateClass([
+  watch("squished", { waitUntilFirstUpdate: true })
+], _LynkNavItem.prototype, "handleSquished", 1);
+var LynkNavItem = _LynkNavItem;
+setDefaultAnimation("nav-item.expand", {
+  keyframes: [
+    { height: "0", opacity: "0", overflow: "hidden" },
+    { height: "auto", opacity: "1", overflow: "hidden" }
+  ],
+  options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+setDefaultAnimation("nav-item.collapse", {
+  keyframes: [
+    { height: "auto", opacity: "1", overflow: "hidden" },
+    { height: "0", opacity: "0", overflow: "hidden" }
+  ],
+  options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+
+export {
+  LynkNavItem
+};

package/dist/chunks/chunk.OEKC5NJD.js

@@ -0,0 +1,25 @@
+import {
+  LynkRadioButton
+} from "./chunk.FOYC7HSE.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-radio-button";
+LynkRadioButton.define("lynk-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkRadioButton,
+  react: React,
+  events: {
+    EvBlur: "ev-blur",
+    EvFocus: "ev-focus"
+  },
+  displayName: "LynkRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};

package/dist/chunks/chunk.OHGKFRDG.js

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

package/dist/chunks/chunk.OPRLVL4W.js

@@ -0,0 +1,137 @@
+import {
+  tab_styles_default
+} from "./chunk.NRD663NN.js";
+import {
+  LynkIconButton
+} from "./chunk.ZVYB5R65.js";
+import {
+  LocalizeController
+} from "./chunk.VIBAEA26.js";
+import {
+  watch
+} from "./chunk.SPANRPKG.js";
+import {
+  LynkElement
+} from "./chunk.OVBPFU7N.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/tab/tab.component.ts
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
+var id = 0;
+var LynkTab = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.attrId = ++id;
+    this.componentId = `lynk-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick() {
+    this.emit("ev-close");
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    if (this.disabled && !this.active) {
+      this.tabIndex = -1;
+    } else {
+      this.tabIndex = 0;
+    }
+  }
+  /** Sets focus to the tab. */
+  focus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`div`;
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return html`
+      <${tag}
+        part="base"
+        href=${ifDefined(isLink ? this.href : void 0)}
+        rel=${ifDefined(isLink ? this.rel : void 0)}
+        class=${classMap({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        <slot></slot>
+        ${this.closable ? html`
+                <lynk-icon-button
+                  part="close-button"
+                  exportparts="base:close-button__base"
+                  name="x-lg"
+                  library="system"
+                  label=${this.localize.term("close")}
+                  class="tab__close-button"
+                  @click=${this.handleCloseClick}
+                  tabindex="-1"
+                ></lynk-icon-button>
+              ` : ""}
+      </${tag}>
+    `;
+  }
+};
+LynkTab.styles = [component_styles_default, tab_styles_default];
+LynkTab.dependencies = { "lynk-icon-button": LynkIconButton };
+__decorateClass([
+  query(".tab")
+], LynkTab.prototype, "tab", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkTab.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTab.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTab.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTab.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], LynkTab.prototype, "href", 2);
+__decorateClass([
+  property()
+], LynkTab.prototype, "rel", 2);
+__decorateClass([
+  watch("active")
+], LynkTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], LynkTab.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkTab
+};

package/dist/chunks/chunk.OPRNOK63.js

@@ -0,0 +1,93 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.IAB4ZKUS.js";
+import {
+  LocalizeController
+} from "./chunk.VIBAEA26.js";
+import {
+  LynkIcon
+} from "./chunk.JHTDTNM2.js";
+import {
+  LynkElement
+} from "./chunk.OVBPFU7N.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+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 html`
+      <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([
+  query("slot")
+], LynkBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], LynkBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], LynkBreadcrumb.prototype, "label", 2);
+
+export {
+  LynkBreadcrumb
+};

package/dist/chunks/chunk.OSYEABJU.js

@@ -0,0 +1,28 @@
+// src/components/nav-group/nav-group.styles.ts
+import { css } from "lit";
+var nav_group_styles_default = css`
+  :host {
+    --margin: var(--lynk-spacing-medium) 0 0 0;
+    --color: var(--lynk-color-neutral-600);
+    display: flex;
+    flex-direction: column;
+    gap: var(--lynk-spacing-2x-small);
+  }
+
+  .nav-group__heading {
+    display: block;
+    text-align: inherit;
+    font-weight: var(--lynk-font-weight-medium);
+    color: var(--color);
+    font-size: var(--lynk-font-size-small);
+    padding: var(--lynk-spacing-2x-small) var(--lynk-spacing-small);
+  }
+
+  :host([squished]) .nav-group__heading {
+    padding: var(--lynk-spacing-2x-small);
+  }
+`;
+
+export {
+  nav_group_styles_default
+};