@uplynk/lynk-design 1.14.0 → 1.15.0

package/dist/chunks/chunk.53UMKC6Q.js

@@ -0,0 +1,85 @@
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkElement
+} from "./chunk.VI3SMVJJ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/format-date/format-date.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkFormatDate = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.date = /* @__PURE__ */ new Date();
+    this.hourFormat = "auto";
+  }
+  render() {
+    const date = new Date(this.date);
+    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
+    if (isNaN(date.getMilliseconds())) {
+      return void 0;
+    }
+    return html`
+      <time datetime=${date.toISOString()}>
+        ${this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12
+    })}
+      </time>
+    `;
+  }
+};
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "date", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "era", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "year", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "month", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "day", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "hour", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "minute", 2);
+__decorateClass([
+  property()
+], LynkFormatDate.prototype, "second", 2);
+__decorateClass([
+  property({ attribute: "time-zone-name" })
+], LynkFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  property({ attribute: "time-zone" })
+], LynkFormatDate.prototype, "timeZone", 2);
+__decorateClass([
+  property({ attribute: "hour-format" })
+], LynkFormatDate.prototype, "hourFormat", 2);
+
+export {
+  LynkFormatDate
+};

package/dist/chunks/chunk.55DFF3KP.js

@@ -0,0 +1,60 @@
+import {
+  badge_styles_default
+} from "./chunk.QYZPLX6T.js";
+import {
+  LynkElement
+} from "./chunk.VI3SMVJJ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/badge/badge.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkBadge = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.pill = false;
+    this.pulse = false;
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      badge: true,
+      "badge--primary": this.type === "primary",
+      "badge--accent": this.type === "accent",
+      "badge--info": this.type === "info",
+      "badge--success": this.type === "success",
+      "badge--neutral": this.type === "neutral",
+      "badge--warning": this.type === "warning",
+      "badge--danger": this.type === "danger",
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse
+    })}
+        role="status"
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+LynkBadge.styles = [component_styles_default, badge_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], LynkBadge.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkBadge.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkBadge.prototype, "pulse", 2);
+
+export {
+  LynkBadge
+};

package/dist/chunks/chunk.56DV562Y.js

@@ -0,0 +1,87 @@
+import {
+  intersection_observer_styles_default
+} from "./chunk.UMHXN4BR.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.VI3SMVJJ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/intersection-observer/intersection-observer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkIntersectionObserver = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        console.log(entry);
+        if (entry.intersectionRatio > 0) {
+          this.emit("ev-enter-view", { detail: { entry } });
+        } else {
+          this.emit("ev-exit-view", { detail: { entry } });
+        }
+      });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.intersectionObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.intersectionObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.intersectionObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+LynkIntersectionObserver.styles = [component_styles_default, intersection_observer_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkIntersectionObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkIntersectionObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkIntersectionObserver
+};

package/dist/chunks/chunk.5ANDSVFJ.js

@@ -0,0 +1,11 @@
+import {
+  LynkTable
+} from "./chunk.MIDLBBD5.js";
+
+// src/components/table/table.ts
+var table_default = LynkTable;
+LynkTable.define("lynk-table");
+
+export {
+  table_default
+};

package/dist/chunks/chunk.5BRDYEMZ.js

@@ -0,0 +1,62 @@
+import {
+  stack_styles_default
+} from "./chunk.L4ZUBGGA.js";
+import {
+  LynkElement
+} from "./chunk.VI3SMVJJ.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.5DQCT4WR.js

@@ -0,0 +1,382 @@
+import {
+  popover_styles_default
+} from "./chunk.WQAES7FP.js";
+import {
+  getTabbableBoundary
+} from "./chunk.LXDTFLWU.js";
+import {
+  LynkPopup
+} from "./chunk.ODCYRK7T.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.5SGOC3ZM.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.VI3SMVJJ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/popover/popover.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 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 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 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.5JB6QHEK.js

@@ -0,0 +1,11 @@
+import {
+  LynkPageContent
+} from "./chunk.Y6SKM3US.js";
+
+// src/components/page-content/page-content.ts
+var page_content_default = LynkPageContent;
+LynkPageContent.define("lynk-page-content");
+
+export {
+  page_content_default
+};