@uplynk/lynk-design 1.12.0 → 1.12.1

package/cdn/chunks/chunk.4SMK76JE.js

@@ -0,0 +1,214 @@
+import {
+  dist_exports
+} from "./chunk.ONSYMX7B.js";
+import {
+  animation_styles_default
+} from "./chunk.WXSXE5DD.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  LynkElement,
+  n,
+  r2 as r
+} from "./chunk.RWJTJO4F.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/animation/animation.component.ts
+var LynkAnimation = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("ev-finish");
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("ev-cancel");
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    var _a, _b;
+    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    var _a, _b;
+    const easing = (_a = dist_exports.easings[this.easing]) != null ? _a : this.easing;
+    const keyframes = (_b = this.keyframes) != null ? _b : dist_exports[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("ev-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("ev-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all KeyframeEffects caused by this animation and aborts its playback. */
+  cancel() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.finish();
+  }
+  render() {
+    return x` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+LynkAnimation.styles = [component_styles_default, animation_styles_default];
+__decorateClass([
+  r("slot")
+], LynkAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  n()
+], LynkAnimation.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkAnimation.prototype, "play", 2);
+__decorateClass([
+  n({ type: Number })
+], LynkAnimation.prototype, "delay", 2);
+__decorateClass([
+  n()
+], LynkAnimation.prototype, "direction", 2);
+__decorateClass([
+  n({ type: Number })
+], LynkAnimation.prototype, "duration", 2);
+__decorateClass([
+  n()
+], LynkAnimation.prototype, "easing", 2);
+__decorateClass([
+  n({ attribute: "end-delay", type: Number })
+], LynkAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  n()
+], LynkAnimation.prototype, "fill", 2);
+__decorateClass([
+  n({ type: Number })
+], LynkAnimation.prototype, "iterations", 2);
+__decorateClass([
+  n({ attribute: "iteration-start", type: Number })
+], LynkAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  n({ attribute: false })
+], LynkAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  n({ attribute: "playback-rate", type: Number })
+], LynkAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch("name"),
+  watch("delay"),
+  watch("direction"),
+  watch("duration"),
+  watch("easing"),
+  watch("endDelay"),
+  watch("fill"),
+  watch("iterations"),
+  watch("iterationsStart"),
+  watch("keyframes")
+], LynkAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], LynkAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], LynkAnimation.prototype, "handlePlaybackRateChange", 1);
+
+export {
+  LynkAnimation
+};

package/cdn/chunks/chunk.4UDW4HUX.js

@@ -0,0 +1,11 @@
+import {
+  LynkCheckbox
+} from "./chunk.ILQP2WBI.js";
+
+// src/components/checkbox/checkbox.ts
+var checkbox_default = LynkCheckbox;
+LynkCheckbox.define("lynk-checkbox");
+
+export {
+  checkbox_default
+};

package/cdn/chunks/chunk.4V6MUP2V.js

@@ -0,0 +1,65 @@
+import {
+  th_styles_default
+} from "./chunk.N3MCLG5X.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.RWJTJO4F.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/th/th.component.ts
+var LynkTh = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.sortDirection = 0 /* NONE */;
+    this.sortable = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+  handleClick() {
+    if (this.sortable) {
+      this.emit("ev-table-sort", {
+        detail: {
+          key: this.key
+        }
+      });
+    }
+  }
+  render() {
+    return x`
+      <slot part="base" class="lynk-th__label"></slot>
+      ${this.sortable ? x`<lynk-icon
+            library="system"
+            name="${this.sortDirection === -1 /* ASC */ ? "arrow-up-short" : this.sortDirection === 1 /* DESC */ ? "arrow-down-short" : "arrow-up-down-short"}"
+          ></lynk-icon>` : ``}
+    `;
+  }
+};
+LynkTh.styles = [component_styles_default, th_styles_default];
+__decorateClass([
+  n()
+], LynkTh.prototype, "key", 2);
+__decorateClass([
+  n({ attribute: "sort-direction", reflect: true })
+], LynkTh.prototype, "sortDirection", 2);
+__decorateClass([
+  n({ attribute: "sortable", type: Boolean, reflect: true })
+], LynkTh.prototype, "sortable", 2);
+
+export {
+  LynkTh
+};

package/cdn/chunks/chunk.4X6JP63W.js

@@ -0,0 +1,389 @@
+import {
+  popover_styles_default
+} from "./chunk.LUNW6XN2.js";
+import {
+  getTabbableBoundary
+} from "./chunk.LXDTFLWU.js";
+import {
+  LynkPopup
+} from "./chunk.JCE7Q7O2.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.ONECFZZX.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.JSLXCIMZ.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  o
+} from "./chunk.XQGSWNOO.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.RWJTJO4F.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/popover/popover.component.ts
+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 x`
+      <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=${e({
+      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=${o(this.noHeader ? this.label : void 0)}
+          aria-labelledby=${o(!this.noHeader ? "title" : void 0)}
+          tabindex="0"
+        >
+          ${!this.noHeader ? x`
+                <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") ? x`
+                <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([
+  e2(".popover")
+], LynkPopover.prototype, "popup", 2);
+__decorateClass([
+  e2(".popover__trigger")
+], LynkPopover.prototype, "trigger", 2);
+__decorateClass([
+  e2(".popover__panel")
+], LynkPopover.prototype, "panel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "open", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkPopover.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "no-header", type: Boolean, reflect: true })
+], LynkPopover.prototype, "noHeader", 2);
+__decorateClass([
+  n({ attribute: "no-arrow", type: Boolean, reflect: true })
+], LynkPopover.prototype, "noArrow", 2);
+__decorateClass([
+  n({ attribute: "click-to-hide", type: Boolean, reflect: true })
+], LynkPopover.prototype, "clickToHide", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkPopover.prototype, "placement", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "disabled", 2);
+__decorateClass([
+  n({ attribute: false })
+], LynkPopover.prototype, "containingElement", 2);
+__decorateClass([
+  n({ type: Number })
+], LynkPopover.prototype, "distance", 2);
+__decorateClass([
+  n({ type: Number })
+], LynkPopover.prototype, "skidding", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkPopover.prototype, "block", 2);
+__decorateClass([
+  n({ 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
+};