@uplynk/lynk-design 1.11.2 → 1.11.3

package/dist/chunks/chunk.6JXU2MG7.js

@@ -0,0 +1,270 @@
+import {
+  form_field_styles_default
+} from "./chunk.R2FUTXY5.js";
+import {
+  LynkTooltip
+} from "./chunk.OQMATRB5.js";
+import {
+  LynkIcon
+} from "./chunk.HZ6GAOLV.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/form-field/form-field.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+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 html`
+      <fieldset
+        part="base"
+        class=${classMap({
+      "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=${classMap({
+      "form-field__label": true
+    })}
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+
+          ${this.required ? html`
+                <lynk-tooltip content="Required" hoist>
+                  <lynk-icon style="font-size: 9px;" name="asterisk" library="system"></lynk-icon>
+                </lynk-tooltip>
+              ` : ""}
+          ${hasHelpTip ? html`
+                <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 ? html`
+                <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([
+  query("slot:not([name])")
+], LynkFormField.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], LynkFormField.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ attribute: false })
+], LynkFormField.prototype, "containingElement", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkFormField.prototype, "state", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkFormField.prototype, "size", 2);
+__decorateClass([
+  property()
+], LynkFormField.prototype, "label", 2);
+__decorateClass([
+  property()
+], LynkFormField.prototype, "id", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkFormField.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkFormField.prototype, "helpTip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "dirty", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "inline", 2);
+
+export {
+  LynkFormField
+};

package/dist/chunks/chunk.6NQLDMRS.js

@@ -0,0 +1,24 @@
+import {
+  LynkMenuItem
+} from "./chunk.5FTVM37U.js";
+
+// src/react/menu-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-menu-item";
+LynkMenuItem.define("lynk-menu-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkMenuItem,
+  react: React,
+  events: {
+    EvClick: "ev-click"
+  },
+  displayName: "LynkMenuItem"
+});
+var menu_item_default = reactWrapper;
+
+export {
+  menu_item_default
+};

package/dist/chunks/chunk.6QBMSSXD.js

@@ -0,0 +1,121 @@
+import {
+  TableSortDirection
+} from "./chunk.WGKOAZH2.js";
+import {
+  table_styles_default
+} from "./chunk.A77KDWFV.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/table/table.component.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+var LynkTable = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.cols = [];
+    this.rows = [];
+    this.custom = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("ev-table-sort", this.handleSort);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ev-table-sort", this.handleSort);
+  }
+  handleSort(event) {
+    let direction;
+    this.assignedHead.forEach((head) => {
+      head.querySelectorAll("lynk-tr").forEach((row) => {
+        row.querySelectorAll("lynk-th").forEach((th) => {
+          if (th.key === event.detail.key) {
+            switch (TableSortDirection[th.sortDirection]) {
+              case TableSortDirection[1 /* DESC */]:
+                th.sortDirection = -1 /* ASC */;
+                break;
+              case TableSortDirection[-1 /* ASC */]:
+              case TableSortDirection[0 /* NONE */]:
+                th.sortDirection = 1 /* DESC */;
+                break;
+            }
+            direction = th.sortDirection;
+          } else {
+            th.sortDirection = 0 /* NONE */;
+          }
+        });
+      });
+    });
+    this.rows.sort((rowA, rowB) => {
+      let val1 = rowA[event.detail.key];
+      let val2 = rowB[event.detail.key];
+      if (val1 === null || val1 === void 0) val1 = "";
+      if (val2 === null || val2 === void 0) val2 = "";
+      if (!isNaN(parseFloat(val1)) && !isNaN(parseFloat(val2))) {
+        return (Number(val1) - Number(val2)) * direction;
+      }
+      const str1 = val1.toString();
+      const str2 = val2.toString();
+      return str1.localeCompare(str2) * direction;
+    });
+    this.requestUpdate();
+  }
+  render() {
+    return html`
+      <slot part="base">
+        <lynk-colgroup> ${repeat(this.cols, (col) => html`<lynk-col class="${col.key}"></lynk-col>`)} </lynk-colgroup>
+        <lynk-thead>
+          <lynk-tr>
+            ${repeat(
+      this.cols,
+      (col) => html`
+                <lynk-th
+                  key="${col.key}"
+                  sort-direction=${ifDefined(col.sortDirection ? col.sortDirection : void 0)}
+                  ?sortable=${ifDefined(col.sortable ? col.sortable : void 0)}
+                  >${col.title}</lynk-th
+                >
+              `
+    )}
+          </lynk-tr>
+        </lynk-thead>
+        <lynk-tbody>
+          ${repeat(
+      this.rows,
+      (row) => html` <lynk-tr> ${repeat(this.cols, (col) => html`<lynk-td>${row[col.key]}</lynk-td>`)} </lynk-tr>`
+    )}
+        </lynk-tbody>
+      </slot>
+    `;
+  }
+};
+LynkTable.styles = [component_styles_default, table_styles_default];
+__decorateClass([
+  property()
+], LynkTable.prototype, "cols", 2);
+__decorateClass([
+  property()
+], LynkTable.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTable.prototype, "custom", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "lynk-thead", flatten: true })
+], LynkTable.prototype, "assignedHead", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "lynk-tbody", flatten: true })
+], LynkTable.prototype, "assignedBody", 2);
+
+export {
+  LynkTable
+};

package/dist/chunks/chunk.6TBR2IYA.js

@@ -0,0 +1,285 @@
+import {
+  LynkIconButton
+} from "./chunk.OE2HMZ5Y.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.5SGOC3ZM.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  alert_styles_default
+} from "./chunk.3TEGIRTK.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/alert/alert.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var toastStack = Object.assign(document.createElement("div"), { className: "lynk-toast-stack" });
+var LynkAlert = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix", "action");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.type = "primary";
+    this.duration = Infinity;
+    this.remainingTime = this.duration;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    this.handleCountdownChange();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+      this.remainingTime = this.duration;
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  pauseAutoHide() {
+    var _a;
+    (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    var _a;
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+    }
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < Infinity && this.countdown) {
+      const { countdownElement } = this;
+      const start = "100%";
+      const end = "0";
+      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("ev-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("ev-after-show");
+    } else {
+      this.emit("ev-hide");
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("ev-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "ev-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "ev-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      this.handleCountdownChange();
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "ev-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("lynk-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-icon": this.hasSlotController.test("icon") || this.type === "info" || this.type === "neutral" || this.type === "success" || this.type === "warning" || this.type === "danger",
+      "alert--primary": this.type === "primary" || this.type === "info",
+      "alert--success": this.type === "success",
+      "alert--neutral": this.type === "neutral",
+      "alert--warning": this.type === "warning",
+      "alert--danger": this.type === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
+      >
+        <div part="icon" class="alert__icon">
+          <slot name="icon">
+            ${this.type ? html`
+                  <lynk-icon
+                    library="system"
+                    name="${this.type === "info" ? "info-circle" : this.type === "neutral" ? "question-square" : this.type === "success" ? "check-circle" : this.type === "warning" ? "exclamation-triangle" : this.type === "danger" ? "exclamation-octagon" : ""}"
+                  ></lynk-icon>
+                ` : ""}
+          </slot>
+        </div>
+
+        <div part="message" class="alert__message" aria-live="polite">
+          <slot></slot>
+        </div>
+
+        ${this.hasSlotController.test("action") ? html`
+              <span part="action" class="alert__action">
+                <slot name="action"></slot>
+              </span>
+            ` : ""}
+        ${this.closable ? html`
+              <lynk-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></lynk-icon-button>
+            ` : ""}
+
+        <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+        ${this.countdown ? html`
+              <div
+                class=${classMap({
+      alert__countdown: true,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+              >
+                <div class="alert__countdown-elapsed"></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+LynkAlert.styles = [component_styles_default, alert_styles_default];
+LynkAlert.dependencies = { "lynk-icon-button": LynkIconButton };
+__decorateClass([
+  query('[part="base"]')
+], LynkAlert.prototype, "base", 2);
+__decorateClass([
+  query(".alert__countdown-elapsed")
+], LynkAlert.prototype, "countdownElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkAlert.prototype, "type", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkAlert.prototype, "duration", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkAlert.prototype, "countdown", 2);
+__decorateClass([
+  state()
+], LynkAlert.prototype, "remainingTime", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], LynkAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], LynkAlert.prototype, "handleDurationChange", 1);
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+export {
+  LynkAlert
+};