@uplynk/lynk-design 1.17.0 → 1.18.0

package/dist/chunks/chunk.FUQRWH4B.js

@@ -1,150 +0,0 @@
-import {
-  icon_button_styles_default
-} from "./chunk.AXZVM7JU.js";
-import {
-  LynkIcon
-} from "./chunk.MFQRG6PF.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  LynkElement
-} from "./chunk.V4JS4TJ7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/icon-button/icon-button.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 LynkIconButton = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasFocus = false;
-    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
-    this.color = "default";
-    this.label = "";
-    this.disabled = false;
-  }
-  /** Simulates a click on the icon button. */
-  click() {
-    this.button.click();
-  }
-  /** Sets focus on the icon button. */
-  focus(options) {
-    this.button.focus(options);
-  }
-  /** Removes focus from the icon button. */
-  blur() {
-    this.button.blur();
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("ev-blur");
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("ev-focus");
-  }
-  handleClick(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    this.emit("ev-click");
-  }
-  render() {
-    const isLink = this.href ? true : false;
-    const tag = isLink ? literal`a` : literal`button`;
-    return html`
-      <${tag}
-        part="base"
-        class=${classMap({
-      "icon-button": true,
-      "icon-button--default": this.color === "default",
-      "icon-button--primary": this.color === "primary",
-      "icon-button--success": this.color === "success",
-      "icon-button--neutral": this.color === "neutral",
-      "icon-button--warning": this.color === "warning",
-      "icon-button--danger": this.color === "danger",
-      "icon-button--disabled": !isLink && this.disabled,
-      "icon-button--focused": this.hasFocus,
-      "icon-button--has-prefix": this.hasSlotController.test("prefix"),
-      "icon-button--has-suffix": this.hasSlotController.test("suffix")
-    })}
-        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
-        type=${ifDefined(isLink ? void 0 : "button")}
-        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)}
-        role=${ifDefined(isLink ? void 0 : "button")}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        aria-label="${this.label}"
-        tabindex=${this.disabled ? "-1" : "0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @click=${this.handleClick}
-      >
-        <span part="prefix" class="icon-button__prefix">
-          <slot name="prefix"></slot>
-        </span>
-        <lynk-icon
-          class="icon-button__icon"
-          name=${ifDefined(this.name)}
-          library=${ifDefined(this.library)}
-          src=${ifDefined(this.src)}
-          aria-hidden="true"
-        ></lynk-icon>
-        <span part="suffix" class="icon-button__suffix">
-          <slot name="suffix"></slot>
-        </span>
-      </${tag}>
-    `;
-  }
-};
-LynkIconButton.styles = [component_styles_default, icon_button_styles_default];
-LynkIconButton.dependencies = { "lynk-icon": LynkIcon };
-__decorateClass([
-  query(".icon-button")
-], LynkIconButton.prototype, "button", 2);
-__decorateClass([
-  state()
-], LynkIconButton.prototype, "hasFocus", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkIconButton.prototype, "color", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "name", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "library", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "src", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "href", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "target", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "download", 2);
-__decorateClass([
-  property()
-], LynkIconButton.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkIconButton.prototype, "disabled", 2);
-
-export {
-  LynkIconButton
-};

package/dist/chunks/chunk.FUTZQTMY.js

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

package/dist/chunks/chunk.FV43TY2N.js

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

package/dist/chunks/chunk.FXDUDZXN.js

@@ -1,11 +0,0 @@
-import {
-  LynkFormatBytes
-} from "./chunk.3G66NIPY.js";
-
-// src/components/format-bytes/format-bytes.ts
-var format_bytes_default = LynkFormatBytes;
-LynkFormatBytes.define("lynk-format-bytes");
-
-export {
-  format_bytes_default
-};

package/dist/chunks/chunk.FYZI5XTU.js

@@ -1,11 +0,0 @@
-import {
-  LynkCard
-} from "./chunk.TDXWBFMZ.js";
-
-// src/components/card/card.ts
-var card_default = LynkCard;
-LynkCard.define("lynk-card");
-
-export {
-  card_default
-};

package/dist/chunks/chunk.G2IZ3WBW.js

@@ -1,90 +0,0 @@
-import {
-  avatar_styles_default
-} from "./chunk.EKS47S7Z.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.V4JS4TJ7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/avatar/avatar.component.ts
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-var LynkAvatar = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasError = false;
-    this.image = "";
-    this.label = "";
-    this.initials = "";
-    this.loading = "eager";
-    this.shape = "circle";
-  }
-  handleImageChange() {
-    this.hasError = false;
-  }
-  handleImageLoadError() {
-    this.hasError = true;
-    this.emit("ev-error");
-  }
-  render() {
-    const avatarWithImage = html`
-      <img
-        part="image"
-        class="image"
-        src="${this.image}"
-        loading="${this.loading}"
-        alt=${this.label}
-        @error="${this.handleImageLoadError}"
-      />
-    `;
-    let avatarWithoutImage = html``;
-    if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="initials" role="img" aria-label=${this.label}>
-        ${this.initials}
-      </div>`;
-    } else {
-      avatarWithoutImage = html`
-        <div part="icon" class="icon" role="img" aria-label=${this.label}>
-          <slot name="icon">
-            <lynk-icon name="person-fill" library="system"></lynk-icon>
-          </slot>
-        </div>
-      `;
-    }
-    return html` ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage} `;
-  }
-};
-LynkAvatar.styles = [component_styles_default, avatar_styles_default];
-__decorateClass([
-  state()
-], LynkAvatar.prototype, "hasError", 2);
-__decorateClass([
-  property()
-], LynkAvatar.prototype, "image", 2);
-__decorateClass([
-  property()
-], LynkAvatar.prototype, "label", 2);
-__decorateClass([
-  property()
-], LynkAvatar.prototype, "initials", 2);
-__decorateClass([
-  property()
-], LynkAvatar.prototype, "loading", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkAvatar.prototype, "shape", 2);
-__decorateClass([
-  watch("image")
-], LynkAvatar.prototype, "handleImageChange", 1);
-
-export {
-  LynkAvatar
-};

package/dist/chunks/chunk.GAX3QT7E.js

@@ -1,27 +0,0 @@
-import {
-  LynkPageSidebar
-} from "./chunk.2ZLM4OCJ.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.GGIDJ4KU.js

@@ -1,73 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkElement
-} from "./chunk.V4JS4TJ7.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/format-number/format-number.component.ts
-import { property } from "lit/decorators.js";
-var LynkFormatNumber = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.type = "decimal";
-    this.noGrouping = false;
-    this.currency = "USD";
-    this.currencyDisplay = "symbol";
-  }
-  render() {
-    if (isNaN(this.value)) {
-      return "";
-    }
-    return this.localize.number(this.value, {
-      style: this.type,
-      currency: this.currency,
-      currencyDisplay: this.currencyDisplay,
-      useGrouping: !this.noGrouping,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], LynkFormatNumber.prototype, "value", 2);
-__decorateClass([
-  property()
-], LynkFormatNumber.prototype, "type", 2);
-__decorateClass([
-  property({ attribute: "no-grouping", type: Boolean })
-], LynkFormatNumber.prototype, "noGrouping", 2);
-__decorateClass([
-  property()
-], LynkFormatNumber.prototype, "currency", 2);
-__decorateClass([
-  property({ attribute: "currency-display" })
-], LynkFormatNumber.prototype, "currencyDisplay", 2);
-__decorateClass([
-  property({ attribute: "minimum-integer-digits", type: Number })
-], LynkFormatNumber.prototype, "minimumIntegerDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-fraction-digits", type: Number })
-], LynkFormatNumber.prototype, "minimumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-fraction-digits", type: Number })
-], LynkFormatNumber.prototype, "maximumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-significant-digits", type: Number })
-], LynkFormatNumber.prototype, "minimumSignificantDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-significant-digits", type: Number })
-], LynkFormatNumber.prototype, "maximumSignificantDigits", 2);
-
-export {
-  LynkFormatNumber
-};

package/dist/chunks/chunk.GJQ3O7CN.js

@@ -1,24 +0,0 @@
-import {
-  LynkMenu
-} from "./chunk.TP7CUPFJ.js";
-
-// src/react/menu/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-menu";
-LynkMenu.define("lynk-menu");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkMenu,
-  react: React,
-  events: {
-    EvSelect: "ev-select"
-  },
-  displayName: "LynkMenu"
-});
-var menu_default = reactWrapper;
-
-export {
-  menu_default
-};

package/dist/chunks/chunk.GQEHHCEJ.js

@@ -1,91 +0,0 @@
-// src/components/option/option.styles.ts
-import { css } from "lit";
-var option_styles_default = css`
-  :host {
-    display: block;
-    user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  .option {
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-family: var(--lynk-font-sans);
-    font-size: var(--lynk-font-size-medium);
-    font-weight: var(--lynk-font-weight-normal);
-    line-height: var(--lynk-line-height-normal);
-    letter-spacing: var(--lynk-letter-spacing-normal);
-    color: var(--lynk-color-neutral-700);
-    padding: var(--lynk-spacing-x-small) var(--lynk-spacing-medium) var(--lynk-spacing-x-small)
-      var(--lynk-spacing-x-small);
-    transition: var(--lynk-transition-fast) fill;
-    cursor: pointer;
-  }
-
-  .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--lynk-color-neutral-100);
-    color: var(--lynk-color-neutral-1000);
-  }
-
-  .option--current,
-  .option--current.option--disabled {
-    background-color: var(--lynk-color-primary-600);
-    color: var(--lynk-color-neutral-0);
-    opacity: 1;
-  }
-
-  .option--disabled {
-    outline: none;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .option__label {
-    flex: 1 1 auto;
-    display: inline-block;
-    line-height: var(--lynk-line-height-dense);
-  }
-
-  .option .option__check {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-    padding-inline-end: var(--lynk-spacing-2x-small);
-  }
-
-  .option--selected .option__check {
-    visibility: visible;
-  }
-
-  .option__prefix,
-  .option__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .option__prefix::slotted(*) {
-    margin-inline-end: var(--lynk-spacing-x-small);
-  }
-
-  .option__suffix::slotted(*) {
-    margin-inline-start: var(--lynk-spacing-x-small);
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .option {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-`;
-
-export {
-  option_styles_default
-};

package/dist/chunks/chunk.GTEVO72P.js

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

package/dist/chunks/chunk.GUCPUI2I.js

@@ -1,11 +0,0 @@
-import {
-  LynkAccordion
-} from "./chunk.YK6PRNN2.js";
-
-// src/components/accordion/accordion.ts
-var accordion_default = LynkAccordion;
-LynkAccordion.define("lynk-accordion");
-
-export {
-  accordion_default
-};

package/dist/chunks/chunk.GUR6BLJT.js

@@ -1,11 +0,0 @@
-import {
-  LynkIcon
-} from "./chunk.MFQRG6PF.js";
-
-// src/components/icon/icon.ts
-var icon_default = LynkIcon;
-LynkIcon.define("lynk-icon");
-
-export {
-  icon_default
-};

package/dist/chunks/chunk.GVHLQAIX.js

@@ -1,11 +0,0 @@
-import {
-  LynkTh
-} from "./chunk.ES7CGORB.js";
-
-// src/components/th/th.ts
-var th_default = LynkTh;
-LynkTh.define("lynk-th");
-
-export {
-  th_default
-};

package/dist/chunks/chunk.H65SMQ5H.js

@@ -1,75 +0,0 @@
-import {
-  progress_ring_styles_default
-} from "./chunk.R4KCD3UH.js";
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkElement
-} from "./chunk.V4JS4TJ7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/progress-ring/progress-ring.component.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var LynkProgressRing = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.label = "";
-  }
-  updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("value")) {
-      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
-      const circumference = 2 * Math.PI * radius;
-      const offset = circumference - this.value / 100 * circumference;
-      this.indicatorOffset = `${offset}px`;
-    }
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class="progress-ring"
-        role="progressbar"
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
-        aria-describedby="label"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow="${this.value}"
-        style="--percentage: ${this.value / 100}"
-      >
-        <svg class="progress-ring__image">
-          <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
-        </svg>
-
-        <slot id="label" part="label" class="progress-ring__label"></slot>
-      </div>
-    `;
-  }
-};
-LynkProgressRing.styles = [component_styles_default, progress_ring_styles_default];
-__decorateClass([
-  query(".progress-ring__indicator")
-], LynkProgressRing.prototype, "indicator", 2);
-__decorateClass([
-  state()
-], LynkProgressRing.prototype, "indicatorOffset", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LynkProgressRing.prototype, "value", 2);
-__decorateClass([
-  property()
-], LynkProgressRing.prototype, "label", 2);
-
-export {
-  LynkProgressRing
-};