@uplynk/lynk-design 1.19.1 → 1.20.0

package/dist/chunks/chunk.FD4AJHG6.js

@@ -1,92 +0,0 @@
-// src/components/splitter/splitter.styles.ts
-import { css } from "lit";
-var splitter_styles_default = css`
-  :host {
-    --divider-width: 0;
-    --divider-hit-area: 24px;
-    --divider-background-color: transparent;
-    --handle-background-color: var(--lynk-color-neutral-100);
-    display: flex;
-  }
-
-  :host([vertical]) {
-    flex-direction: column;
-  }
-
-  ::slotted(lynk-splitter-pane) {
-    overflow: hidden;
-  }
-
-  .divider {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--divider-background-color);
-    color: var(--lynk-color-neutral-900);
-    z-index: 1;
-    position: relative;
-  }
-
-  .divider:focus {
-    outline: none;
-  }
-
-  :host(:not([disabled])) .divider:focus-visible {
-    outline: var(--lynk-focus-ring);
-  }
-
-  :host([disabled]) .divider {
-    cursor: not-allowed;
-  }
-
-  /* Horizontal */
-  :host(:not([vertical], [disabled])) .divider {
-    cursor: col-resize;
-  }
-
-  :host(:not([vertical])) .divider::after {
-    display: flex;
-    content: '';
-    position: absolute;
-    height: 100%;
-    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
-    width: var(--divider-hit-area);
-  }
-
-  :host([vertical]:not([disabled])) .divider {
-    cursor: row-resize;
-  }
-
-  :host([vertical]) .divider::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
-    height: var(--divider-hit-area);
-  }
-
-  .handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: calc(var(--divider-width) / 4);
-    min-height: var(--handle-size, calc(var(--divider-width) * 4));
-    border-radius: 4px;
-    background: var(--handle-background-color);
-  }
-
-  :host([vertical]) .handle {
-    min-width: var(--handle-size, calc(var(--divider-width) * 4));
-    min-height: calc(var(--divider-width) / 4);
-  }
-
-  @media (forced-colors: active) {
-    .divider {
-      outline: solid 1px transparent;
-    }
-  }
-`;
-
-export {
-  splitter_styles_default
-};

package/dist/chunks/chunk.FFVITTAE.js

@@ -1,26 +0,0 @@
-import {
-  LynkSplitter
-} from "./chunk.HUPBZXME.js";
-
-// src/react/splitter/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-splitter";
-LynkSplitter.define("lynk-splitter");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkSplitter,
-  react: React,
-  events: {
-    EvReady: "ev-ready",
-    EvSplitterResize: "ev-splitter-resize",
-    EvAfterSplitterResize: "ev-after-splitter-resize"
-  },
-  displayName: "LynkSplitter"
-});
-var splitter_default = reactWrapper;
-
-export {
-  splitter_default
-};

package/dist/chunks/chunk.FGCC6BLV.js

@@ -1,49 +0,0 @@
-// src/components/page-footer/page-footer.styles.ts
-import { css } from "lit";
-var page_footer_styles_default = css`
-  :host {
-    display: contents;
-    --background-color: var(--lynk-color-neutral-50);
-  }
-
-  .page-footer {
-    border-radius: var(--lynk-border-radius-large) var(--lynk-border-radius-large) 0 0;
-    height: auto;
-    background: var(--background-color);
-    box-shadow: var(--lynk-shadow-large);
-    border: 1px solid var(--lynk-color-neutral-200);
-    border-bottom: none;
-    padding: var(--lynk-spacing-small);
-    z-index: var(--lynk-z-index-footer);
-    display: grid;
-    grid-template-areas: 'primary center secondary';
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .page-footer__primary {
-    grid-area: primary;
-    display: flex;
-    gap: var(--lynk-spacing-x-small);
-  }
-
-  .page-footer__center {
-    grid-area: center;
-    display: flex;
-    justify-self: center;
-    justify-content: center;
-    align-self: center;
-    align-content: center;
-    gap: var(--lynk-spacing-x-small);
-  }
-
-  .page-footer__secondary {
-    grid-area: secondary;
-    display: flex;
-    gap: var(--lynk-spacing-x-small);
-    justify-content: flex-end;
-  }
-`;
-
-export {
-  page_footer_styles_default
-};

package/dist/chunks/chunk.FGYIGZQK.js

@@ -1,29 +0,0 @@
-import {
-  LynkTreeItem
-} from "./chunk.4WK6RVCZ.js";
-
-// src/react/tree-item/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-tree-item";
-LynkTreeItem.define("lynk-tree-item");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkTreeItem,
-  react: React,
-  events: {
-    EvExpand: "ev-expand",
-    EvAfterExpand: "ev-after-expand",
-    EvCollapse: "ev-collapse",
-    EvAfterCollapse: "ev-after-collapse",
-    EvLazyChange: "ev-lazy-change",
-    EvLazyLoad: "ev-lazy-load"
-  },
-  displayName: "LynkTreeItem"
-});
-var tree_item_default = reactWrapper;
-
-export {
-  tree_item_default
-};

package/dist/chunks/chunk.FICYOTY7.js

@@ -1,80 +0,0 @@
-import {
-  resize_observer_styles_default
-} from "./chunk.5VKIB4HA.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/resize-observer/resize-observer.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var LynkResizeObserver = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.observedElements = [];
-    this.disabled = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver = new ResizeObserver((entries) => {
-      this.emit("ev-resize", { detail: { entries } });
-    });
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopObserver();
-  }
-  handleSlotChange() {
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-  startObserver() {
-    const slot = this.shadowRoot.querySelector("slot");
-    if (slot !== null) {
-      const elements = slot.assignedElements({ flatten: true });
-      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
-      this.observedElements = [];
-      elements.forEach((el) => {
-        this.resizeObserver.observe(el);
-        this.observedElements.push(el);
-      });
-    }
-  }
-  stopObserver() {
-    this.resizeObserver.disconnect();
-  }
-  handleDisabledChange() {
-    if (this.disabled) {
-      this.stopObserver();
-    } else {
-      this.startObserver();
-    }
-  }
-  render() {
-    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-};
-LynkResizeObserver.styles = [component_styles_default, resize_observer_styles_default];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkResizeObserver.prototype, "disabled", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], LynkResizeObserver.prototype, "handleDisabledChange", 1);
-
-export {
-  LynkResizeObserver
-};

package/dist/chunks/chunk.FIOHT265.js

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

package/dist/chunks/chunk.FMINNT64.js

@@ -1,211 +0,0 @@
-import {
-  nav_item_default
-} from "./chunk.WLZJSMRP.js";
-import {
-  nav_styles_default
-} from "./chunk.ZGDA6XYZ.js";
-import {
-  clamp
-} from "./chunk.HF7GESMZ.js";
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.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/nav/nav.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var LynkNav = class extends LynkElement {
-  constructor() {
-    super();
-    this.value = void 0;
-    this.squished = false;
-    this.localize = new LocalizeController(this);
-    this.handleFocusOut = (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (!relatedTarget || !this.contains(relatedTarget)) {
-        this.tabIndex = 0;
-      }
-    };
-    this.handleFocusIn = (event) => {
-      const target = event.target;
-      if (event.target === this) {
-        this.focusItem(this.lastFocusedItem || this.getAllNavItems()[0]);
-      }
-      if (nav_item_default.isTreeItem(target) && !target.disabled) {
-        if (this.lastFocusedItem) {
-          this.lastFocusedItem.tabIndex = -1;
-        }
-        this.lastFocusedItem = target;
-        this.tabIndex = -1;
-        target.tabIndex = 0;
-      }
-    };
-    this.addEventListener("focusin", this.handleFocusIn);
-    this.addEventListener("focusout", this.handleFocusOut);
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (this.squished) {
-      this.handleSquishedChange();
-    }
-    this.setAttribute("role", "navigation");
-    this.setAttribute("tabindex", "0");
-    await this.updateComplete;
-    this.mutationObserver = new MutationObserver(this.handleNavChanged);
-    this.mutationObserver.observe(this, { childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
-  }
-  handleNavChanged(mutations) {
-    for (const mutation of mutations) {
-      const removedNodes = [...mutation.removedNodes].filter(nav_item_default.isTreeItem);
-      if (removedNodes.includes(this.lastFocusedItem)) {
-        this.focusItem(this.getFocusableItems()[0]);
-      }
-    }
-  }
-  getAllNavItems() {
-    return [...this.querySelectorAll("lynk-nav-item")];
-  }
-  getNavGroups() {
-    return [...this.querySelectorAll("lynk-nav-group")];
-  }
-  getFocusableItems() {
-    const items = this.getAllNavItems();
-    const collapsedItems = /* @__PURE__ */ new Set();
-    return items.filter((item) => {
-      var _a;
-      if (item.disabled) return false;
-      const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("[role=treeitem]");
-      if (parent && (!parent.expanded || collapsedItems.has(parent))) {
-        collapsedItems.add(item);
-      }
-      return !collapsedItems.has(item);
-    });
-  }
-  focusItem(item) {
-    item == null ? void 0 : item.focus();
-  }
-  handleKeyDown(event) {
-    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Enter", "Tab", " "].includes(event.key)) {
-      return;
-    }
-    const items = this.getFocusableItems();
-    const isLtr = this.localize.dir() === "ltr";
-    const isRtl = this.localize.dir() === "rtl";
-    if (items.length > 0) {
-      const activeItemIndex = items.findIndex((item) => item.matches(":focus"));
-      const activeItem = items[activeItemIndex];
-      const focusItemAt = (index) => {
-        const item = items[clamp(index, 0, items.length - 1)];
-        this.focusItem(item);
-      };
-      const toggleExpand = (expanded) => {
-        activeItem.expanded = expanded;
-      };
-      if (event.key === "Tab" && !event.shiftKey && activeItemIndex === items.length - 1) {
-        this.tabIndex = 0;
-        activeItem.tabIndex = 0;
-      } else if (event.key === "Tab" && event.shiftKey && activeItemIndex === 0) {
-        this.tabIndex = -1;
-        activeItem.tabIndex = -1;
-      } else {
-        event.preventDefault();
-        if (event.key === "ArrowDown" || event.key === "Tab" && !event.shiftKey) {
-          focusItemAt(activeItemIndex + 1);
-        } else if (event.key === "ArrowUp" || event.key === "Tab" && event.shiftKey) {
-          focusItemAt(activeItemIndex - 1);
-        } else if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
-          if (!activeItem || activeItem.disabled || activeItem.isParent && activeItem.expanded || !activeItem.isParent) {
-            focusItemAt(activeItemIndex + 1);
-          } else {
-            toggleExpand(true);
-          }
-        } else if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
-          if (!activeItem || activeItem.disabled || !activeItem.isParent || activeItem.isParent && !activeItem.expanded) {
-            focusItemAt(activeItemIndex - 1);
-          } else {
-            toggleExpand(false);
-          }
-        } else if (event.key === "Home") {
-          focusItemAt(0);
-        } else if (event.key === "End") {
-          focusItemAt(items.length - 1);
-        } else if (event.key === "Enter" || event.key === " ") {
-          if (!activeItem.disabled) {
-            activeItem.click();
-          }
-        }
-      }
-    }
-  }
-  handleClick(event) {
-    const target = event.target;
-    const item = target.closest("lynk-nav-item");
-    if (!item || item.disabled || item.inert) {
-      return;
-    }
-    this.emit("ev-nav-select", { detail: { item } });
-  }
-  handleSquishedChange() {
-    const items = this.getAllNavItems();
-    const groups = this.getNavGroups();
-    items.forEach((item) => {
-      item.squished = this.squished;
-      item.expanded = false;
-      item.isParent = false;
-    });
-    groups.forEach((item) => {
-      item.squished = this.squished;
-    });
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      nav: true,
-      "nav--squished": this.squished
-    })}
-        role="tree"
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        <slot part="list"></slot>
-      </div>
-    `;
-  }
-};
-LynkNav.styles = [component_styles_default, nav_styles_default];
-__decorateClass([
-  query("slot:not([name])")
-], LynkNav.prototype, "defaultSlot", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkNav.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkNav.prototype, "squished", 2);
-__decorateClass([
-  watch("squished", { waitUntilFirstUpdate: true })
-], LynkNav.prototype, "handleSquishedChange", 1);
-
-export {
-  LynkNav
-};