@uplynk/lynk-design 1.11.3 → 1.12.1

package/dist/chunks/chunk.XA3GL3FI.js

@@ -0,0 +1,11 @@
+import {
+  LynkFormatBytes
+} from "./chunk.S7NYVUAZ.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.XJ6F3CST.js

@@ -0,0 +1,11 @@
+import {
+  LynkCheckbox
+} from "./chunk.WDU2PEDE.js";
+
+// src/components/checkbox/checkbox.ts
+var checkbox_default = LynkCheckbox;
+LynkCheckbox.define("lynk-checkbox");
+
+export {
+  checkbox_default
+};

package/dist/chunks/chunk.XNRAGS3G.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.5RZMBXSH.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.XSGM7NPV.js

@@ -0,0 +1,295 @@
+import {
+  dialog_styles_default
+} from "./chunk.VNC52SII.js";
+import {
+  Modal
+} from "./chunk.BGJOZNKW.js";
+import {
+  lockBodyScrolling,
+  unlockBodyScrolling
+} from "./chunk.WSPFGNPB.js";
+import {
+  LynkIconButton
+} from "./chunk.UQRZURQB.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.5SGOC3ZM.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.5RZMBXSH.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/dialog/dialog.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from "lit/decorators.js";
+var LynkDialog = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.label = "";
+    this.noHeader = false;
+    this.size = "auto";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.modal = new Modal(this);
+  }
+  firstUpdated() {
+    this.dialog.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.modal.activate();
+      lockBodyScrolling(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.modal.deactivate();
+    unlockBodyScrolling(this);
+  }
+  requestClose(source) {
+    const requestClose = this.emit("ev-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (requestClose.defaultPrevented) {
+      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      animateTo(this.panel, animation.keyframes, animation.options);
+      return;
+    }
+    this.hide();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  handleDocumentKeyDown(event) {
+    if (event.key === "Escape" && this.modal.isActive() && this.open) {
+      event.stopPropagation();
+      this.requestClose("keyboard");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("ev-show");
+      this.addOpenListeners();
+      this.originalTrigger = document.activeElement;
+      this.modal.activate();
+      lockBodyScrolling(this);
+      const autoFocusTarget = this.querySelector("[autofocus]");
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute("autofocus");
+      }
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      this.dialog.hidden = false;
+      requestAnimationFrame(() => {
+        const initialFocus = this.emit("ev-initial-focus", { cancelable: true });
+        if (!initialFocus.defaultPrevented) {
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({ preventScroll: true });
+          } else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute("autofocus", "");
+        }
+      });
+      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+      ]);
+      this.emit("ev-after-show");
+    } else {
+      this.emit("ev-hide");
+      this.removeOpenListeners();
+      this.modal.deactivate();
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+          this.overlay.hidden = true;
+        }),
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+          this.panel.hidden = true;
+        })
+      ]);
+      this.dialog.hidden = true;
+      this.overlay.hidden = false;
+      this.panel.hidden = false;
+      unlockBodyScrolling(this);
+      const trigger = this.originalTrigger;
+      if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+        setTimeout(() => trigger.focus());
+      }
+      this.emit("ev-after-hide");
+    }
+  }
+  /** Shows the dialog. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "ev-after-show");
+  }
+  /** Hides the dialog */
+  async hide() {
+    var _a;
+    if (!this.open) {
+      return void 0;
+    }
+    const { activeElement } = document;
+    if (activeElement && this.contains(activeElement)) {
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
+    }
+    this.open = false;
+    return waitForEvent(this, "ev-after-hide");
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      dialog: true,
+      "dialog--open": this.open,
+      "dialog--fitted": this.size === "fitted",
+      "dialog--full": this.size === "full",
+      "dialog--has-footer": this.hasSlotController.test("footer")
+    })}
+      >
+        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
+
+        <div
+          part="panel"
+          class="dialog__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? "false" : "true"}
+          aria-label=${ifDefined(this.noHeader ? this.label : void 0)}
+          aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
+          tabindex="0"
+        >
+          ${!this.noHeader ? html`
+                <header part="header" class="dialog__header">
+                  <h2 part="title" class="dialog__title" id="title">
+                    <slot name="label">
+                      ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                    </slot>
+                  </h2>
+                  <div part="header-actions" class="dialog__header-actions">
+                    <slot name="header-actions"></slot>
+                    <lynk-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="dialog__close"
+                      name="x-lg"
+                      label=${this.localize.term("close")}
+                      library="system"
+                      @click="${() => this.requestClose("close-button")}"
+                    ></lynk-icon-button>
+                  </div>
+                </header>
+              ` : ""}
+          ${""}
+
+          <div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
+
+          <footer part="footer" class="dialog__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+  }
+};
+LynkDialog.styles = [component_styles_default, dialog_styles_default];
+LynkDialog.dependencies = {
+  "lynk-icon-button": LynkIconButton
+};
+__decorateClass([
+  query(".dialog")
+], LynkDialog.prototype, "dialog", 2);
+__decorateClass([
+  query(".dialog__panel")
+], LynkDialog.prototype, "panel", 2);
+__decorateClass([
+  query(".dialog__overlay")
+], LynkDialog.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDialog.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDialog.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "no-header", type: Boolean, reflect: true })
+], LynkDialog.prototype, "noHeader", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDialog.prototype, "size", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], LynkDialog.prototype, "handleOpenChange", 1);
+setDefaultAnimation("dialog.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+
+export {
+  LynkDialog
+};

package/dist/chunks/chunk.XSTN3B3O.js

@@ -0,0 +1,11 @@
+import {
+  LynkButtonGroup
+} from "./chunk.RWSXVGZH.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = LynkButtonGroup;
+LynkButtonGroup.define("lynk-button-group");
+
+export {
+  button_group_default
+};