@uplynk/lynk-design 1.15.0 → 1.16.0

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

@@ -1,85 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,382 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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
-};