@uplynk/lynk-design 1.12.0 → 1.13.0

package/cdn/chunks/chunk.LO6WGE7R.js

@@ -1,214 +0,0 @@
-import {
-  dist_exports
-} from "./chunk.ONSYMX7B.js";
-import {
-  watch
-} from "./chunk.RB5L7E7Z.js";
-import {
-  LynkElement,
-  n,
-  r2 as r
-} from "./chunk.2BD5ESA2.js";
-import {
-  component_styles_default
-} from "./chunk.ADWNFIQR.js";
-import {
-  animation_styles_default
-} from "./chunk.WXSXE5DD.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.LOUVYHPJ.js

@@ -1,67 +0,0 @@
-import {
-  tab_panel_styles_default
-} from "./chunk.ZN7WFSBF.js";
-import {
-  e
-} from "./chunk.BB43Q4ZV.js";
-import {
-  watch
-} from "./chunk.RB5L7E7Z.js";
-import {
-  LynkElement,
-  n
-} from "./chunk.2BD5ESA2.js";
-import {
-  component_styles_default
-} from "./chunk.ADWNFIQR.js";
-import {
-  x
-} from "./chunk.BW3AXSF6.js";
-import {
-  __decorateClass
-} from "./chunk.QIOX6AG5.js";
-
-// src/components/tab-panel/tab-panel.component.ts
-var id = 0;
-var LynkTabPanel = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.attrId = ++id;
-    this.componentId = `tab-panel-${this.attrId}`;
-    this.name = "";
-    this.active = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.id = this.id.length > 0 ? this.id : this.componentId;
-    this.setAttribute("role", "tabpanel");
-  }
-  handleActiveChange() {
-    this.setAttribute("aria-hidden", this.active ? "false" : "true");
-  }
-  render() {
-    return x`
-      <slot
-        part="base"
-        class=${e({
-      "tab-panel": true,
-      "tab-panel--active": this.active
-    })}
-      ></slot>
-    `;
-  }
-};
-LynkTabPanel.styles = [component_styles_default, tab_panel_styles_default];
-__decorateClass([
-  n({ reflect: true })
-], LynkTabPanel.prototype, "name", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], LynkTabPanel.prototype, "active", 2);
-__decorateClass([
-  watch("active")
-], LynkTabPanel.prototype, "handleActiveChange", 1);
-
-export {
-  LynkTabPanel
-};

package/cdn/chunks/chunk.LUNW6XN2.js

@@ -1,116 +0,0 @@
-import {
-  i
-} from "./chunk.BW3AXSF6.js";
-
-// src/components/popover/popover.styles.ts
-var popover_styles_default = i`
-  :host {
-    --max-width: 30rem;
-    --width: 20rem;
-    --header-spacing: var(--lynk-spacing-base);
-    --body-spacing: var(--lynk-spacing-base);
-    --footer-spacing: var(--lynk-spacing-base);
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
-
-    display: contents;
-  }
-
-  .popover::part(popup) {
-    z-index: var(--lynk-z-index-dropdown);
-    --arrow-size: var(--lynk-tooltip-arrow-size);
-    --arrow-color: var(--lynk-panel-border-color);
-  }
-
-  .popover[data-current-placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .popover[data-current-placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .popover[data-current-placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .popover[data-current-placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .popover-target {
-    display: contents;
-  }
-
-  .popover--open .popover__panel {
-    pointer-events: all;
-  }
-
-  .popover__panel {
-    display: flex;
-    pointer-events: none;
-    flex-direction: column;
-    z-index: 2;
-    width: var(--width);
-    max-width: var(--max-width);
-    max-height: var(--max-height);
-    font-family: var(--lynk-font-sans);
-    font-size: var(--lynk-font-size-medium);
-    font-weight: var(--lynk-font-weight-normal);
-    box-shadow: var(--lynk-shadow-large);
-    border-radius: var(--lynk-border-radius-medium);
-    background-color: var(--lynk-panel-background-color);
-    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
-  }
-
-  .popover__panel:focus {
-    outline: none;
-  }
-
-  .popover__body {
-    flex: 1 1 auto;
-    display: block;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    padding: var(--body-spacing);
-  }
-
-  .popover__header {
-    flex: 0 0 auto;
-    display: flex;
-    padding: var(--header-spacing);
-    padding-bottom: 0;
-  }
-
-  .popover__title {
-    flex: 1 1 auto;
-    font: inherit;
-    font-size: var(--lynk-font-size-base);
-    line-height: var(--lynk-line-height-dense);
-    margin: 0;
-  }
-
-  .popover__close {
-    flex: 0 0 auto;
-    align-self: end;
-    font-size: var(--lynk-font-size-base);
-    padding-left: var(--header-spacing);
-    position: relative;
-    top: -4px;
-    right: -4px;
-  }
-
-  .popover__footer {
-    flex: 0 0 auto;
-    padding: var(--footer-spacing);
-    padding-top: 0;
-  }
-
-  .popover__footer ::slotted(lynk-button:not(:first-of-type)) {
-    margin-inline-end: var(--lynk-spacing-x-small);
-  }
-`;
-
-export {
-  popover_styles_default
-};

package/cdn/chunks/chunk.LVSRPFQT.js

@@ -1,79 +0,0 @@
-import {
-  e
-} from "./chunk.BB43Q4ZV.js";
-import {
-  accordion_styles_default
-} from "./chunk.RO6MKPMF.js";
-import {
-  LynkElement,
-  n
-} from "./chunk.2BD5ESA2.js";
-import {
-  component_styles_default
-} from "./chunk.ADWNFIQR.js";
-import {
-  x
-} from "./chunk.BW3AXSF6.js";
-import {
-  __decorateClass
-} from "./chunk.QIOX6AG5.js";
-
-// src/components/accordion/accordion.component.ts
-var LynkAccordion = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.multiple = false;
-  }
-  getAllPanels() {
-    return [...this.querySelectorAll("lynk-panel")];
-  }
-  handlePanelToggle(event) {
-    const target = event.target.closest("lynk-panel");
-    const panels = this.getAllPanels();
-    if (target.disabled) {
-      return;
-    }
-    if (!this.multiple) {
-      panels.forEach((panel) => panel.expanded = panel === target);
-    }
-  }
-  /** Expands all panels. */
-  expandAll() {
-    const panels = this.getAllPanels();
-    panels.forEach((panel) => panel.expanded = true);
-  }
-  /** Collapses all panels */
-  collapseAll() {
-    const panels = this.getAllPanels();
-    panels.forEach((panel) => panel.expanded = false);
-  }
-  render() {
-    return x`
-      <slot
-        part="base"
-        class=${e({
-      accordion: true,
-      "accordion--square": this.shape === "square",
-      "accordion--flush": this.density === "flush",
-      "accordion--compact": this.density === "compact",
-      "accordion--comfy": this.density === "comfy"
-    })}
-        @ev-expand=${this.handlePanelToggle}
-      ></slot>
-    `;
-  }
-};
-LynkAccordion.styles = [component_styles_default, accordion_styles_default];
-__decorateClass([
-  n({ type: Boolean })
-], LynkAccordion.prototype, "multiple", 2);
-__decorateClass([
-  n({ reflect: true })
-], LynkAccordion.prototype, "density", 2);
-__decorateClass([
-  n({ reflect: true })
-], LynkAccordion.prototype, "shape", 2);
-
-export {
-  LynkAccordion
-};

package/cdn/chunks/chunk.LXDTFLWU.js

@@ -1,131 +0,0 @@
-// src/internal/tabbable.ts
-var computedStyleMap = /* @__PURE__ */ new WeakMap();
-function getCachedComputedStyle(el) {
-  let computedStyle = computedStyleMap.get(el);
-  if (!computedStyle) {
-    computedStyle = window.getComputedStyle(el, null);
-    computedStyleMap.set(el, computedStyle);
-  }
-  return computedStyle;
-}
-function isVisible(el) {
-  if (typeof el.checkVisibility === "function") {
-    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
-  }
-  const computedStyle = getCachedComputedStyle(el);
-  return computedStyle.visibility !== "hidden" && computedStyle.display !== "none";
-}
-function isOverflowingAndTabbable(el) {
-  const computedStyle = getCachedComputedStyle(el);
-  const { overflowY, overflowX } = computedStyle;
-  if (overflowY === "scroll" || overflowX === "scroll") {
-    return true;
-  }
-  if (overflowY !== "auto" || overflowX !== "auto") {
-    return false;
-  }
-  const isOverflowingY = el.scrollHeight > el.clientHeight;
-  if (isOverflowingY && overflowY === "auto") {
-    return true;
-  }
-  const isOverflowingX = el.scrollWidth > el.clientWidth;
-  if (isOverflowingX && overflowX === "auto") {
-    return true;
-  }
-  return false;
-}
-function isTabbable(el) {
-  const tag = el.tagName.toLowerCase();
-  const tabindex = Number(el.getAttribute("tabindex"));
-  const hasTabindex = el.hasAttribute("tabindex");
-  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
-    return false;
-  }
-  if (el.hasAttribute("disabled")) {
-    return false;
-  }
-  if (el.closest("[inert]")) {
-    return false;
-  }
-  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
-    return false;
-  }
-  if (!isVisible(el)) {
-    return false;
-  }
-  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
-    return true;
-  }
-  if (el.hasAttribute("tabindex")) {
-    return true;
-  }
-  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
-    return true;
-  }
-  const isNativelyTabbable = [
-    "button",
-    "input",
-    "select",
-    "textarea",
-    "a",
-    "audio",
-    "video",
-    "summary",
-    "iframe"
-  ].includes(tag);
-  if (isNativelyTabbable) {
-    return true;
-  }
-  return isOverflowingAndTabbable(el);
-}
-function getTabbableBoundary(root) {
-  var _a, _b;
-  const tabbableElements = getTabbableElements(root);
-  const start = (_a = tabbableElements[0]) != null ? _a : null;
-  const end = (_b = tabbableElements[tabbableElements.length - 1]) != null ? _b : null;
-  return { start, end };
-}
-function getSlottedChildrenOutsideRootElement(slotElement, root) {
-  var _a;
-  return ((_a = slotElement.getRootNode({ composed: true })) == null ? void 0 : _a.host) !== root;
-}
-function getTabbableElements(root) {
-  const walkedEls = /* @__PURE__ */ new WeakMap();
-  const tabbableElements = [];
-  function walk(el) {
-    if (el instanceof Element) {
-      if (el.hasAttribute("inert") || el.closest("[inert]")) {
-        return;
-      }
-      if (walkedEls.has(el)) {
-        return;
-      }
-      walkedEls.set(el, true);
-      if (!tabbableElements.includes(el) && isTabbable(el)) {
-        tabbableElements.push(el);
-      }
-      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
-        el.assignedElements({ flatten: true }).forEach((assignedEl) => {
-          walk(assignedEl);
-        });
-      }
-      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
-        walk(el.shadowRoot);
-      }
-    }
-    for (const e of el.children) {
-      walk(e);
-    }
-  }
-  walk(root);
-  return tabbableElements.sort((a, b) => {
-    const aTabindex = Number(a.getAttribute("tabindex")) || 0;
-    const bTabindex = Number(b.getAttribute("tabindex")) || 0;
-    return bTabindex - aTabindex;
-  });
-}
-
-export {
-  getTabbableBoundary,
-  getTabbableElements
-};