@uplynk/lynk-design 1.20.0 → 1.20.1

package/dist/chunks/chunk.OAS3MA4F.js

@@ -1,80 +0,0 @@
-import {
-  resize_observer_styles_default
-} from "./chunk.5VKIB4HA.js";
-import {
-  watch
-} from "./chunk.SPANRPKG.js";
-import {
-  LynkElement
-} from "./chunk.OVBPFU7N.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.O6LH3WX2.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.OC7K4ON7.js

@@ -1,21 +0,0 @@
-import {
-  LynkTabPanel
-} from "./chunk.BAOK464Z.js";
-
-// src/react/tab-panel/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "lynk-tab-panel";
-LynkTabPanel.define("lynk-tab-panel");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkTabPanel,
-  react: React,
-  events: {},
-  displayName: "LynkTabPanel"
-});
-var tab_panel_default = reactWrapper;
-
-export {
-  tab_panel_default
-};

package/dist/chunks/chunk.OEHS4S6B.js

@@ -1,343 +0,0 @@
-import {
-  nav_item_styles_default
-} from "./chunk.RXKPYQAX.js";
-import {
-  LynkTooltip
-} from "./chunk.LGVGRCL2.js";
-import {
-  animateTo,
-  shimKeyframesHeightAuto,
-  stopAnimations
-} from "./chunk.POQ2R5WV.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.HKGM3EFE.js";
-import {
-  LocalizeController
-} from "./chunk.VIBAEA26.js";
-import {
-  LynkIcon
-} from "./chunk.JHTDTNM2.js";
-import {
-  getTextContent
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.SPANRPKG.js";
-import {
-  LynkElement
-} from "./chunk.OVBPFU7N.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.O6LH3WX2.js";
-
-// src/components/nav-item/nav-item.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html, literal } from "lit/static-html.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { property, query, state } from "lit/decorators.js";
-var _LynkNavItem = class _LynkNavItem extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.childItems = [];
-    this.isParent = false;
-    this.isChild = false;
-    this.loading = false;
-    this.depth = 0;
-    this.squished = false;
-    this.title = "";
-    this.name = "";
-    this.value = "";
-    this.href = "";
-    this.selected = false;
-    this.expanded = false;
-    this.disabled = false;
-    this.noLabel = false;
-  }
-  static isTreeItem(node) {
-    return node instanceof Element && node.getAttribute("role") === "treeitem";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "treeitem");
-    this.setAttribute("tabindex", "-1");
-    if (this.isNestedItem()) {
-      this.slot = "children";
-      this.isChild = true;
-      this.depth = this.getDepth();
-    }
-  }
-  firstUpdated() {
-    if (this.childrenContainer) {
-      this.childrenContainer.hidden = !this.expanded;
-      this.childrenContainer.style.height = this.expanded ? "auto" : "0";
-    }
-    this.isParent = this.hasChildren;
-    this.handleExpandedChange();
-    this.handleSquished();
-  }
-  /** Simulates a click on the nav item. */
-  click() {
-    this.navItem.click();
-  }
-  async animateCollapse() {
-    this.emit("ev-collapse");
-    await stopAnimations(this.childrenContainer);
-    const { keyframes, options } = getAnimation(this, "nav-item.collapse", { dir: this.localize.dir() });
-    await animateTo(
-      this.childrenContainer,
-      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
-      options
-    );
-    this.childrenContainer.hidden = true;
-    this.emit("ev-after-collapse");
-  }
-  async animateExpand() {
-    this.emit("ev-expand");
-    await stopAnimations(this.childrenContainer);
-    this.childrenContainer.hidden = false;
-    const { keyframes, options } = getAnimation(this, "nav-item.expand", { dir: this.localize.dir() });
-    await animateTo(
-      this.childrenContainer,
-      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
-      options
-    );
-    this.childrenContainer.style.height = "auto";
-    this.emit("ev-after-expand");
-  }
-  // Checks whether the item is nested into an item
-  isNestedItem() {
-    const parent = this.parentElement;
-    return !!parent && _LynkNavItem.isTreeItem(parent);
-  }
-  handleChildrenSlotChange() {
-    this.childItems = this.getChildrenItems();
-    this.isParent = this.childItems.length > 0;
-  }
-  get hasChildren() {
-    return this.childItems.length > 0;
-  }
-  getDepth() {
-    let depth = 0;
-    let element = this.parentElement;
-    while (element instanceof _LynkNavItem) {
-      depth++;
-      element = element.parentElement;
-    }
-    return depth;
-  }
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return getTextContent(this.defaultSlot);
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleExpandedChange() {
-    if (this.hasChildren) {
-      this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
-    } else {
-      this.removeAttribute("aria-expanded");
-    }
-  }
-  handleExpandAnimation() {
-    if (this.expanded) {
-      this.animateExpand();
-    } else {
-      this.animateCollapse();
-    }
-  }
-  handleSquished() {
-    if (this.squished) {
-      this.setAttribute("squished", this.squished ? "true" : "false");
-    } else {
-      this.removeAttribute("squished");
-    }
-  }
-  handleClick(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    if (this.hasChildren) {
-      this.expanded = !this.expanded;
-      event.stopPropagation();
-    }
-  }
-  handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-    if (typeof this.cachedTextLabel === "undefined") {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
-      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
-    }
-  }
-  /** Gets all the nested tree items in this node. */
-  getChildrenItems({ includeDisabled = true } = {}) {
-    return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: true })].filter(
-      (item) => _LynkNavItem.isTreeItem(item) && (includeDisabled || !item.disabled)
-    ) : [];
-  }
-  render() {
-    const isLink = Boolean(this.href);
-    const tag = isLink ? literal`a` : literal`button`;
-    const isRtl = this.localize.dir() === "rtl";
-    return html`
-      <${tag}
-        class=${classMap({
-      "nav-item": true,
-      "nav-item--disabled": this.disabled,
-      "nav-item--selected": this.selected,
-      "nav-item--has-children": this.isParent,
-      "nav-item--expanded": this.expanded,
-      "nav-item--squished": this.squished,
-      "nav-item--rtl": isRtl
-    })}
-        ?disabled=${this.disabled}
-        title=${this.title}
-        part="nav-item"
-        name=${ifDefined(isLink ? void 0 : this.name)}
-        value=${ifDefined(isLink ? void 0 : this.value)}
-        href=${ifDefined(isLink ? this.href : void 0)}
-        target=${ifDefined(isLink ? this.target : void 0)}
-        download=${ifDefined(isLink ? this.download : void 0)}
-        rel=${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}
-        data-level=${this.depth}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        @click=${this.handleClick}
-        tabindex="-1"
-        aria-current=${ifDefined(this.selected && this.href ? "page" : void 0)}
-      >
-        <slot name="prefix" part="prefix" class="nav-item__prefix"></slot>
-        <slot part="label" class="nav-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-
-        <slot name="suffix" part="suffix" class="nav-item__suffix"></slot>
-
-        ${this.isParent ? html`
-                <span class="nav-item__chevron">
-                  <lynk-icon
-                    library="system"
-                    aria-hidden="true"
-                    name=${this.squished ? "chevron-down" : isRtl ? "chevron-left" : "chevron-right"}
-                  ></lynk-icon>
-                </span>
-              ` : ""}
-
-        ${this.target === "_blank" ? html`
-                <span class="nav-item__external">
-                  <lynk-icon library="system" aria-hidden="true" name="external"></lynk-icon>
-                </span>
-              ` : ""}
-
-      </${tag}>
-
-      <div
-        part="children"
-        class="nav-item__children"
-        role="group"
-        ?inert=${!this.expanded}
-      >
-        <slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
-      </div>
-    `;
-  }
-};
-_LynkNavItem.styles = [component_styles_default, nav_item_styles_default];
-_LynkNavItem.dependencies = { "lynk-icon": LynkIcon, "lynk-tooltip": LynkTooltip };
-__decorateClass([
-  state()
-], _LynkNavItem.prototype, "isParent", 2);
-__decorateClass([
-  state()
-], _LynkNavItem.prototype, "isChild", 2);
-__decorateClass([
-  state()
-], _LynkNavItem.prototype, "loading", 2);
-__decorateClass([
-  state()
-], _LynkNavItem.prototype, "depth", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _LynkNavItem.prototype, "squished", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "title", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "name", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "value", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "href", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "target", 2);
-__decorateClass([
-  property()
-], _LynkNavItem.prototype, "download", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _LynkNavItem.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _LynkNavItem.prototype, "expanded", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _LynkNavItem.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "no-label", type: Boolean, reflect: true })
-], _LynkNavItem.prototype, "noLabel", 2);
-__decorateClass([
-  query("slot:not([name])")
-], _LynkNavItem.prototype, "defaultSlot", 2);
-__decorateClass([
-  query("slot[name=children]")
-], _LynkNavItem.prototype, "childrenSlot", 2);
-__decorateClass([
-  query(".nav-item")
-], _LynkNavItem.prototype, "navItem", 2);
-__decorateClass([
-  query(".nav-item__children")
-], _LynkNavItem.prototype, "childrenContainer", 2);
-__decorateClass([
-  watch("disabled")
-], _LynkNavItem.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("expanded", { waitUntilFirstUpdate: true })
-], _LynkNavItem.prototype, "handleExpandedChange", 1);
-__decorateClass([
-  watch("expanded", { waitUntilFirstUpdate: true })
-], _LynkNavItem.prototype, "handleExpandAnimation", 1);
-__decorateClass([
-  watch("squished", { waitUntilFirstUpdate: true })
-], _LynkNavItem.prototype, "handleSquished", 1);
-var LynkNavItem = _LynkNavItem;
-setDefaultAnimation("nav-item.expand", {
-  keyframes: [
-    { height: "0", opacity: "0", overflow: "hidden" },
-    { height: "auto", opacity: "1", overflow: "hidden" }
-  ],
-  options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
-});
-setDefaultAnimation("nav-item.collapse", {
-  keyframes: [
-    { height: "auto", opacity: "1", overflow: "hidden" },
-    { height: "0", opacity: "0", overflow: "hidden" }
-  ],
-  options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
-});
-
-export {
-  LynkNavItem
-};

package/dist/chunks/chunk.OEKC5NJD.js

@@ -1,25 +0,0 @@
-import {
-  LynkRadioButton
-} from "./chunk.FOYC7HSE.js";
-
-// src/react/radio-button/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-radio-button";
-LynkRadioButton.define("lynk-radio-button");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkRadioButton,
-  react: React,
-  events: {
-    EvBlur: "ev-blur",
-    EvFocus: "ev-focus"
-  },
-  displayName: "LynkRadioButton"
-});
-var radio_button_default = reactWrapper;
-
-export {
-  radio_button_default
-};

package/dist/chunks/chunk.OHGKFRDG.js

@@ -1,27 +0,0 @@
-import {
-  LynkPageSidebar
-} from "./chunk.NN4EOAKD.js";
-
-// src/react/page-sidebar/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-page-sidebar";
-LynkPageSidebar.define("lynk-page-sidebar");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkPageSidebar,
-  react: React,
-  events: {
-    EvShow: "ev-show",
-    EvAfterShow: "ev-after-show",
-    EvHide: "ev-hide",
-    EvAfterHide: "ev-after-hide"
-  },
-  displayName: "LynkPageSidebar"
-});
-var page_sidebar_default = reactWrapper;
-
-export {
-  page_sidebar_default
-};

package/dist/chunks/chunk.OPRLVL4W.js

@@ -1,137 +0,0 @@
-import {
-  tab_styles_default
-} from "./chunk.NRD663NN.js";
-import {
-  LynkIconButton
-} from "./chunk.ZVYB5R65.js";
-import {
-  LocalizeController
-} from "./chunk.VIBAEA26.js";
-import {
-  watch
-} from "./chunk.SPANRPKG.js";
-import {
-  LynkElement
-} from "./chunk.OVBPFU7N.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.O6LH3WX2.js";
-
-// src/components/tab/tab.component.ts
-import { property, query } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { html, literal } from "lit/static-html.js";
-var id = 0;
-var LynkTab = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.attrId = ++id;
-    this.componentId = `lynk-tab-${this.attrId}`;
-    this.panel = "";
-    this.active = false;
-    this.closable = false;
-    this.disabled = false;
-    this.href = "";
-    this.rel = "noreferrer noopener";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "tab");
-  }
-  handleCloseClick() {
-    this.emit("ev-close");
-  }
-  isLink() {
-    return this.href ? true : false;
-  }
-  handleActiveChange() {
-    this.setAttribute("aria-selected", this.active ? "true" : "false");
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-    if (this.disabled && !this.active) {
-      this.tabIndex = -1;
-    } else {
-      this.tabIndex = 0;
-    }
-  }
-  /** Sets focus to the tab. */
-  focus(options) {
-    this.tab.focus(options);
-  }
-  /** Removes focus from the tab. */
-  blur() {
-    this.tab.blur();
-  }
-  render() {
-    const isLink = this.isLink();
-    const tag = isLink ? literal`a` : literal`div`;
-    this.id = this.id.length > 0 ? this.id : this.componentId;
-    return html`
-      <${tag}
-        part="base"
-        href=${ifDefined(isLink ? this.href : void 0)}
-        rel=${ifDefined(isLink ? this.rel : void 0)}
-        class=${classMap({
-      tab: true,
-      "tab--active": this.active,
-      "tab--closable": this.closable,
-      "tab--disabled": this.disabled
-    })}
-        tabindex=${this.disabled ? "-1" : "0"}
-      >
-        <slot></slot>
-        ${this.closable ? html`
-                <lynk-icon-button
-                  part="close-button"
-                  exportparts="base:close-button__base"
-                  name="x-lg"
-                  library="system"
-                  label=${this.localize.term("close")}
-                  class="tab__close-button"
-                  @click=${this.handleCloseClick}
-                  tabindex="-1"
-                ></lynk-icon-button>
-              ` : ""}
-      </${tag}>
-    `;
-  }
-};
-LynkTab.styles = [component_styles_default, tab_styles_default];
-LynkTab.dependencies = { "lynk-icon-button": LynkIconButton };
-__decorateClass([
-  query(".tab")
-], LynkTab.prototype, "tab", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkTab.prototype, "panel", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkTab.prototype, "active", 2);
-__decorateClass([
-  property({ type: Boolean })
-], LynkTab.prototype, "closable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkTab.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], LynkTab.prototype, "href", 2);
-__decorateClass([
-  property()
-], LynkTab.prototype, "rel", 2);
-__decorateClass([
-  watch("active")
-], LynkTab.prototype, "handleActiveChange", 1);
-__decorateClass([
-  watch("disabled")
-], LynkTab.prototype, "handleDisabledChange", 1);
-
-export {
-  LynkTab
-};