@uplynk/lynk-design 1.11.3 → 1.12.0

package/cdn/chunks/chunk.7X6C2UJU.js

@@ -0,0 +1,352 @@
+import {
+  nav_item_styles_default
+} from "./chunk.3HQSGB6X.js";
+import {
+  LynkTooltip
+} from "./chunk.DVYYL5Y6.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.ONECFZZX.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.JSLXCIMZ.js";
+import {
+  i,
+  u
+} from "./chunk.6HHAFBRE.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  LynkIcon
+} from "./chunk.MAHXDMIG.js";
+import {
+  o
+} from "./chunk.XQGSWNOO.js";
+import {
+  getTextContent
+} from "./chunk.OW5NIGGX.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.2BD5ESA2.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/nav-item/nav-item.component.ts
+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 ? i`a` : i`button`;
+    const isRtl = this.localize.dir() === "rtl";
+    return u`
+      <${tag}
+        class=${e({
+      "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=${o(isLink ? void 0 : this.name)}
+        value=${o(isLink ? void 0 : this.value)}
+        href=${o(isLink ? this.href : void 0)}
+        target=${o(isLink ? this.target : void 0)}
+        download=${o(isLink ? this.download : void 0)}
+        rel=${o(isLink && this.target ? "noreferrer noopener" : void 0)}
+        data-level=${this.depth}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @click=${this.handleClick}
+        tabindex="-1"
+        aria-current=${o(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 ? u`
+                <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" ? u`
+                <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([
+  r()
+], _LynkNavItem.prototype, "isParent", 2);
+__decorateClass([
+  r()
+], _LynkNavItem.prototype, "isChild", 2);
+__decorateClass([
+  r()
+], _LynkNavItem.prototype, "loading", 2);
+__decorateClass([
+  r()
+], _LynkNavItem.prototype, "depth", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "squished", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "title", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "name", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "value", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], _LynkNavItem.prototype, "download", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "selected", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "expanded", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "disabled", 2);
+__decorateClass([
+  n({ attribute: "no-label", type: Boolean, reflect: true })
+], _LynkNavItem.prototype, "noLabel", 2);
+__decorateClass([
+  e2("slot:not([name])")
+], _LynkNavItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  e2("slot[name=children]")
+], _LynkNavItem.prototype, "childrenSlot", 2);
+__decorateClass([
+  e2(".nav-item")
+], _LynkNavItem.prototype, "navItem", 2);
+__decorateClass([
+  e2(".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/cdn/chunks/chunk.7XY4GRCO.js

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

package/cdn/chunks/chunk.A7XWJUHZ.js

@@ -0,0 +1,276 @@
+import {
+  form_field_styles_default
+} from "./chunk.VYO6OOBD.js";
+import {
+  LynkTooltip
+} from "./chunk.DVYYL5Y6.js";
+import {
+  LynkIcon
+} from "./chunk.MAHXDMIG.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.2BD5ESA2.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/form-field/form-field.component.ts
+var LynkFormField = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label");
+    this.hasFocus = false;
+    this.state = "default";
+    this.size = "medium";
+    this.label = "";
+    this.id = "";
+    this.helpText = "";
+    this.helpTip = "";
+    this.required = false;
+    this.dirty = false;
+    this.focused = false;
+    this.inline = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+  firstUpdated() {
+    this.addOpenListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  handleLabelClick() {
+    this.focus();
+  }
+  handleDefaultSlotChange() {
+    const nativeElement = this.querySelector("input, textarea, select");
+    if (nativeElement && !nativeElement.getAttribute("data-form-field-listeners")) {
+      nativeElement.addEventListener("focus", () => {
+        this.hasFocus = true;
+      });
+      nativeElement.addEventListener("blur", () => {
+        this.hasFocus = false;
+      });
+      nativeElement.setAttribute("data-form-field-listeners", "true");
+    }
+    const lynkComponents = this.querySelectorAll("lynk-checkbox, lynk-switch");
+    lynkComponents.forEach((component) => {
+      const elementWithDataset = component;
+      if (!elementWithDataset.getAttribute("data-form-field-listeners")) {
+        component.addEventListener("ev-focus", () => {
+          this.hasFocus = true;
+        });
+        component.addEventListener("ev-blur", () => {
+          this.hasFocus = false;
+        });
+        elementWithDataset.setAttribute("data-form-field-listeners", "true");
+      }
+    });
+  }
+  handleDocumentKeyDown(event) {
+    if (event.key === "Tab") {
+      setTimeout(() => {
+        var _a, _b, _c;
+        const activeElement = ((_a = this.containingElement) == null ? void 0 : _a.getRootNode()) instanceof ShadowRoot ? (_c = (_b = document.activeElement) == null ? void 0 : _b.shadowRoot) == null ? void 0 : _c.activeElement : document.activeElement;
+        if (!this.containingElement || (activeElement == null ? void 0 : activeElement.closest(this.containingElement.tagName.toLowerCase())) !== this.containingElement) {
+          this.blur();
+        }
+      });
+    }
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this && this.containingElement && !path.includes(this.containingElement)) {
+      this.blur();
+    }
+  }
+  /** Sets focus on the control. */
+  focus(options) {
+    const focusableElements = this.querySelectorAll(
+      "lynk-radio, lynk-radio-button, lynk-input, lynk-textarea, lynk-select, lynk-combobox, lynk-date-picker, lynk-time-picker, lynk-date-time-picker, lynk-checkbox, lynk-switch, input:not([hidden]), textarea:not([hidden]), select:not([hidden])"
+    );
+    for (const element of focusableElements) {
+      const focusableElement = element;
+      if (typeof focusableElement.focus === "function") {
+        focusableElement.focus(options);
+        return;
+      }
+    }
+    const rootNode = this.getRootNode();
+    let radioGroup = null;
+    if (rootNode instanceof ShadowRoot) {
+      const host = rootNode.host;
+      if (host.tagName.toLowerCase() === "lynk-radio-group") {
+        radioGroup = host;
+      }
+    } else {
+      const closestRadioGroup = this.closest("lynk-radio-group");
+      if (closestRadioGroup) {
+        radioGroup = closestRadioGroup;
+      }
+    }
+    if (radioGroup && typeof radioGroup.focus === "function") {
+      radioGroup.focus(options);
+    }
+  }
+  /** Removes focus from the control. */
+  blur() {
+    var _a;
+    const assignedElements = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true });
+    const firstElement = assignedElements == null ? void 0 : assignedElements[0];
+    if (firstElement && typeof firstElement.blur === "function") {
+      firstElement.blur();
+    }
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpTipSlot = this.hasSlotController.test("help-tip");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasHelpTip = this.helpTip ? true : !!hasHelpTipSlot;
+    return x`
+      <fieldset
+        part="base"
+        class=${e({
+      "form-field": true,
+      "form-field--small": this.size === "small",
+      "form-field--medium": this.size === "medium",
+      "form-field--large": this.size === "large",
+      "form-field--has-label": hasLabel,
+      "form-field--has-help-text": hasHelpText,
+      "form-field--has-error": this.state === "error",
+      "form-field--has-warning": this.state === "warning",
+      "form-field--has-success": this.state === "success",
+      "form-field--focused": this.focused || this.hasFocus,
+      "form-field--inline": this.inline
+    })}
+      >
+        <label
+          id="label"
+          part="label"
+          class=${e({
+      "form-field__label": true
+    })}
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+
+          ${this.required ? x`
+                <lynk-tooltip content="Required" hoist>
+                  <lynk-icon style="font-size: 9px;" name="asterisk" library="system"></lynk-icon>
+                </lynk-tooltip>
+              ` : ""}
+          ${hasHelpTip ? x`
+                <lynk-tooltip hoist>
+                  <div slot="content">
+                    <slot name="help-tip">${this.helpTip}</slot>
+                  </div>
+                  <lynk-icon style="font-size: 11px;" name="question-fill" library="system"></lynk-icon>
+                </lynk-tooltip>
+              ` : ""}
+          ${this.dirty ? x`
+                <span part="dirty-indicator" class="form-field__dirty-indicator">
+                  <slot name="dirty-indicator">
+                    <lynk-tooltip content="Modified" hoist>
+                      <lynk-icon name="transfer" library="system"></lynk-icon> </lynk-tooltip
+                  ></slot>
+                </span>
+              ` : ""}
+        </label>
+
+        <div part="control-wrapper" class="form-field__control-wrapper">
+          <slot part="control" class="form-field__control" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+          <div
+            part="help-text"
+            id="help-text"
+            class="form-field__help-text"
+            aria-hidden=${hasHelpText ? "false" : "true"}
+          >
+            <slot name="help-text">${this.helpText}</slot>
+          </div>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+LynkFormField.styles = [component_styles_default, form_field_styles_default];
+LynkFormField.dependencies = {
+  "lynk-icon": LynkIcon,
+  "lynk-tooltip": LynkTooltip
+};
+__decorateClass([
+  e2("slot:not([name])")
+], LynkFormField.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkFormField.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ attribute: false })
+], LynkFormField.prototype, "containingElement", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkFormField.prototype, "state", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkFormField.prototype, "size", 2);
+__decorateClass([
+  n()
+], LynkFormField.prototype, "label", 2);
+__decorateClass([
+  n()
+], LynkFormField.prototype, "id", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], LynkFormField.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "help-tip" })
+], LynkFormField.prototype, "helpTip", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "required", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "dirty", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "focused", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "inline", 2);
+
+export {
+  LynkFormField
+};