@uplynk/lynk-design 1.11.1 → 1.11.3

package/dist/chunks/chunk.R7QYQYS7.js

@@ -1,24 +0,0 @@
-import {
-  LynkAvatar
-} from "./chunk.TFVON2TM.js";
-
-// src/react/avatar/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-avatar";
-LynkAvatar.define("lynk-avatar");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkAvatar,
-  react: React,
-  events: {
-    EvError: "ev-error"
-  },
-  displayName: "LynkAvatar"
-});
-var avatar_default = reactWrapper;
-
-export {
-  avatar_default
-};

package/dist/chunks/chunk.RAIJ564Y.js

@@ -1,153 +0,0 @@
-import {
-  menu_item_styles_default
-} from "./chunk.6WB5XZE3.js";
-import {
-  LynkIcon
-} from "./chunk.NZJCXYVS.js";
-import {
-  getTextContent
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.PGARQDQS.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/menu-item/menu-item.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var LynkMenuItem = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.type = "normal";
-    this.checked = false;
-    this.value = "";
-    this.disabled = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleHostClick = this.handleHostClick.bind(this);
-    this.addEventListener("click", this.handleHostClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleHostClick);
-  }
-  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);
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      "menu-item": true,
-      "menu-item--checked": this.checked,
-      "menu-item--disabled": this.disabled,
-      "menu-item--has-submenu": false
-      // reserved for future use
-    })}
-      >
-        <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 class="menu-item__chevron">
-          <lynk-icon name="chevron-right" library="system" aria-hidden="true"></lynk-icon>
-        </span>
-      </div>
-    `;
-  }
-};
-LynkMenuItem.styles = [component_styles_default, menu_item_styles_default];
-LynkMenuItem.dependencies = {
-  "lynk-icon": LynkIcon
-};
-__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, "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.RVEXBF5I.js

@@ -1,359 +0,0 @@
-import {
-  clock_styles_default
-} from "./chunk.AUYTU7YB.js";
-import {
-  Locale,
-  format,
-  isValid,
-  parse,
-  toSegment
-} from "./chunk.DTH4YNSE.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.PGARQDQS.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/clock/clock.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var LynkClock = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.timeSegment = null;
-    this.value = "";
-    this.disabled = false;
-    this.format = "locale";
-    this.seconds = false;
-    this.minuteInterval = 1;
-    this.size = "medium";
-  }
-  /** Whether to show AM/PM based on format property */
-  get showAmPm() {
-    if (this.format === "12h") return true;
-    if (this.format === "24h") return false;
-    return this.isLocale12Hour();
-  }
-  /** Get 12-hour format values */
-  get hour12() {
-    if (!this.timeSegment) return 12;
-    const hour = this.timeSegment.hours;
-    return hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-  }
-  /** Get AM/PM period */
-  get period() {
-    if (!this.timeSegment) return null;
-    return this.timeSegment.hours < 12 ? "AM" : "PM";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.parseValue();
-  }
-  isLocale12Hour() {
-    var _a;
-    try {
-      const locale = Locale.fromOptions({ hour: "numeric" });
-      return (_a = locale.options.hour12) != null ? _a : false;
-    } catch (e) {
-      const testDate = new Date(2e3, 0, 1, 13, 0, 0);
-      const timeString = testDate.toLocaleTimeString();
-      return timeString.includes("PM") || timeString.includes("AM");
-    }
-  }
-  parseValue() {
-    var _a;
-    if (!this.value) {
-      this.timeSegment = null;
-      return;
-    }
-    if (isValid(this.value)) {
-      this.timeSegment = toSegment(parse(this.value));
-    } else {
-      const match = this.value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?$/i);
-      if (match) {
-        let hour = parseInt(match[1]);
-        const minute = parseInt(match[2]);
-        const second = parseInt(match[3]) || 0;
-        const period = (_a = match[4]) == null ? void 0 : _a.toUpperCase();
-        if (period) {
-          if (period === "AM" && hour === 12) hour = 0;
-          else if (period === "PM" && hour !== 12) hour += 12;
-        }
-        this.timeSegment = { hours: hour, minutes: minute, seconds: second, milliseconds: 0 };
-      }
-    }
-  }
-  formatValue() {
-    if (!this.timeSegment) return "";
-    const formatType = this.seconds ? "HH:mm:ss" /* HHmmss */ : "HH:mm" /* HHmm */;
-    return format(this.timeSegment, formatType);
-  }
-  updateValue() {
-    if (!this.timeSegment) return;
-    this.value = this.formatValue();
-    this.emit("ev-change");
-  }
-  handleHourClick(hour) {
-    if (this.disabled) return;
-    const currentSegment = this.timeSegment || { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
-    if (this.showAmPm) {
-      const currentPeriod = this.period;
-      let hour24 = hour;
-      if (currentPeriod === "AM" && hour === 12) hour24 = 0;
-      else if (currentPeriod === "PM" && hour !== 12) hour24 = hour + 12;
-      this.timeSegment = __spreadProps(__spreadValues({}, currentSegment), { hours: hour24 });
-    } else {
-      this.timeSegment = __spreadProps(__spreadValues({}, currentSegment), { hours: hour });
-    }
-    this.updateValue();
-    this.scrollToSelected("hours");
-  }
-  handleMinuteClick(minute) {
-    if (this.disabled) return;
-    const currentSegment = this.timeSegment || { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
-    this.timeSegment = __spreadProps(__spreadValues({}, currentSegment), { minutes: minute });
-    this.updateValue();
-    this.scrollToSelected("minutes");
-  }
-  handleSecondClick(second) {
-    if (this.disabled) return;
-    const currentSegment = this.timeSegment || { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
-    this.timeSegment = __spreadProps(__spreadValues({}, currentSegment), { seconds: second });
-    this.updateValue();
-    this.scrollToSelected("seconds");
-  }
-  handlePeriodClick(period) {
-    if (this.disabled || !this.showAmPm) return;
-    const currentSegment = this.timeSegment || { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
-    const currentHour12 = this.timeSegment ? this.hour12 : 12;
-    let newHour24 = currentHour12;
-    if (period === "AM" && currentHour12 === 12) newHour24 = 0;
-    else if (period === "PM" && currentHour12 !== 12) newHour24 = currentHour12 + 12;
-    this.timeSegment = __spreadProps(__spreadValues({}, currentSegment), { hours: newHour24 });
-    this.updateValue();
-    this.scrollToSelected("ampm");
-  }
-  scrollToSelected(column, instant = false) {
-    requestAnimationFrame(() => {
-      var _a;
-      let selectedIndex;
-      let columnElement;
-      switch (column) {
-        case "hours":
-          if (!this.timeSegment) return;
-          selectedIndex = this.showAmPm ? this.hour12 === 12 ? 0 : this.hour12 : this.timeSegment.hours;
-          columnElement = this.hoursColumn;
-          break;
-        case "minutes":
-          if (!this.timeSegment) return;
-          selectedIndex = Math.floor(this.timeSegment.minutes / this.minuteInterval);
-          columnElement = this.minutesColumn;
-          break;
-        case "seconds":
-          if (!this.timeSegment) return;
-          selectedIndex = this.timeSegment.seconds;
-          columnElement = this.secondsColumn;
-          break;
-        case "ampm": {
-          if (!this.timeSegment) return;
-          selectedIndex = this.period === "PM" ? 1 : 0;
-          const ampmElement = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".clock__ampm-toggle");
-          if (!ampmElement) return;
-          columnElement = ampmElement;
-          break;
-        }
-      }
-      if (columnElement) {
-        const itemHeight = 38;
-        const scrollTop = selectedIndex * itemHeight;
-        columnElement.scrollTo({
-          top: scrollTop,
-          behavior: instant ? "auto" : "smooth"
-        });
-      }
-    });
-  }
-  firstUpdated() {
-    if (this.value) {
-      this.scrollAllToSelected(true);
-    }
-  }
-  scrollAllToSelected(instant = false) {
-    this.scrollToSelected("hours", instant);
-    this.scrollToSelected("minutes", instant);
-    if (this.seconds) {
-      this.scrollToSelected("seconds", instant);
-    }
-    if (this.showAmPm) {
-      this.scrollToSelected("ampm", instant);
-    }
-  }
-  /** Public method to scroll to the current selected time */
-  scrollToCurrentTime(instant = true) {
-    this.scrollAllToSelected(instant);
-  }
-  handleValueChange() {
-    this.parseValue();
-  }
-  render() {
-    const hours = this.showAmPm ? [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] : Array.from({ length: 24 }, (_, i) => i);
-    const minutes = Array.from({ length: Math.ceil(60 / this.minuteInterval) }, (_, i) => i * this.minuteInterval);
-    const seconds = Array.from({ length: 60 }, (_, i) => i);
-    const periods = ["AM", "PM"];
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      clock: true,
-      "clock--small": this.size === "small",
-      "clock--medium": this.size === "medium",
-      "clock--large": this.size === "large",
-      "clock--disabled": this.disabled
-    })}
-      >
-        <div part="picker" class="clock__picker">
-          <div part="column" class="clock__column">
-            <ol class="clock__hours" role="listbox" tabindex="0" aria-label="Hours">
-              ${hours.map(
-      (hour) => html`
-                  <li
-                    part="time-item ${this.timeSegment && (this.showAmPm ? this.hour12 === hour : this.timeSegment.hours === hour) ? "time-item--selected" : ""}"
-                    class=${classMap({
-        "clock__time-item": true,
-        "clock__time-item--selected": !!(this.timeSegment && (this.showAmPm ? this.hour12 === hour : this.timeSegment.hours === hour))
-      })}
-                    role="option"
-                    aria-selected=${this.timeSegment && (this.showAmPm ? this.hour12 === hour : this.timeSegment.hours === hour) ? "true" : "false"}
-                    @click=${() => this.handleHourClick(hour)}
-                  >
-                    ${this.showAmPm ? hour : hour.toString().padStart(2, "0")}
-                  </li>
-                `
-    )}
-            </ol>
-          </div>
-
-          <div part="column" class="clock__column">
-            <ol class="clock__minutes" role="listbox" tabindex="0" aria-label="Minutes">
-              ${minutes.map(
-      (minute) => {
-        var _a, _b, _c;
-        return html`
-                  <li
-                    part="time-item ${((_a = this.timeSegment) == null ? void 0 : _a.minutes) === minute ? "time-item--selected" : ""}"
-                    class=${classMap({
-          "clock__time-item": true,
-          "clock__time-item--selected": ((_b = this.timeSegment) == null ? void 0 : _b.minutes) === minute
-        })}
-                    role="option"
-                    aria-selected=${((_c = this.timeSegment) == null ? void 0 : _c.minutes) === minute ? "true" : "false"}
-                    @click=${() => this.handleMinuteClick(minute)}
-                  >
-                    ${minute.toString().padStart(2, "0")}
-                  </li>
-                `;
-      }
-    )}
-            </ol>
-          </div>
-
-          ${this.seconds ? html`
-                <div part="column" class="clock__column">
-                  <ol class="clock__seconds" role="listbox" tabindex="0" aria-label="Seconds">
-                    ${seconds.map(
-      (second) => {
-        var _a, _b, _c;
-        return html`
-                        <li
-                          part="time-item ${((_a = this.timeSegment) == null ? void 0 : _a.seconds) === second ? "time-item--selected" : ""}"
-                          class=${classMap({
-          "clock__time-item": true,
-          "clock__time-item--selected": ((_b = this.timeSegment) == null ? void 0 : _b.seconds) === second
-        })}
-                          role="option"
-                          aria-selected=${((_c = this.timeSegment) == null ? void 0 : _c.seconds) === second ? "true" : "false"}
-                          @click=${() => this.handleSecondClick(second)}
-                        >
-                          ${second.toString().padStart(2, "0")}
-                        </li>
-                      `;
-      }
-    )}
-                  </ol>
-                </div>
-              ` : ""}
-          ${this.showAmPm ? html`
-                <div part="column" class="clock__column clock__column--ampm">
-                  <ol part="ampm-toggle" class="clock__ampm-toggle" role="listbox" tabindex="0" aria-label="AM/PM">
-                    ${periods.map(
-      (period) => html`
-                        <li
-                          class=${classMap({
-        "clock__time-item": true,
-        "clock__time-item--selected": !!(this.timeSegment && this.period === period)
-      })}
-                          role="option"
-                          aria-selected=${this.timeSegment && this.period === period ? "true" : "false"}
-                          @click=${() => this.handlePeriodClick(period)}
-                          ?disabled=${this.disabled}
-                        >
-                          ${period}
-                        </li>
-                      `
-    )}
-                  </ol>
-                </div>
-              ` : ""}
-        </div>
-      </div>
-    `;
-  }
-};
-LynkClock.styles = [component_styles_default, clock_styles_default];
-__decorateClass([
-  state()
-], LynkClock.prototype, "timeSegment", 2);
-__decorateClass([
-  query(".clock__hours")
-], LynkClock.prototype, "hoursColumn", 2);
-__decorateClass([
-  query(".clock__minutes")
-], LynkClock.prototype, "minutesColumn", 2);
-__decorateClass([
-  query(".clock__seconds")
-], LynkClock.prototype, "secondsColumn", 2);
-__decorateClass([
-  property()
-], LynkClock.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkClock.prototype, "disabled", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkClock.prototype, "format", 2);
-__decorateClass([
-  property({ type: Boolean })
-], LynkClock.prototype, "seconds", 2);
-__decorateClass([
-  property({ type: Number, attribute: "minute-interval" })
-], LynkClock.prototype, "minuteInterval", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkClock.prototype, "size", 2);
-__decorateClass([
-  watch("value", { waitUntilFirstUpdate: true })
-], LynkClock.prototype, "handleValueChange", 1);
-
-export {
-  LynkClock
-};

package/dist/chunks/chunk.RXURWBOX.js

@@ -1,33 +0,0 @@
-import {
-  thead_styles_default
-} from "./chunk.CMD22WUW.js";
-import {
-  LynkElement
-} from "./chunk.PGARQDQS.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/thead/thead.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var LynkThead = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.sticky = false;
-  }
-  render() {
-    return html` <slot></slot> `;
-  }
-};
-LynkThead.styles = [component_styles_default, thead_styles_default];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkThead.prototype, "sticky", 2);
-
-export {
-  LynkThead
-};

package/dist/chunks/chunk.RZIZU7ZN.js

@@ -1,26 +0,0 @@
-import {
-  LynkIconButton
-} from "./chunk.MVASBQ3L.js";
-
-// src/react/icon-button/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-icon-button";
-LynkIconButton.define("lynk-icon-button");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkIconButton,
-  react: React,
-  events: {
-    EvBlur: "ev-blur",
-    EvClick: "ev-click",
-    EvFocus: "ev-focus"
-  },
-  displayName: "LynkIconButton"
-});
-var icon_button_default = reactWrapper;
-
-export {
-  icon_button_default
-};

package/dist/chunks/chunk.S2SBR3E4.js

@@ -1,11 +0,0 @@
-import {
-  LynkAutoGrid
-} from "./chunk.6AZS7HYP.js";
-
-// src/components/auto-grid/auto-grid.ts
-var auto_grid_default = LynkAutoGrid;
-LynkAutoGrid.define("lynk-auto-grid");
-
-export {
-  auto_grid_default
-};

package/dist/chunks/chunk.S63T3KQ4.js

@@ -1,24 +0,0 @@
-import {
-  LynkMenu
-} from "./chunk.R55AOM3Z.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.SFPNAQ5Y.js

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

package/dist/chunks/chunk.SIBTGDGA.js

@@ -1,24 +0,0 @@
-import {
-  LynkTree
-} from "./chunk.BJ6LWDME.js";
-
-// src/react/tree/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-tree";
-LynkTree.define("lynk-tree");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkTree,
-  react: React,
-  events: {
-    EvSelectionChange: "ev-selection-change"
-  },
-  displayName: "LynkTree"
-});
-var tree_default = reactWrapper;
-
-export {
-  tree_default
-};