@uplynk/lynk-design 1.18.0 → 1.19.0

package/dist/chunks/chunk.MOMAFJMB.js

@@ -1,617 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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
-};