@uplynk/lynk-design 1.14.0 → 1.15.0

package/dist/chunks/chunk.2L3DPKXS.js

@@ -0,0 +1,29 @@
+import {
+  LynkDialog
+} from "./chunk.ZFQPVTTY.js";
+
+// src/react/dialog/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-dialog";
+LynkDialog.define("lynk-dialog");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkDialog,
+  react: React,
+  events: {
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide",
+    EvInitialFocus: "ev-initial-focus",
+    EvRequestClose: "ev-request-close"
+  },
+  displayName: "LynkDialog"
+});
+var dialog_default = reactWrapper;
+
+export {
+  dialog_default
+};

package/dist/chunks/chunk.2LCOHYTW.js

@@ -0,0 +1,11 @@
+import {
+  LynkSplitterPane
+} from "./chunk.RSELO4JJ.js";
+
+// src/components/splitter-pane/splitter-pane.ts
+var splitter_pane_default = LynkSplitterPane;
+LynkSplitterPane.define("lynk-splitter-pane");
+
+export {
+  splitter_pane_default
+};

package/dist/chunks/chunk.2VH4ESFZ.js

@@ -0,0 +1,11 @@
+import {
+  LynkOption
+} from "./chunk.OVKFOVYH.js";
+
+// src/components/option/option.ts
+var option_default = LynkOption;
+LynkOption.define("lynk-option");
+
+export {
+  option_default
+};

package/dist/chunks/chunk.2XEPYO3S.js

@@ -0,0 +1,11 @@
+import {
+  LynkColorPicker
+} from "./chunk.YQSD2PEW.js";
+
+// src/components/color-picker/color-picker.ts
+var color_picker_default = LynkColorPicker;
+LynkColorPicker.define("lynk-color-picker");
+
+export {
+  color_picker_default
+};

package/dist/chunks/chunk.32OVXUBH.js

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

package/dist/chunks/chunk.37EJPMOB.js

@@ -0,0 +1,11 @@
+import {
+  LynkAnimation
+} from "./chunk.XVUEGTLL.js";
+
+// src/components/animation/animation.ts
+var animation_default = LynkAnimation;
+LynkAnimation.define("lynk-animation");
+
+export {
+  animation_default
+};

package/dist/chunks/chunk.3SVQ3GLX.js

@@ -0,0 +1,11 @@
+import {
+  LynkIntersectionObserver
+} from "./chunk.56DV562Y.js";
+
+// src/components/intersection-observer/intersection-observer.ts
+var intersection_observer_default = LynkIntersectionObserver;
+LynkIntersectionObserver.define("lynk-intersection-observer");
+
+export {
+  intersection_observer_default
+};

package/dist/chunks/chunk.45EC6RBU.js

@@ -0,0 +1,11 @@
+import {
+  LynkPageHeader
+} from "./chunk.SSIFJL4D.js";
+
+// src/components/page-header/page-header.ts
+var page_header_default = LynkPageHeader;
+LynkPageHeader.define("lynk-page-header");
+
+export {
+  page_header_default
+};

package/dist/chunks/chunk.4AJ7YQQB.js

@@ -0,0 +1,11 @@
+import {
+  LynkProgressRing
+} from "./chunk.OJI7IIBO.js";
+
+// src/components/progress-ring/progress-ring.ts
+var progress_ring_default = LynkProgressRing;
+LynkProgressRing.define("lynk-progress-ring");
+
+export {
+  progress_ring_default
+};

package/dist/chunks/chunk.4B25I5YM.js

@@ -0,0 +1,25 @@
+import {
+  LynkIntersectionObserver
+} from "./chunk.56DV562Y.js";
+
+// src/react/intersection-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-intersection-observer";
+LynkIntersectionObserver.define("lynk-intersection-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkIntersectionObserver,
+  react: React,
+  events: {
+    EvEnterView: "ev-enter-view",
+    EvExitView: "ev-exit-view"
+  },
+  displayName: "LynkIntersectionObserver"
+});
+var intersection_observer_default = reactWrapper;
+
+export {
+  intersection_observer_default
+};

package/dist/chunks/chunk.4DLZJBWP.js

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

package/dist/chunks/chunk.4HJITCHS.js

@@ -0,0 +1,11 @@
+import {
+  LynkDialog
+} from "./chunk.ZFQPVTTY.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = LynkDialog;
+LynkDialog.define("lynk-dialog");
+
+export {
+  dialog_default
+};

package/dist/chunks/chunk.4R7HPNRN.js

@@ -0,0 +1,359 @@
+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.VI3SMVJJ.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.4RUI7LUT.js

@@ -0,0 +1,11 @@
+import {
+  LynkProgressBar
+} from "./chunk.7LFOYRTA.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = LynkProgressBar;
+LynkProgressBar.define("lynk-progress-bar");
+
+export {
+  progress_bar_default
+};

package/dist/chunks/chunk.4VKOS3UW.js

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

package/dist/chunks/chunk.4VO3G44C.js

@@ -0,0 +1,26 @@
+import {
+  LynkAnimation
+} from "./chunk.XVUEGTLL.js";
+
+// src/react/animation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-animation";
+LynkAnimation.define("lynk-animation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkAnimation,
+  react: React,
+  events: {
+    EvCancel: "ev-cancel",
+    EvFinish: "ev-finish",
+    EvStart: "ev-start"
+  },
+  displayName: "LynkAnimation"
+});
+var animation_default = reactWrapper;
+
+export {
+  animation_default
+};

package/dist/chunks/chunk.4XGBB2DK.js

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

package/dist/chunks/chunk.535MNZFG.js

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