@uplynk/lynk-design 1.18.0 → 1.18.1

package/dist/chunks/chunk.JD3YLNYP.js

@@ -1,359 +0,0 @@
-import {
-  clock_styles_default
-} from "./chunk.AUYTU7YB.js";
-import {
-  Locale,
-  format,
-  isValid,
-  parse,
-  toSegment2 as toSegment
-} from "./chunk.E4AXJBLQ.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/clock/clock.component.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.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.JFS6HGTG.js

@@ -1,11 +0,0 @@
-import {
-  LynkBox
-} from "./chunk.RSPKZZEP.js";
-
-// src/components/box/box.ts
-var box_default = LynkBox;
-LynkBox.define("lynk-box");
-
-export {
-  box_default
-};

package/dist/chunks/chunk.JGIJE7AV.js

@@ -1,24 +0,0 @@
-import {
-  LynkAvatar
-} from "./chunk.YV4EMZWS.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.JHZXKVRM.js

@@ -1,11 +0,0 @@
-import {
-  LynkBadge
-} from "./chunk.UUNJ4KZG.js";
-
-// src/components/badge/badge.ts
-var badge_default = LynkBadge;
-LynkBadge.define("lynk-badge");
-
-export {
-  badge_default
-};

package/dist/chunks/chunk.JIUXDAHQ.js

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

package/dist/chunks/chunk.JO6X7DVB.js

@@ -1,165 +0,0 @@
-import {
-  option_styles_default
-} from "./chunk.LRSWT5YG.js";
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkIcon
-} from "./chunk.6AB2BRLU.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/option/option.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var LynkOption = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    // @ts-expect-error - Controller is currently unused
-    this.localize = new LocalizeController(this);
-    this.isInitialized = false;
-    this.current = false;
-    this.selected = false;
-    this.hasHover = false;
-    this.value = "";
-    this.disabled = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "option");
-    this.setAttribute("aria-selected", "false");
-  }
-  handleDefaultSlotChange() {
-    if (this.isInitialized) {
-      customElements.whenDefined("lynk-combobox").then(() => {
-        const controller = this.closest("lynk-combobox");
-        if (controller) {
-          controller.handleDefaultSlotChange();
-        }
-      });
-      customElements.whenDefined("lynk-select").then(() => {
-        const controller = this.closest("lynk-select");
-        if (controller) {
-          controller.handleDefaultSlotChange();
-        }
-      });
-    } else {
-      this.isInitialized = true;
-    }
-  }
-  handleMouseEnter() {
-    this.hasHover = true;
-  }
-  handleMouseLeave() {
-    this.hasHover = false;
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleSelectedChange() {
-    this.setAttribute("aria-selected", this.selected ? "true" : "false");
-  }
-  handleValueChange() {
-    if (typeof this.value !== "string") {
-      this.value = String(this.value);
-    }
-    if (this.value.includes(" ")) {
-      const select = this.closest("lynk-select");
-      if (select == null ? void 0 : select.multiple) {
-        console.error(
-          `Option values cannot include a space when used in a multiple select. All spaces have been replaced with underscores.`,
-          this
-        );
-        this.value = this.value.replace(/ /g, "_");
-      }
-    }
-  }
-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    const nodes = this.childNodes;
-    let label = "";
-    [...nodes].forEach((node) => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        if (!node.hasAttribute("slot")) {
-          label += node.textContent;
-        }
-      }
-      if (node.nodeType === Node.TEXT_NODE) {
-        label += node.textContent;
-      }
-    });
-    return label.trim();
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      option: true,
-      "option--current": this.current,
-      "option--disabled": this.disabled,
-      "option--selected": this.selected,
-      "option--hover": this.hasHover
-    })}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        <lynk-icon
-          part="checked-icon"
-          class="option__check"
-          name="check"
-          library="system"
-          aria-hidden="true"
-        ></lynk-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
-      </div>
-    `;
-  }
-};
-LynkOption.styles = [component_styles_default, option_styles_default];
-LynkOption.dependencies = { "lynk-icon": LynkIcon };
-__decorateClass([
-  query(".option__label")
-], LynkOption.prototype, "defaultSlot", 2);
-__decorateClass([
-  state()
-], LynkOption.prototype, "current", 2);
-__decorateClass([
-  state()
-], LynkOption.prototype, "selected", 2);
-__decorateClass([
-  state()
-], LynkOption.prototype, "hasHover", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkOption.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkOption.prototype, "disabled", 2);
-__decorateClass([
-  watch("disabled")
-], LynkOption.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("selected")
-], LynkOption.prototype, "handleSelectedChange", 1);
-__decorateClass([
-  watch("value")
-], LynkOption.prototype, "handleValueChange", 1);
-
-export {
-  LynkOption
-};

package/dist/chunks/chunk.JOLJIRZH.js

@@ -1,50 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/format-bytes/format-bytes.component.ts
-import { property } from "lit/decorators.js";
-var LynkFormatBytes = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.unit = "byte";
-    this.display = "short";
-  }
-  render() {
-    if (isNaN(this.value)) {
-      return "";
-    }
-    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
-    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
-    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
-    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
-    const unit = prefix[index] + this.unit;
-    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
-    return this.localize.number(valueToFormat, {
-      style: "unit",
-      unit,
-      unitDisplay: this.display
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], LynkFormatBytes.prototype, "value", 2);
-__decorateClass([
-  property()
-], LynkFormatBytes.prototype, "unit", 2);
-__decorateClass([
-  property()
-], LynkFormatBytes.prototype, "display", 2);
-
-export {
-  LynkFormatBytes
-};

package/dist/chunks/chunk.JSOLZ7GC.js

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

package/dist/chunks/chunk.JUTBYKA3.js

@@ -1,24 +0,0 @@
-import {
-  LynkMutationObserver
-} from "./chunk.IIJUYW7P.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.JWYTGRDP.js

@@ -1,11 +0,0 @@
-import {
-  LynkNavGroup
-} from "./chunk.3ORTBADN.js";
-
-// src/components/nav-group/nav-group.ts
-var nav_group_default = LynkNavGroup;
-LynkNavGroup.define("lynk-nav-group");
-
-export {
-  nav_group_default
-};