@uplynk/lynk-design 1.17.0 → 1.17.1

package/dist/chunks/chunk.B7A2HUUK.js

@@ -0,0 +1,25 @@
+import {
+  LynkIntersectionObserver
+} from "./chunk.T7FYZ6U5.js";
+
+// src/react/intersection-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-intersection-observer";
+LynkIntersectionObserver.define("lynk-intersection-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkIntersectionObserver,
+  react: React,
+  events: {
+    EvEnterView: "ev-enter-view",
+    EvExitView: "ev-exit-view"
+  },
+  displayName: "LynkIntersectionObserver"
+});
+var intersection_observer_default = reactWrapper;
+
+export {
+  intersection_observer_default
+};

package/dist/chunks/chunk.BSF4TGQD.js

@@ -0,0 +1,34 @@
+import {
+  page_styles_default
+} from "./chunk.JUUCWPYD.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+
+// src/components/page/page.component.ts
+import { html } from "lit";
+var LynkPage = class extends LynkElement {
+  render() {
+    return html`
+      <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/dist/chunks/chunk.C2WHDJLG.js

@@ -0,0 +1,25 @@
+import {
+  LynkIcon
+} from "./chunk.FBFDH3EB.js";
+
+// src/react/icon/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-icon";
+LynkIcon.define("lynk-icon");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkIcon,
+  react: React,
+  events: {
+    EvLoad: "ev-load",
+    EvError: "ev-error"
+  },
+  displayName: "LynkIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};

package/dist/chunks/chunk.CC2MUXFP.js

@@ -0,0 +1,45 @@
+import {
+  splitter_pane_styles_default
+} from "./chunk.34TPN4FZ.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/splitter-pane/splitter-pane.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkSplitterPane = class extends LynkElement {
+  /** Shows the pane by removing the hidden attribute. */
+  show() {
+    this.hidden = false;
+    this.emit("ev-show");
+  }
+  /** Hides the pane by setting the hidden attribute. */
+  hide() {
+    this.hidden = true;
+    this.emit("ev-hide");
+  }
+  render() {
+    return html` <slot part="base"></slot> `;
+  }
+};
+LynkSplitterPane.styles = [component_styles_default, splitter_pane_styles_default];
+__decorateClass([
+  property({ attribute: "min-size", reflect: true })
+], LynkSplitterPane.prototype, "minSize", 2);
+__decorateClass([
+  property({ attribute: "max-size", reflect: true })
+], LynkSplitterPane.prototype, "maxSize", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkSplitterPane.prototype, "size", 2);
+
+export {
+  LynkSplitterPane
+};

package/dist/chunks/chunk.CMMV2YAS.js

@@ -0,0 +1,24 @@
+import {
+  LynkPopup
+} from "./chunk.P25NSH3Y.js";
+
+// src/react/popup/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-popup";
+LynkPopup.define("lynk-popup");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkPopup,
+  react: React,
+  events: {
+    EvReposition: "ev-reposition"
+  },
+  displayName: "LynkPopup"
+});
+var popup_default = reactWrapper;
+
+export {
+  popup_default
+};

package/dist/chunks/chunk.COBTTBVC.js

@@ -0,0 +1,295 @@
+import {
+  dialog_styles_default
+} from "./chunk.VNC52SII.js";
+import {
+  Modal
+} from "./chunk.BGJOZNKW.js";
+import {
+  lockBodyScrolling,
+  unlockBodyScrolling
+} from "./chunk.WSPFGNPB.js";
+import {
+  LynkIconButton
+} from "./chunk.3OZP7FUR.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 {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/dialog/dialog.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from "lit/decorators.js";
+var LynkDialog = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.label = "";
+    this.noHeader = false;
+    this.size = "auto";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.modal = new Modal(this);
+  }
+  firstUpdated() {
+    this.dialog.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.modal.activate();
+      lockBodyScrolling(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.modal.deactivate();
+    unlockBodyScrolling(this);
+  }
+  requestClose(source) {
+    const requestClose = this.emit("ev-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (requestClose.defaultPrevented) {
+      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      animateTo(this.panel, animation.keyframes, animation.options);
+      return;
+    }
+    this.hide();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  handleDocumentKeyDown(event) {
+    if (event.key === "Escape" && this.modal.isActive() && this.open) {
+      event.stopPropagation();
+      this.requestClose("keyboard");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("ev-show");
+      this.addOpenListeners();
+      this.originalTrigger = document.activeElement;
+      this.modal.activate();
+      lockBodyScrolling(this);
+      const autoFocusTarget = this.querySelector("[autofocus]");
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute("autofocus");
+      }
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      this.dialog.hidden = false;
+      requestAnimationFrame(() => {
+        const initialFocus = this.emit("ev-initial-focus", { cancelable: true });
+        if (!initialFocus.defaultPrevented) {
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({ preventScroll: true });
+          } else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute("autofocus", "");
+        }
+      });
+      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+      ]);
+      this.emit("ev-after-show");
+    } else {
+      this.emit("ev-hide");
+      this.removeOpenListeners();
+      this.modal.deactivate();
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+          this.overlay.hidden = true;
+        }),
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+          this.panel.hidden = true;
+        })
+      ]);
+      this.dialog.hidden = true;
+      this.overlay.hidden = false;
+      this.panel.hidden = false;
+      unlockBodyScrolling(this);
+      const trigger = this.originalTrigger;
+      if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+        setTimeout(() => trigger.focus());
+      }
+      this.emit("ev-after-hide");
+    }
+  }
+  /** Shows the dialog. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "ev-after-show");
+  }
+  /** Hides the dialog */
+  async hide() {
+    var _a;
+    if (!this.open) {
+      return void 0;
+    }
+    const { activeElement } = document;
+    if (activeElement && this.contains(activeElement)) {
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
+    }
+    this.open = false;
+    return waitForEvent(this, "ev-after-hide");
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      dialog: true,
+      "dialog--open": this.open,
+      "dialog--fitted": this.size === "fitted",
+      "dialog--full": this.size === "full",
+      "dialog--has-footer": this.hasSlotController.test("footer")
+    })}
+      >
+        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
+
+        <div
+          part="panel"
+          class="dialog__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? "false" : "true"}
+          aria-label=${ifDefined(this.noHeader ? this.label : void 0)}
+          aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
+          tabindex="0"
+        >
+          ${!this.noHeader ? html`
+                <header part="header" class="dialog__header">
+                  <h2 part="title" class="dialog__title" id="title">
+                    <slot name="label">
+                      ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                    </slot>
+                  </h2>
+                  <div part="header-actions" class="dialog__header-actions">
+                    <slot name="header-actions"></slot>
+                    <lynk-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="dialog__close"
+                      name="x-lg"
+                      label=${this.localize.term("close")}
+                      library="system"
+                      @click="${() => this.requestClose("close-button")}"
+                    ></lynk-icon-button>
+                  </div>
+                </header>
+              ` : ""}
+          ${""}
+
+          <div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
+
+          <footer part="footer" class="dialog__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+  }
+};
+LynkDialog.styles = [component_styles_default, dialog_styles_default];
+LynkDialog.dependencies = {
+  "lynk-icon-button": LynkIconButton
+};
+__decorateClass([
+  query(".dialog")
+], LynkDialog.prototype, "dialog", 2);
+__decorateClass([
+  query(".dialog__panel")
+], LynkDialog.prototype, "panel", 2);
+__decorateClass([
+  query(".dialog__overlay")
+], LynkDialog.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDialog.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDialog.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "no-header", type: Boolean, reflect: true })
+], LynkDialog.prototype, "noHeader", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDialog.prototype, "size", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], LynkDialog.prototype, "handleOpenChange", 1);
+setDefaultAnimation("dialog.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+
+export {
+  LynkDialog
+};

package/dist/chunks/chunk.CSNGWIT4.js

@@ -0,0 +1,24 @@
+import {
+  LynkNav
+} from "./chunk.56M7UXYG.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/dist/chunks/chunk.CTVORBX5.js

@@ -0,0 +1,21 @@
+import {
+  LynkProgressBar
+} from "./chunk.2FXGUS6M.js";
+
+// src/react/progress-bar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-progress-bar";
+LynkProgressBar.define("lynk-progress-bar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkProgressBar,
+  react: React,
+  events: {},
+  displayName: "LynkProgressBar"
+});
+var progress_bar_default = reactWrapper;
+
+export {
+  progress_bar_default
+};

package/dist/chunks/chunk.DA5W3Q2Y.js

@@ -0,0 +1,44 @@
+import {
+  split_styles_default
+} from "./chunk.LGD72AB6.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/split/split.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkSplit = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.column = false;
+    this.reverse = false;
+    this.gap = "var(--lynk-spacing-small)";
+  }
+  render() {
+    return html` <slot part="base" class="split" style="--gap: ${this.gap};"></slot> `;
+  }
+};
+LynkSplit.styles = [component_styles_default, split_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "column", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "reverse", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkSplit.prototype, "align", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkSplit.prototype, "gap", 2);
+
+export {
+  LynkSplit
+};

package/dist/chunks/chunk.DAXD2SKS.js

@@ -0,0 +1,11 @@
+import {
+  LynkDateTimePicker
+} from "./chunk.JHCXYNRE.js";
+
+// src/components/date-time-picker/date-time-picker.ts
+var date_time_picker_default = LynkDateTimePicker;
+LynkDateTimePicker.define("lynk-date-time-picker");
+
+export {
+  date_time_picker_default
+};

package/dist/chunks/chunk.DB5PYGUJ.js

@@ -0,0 +1,11 @@
+import {
+  LynkDropdown
+} from "./chunk.FLZLWO2G.js";
+
+// src/components/dropdown/dropdown.ts
+var dropdown_default = LynkDropdown;
+LynkDropdown.define("lynk-dropdown");
+
+export {
+  dropdown_default
+};

package/dist/chunks/chunk.DID6Y3TV.js

@@ -0,0 +1,121 @@
+import {
+  TableSortDirection
+} from "./chunk.WGKOAZH2.js";
+import {
+  table_styles_default
+} from "./chunk.A77KDWFV.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.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
+};