@uplynk/lynk-design 1.15.0 → 1.16.0

package/dist/chunks/chunk.HG26XG5D.js

@@ -0,0 +1,11 @@
+import {
+  LynkDivider
+} from "./chunk.YZW5GJIE.js";
+
+// src/components/divider/divider.ts
+var divider_default = LynkDivider;
+LynkDivider.define("lynk-divider");
+
+export {
+  divider_default
+};

package/dist/chunks/chunk.HGI4UB7D.js

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

package/dist/chunks/chunk.HI3E6QAN.js

@@ -0,0 +1,11 @@
+import {
+  LynkAvatar
+} from "./chunk.SYFOSNKN.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = LynkAvatar;
+LynkAvatar.define("lynk-avatar");
+
+export {
+  avatar_default
+};

package/dist/chunks/chunk.HLX6IYVF.js

@@ -0,0 +1,11 @@
+import {
+  LynkMenu
+} from "./chunk.TV3JSSPR.js";
+
+// src/components/menu/menu.ts
+var menu_default = LynkMenu;
+LynkMenu.define("lynk-menu");
+
+export {
+  menu_default
+};

package/dist/chunks/chunk.HNCDY75Z.js

@@ -0,0 +1,26 @@
+import {
+  LynkAnimation
+} from "./chunk.ZYM3OWOM.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.HNPDEQIP.js

@@ -0,0 +1,87 @@
+import {
+  intersection_observer_styles_default
+} from "./chunk.UMHXN4BR.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.ZJ7UNN7B.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/intersection-observer/intersection-observer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkIntersectionObserver = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        console.log(entry);
+        if (entry.intersectionRatio > 0) {
+          this.emit("ev-enter-view", { detail: { entry } });
+        } else {
+          this.emit("ev-exit-view", { detail: { entry } });
+        }
+      });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.intersectionObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.intersectionObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.intersectionObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+LynkIntersectionObserver.styles = [component_styles_default, intersection_observer_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkIntersectionObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkIntersectionObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkIntersectionObserver
+};

package/dist/chunks/chunk.HO5L3AG2.js

@@ -0,0 +1,11 @@
+import {
+  LynkTimePicker
+} from "./chunk.YOSONO27.js";
+
+// src/components/time-picker/time-picker.ts
+var time_picker_default = LynkTimePicker;
+LynkTimePicker.define("lynk-time-picker");
+
+export {
+  time_picker_default
+};

package/dist/chunks/chunk.HQCAEKXK.js

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

package/dist/chunks/chunk.HV5RHBRE.js

@@ -0,0 +1,35 @@
+import {
+  LynkCombobox
+} from "./chunk.WEYQKWRC.js";
+
+// src/react/combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-combobox";
+LynkCombobox.define("lynk-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkCombobox,
+  react: React,
+  events: {
+    EvChange: "ev-change",
+    EvClear: "ev-clear",
+    EvInput: "ev-input",
+    EvFocus: "ev-focus",
+    EvBlur: "ev-blur",
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide",
+    EvInvalid: "ev-invalid",
+    EvError: "ev-error",
+    EvAddOption: "ev-add-option"
+  },
+  displayName: "LynkCombobox"
+});
+var combobox_default = reactWrapper;
+
+export {
+  combobox_default
+};

package/dist/chunks/chunk.HW7VUSYT.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.ZJ7UNN7B.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.HZGF3AFF.js

@@ -0,0 +1,24 @@
+import {
+  LynkTh
+} from "./chunk.PRZNH7CX.js";
+
+// src/react/th/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-th";
+LynkTh.define("lynk-th");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTh,
+  react: React,
+  events: {
+    EvTableSort: "ev-table-sort"
+  },
+  displayName: "LynkTh"
+});
+var th_default = reactWrapper;
+
+export {
+  th_default
+};

package/dist/chunks/chunk.I6SPFTSH.js

@@ -0,0 +1,11 @@
+import {
+  LynkTable
+} from "./chunk.OE6DOCFF.js";
+
+// src/components/table/table.ts
+var table_default = LynkTable;
+LynkTable.define("lynk-table");
+
+export {
+  table_default
+};