@uplynk/lynk-design 1.13.0 → 1.15.0

package/dist/chunks/chunk.DBLX47OO.js

@@ -1,241 +0,0 @@
-import {
-  page_sidebar_styles_default
-} from "./chunk.VPCTQLJ3.js";
-import {
-  page_default
-} from "./chunk.TP5BFNSQ.js";
-import {
-  LynkTooltip
-} from "./chunk.KERLHGBE.js";
-import {
-  LynkButton
-} from "./chunk.I5D4R7MQ.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.2MJZWUB2.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/page-sidebar/page-sidebar.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var LynkPageSidebar = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "footer", "header", "heading", "header-actions");
-    this.localize = new LocalizeController(this);
-    this.open = false;
-    this.placement = "left";
-    this.toggle = "none";
-    this.togglePlacement = "top";
-    this.toggleTipHideText = "Hide Sidebar";
-    this.toggleTipShowText = "Show Sidebar";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.slot && this.hasParentLayout()) {
-      this.slot = `${this.placement}-sidebar`;
-    }
-    if (this.toggle === "none") {
-      this.open = true;
-    }
-  }
-  firstUpdated() {
-    this.updateVisibility();
-  }
-  /** Shows the sidebar */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "ev-after-show");
-  }
-  /** Hides the sidebar */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "ev-after-hide");
-  }
-  // Checks whether the item is nested into an item
-  hasParentLayout() {
-    const parent = this.parentElement;
-    return parent instanceof page_default;
-  }
-  handleToggleClick() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-  updateVisibility() {
-    if (this.toggle === "visibility") {
-      this.sidebar.hidden = !this.open;
-    }
-    if (this.toggle === "contents") {
-      this.tooltip.hide();
-      this.body.hidden = !this.open;
-      this.header.hidden = !this.open;
-      this.footer.hidden = !this.open;
-    }
-  }
-  handleOpenChange() {
-    if (this.open) {
-      this.emit("ev-show");
-      this.updateVisibility();
-      this.emit("ev-after-show");
-    } else {
-      this.emit("ev-hide");
-      this.updateVisibility();
-      this.emit("ev-after-hide");
-    }
-  }
-  render() {
-    const hasHeading = this.heading ? true : false;
-    return html`
-      <aside
-        part="base"
-        class=${classMap({
-      "page-sidebar": true,
-      "page-sidebar--open": this.open,
-      "page-sidebar--left": this.placement === "left",
-      "page-sidebar--right": this.placement === "right",
-      "page-sidebar--left-inset": this.placement === "left-inset",
-      "page-sidebar--right-inset": this.placement === "right-inset",
-      "page-sidebar--rtl": this.localize.dir() === "rtl",
-      "page-sidebar--has-header": this.hasSlotController.test("header") || this.hasSlotController.test("heading") || this.hasSlotController.test("header-actions") || hasHeading,
-      "page-sidebar--has-footer": this.hasSlotController.test("footer")
-    })}
-      >
-        <slot name="nav" part="nav" class="page-sidebar__nav"></slot>
-        <div part="container" class="page-sidebar__container">
-          <header part="header" class="page-sidebar__header">
-            <slot name="header">
-              <h2 part="title" class="page-sidebar__title" id="title">
-                <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                <slot name="heading">
-                  ${this.heading && this.heading.length > 0 ? this.heading : String.fromCharCode(65279)}
-                </slot>
-              </h2>
-              <div part="header-actions" class="page-sidebar__header-actions">
-                <slot name="header-actions">
-                  ${this.toggle === "visibility" ? html`
-                        <lynk-button
-                          part="close-button"
-                          size="tiny"
-                          circle
-                          label=${this.localize.term("close")}
-                          @click=${this.handleToggleClick}
-                        >
-                          <lynk-icon library="system" name="x-lg"></lynk-icon>
-                        </lynk-button>
-                      ` : ""}
-                </slot>
-              </div>
-            </slot>
-          </header>
-
-          <slot part="body" class="page-sidebar__body"></slot>
-
-          <footer part="footer" class="page-sidebar__footer">
-            <slot name="footer"></slot>
-          </footer>
-        </div>
-
-        ${this.toggle === "contents" ? html`
-              <lynk-tooltip
-                hoist
-                placement="bottom"
-                class="page-sidebar__trigger-tooltip"
-                content="${this.open ? this.toggleTipHideText : this.toggleTipShowText}"
-              >
-                <lynk-button
-                  part="close-button"
-                  size="tiny"
-                  circle
-                  exportparts="base:close-button__base"
-                  class=${classMap({
-      "page-sidebar__toggle": true,
-      "page-sidebar__toggle--center": this.togglePlacement === "center",
-      "page-sidebar__toggle--bottom": this.togglePlacement === "bottom",
-      "page-sidebar__toggle--hidden": this.togglePlacement === "hidden"
-    })}
-                  label=${this.localize.term("close")}
-                  @click=${this.handleToggleClick}
-                >
-                  <lynk-icon library="system" name="${this.open ? "chevron-left" : "chevron-right"}"></lynk-icon>
-                </lynk-button>
-              </lynk-tooltip>
-            ` : ""}
-      </aside>
-    `;
-  }
-};
-LynkPageSidebar.styles = [component_styles_default, page_sidebar_styles_default];
-LynkPageSidebar.dependencies = { "lynk-button": LynkButton, "lynk-tooltip": LynkTooltip };
-__decorateClass([
-  query(".page-sidebar")
-], LynkPageSidebar.prototype, "sidebar", 2);
-__decorateClass([
-  query(".page-sidebar__container")
-], LynkPageSidebar.prototype, "container", 2);
-__decorateClass([
-  query(".page-sidebar__body")
-], LynkPageSidebar.prototype, "body", 2);
-__decorateClass([
-  query(".page-sidebar__header")
-], LynkPageSidebar.prototype, "header", 2);
-__decorateClass([
-  query(".page-sidebar__footer")
-], LynkPageSidebar.prototype, "footer", 2);
-__decorateClass([
-  query(".page-sidebar__trigger-tooltip")
-], LynkPageSidebar.prototype, "tooltip", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkPageSidebar.prototype, "open", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkPageSidebar.prototype, "heading", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkPageSidebar.prototype, "placement", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkPageSidebar.prototype, "toggle", 2);
-__decorateClass([
-  property({ attribute: "toggle-placement", reflect: true })
-], LynkPageSidebar.prototype, "togglePlacement", 2);
-__decorateClass([
-  property({ attribute: "toggle-tip-hide-text", reflect: false })
-], LynkPageSidebar.prototype, "toggleTipHideText", 2);
-__decorateClass([
-  property({ attribute: "toggle-tip-show-text", reflect: false })
-], LynkPageSidebar.prototype, "toggleTipShowText", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], LynkPageSidebar.prototype, "handleOpenChange", 1);
-
-export {
-  LynkPageSidebar
-};

package/dist/chunks/chunk.DD47GYQY.js

@@ -1,93 +0,0 @@
-import {
-  optgroup_styles_default
-} from "./chunk.LMSOUC4X.js";
-import {
-  LynkDivider
-} from "./chunk.SNHSCSXQ.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.2MJZWUB2.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/optgroup/optgroup.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit/static-html.js";
-import { property, query } from "lit/decorators.js";
-var LynkOptgroup = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix", "label");
-    this.disabled = false;
-    this.label = "";
-  }
-  /**
-   * Syncs the disabled prop for all slotted lynk-options when it is triggered
-   */
-  handleDisableOptions() {
-    const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "lynk-option").forEach((opt) => {
-      opt.disabled = disabled;
-    });
-  }
-  handleDisabledChange() {
-    this.handleDisableOptions();
-  }
-  render() {
-    const { disabled } = this;
-    const hasLabelSlot = this.hasSlotController.test("label");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    return html`
-      <div
-        class=${classMap({
-      optgroup: true,
-      "optgroup--has-label": hasLabel,
-      "optgroup--has-prefix": this.hasSlotController.test("prefix"),
-      "optgroup--has-suffix": this.hasSlotController.test("suffix"),
-      "optgroup--is-disabled": this.disabled
-    })}
-        role="${disabled ? "presentation" : "group"}"
-        part="base"
-      >
-        <lynk-divider class="optgroup__divider" part="divider"></lynk-divider>
-        <div class="optgroup__label-container" part="label-container">
-          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
-          <slot name="label" part="label" class="optgroup__label">
-            <span class="optgroup__label-content"> ${this.label} </span>
-          </slot>
-          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
-        </div>
-        <div class="optgroup__options" role="group" part="options">
-          <slot @slotchange=${this.handleDisableOptions}></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-LynkOptgroup.styles = optgroup_styles_default;
-LynkOptgroup.dependencies = {
-  "lynk-divider": LynkDivider
-};
-__decorateClass([
-  query("slot:not([name])")
-], LynkOptgroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  property({ reflect: true, type: Boolean })
-], LynkOptgroup.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], LynkOptgroup.prototype, "label", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], LynkOptgroup.prototype, "handleDisabledChange", 1);
-
-export {
-  LynkOptgroup
-};

package/dist/chunks/chunk.DIQ4ZEFB.js

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

package/dist/chunks/chunk.DJNYTGCY.js

@@ -1,11 +0,0 @@
-import {
-  LynkScroller
-} from "./chunk.LLX4ESKO.js";
-
-// src/components/scroller/scroller.ts
-var scroller_default = LynkScroller;
-LynkScroller.define("lynk-scroller");
-
-export {
-  scroller_default
-};

package/dist/chunks/chunk.DMZ35MA3.js

@@ -1,11 +0,0 @@
-import {
-  LynkTruncate
-} from "./chunk.N4X4CVBI.js";
-
-// src/components/truncate/truncate.ts
-var truncate_default = LynkTruncate;
-LynkTruncate.define("lynk-truncate");
-
-export {
-  truncate_default
-};

package/dist/chunks/chunk.DRYSY4XC.js

@@ -1,24 +0,0 @@
-import {
-  LynkResizeObserver
-} from "./chunk.ADJAYVTL.js";
-
-// src/react/resize-observer/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-resize-observer";
-LynkResizeObserver.define("lynk-resize-observer");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkResizeObserver,
-  react: React,
-  events: {
-    EvResize: "ev-resize"
-  },
-  displayName: "LynkResizeObserver"
-});
-var resize_observer_default = reactWrapper;
-
-export {
-  resize_observer_default
-};

package/dist/chunks/chunk.E5JLOBNZ.js

@@ -1,22 +0,0 @@
-import {
-  menu_label_styles_default
-} from "./chunk.HKLTPXSQ.js";
-import {
-  LynkElement
-} from "./chunk.2MJZWUB2.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-
-// src/components/menu-label/menu-label.component.ts
-import { html } from "lit";
-var LynkMenuLabel = class extends LynkElement {
-  render() {
-    return html` <slot part="base" class="menu-label"></slot> `;
-  }
-};
-LynkMenuLabel.styles = [component_styles_default, menu_label_styles_default];
-
-export {
-  LynkMenuLabel
-};

package/dist/chunks/chunk.EANDXDUV.js

@@ -1,241 +0,0 @@
-// src/components/tab-group/tab-group.styles.ts
-import { css } from "lit";
-var tab_group_styles_default = css`
-  :host {
-    --indicator-color: var(--lynk-color-primary-600);
-    --track-color: var(--lynk-color-neutral-200);
-    --track-width: 2px;
-
-    display: block;
-  }
-
-  .tab-group {
-    display: flex;
-    border-radius: 0;
-  }
-
-  .tab-group__tabs {
-    display: flex;
-    position: relative;
-  }
-
-  .tab-group__indicator {
-    position: absolute;
-    transition:
-      var(--lynk-transition-fast) translate ease,
-      var(--lynk-transition-fast) width ease;
-  }
-
-  .tab-group--has-scroll-controls .tab-group__nav-container {
-    position: relative;
-    padding: 0 var(--lynk-spacing-x-large);
-  }
-
-  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
-  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
-    visibility: hidden;
-  }
-
-  .tab-group__body {
-    display: block;
-    overflow: auto;
-  }
-
-  .tab-group__scroll-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: var(--lynk-spacing-x-large);
-  }
-
-  .tab-group__scroll-button--start {
-    left: 0;
-  }
-
-  .tab-group__scroll-button--end {
-    right: 0;
-  }
-
-  .tab-group--rtl .tab-group__scroll-button--start {
-    left: auto;
-    right: 0;
-  }
-
-  .tab-group--rtl .tab-group__scroll-button--end {
-    left: 0;
-    right: auto;
-  }
-
-  /*
-   * Top
-   */
-
-  .tab-group--top {
-    flex-direction: column;
-  }
-
-  .tab-group--top .tab-group__nav-container {
-    order: 1;
-  }
-
-  .tab-group--top .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--top .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .tab-group--top .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-bottom: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--top .tab-group__indicator {
-    bottom: calc(-1 * var(--track-width));
-    border-bottom: solid var(--track-width) var(--indicator-color);
-  }
-
-  .tab-group--top .tab-group__body {
-    order: 2;
-  }
-
-  .tab-group--top ::slotted(lynk-tab-panel) {
-    --padding: var(--lynk-spacing-medium) 0;
-  }
-
-  /*
-   * Bottom
-   */
-
-  .tab-group--bottom {
-    flex-direction: column;
-  }
-
-  .tab-group--bottom .tab-group__nav-container {
-    order: 2;
-  }
-
-  .tab-group--bottom .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .tab-group--bottom .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-top: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--bottom .tab-group__indicator {
-    top: calc(-1 * var(--track-width));
-    border-top: solid var(--track-width) var(--indicator-color);
-  }
-
-  .tab-group--bottom .tab-group__body {
-    order: 1;
-  }
-
-  .tab-group--bottom ::slotted(lynk-tab-panel) {
-    --padding: var(--lynk-spacing-medium) 0;
-  }
-
-  /*
-   * Start
-   */
-
-  .tab-group--start {
-    flex-direction: row;
-  }
-
-  .tab-group--start .tab-group__nav-container {
-    order: 1;
-  }
-
-  .tab-group--start .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-inline-end: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--start .tab-group__indicator {
-    right: calc(-1 * var(--track-width));
-    border-right: solid var(--track-width) var(--indicator-color);
-  }
-
-  .tab-group--start.tab-group--rtl .tab-group__indicator {
-    right: auto;
-    left: calc(-1 * var(--track-width));
-  }
-
-  .tab-group--start .tab-group__body {
-    flex: 1 1 auto;
-    order: 2;
-  }
-
-  .tab-group--start ::slotted(lynk-tab-panel) {
-    --padding: 0 var(--lynk-spacing-medium);
-  }
-
-  /*
-   * End
-   */
-
-  .tab-group--end {
-    flex-direction: row;
-  }
-
-  .tab-group--end .tab-group__nav-container {
-    order: 2;
-  }
-
-  .tab-group--end .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-left: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--end .tab-group__indicator {
-    left: calc(-1 * var(--track-width));
-    border-inline-start: solid var(--track-width) var(--indicator-color);
-  }
-
-  .tab-group--end.tab-group--rtl .tab-group__indicator {
-    right: calc(-1 * var(--track-width));
-    left: auto;
-  }
-
-  .tab-group--end .tab-group__body {
-    flex: 1 1 auto;
-    order: 1;
-  }
-
-  .tab-group--end ::slotted(lynk-tab-panel) {
-    --padding: 0 var(--lynk-spacing-medium);
-  }
-`;
-
-export {
-  tab_group_styles_default
-};

package/dist/chunks/chunk.EGKB5PCE.js

@@ -1,11 +0,0 @@
-import {
-  LynkPageFooter
-} from "./chunk.BP5LCWBU.js";
-
-// src/components/page-footer/page-footer.ts
-var page_footer_default = LynkPageFooter;
-LynkPageFooter.define("lynk-page-footer");
-
-export {
-  page_footer_default
-};

package/dist/chunks/chunk.EHN4SSWW.js

@@ -1,25 +0,0 @@
-import {
-  LynkCopyButton
-} from "./chunk.NAZ57OHD.js";
-
-// src/react/copy-button/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-copy-button";
-LynkCopyButton.define("lynk-copy-button");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkCopyButton,
-  react: React,
-  events: {
-    EvCopy: "ev-copy",
-    EvError: "ev-error"
-  },
-  displayName: "LynkCopyButton"
-});
-var copy_button_default = reactWrapper;
-
-export {
-  copy_button_default
-};