@uplynk/lynk-design 1.17.1 → 1.18.0

package/dist/chunks/chunk.MOMAFJMB.js

@@ -0,0 +1,617 @@
+import {
+  time_picker_styles_default
+} from "./chunk.7KM355FV.js";
+import {
+  LynkDropdown
+} from "./chunk.2VEQIGIO.js";
+import {
+  LynkFormField
+} from "./chunk.OAZKEJDW.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  LynkClock
+} from "./chunk.JD3YLNYP.js";
+import {
+  FormControlController
+} from "./chunk.HGPZOHO6.js";
+import {
+  LynkIconButton
+} from "./chunk.MPNWXWG5.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.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/time-picker/time-picker.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+var LynkTimePicker = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "help-tip",
+      "label",
+      "label-end",
+      "help-text-end"
+    );
+    this.localize = new LocalizeController(this);
+    this.isOpen = false;
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.label = "";
+    this.placeholder = "";
+    this.helpText = "";
+    this.labelEnd = "";
+    this.helpTextEnd = "";
+    this.helpTip = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.optional = false;
+    this.dirty = false;
+    this.inline = false;
+    this.size = "medium";
+    this.seconds = false;
+    this.format = "locale";
+    this.minuteInterval = 1;
+    this.hoist = false;
+    this.clearable = false;
+    this.handleDocumentClick = (event) => {
+      if (!this.contains(event.target)) {
+        this.hide();
+      }
+    };
+    this.handleKeyDown = (event) => {
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === "Enter" && !event.isComposing && !hasModifier) {
+        if (this.isOpen && this.clock.value) {
+          event.preventDefault();
+          this.value = this.clock.value;
+          this.updateInputFromValue();
+          this.emit("ev-change");
+          this.hide();
+        } else if (!this.isOpen) {
+          setTimeout(() => {
+            if (!event.defaultPrevented) {
+              this.emit("ev-change");
+            }
+          });
+        }
+      }
+      if (event.key === "Escape" && this.isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+      }
+    };
+  }
+  /** Whether to use the 24-hour number inputs instead of native time input */
+  get use24HourInput() {
+    return this.format === "24h";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.use24HourInput) {
+      return this.hiddenInput.validity;
+    }
+    return this.timeInput.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.use24HourInput) {
+      return this.hiddenInput.validationMessage;
+    }
+    return this.timeInput.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+    this.updateInputFromValue();
+  }
+  handleTimeInput() {
+    this.value = this.timeInput.value;
+    this.updatePickerFromInput();
+    this.emit("ev-input");
+  }
+  handleTimeChange() {
+    this.value = this.timeInput.value;
+    this.updatePickerFromInput();
+    this.emit("ev-change");
+  }
+  /** Pad a number to 2 digits */
+  pad(n) {
+    return String(n).padStart(2, "0");
+  }
+  /** Build HH:mm or HH:mm:ss from the number inputs */
+  buildValueFrom24HourInputs() {
+    var _a, _b, _c;
+    const h = (_a = this.hourInput) == null ? void 0 : _a.value;
+    const m = (_b = this.minuteInput) == null ? void 0 : _b.value;
+    const s = (_c = this.secondInput) == null ? void 0 : _c.value;
+    if (h === "" || m === "") return "";
+    const hh = this.pad(parseInt(h));
+    const mm = this.pad(parseInt(m));
+    if (this.seconds) {
+      const ss = this.pad(s !== "" && s !== null && s !== void 0 ? parseInt(s) : 0);
+      return `${hh}:${mm}:${ss}`;
+    }
+    return `${hh}:${mm}`;
+  }
+  handle24HourInput() {
+    this.value = this.buildValueFrom24HourInputs();
+    this.updatePickerFromValue();
+    this.emit("ev-input");
+  }
+  handle24HourChange() {
+    this.value = this.buildValueFrom24HourInputs();
+    this.updatePickerFromValue();
+    this.emit("ev-change");
+  }
+  /** Handle arrow keys to increment/decrement values in 24h inputs */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  handle24HourKeyDown(event, _field) {
+    const target = event.target;
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const current = parseInt(target.value) || 0;
+      const max = parseInt(target.max);
+      const delta = event.key === "ArrowUp" ? 1 : -1;
+      let next = current + delta;
+      if (next < 0) next = max;
+      if (next > max) next = 0;
+      target.value = this.pad(next);
+      this.handle24HourInput();
+      target.select();
+    }
+  }
+  handleClockChange() {
+    if (this.clock.value) {
+      this.value = this.clock.value;
+      this.updateInputFromValue();
+      this.emit("ev-change");
+    }
+  }
+  handleClearClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.value !== "") {
+      this.value = "";
+      this.updateInputFromValue();
+      this.updatePickerFromValue();
+      this.emit("ev-clear");
+      this.emit("ev-input");
+      this.emit("ev-change");
+    }
+    void (this.use24HourInput ? this.hourInput : this.timeInput).focus();
+  }
+  handleTriggerClick(event) {
+    event.stopPropagation();
+    if (this.disabled || this.readonly) return;
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  updateInputFromValue() {
+    if (this.use24HourInput) {
+      if (!this.value) {
+        if (this.hourInput) this.hourInput.value = "";
+        if (this.minuteInput) this.minuteInput.value = "";
+        if (this.secondInput) this.secondInput.value = "";
+        return;
+      }
+      const parts = this.value.split(":");
+      if (this.hourInput) this.hourInput.value = parts[0] || "";
+      if (this.minuteInput) this.minuteInput.value = parts[1] || "";
+      if (this.secondInput && this.seconds) this.secondInput.value = parts[2] || "00";
+    } else {
+      if (this.timeInput) this.timeInput.value = this.value;
+    }
+  }
+  updatePickerFromValue() {
+    if (this.clock) this.clock.value = this.value;
+  }
+  updatePickerFromInput() {
+    var _a;
+    if (this.use24HourInput) {
+      if (this.clock) this.clock.value = this.buildValueFrom24HourInputs();
+    } else {
+      if (this.clock) this.clock.value = ((_a = this.timeInput) == null ? void 0 : _a.value) || "";
+    }
+  }
+  /** Shows the dropdown. */
+  show() {
+    if (this.isOpen || this.disabled || this.readonly) return;
+    this.isOpen = true;
+    this.updatePickerFromValue();
+    this.dropdown.show();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  /** Hides the dropdown. */
+  hide() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.dropdown.hide();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  /** Sets focus on the time input. */
+  focus(options) {
+    if (this.use24HourInput) {
+      this.hourInput.focus(options);
+    } else {
+      this.timeInput.focus(options);
+    }
+  }
+  /** Removes focus from the input. */
+  blur() {
+    if (this.use24HourInput) {
+      this.hourInput.blur();
+    } else {
+      this.timeInput.blur();
+    }
+  }
+  /** Checks for validity but does not show a validation message. */
+  checkValidity() {
+    if (this.use24HourInput) {
+      return this.hiddenInput.checkValidity();
+    }
+    return this.timeInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if invalid. */
+  reportValidity() {
+    if (this.use24HourInput) {
+      return this.hiddenInput.reportValidity();
+    }
+    return this.timeInput.reportValidity();
+  }
+  /** Sets a custom validation message. */
+  setCustomValidity(message) {
+    if (this.use24HourInput) {
+      this.hiddenInput.setCustomValidity(message);
+    } else {
+      this.timeInput.setCustomValidity(message);
+    }
+    this.formControlController.updateValidity();
+  }
+  handleValueChange() {
+    this.updateInputFromValue();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled ? true : this.checkValidity());
+  }
+  render() {
+    const hasValue = this.value !== "";
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .label=${this.hasSlotController.test("label") ? "" : this.label}
+        .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+        .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+        .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+        .required=${this.required}
+        .optional=${this.optional}
+        .readonly=${this.readonly}
+        .dirty=${this.dirty}
+        .inline=${this.inline}
+        ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+        ?data-user-valid=${this.hasAttribute("data-user-valid")}
+        ?data-invalid=${this.hasAttribute("data-invalid")}
+        ?data-valid=${this.hasAttribute("data-valid")}
+      >
+        ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+        ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+        ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+        ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+        ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></slot>` : ""}
+        <lynk-dropdown
+          class="time-picker__dropdown"
+          part="dropdown"
+          ?disabled=${this.disabled || this.readonly}
+          .open=${this.isOpen}
+          .hoist=${this.hoist}
+          placement="bottom-start"
+          distance="2"
+        >
+          <div
+            slot="trigger"
+            part="input-group"
+            role="group"
+            class=${classMap({
+      "time-picker__input-group": true,
+      "time-picker__input-group--small": this.size === "small",
+      "time-picker__input-group--medium": this.size === "medium",
+      "time-picker__input-group--large": this.size === "large",
+      "time-picker__input-group--disabled": this.disabled,
+      "time-picker__input-group--readonly": this.readonly
+    })}
+          >
+            ${this.placeholder && !hasValue ? html`<div part="placeholder" class="time-picker__placeholder">${this.placeholder}</div>` : ""}
+            ${this.use24HourInput ? this.render24HourInputs(hasValue) : this.renderNativeTimeInput(hasValue)}
+            ${this.clearable && !this.disabled && !this.readonly && hasValue ? html`
+                    <button
+                      part="clear-button"
+                      class="time-picker__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry") || "Clear entry"}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                      </slot>
+                    </button>
+                  ` : ""}
+
+            <lynk-icon-button
+              part="trigger"
+              class="time-picker__trigger"
+              name="clock"
+              library="system"
+              label="Open clock"
+              ?disabled=${this.disabled}
+              @click=${this.handleTriggerClick}
+            ></lynk-icon-button>
+          </div>
+
+          <div class="time-picker__panel" id="clock-panel">
+            <lynk-clock
+              part="clock"
+              class="time-picker__clock"
+              .format=${this.format}
+              ?seconds=${this.seconds}
+              .minuteInterval=${this.minuteInterval}
+              @ev-change=${this.handleClockChange}
+            ></lynk-clock>
+          </div>
+        </lynk-dropdown>
+      </lynk-form-field>
+    `;
+  }
+  renderNativeTimeInput(hasValue) {
+    return html`
+      <input
+        part="time-input"
+        class="time-picker__time-input"
+        type="time"
+        role="combobox"
+        step=${this.seconds ? "1" : "any"}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        ?hidden=${this.placeholder && !hasValue}
+        .value=${live(this.value)}
+        aria-label=${this.label || "Time"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-haspopup="dialog"
+        aria-expanded=${this.isOpen ? "true" : "false"}
+        @input=${this.handleTimeInput}
+        @change=${this.handleTimeChange}
+      />
+    `;
+  }
+  render24HourInputs(hasValue) {
+    var _a, _b, _c;
+    const parts = this.value ? this.value.split(":") : [];
+    const hours = (_a = parts[0]) != null ? _a : "";
+    const minutes = (_b = parts[1]) != null ? _b : "";
+    const secs = (_c = parts[2]) != null ? _c : "";
+    return html`
+      <!-- Hidden input for form participation and validation -->
+      <input
+        class="time-picker__hidden-input"
+        type="hidden"
+        .value=${this.value}
+        ?required=${this.required}
+        aria-hidden="true"
+        tabindex="-1"
+      />
+      <div
+        part="time-input"
+        class=${classMap({
+      "time-picker__24h-group": true,
+      "time-picker__24h-group--hidden": !!(this.placeholder && !hasValue)
+    })}
+        role="combobox"
+        aria-label=${this.label || "Time"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-haspopup="dialog"
+        aria-expanded=${this.isOpen ? "true" : "false"}
+      >
+        <input
+          class="time-picker__hour-input time-picker__segment-input"
+          part="hour-input"
+          type="number"
+          min="0"
+          max="23"
+          placeholder="--"
+          .value=${hours}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          aria-label="Hours"
+          @input=${this.handle24HourInput}
+          @change=${this.handle24HourChange}
+          @keydown=${(e) => this.handle24HourKeyDown(e, "hour")}
+          @focus=${(e) => e.target.select()}
+        /><span class="time-picker__separator" aria-hidden="true">:</span
+        ><input
+          class="time-picker__minute-input time-picker__segment-input"
+          part="minute-input"
+          type="number"
+          min="0"
+          max="59"
+          step=${ifDefined(this.minuteInterval > 1 ? this.minuteInterval : void 0)}
+          placeholder="--"
+          .value=${minutes}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          aria-label="Minutes"
+          @input=${this.handle24HourInput}
+          @change=${this.handle24HourChange}
+          @keydown=${(e) => this.handle24HourKeyDown(e, "minute")}
+          @focus=${(e) => e.target.select()}
+        />${this.seconds ? html`<span class="time-picker__separator" aria-hidden="true">:</span
+                ><input
+                  class="time-picker__second-input time-picker__segment-input"
+                  part="second-input"
+                  type="number"
+                  min="0"
+                  max="59"
+                  placeholder="--"
+                  .value=${secs}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  aria-label="Seconds"
+                  @input=${this.handle24HourInput}
+                  @change=${this.handle24HourChange}
+                  @keydown=${(e) => this.handle24HourKeyDown(e, "second")}
+                  @focus=${(e) => e.target.select()}
+                />` : nothing}
+      </div>
+    `;
+  }
+};
+LynkTimePicker.styles = [component_styles_default, time_picker_styles_default];
+LynkTimePicker.dependencies = {
+  "lynk-clock": LynkClock,
+  "lynk-dropdown": LynkDropdown,
+  "lynk-form-field": LynkFormField,
+  "lynk-icon": LynkIcon,
+  "lynk-icon-button": LynkIconButton
+};
+__decorateClass([
+  query(".time-picker__dropdown")
+], LynkTimePicker.prototype, "dropdown", 2);
+__decorateClass([
+  query(".time-picker__clock")
+], LynkTimePicker.prototype, "clock", 2);
+__decorateClass([
+  query(".time-picker__time-input")
+], LynkTimePicker.prototype, "timeInput", 2);
+__decorateClass([
+  query(".time-picker__hour-input")
+], LynkTimePicker.prototype, "hourInput", 2);
+__decorateClass([
+  query(".time-picker__minute-input")
+], LynkTimePicker.prototype, "minuteInput", 2);
+__decorateClass([
+  query(".time-picker__second-input")
+], LynkTimePicker.prototype, "secondInput", 2);
+__decorateClass([
+  query(".time-picker__hidden-input")
+], LynkTimePicker.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], LynkTimePicker.prototype, "isOpen", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "name", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], LynkTimePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "label", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkTimePicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "label-end" })
+], LynkTimePicker.prototype, "labelEnd", 2);
+__decorateClass([
+  property({ attribute: "help-text-end" })
+], LynkTimePicker.prototype, "helpTextEnd", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkTimePicker.prototype, "helpTip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "optional", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "dirty", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "inline", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkTimePicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTimePicker.prototype, "seconds", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number, attribute: "minute-interval" })
+], LynkTimePicker.prototype, "minuteInterval", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTimePicker.prototype, "hoist", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTimePicker.prototype, "clearable", 2);
+__decorateClass([
+  watch("value")
+], LynkTimePicker.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkTimePicker.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkTimePicker
+};

package/dist/chunks/chunk.MOW776UU.js

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