@uplynk/lynk-design 1.18.1 → 1.19.0

package/dist/chunks/chunk.VCG6Z3P5.js

@@ -0,0 +1,123 @@
+import {
+  truncate_default
+} from "./chunk.M37VZGTN.js";
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.NPKXQR25.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.QIMXY7MI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var LynkBreadcrumbItem = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "lynk-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (hasDropdown) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? html`
+                <a
+                  part="label"
+                  class="breadcrumb-item__label breadcrumb-item__label--link"
+                  href="${this.href}"
+                  target="${ifDefined(this.target ? this.target : void 0)}"
+                  rel=${ifDefined(this.target ? this.rel : void 0)}
+                >
+                  <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+                </a>
+              ` : ""}
+        ${this.renderType === "button" ? html`
+                <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                  <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+                </button>
+              ` : ""}
+        ${this.renderType === "dropdown" ? html`
+                <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                  <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+                </div>
+              ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+LynkBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+LynkBreadcrumbItem.dependencies = { "lynk-truncate": truncate_default };
+__decorateClass([
+  query("slot:not([name])")
+], LynkBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], LynkBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  property()
+], LynkBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], LynkBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], LynkBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], LynkBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  LynkBreadcrumbItem
+};

package/dist/chunks/chunk.VDAWB3PY.js

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

package/dist/chunks/chunk.VDIYZ7NE.js

@@ -0,0 +1,11 @@
+import {
+  LynkTooltip
+} from "./chunk.Q7FHJBEP.js";
+
+// src/components/tooltip/tooltip.ts
+var tooltip_default = LynkTooltip;
+LynkTooltip.define("lynk-tooltip");
+
+export {
+  tooltip_default
+};

package/dist/chunks/chunk.VGNUPW26.js

@@ -0,0 +1,11 @@
+import {
+  LynkDrawer
+} from "./chunk.6QGMWQQM.js";
+
+// src/components/drawer/drawer.ts
+var drawer_default = LynkDrawer;
+LynkDrawer.define("lynk-drawer");
+
+export {
+  drawer_default
+};

package/dist/chunks/chunk.VKX5WTKA.js

@@ -0,0 +1,192 @@
+import {
+  menu_item_styles_default
+} from "./chunk.ZPCJZG6Z.js";
+import {
+  SubmenuController
+} from "./chunk.MTC64OBR.js";
+import {
+  LynkPopup
+} from "./chunk.LVC7D3AP.js";
+import {
+  LynkSpinner
+} from "./chunk.W4N2RSDB.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkIcon
+} from "./chunk.6IL753TX.js";
+import {
+  HasSlotController,
+  getTextContent
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.QIMXY7MI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/menu-item/menu-item.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var LynkMenuItem = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.type = "normal";
+    this.checked = false;
+    this.value = "";
+    this.loading = false;
+    this.disabled = false;
+    this.hasSlotController = new HasSlotController(this, "submenu");
+    this.submenuController = new SubmenuController(this, this.hasSlotController);
+    this.handleMouseOver = (event) => {
+      this.focus();
+      event.stopPropagation();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleHostClick);
+    this.addEventListener("mouseover", this.handleMouseOver);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+    this.removeEventListener("mouseover", this.handleMouseOver);
+  }
+  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 });
+    }
+  }
+  handleHostClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+    this.emit("ev-click");
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+    if (this.type === "checkbox") {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-checked");
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    if (this.type === "checkbox") {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+      this.removeAttribute("aria-checked");
+    }
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  isSubmenu() {
+    return this.hasSlotController.test("submenu");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "menu-item": true,
+      "menu-item--rtl": isRtl,
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--loading": this.loading,
+      "menu-item--has-submenu": this.isSubmenu(),
+      "menu-item--submenu-expanded": isSubmenuExpanded
+    })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded ? true : false}"
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <lynk-icon name="check" library="system" aria-hidden="true"></lynk-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <lynk-icon name=${isRtl ? "chevron-left" : "chevron-right"} library="system" aria-hidden="true"></lynk-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading ? html` <lynk-spinner part="spinner" exportparts="base:spinner__base"></lynk-spinner> ` : ""}
+      </div>
+    `;
+  }
+};
+LynkMenuItem.styles = [component_styles_default, menu_item_styles_default];
+LynkMenuItem.dependencies = {
+  "lynk-icon": LynkIcon,
+  "lynk-popup": LynkPopup,
+  "lynk-spinner": LynkSpinner
+};
+__decorateClass([
+  query("slot:not([name])")
+], LynkMenuItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".menu-item")
+], LynkMenuItem.prototype, "menuItem", 2);
+__decorateClass([
+  property()
+], LynkMenuItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkMenuItem.prototype, "checked", 2);
+__decorateClass([
+  property()
+], LynkMenuItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkMenuItem.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], LynkMenuItem.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled")
+], LynkMenuItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("type")
+], LynkMenuItem.prototype, "handleTypeChange", 1);
+
+export {
+  LynkMenuItem
+};

package/dist/chunks/chunk.VLFEWLQP.js

@@ -0,0 +1,11 @@
+import {
+  LynkGrid
+} from "./chunk.3GRJC4JZ.js";
+
+// src/components/grid/grid.ts
+var grid_default = LynkGrid;
+LynkGrid.define("lynk-grid");
+
+export {
+  grid_default
+};

package/dist/chunks/chunk.VN3LD5BG.js

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

package/dist/chunks/chunk.VNLFGVLA.js

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

package/dist/chunks/chunk.VVFVCXTD.js

@@ -0,0 +1,27 @@
+import {
+  LynkNavItem
+} from "./chunk.KC37IYMS.js";
+
+// src/react/nav-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-nav-item";
+LynkNavItem.define("lynk-nav-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkNavItem,
+  react: React,
+  events: {
+    EvExpand: "ev-expand",
+    EvAfterExpand: "ev-after-expand",
+    EvCollapse: "ev-collapse",
+    EvAfterCollapse: "ev-after-collapse"
+  },
+  displayName: "LynkNavItem"
+});
+var nav_item_default = reactWrapper;
+
+export {
+  nav_item_default
+};

package/dist/chunks/chunk.VX5N526A.js

@@ -0,0 +1,11 @@
+import {
+  LynkRadioGroup
+} from "./chunk.R6RQMCYZ.js";
+
+// src/components/radio-group/radio-group.ts
+var radio_group_default = LynkRadioGroup;
+LynkRadioGroup.define("lynk-radio-group");
+
+export {
+  radio_group_default
+};

package/dist/chunks/chunk.W4N2RSDB.js

@@ -0,0 +1,34 @@
+import {
+  spinner_styles_default
+} from "./chunk.A7I3LAZL.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkElement
+} from "./chunk.QIMXY7MI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+
+// src/components/spinner/spinner.component.ts
+import { html } from "lit";
+var LynkSpinner = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+LynkSpinner.styles = [component_styles_default, spinner_styles_default];
+
+export {
+  LynkSpinner
+};

package/dist/chunks/chunk.W5NKZSJD.js

@@ -0,0 +1,11 @@
+import {
+  LynkTagInput
+} from "./chunk.ZAO4XDAN.js";
+
+// src/components/tag-input/tag-input.ts
+var tag_input_default = LynkTagInput;
+LynkTagInput.define("lynk-tag-input");
+
+export {
+  tag_input_default
+};

package/dist/chunks/chunk.W5ROBFDW.js

@@ -0,0 +1,11 @@
+import {
+  LynkSplit
+} from "./chunk.PIUVPNOR.js";
+
+// src/components/split/split.ts
+var split_default = LynkSplit;
+LynkSplit.define("lynk-split");
+
+export {
+  split_default
+};

package/dist/chunks/chunk.WFXQQCTM.js

@@ -0,0 +1,11 @@
+import {
+  LynkSplitPanel
+} from "./chunk.QJHHZ6GT.js";
+
+// src/components/split-panel/split-panel.ts
+var split_panel_default = LynkSplitPanel;
+LynkSplitPanel.define("lynk-split-panel");
+
+export {
+  split_panel_default
+};

package/dist/chunks/chunk.WGOPH6OC.js

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

package/dist/chunks/chunk.WGYG3OKM.js

@@ -0,0 +1,11 @@
+import {
+  LynkThead
+} from "./chunk.CKRKGLXT.js";
+
+// src/components/thead/thead.ts
+var thead_default = LynkThead;
+LynkThead.define("lynk-thead");
+
+export {
+  thead_default
+};

package/dist/chunks/chunk.WPPDXUBH.js

@@ -0,0 +1,11 @@
+import {
+  LynkButton
+} from "./chunk.Q27AGZOI.js";
+
+// src/components/button/button.ts
+var button_default = LynkButton;
+LynkButton.define("lynk-button");
+
+export {
+  button_default
+};