@uplynk/lynk-design 1.18.1 → 1.19.1

package/dist/chunks/chunk.C4OLI4FN.js

@@ -0,0 +1,382 @@
+import {
+  popover_styles_default
+} from "./chunk.WQAES7FP.js";
+import {
+  getTabbableBoundary
+} from "./chunk.LXDTFLWU.js";
+import {
+  LynkPopup
+} from "./chunk.2FR62MO7.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.ZPNB6M44.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/popover/popover.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var LynkPopover = 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.noArrow = false;
+    this.clickToHide = false;
+    this.placement = "right";
+    this.disabled = false;
+    this.distance = 10;
+    this.skidding = 0;
+    this.block = false;
+    this.hoist = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0];
+    if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+      trigger.focus();
+    }
+  }
+  handleKeyDown(event) {
+    if (this.open && event.key === "Escape") {
+      event.stopPropagation();
+      this.hide();
+      this.focusOnTrigger();
+    }
+  }
+  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.hide();
+        }
+      });
+    }
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this.clickToHide && this.containingElement && !path.includes(this.containingElement)) {
+      this.hide();
+    }
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleTriggerKeyDown(event) {
+    if (event.key === "Escape" && this.open) {
+      event.stopPropagation();
+      this.focusOnTrigger();
+      this.hide();
+      return;
+    }
+    if ([" ", "Enter"].includes(event.key)) {
+      const target = event.target;
+      const isInputTrigger = target.tagName.toLowerCase() === "lynk-input";
+      if (!isInputTrigger) {
+        event.preventDefault();
+      }
+      this.handleTriggerClick();
+    }
+  }
+  handleTriggerKeyUp(event) {
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  }
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the popover panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <lynk-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true });
+    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
+    let target;
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // Lynk buttons have to update the internal button so it's announced correctly by screen readers
+        case "lynk-button":
+        case "lynk-icon-button":
+          target = accessibleTrigger.button;
+          break;
+        default:
+          target = accessibleTrigger;
+      }
+      target.setAttribute("aria-haspopup", "true");
+      target.setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  /** Shows the popover panel. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "ev-after-show");
+  }
+  /** Hides the popover panel */
+  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 await waitForEvent(this, "ev-after-hide");
+  }
+  /**
+   * Instructs the popover menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    this.panel.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    if (this.panel) {
+      this.panel.removeEventListener("keydown", this.handleKeyDown);
+    }
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+    this.updateAccessibleTrigger();
+    if (this.open) {
+      this.emit("ev-show");
+      this.addOpenListeners();
+      const autoFocusTarget = this.querySelector("[autofocus]");
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute("autofocus");
+      }
+      await stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "popover.show", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      if (autoFocusTarget) {
+        autoFocusTarget.focus({ preventScroll: true });
+        autoFocusTarget.setAttribute("autofocus", "");
+      }
+      this.emit("ev-after-show");
+    } else {
+      this.emit("ev-hide");
+      this.removeOpenListeners();
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, "popover.hide", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+      this.emit("ev-after-hide");
+    }
+  }
+  render() {
+    return html`
+      <lynk-popup
+        part="base"
+        id="popover"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        ?arrow=${!this.noArrow}
+        auto-size="vertical"
+        auto-size-padding="10"
+        class=${classMap({
+      popover: true,
+      "popover--open": this.open,
+      "popover--has-footer": this.hasSlotController.test("footer")
+    })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="popover__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div
+          part="panel"
+          class="popover__panel"
+          role="popover"
+          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="popover__header">
+                  <h2 part="title" class="popover__title" id="title">
+                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                  </h2>
+                  <lynk-icon-button
+                    part="close-button"
+                    exportparts="base:close-button__base"
+                    class="popover__close"
+                    name="x-lg"
+                    label=${this.localize.term("close")}
+                    library="system"
+                    @click="${() => this.hide()}"
+                  ></lynk-icon-button>
+                </header>
+              ` : ""}
+
+          <slot part="body" class="popover__body"></slot>
+
+          ${this.hasSlotController.test("footer") ? html`
+                <footer part="footer" class="popover__footer">
+                  <slot name="footer"></slot>
+                </footer>
+              ` : ""}
+        </div>
+      </lynk-popup>
+    `;
+  }
+};
+LynkPopover.styles = [component_styles_default, popover_styles_default];
+LynkPopover.dependencies = { "lynk-popup": LynkPopup };
+__decorateClass([
+  query(".popover")
+], LynkPopover.prototype, "popup", 2);
+__decorateClass([
+  query(".popover__trigger")
+], LynkPopover.prototype, "trigger", 2);
+__decorateClass([
+  query(".popover__panel")
+], LynkPopover.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkPopover.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "no-header", type: Boolean, reflect: true })
+], LynkPopover.prototype, "noHeader", 2);
+__decorateClass([
+  property({ attribute: "no-arrow", type: Boolean, reflect: true })
+], LynkPopover.prototype, "noArrow", 2);
+__decorateClass([
+  property({ attribute: "click-to-hide", type: Boolean, reflect: true })
+], LynkPopover.prototype, "clickToHide", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkPopover.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: false })
+], LynkPopover.prototype, "containingElement", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkPopover.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkPopover.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "block", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkPopover.prototype, "hoist", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], LynkPopover.prototype, "handleOpenChange", 1);
+setDefaultAnimation("popover.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+setDefaultAnimation("popover.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+
+export {
+  LynkPopover
+};

package/dist/chunks/chunk.C4VEI4FG.js

@@ -0,0 +1,11 @@
+import {
+  LynkMenuItem
+} from "./chunk.TM4PFKTG.js";
+
+// src/components/menu-item/menu-item.ts
+var menu_item_default = LynkMenuItem;
+LynkMenuItem.define("lynk-menu-item");
+
+export {
+  menu_item_default
+};

package/dist/chunks/chunk.C6VUEOWU.js

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

package/dist/chunks/chunk.CHSAPNFC.js

@@ -0,0 +1,11 @@
+import {
+  LynkDateTimePicker
+} from "./chunk.2RVSC2Q7.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.CIBLDOG3.js

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

package/dist/chunks/chunk.CNDRISM7.js

@@ -0,0 +1,62 @@
+import {
+  stack_styles_default
+} from "./chunk.L4ZUBGGA.js";
+import {
+  LynkElement
+} from "./chunk.ZPNB6M44.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/stack/stack.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkStack = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.row = false;
+    this.reverse = false;
+    this.wrap = false;
+    this.gap = "var(--lynk-spacing-small)";
+  }
+  get horizontal() {
+    return this.row;
+  }
+  set horizontal(value) {
+    this.row = value;
+    this.removeAttribute("horizontal");
+    if (value) this.setAttribute("row", "");
+  }
+  render() {
+    return html`<slot part="base" class="stack" style="--gap: ${this.gap};"></slot>`;
+  }
+};
+LynkStack.styles = [component_styles_default, stack_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkStack.prototype, "row", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "horizontal" })
+], LynkStack.prototype, "horizontal", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkStack.prototype, "reverse", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkStack.prototype, "justify", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkStack.prototype, "align", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkStack.prototype, "wrap", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkStack.prototype, "gap", 2);
+
+export {
+  LynkStack
+};

package/dist/chunks/chunk.CR3TXQXW.js

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

package/dist/chunks/chunk.CS3WXHTJ.js

@@ -0,0 +1,11 @@
+import {
+  LynkRadioButton
+} from "./chunk.MVC5IINX.js";
+
+// src/components/radio-button/radio-button.ts
+var radio_button_default = LynkRadioButton;
+LynkRadioButton.define("lynk-radio-button");
+
+export {
+  radio_button_default
+};

package/dist/chunks/chunk.CTJXZHEB.js

@@ -0,0 +1,28 @@
+import {
+  LynkTextarea
+} from "./chunk.377AXKBE.js";
+
+// src/react/textarea/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-textarea";
+LynkTextarea.define("lynk-textarea");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTextarea,
+  react: React,
+  events: {
+    EvChange: "ev-change",
+    EvInput: "ev-input",
+    EvFocus: "ev-focus",
+    EvBlur: "ev-blur",
+    EvInvalid: "ev-invalid"
+  },
+  displayName: "LynkTextarea"
+});
+var textarea_default = reactWrapper;
+
+export {
+  textarea_default
+};

package/dist/chunks/chunk.CUDMHWLF.js

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

package/dist/chunks/chunk.D65HNNG7.js

@@ -0,0 +1,29 @@
+import {
+  LynkDrawer
+} from "./chunk.DUJDSZKJ.js";
+
+// src/react/drawer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-drawer";
+LynkDrawer.define("lynk-drawer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkDrawer,
+  react: React,
+  events: {
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide",
+    EvInitialFocus: "ev-initial-focus",
+    EvRequestClose: "ev-request-close"
+  },
+  displayName: "LynkDrawer"
+});
+var drawer_default = reactWrapper;
+
+export {
+  drawer_default
+};

package/dist/chunks/chunk.DDDIKQZ5.js

@@ -0,0 +1,21 @@
+import {
+  LynkCard
+} from "./chunk.ESBPJMRB.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/dist/chunks/chunk.DDG3W4D3.js

@@ -0,0 +1,34 @@
+import {
+  spinner_styles_default
+} from "./chunk.A7I3LAZL.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkElement
+} from "./chunk.ZPNB6M44.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+
+// src/components/spinner/spinner.component.ts
+import { html } from "lit";
+var LynkSpinner = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+LynkSpinner.styles = [component_styles_default, spinner_styles_default];
+
+export {
+  LynkSpinner
+};