@uplynk/lynk-design 1.14.0 → 1.16.0

package/dist/chunks/chunk.RNAPDPUY.js

@@ -0,0 +1,564 @@
+import {
+  range_styles_default
+} from "./chunk.SNQNUA5L.js";
+import {
+  LynkFormField
+} from "./chunk.L4OG25K6.js";
+import {
+  LynkTooltip
+} from "./chunk.2K4ABZ7A.js";
+import {
+  FormControlController
+} from "./chunk.HGPZOHO6.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.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/range/range.component.ts
+import { html } 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 LynkRange = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "help-tip",
+      "label",
+      "prefix",
+      "suffix",
+      "reference"
+    );
+    this.localize = new LocalizeController(this);
+    // Value when drag started
+    this.isDragging = false;
+    // Internal value during drag (bypasses reactive updates)
+    this.valueHasChanged = false;
+    this.hasFocus = false;
+    this.hasTooltip = false;
+    this.name = "";
+    this.label = "";
+    this.minValue = 0;
+    this.maxValue = 50;
+    this.defaultValue = this.getAttribute("value") === null ? this.minValue : Number(this.getAttribute("value"));
+    this._value = this.defaultValue;
+    this.range = false;
+    this.helpText = "";
+    this.helpTip = "";
+    this.size = "medium";
+    this.state = "default";
+    this.disabled = false;
+    this.readonly = false;
+    this.dirty = false;
+    this.orientation = "horizontal";
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.ticks = [];
+    this.withMarkers = false;
+    this.tooltip = "top";
+    this.tooltipFormatter = (value) => value.toString();
+    this.form = "";
+  }
+  /** The current value of the slider, submitted as a name/value pair with form data. */
+  get value() {
+    var _a;
+    if (this.valueHasChanged) {
+      return this._value;
+    }
+    return (_a = this._value) != null ? _a : this.defaultValue;
+  }
+  set value(val) {
+    const numVal = Number(val);
+    val = isNaN(numVal) ? this.minValue : numVal;
+    if (this._value === val) {
+      return;
+    }
+    this.valueHasChanged = true;
+    this._value = val;
+  }
+  /** Get if this is a range slider */
+  get isRange() {
+    return this.range;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.syncRange());
+    if (this.value < this.min) {
+      this.value = this.min;
+    }
+    if (this.value > this.max) {
+      this.value = this.max;
+    }
+    this.updateComplete.then(() => {
+      this.syncRange();
+      this.resizeObserver.observe(this.wrapper);
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.wrapper);
+  }
+  handleWrapperPointerDown(event) {
+    var _a, _b;
+    if (this.disabled || this.readonly || event.button !== 0) return;
+    event.preventDefault();
+    this.trackRect = this.wrapper.getBoundingClientRect();
+    this.valueOnDragStart = this.value;
+    this.internalValue = this.value;
+    this.isDragging = true;
+    this.hasTooltip = true;
+    (_a = this.tooltipElement) == null ? void 0 : _a.show();
+    (_b = this.thumb) == null ? void 0 : _b.focus();
+    this.setValueFromClientCoordinates(event.clientX, event.clientY);
+    const handleMove = (e) => {
+      this.setValueFromClientCoordinates(e.clientX, e.clientY);
+    };
+    const handleStop = () => {
+      var _a2;
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleStop);
+      this.isDragging = false;
+      if (this.internalValue !== this.value) {
+        this.value = this.internalValue;
+        if (this.input) {
+          this.input.value = this.internalValue.toString();
+        }
+        this.emit("ev-input");
+      }
+      this.hasTooltip = false;
+      (_a2 = this.tooltipElement) == null ? void 0 : _a2.hide();
+      if (this.value !== this.valueOnDragStart) {
+        this.emit("ev-change");
+      }
+    };
+    document.addEventListener("pointermove", handleMove, { passive: true });
+    document.addEventListener("pointerup", handleStop);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasTooltip = false;
+    this.emit("ev-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("ev-focus");
+  }
+  handleKeyDown(event) {
+    if (this.disabled) return;
+    const isVertical = this.orientation === "vertical";
+    const isRtl = this.localize.dir() === "rtl";
+    const step = this.step || 1;
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      if (event.key === "Home") {
+        this.value = this.min;
+      } else if (event.key === "End") {
+        this.value = this.max;
+      } else if (event.key === "ArrowLeft" && !isRtl && !isVertical || event.key === "ArrowRight" && isRtl && !isVertical || event.key === "ArrowDown" && isVertical) {
+        this.value = Math.max(this.min, this.value - step);
+      } else if (event.key === "ArrowRight" && !isRtl && !isVertical || event.key === "ArrowLeft" && isRtl && !isVertical || event.key === "ArrowUp" && isVertical) {
+        this.value = Math.min(this.max, this.value + step);
+      }
+      this.emit("ev-input");
+      this.emit("ev-change");
+    }
+  }
+  /** Clamps a value to min/max and rounds to the nearest step interval. */
+  clampAndRoundToStep(value) {
+    const stepPrecision = (String(this.step).split(".")[1] || "").replace(/0+$/g, "").length;
+    value = Math.round(value / this.step) * this.step;
+    value = Math.max(this.min, Math.min(this.max, value));
+    return parseFloat(value.toFixed(stepPrecision));
+  }
+  /** Converts client coordinates to a range value. During drag, updates DOM directly for performance. */
+  setValueFromClientCoordinates(clientX, clientY) {
+    var _a;
+    const isVertical = this.orientation === "vertical";
+    const isRtl = this.localize.dir() === "rtl";
+    const { top, bottom, left, right, height, width } = this.trackRect;
+    const pointerPosition = isVertical ? clientY : clientX;
+    const trackStart = isVertical ? top : left;
+    const trackEnd = isVertical ? bottom : right;
+    const trackSize = isVertical ? height : width;
+    const relativePosition = isVertical ? trackEnd - pointerPosition : isRtl ? trackEnd - pointerPosition : pointerPosition - trackStart;
+    const percentage = Math.max(0, Math.min(1, relativePosition / trackSize));
+    const newValue = this.clampAndRoundToStep(this.min + (this.max - this.min) * percentage);
+    if (this.internalValue !== newValue) {
+      this.internalValue = newValue;
+      if (this.isDragging) {
+        const range = this.max - this.min;
+        const percent = range > 0 ? Math.max(0, Math.min(1, (newValue - this.min) / range)) : 0;
+        this.wrapper.style.setProperty("--percent", `${percent * 100}%`);
+        (_a = this.thumb) == null ? void 0 : _a.setAttribute("aria-valuenow", newValue.toString());
+        if (this.tooltipElement) {
+          this.tooltipElement.content = typeof this.tooltipFormatter === "function" ? this.tooltipFormatter(newValue) : newValue.toString();
+        }
+      } else {
+        this.value = newValue;
+        this.emit("ev-input");
+      }
+    }
+  }
+  /** Handles clicking on a tick marker. */
+  handleTickClick(event, tick) {
+    if (this.disabled || this.readonly) return;
+    event.stopPropagation();
+    this.value = tick.value;
+    this.emit("ev-input");
+    this.emit("ev-change");
+  }
+  /** Updates the visual progress indicator. */
+  syncProgress(percent) {
+    var _a;
+    (_a = this.wrapper) == null ? void 0 : _a.style.setProperty("--percent", `${percent * 100}%`);
+  }
+  /** Converts a value to a percentage within the min/max range. */
+  valueToPercent(value) {
+    return (value - this.min) * 100 / (this.max - this.min);
+  }
+  handleValueChange() {
+    if (this.isDragging) return;
+    this.formControlController.updateValidity();
+    if (this.input) {
+      this.input.value = this.value.toString();
+    }
+    this.syncRange();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleRangePropertiesChange() {
+    this.syncRange();
+  }
+  syncRange() {
+    const range = this.max - this.min;
+    const percent = range > 0 ? Math.max(0, Math.min(1, (this.value - this.min) / range)) : 0;
+    this.syncProgress(percent);
+  }
+  /** Sets focus on the range. */
+  focus(options) {
+    var _a;
+    (_a = this.thumb) == null ? void 0 : _a.focus(options);
+  }
+  /** Removes focus from the range. */
+  blur() {
+    var _a;
+    (_a = this.thumb) == null ? void 0 : _a.blur();
+  }
+  /** Increments the value of the range by the value of the step attribute. */
+  stepUp() {
+    const step = this.step || 1;
+    this.value = Math.min(this.max, this.value + step);
+    this.emit("ev-input");
+    this.emit("ev-change");
+  }
+  /** Decrements the value of the range by the value of the step attribute. */
+  stepDown() {
+    const step = this.step || 1;
+    this.value = Math.max(this.min, this.value - step);
+    this.emit("ev-input");
+    this.emit("ev-change");
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasTicksSlot = this.hasSlotController.test("ticks");
+    const hasTicks = this.ticks.length ? true : !!hasTicksSlot;
+    const hasPrefix = this.hasSlotController.test("prefix");
+    const hasSuffix = this.hasSlotController.test("suffix");
+    const thumbTemplate = html`
+      <div
+        part="thumb"
+        class="range__thumb"
+        role="slider"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${this.label || "Range"}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-orientation=${this.orientation}
+        @keydown=${this.handleKeyDown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      ></div>
+    `;
+    const markers = [];
+    if (this.withMarkers && this.step > 0) {
+      const maxMarkers = 1e3;
+      const markerCount = Math.floor((this.max - this.min) / this.step) + 1;
+      if (markerCount <= maxMarkers) {
+        for (let i = this.min; i <= this.max; i += this.step) {
+          markers.push(this.valueToPercent(i));
+        }
+      }
+    }
+    const markersTemplate = this.withMarkers ? html`
+          <div class="range__markers" part="markers">
+            ${markers.map(
+      (marker) => html`<span part="marker" class="range__marker" style="--position: ${marker}%"></span>`
+    )}
+          </div>
+        ` : "";
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .state=${this.state}
+        .label=${this.hasSlotController.test("label") ? "" : this.label}
+        .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+        .focused=${this.hasFocus}
+        ?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>` : ""}
+
+        <div
+          part="base"
+          class=${classMap({
+      range: true,
+      "range--disabled": this.disabled,
+      "range--readonly": this.readonly,
+      "range--focused": this.hasFocus,
+      "range--vertical": this.orientation === "vertical",
+      "range--rtl": this.localize.dir() === "rtl",
+      "range--tooltip-visible": this.hasTooltip,
+      "range--tooltip-top": this.tooltip === "top",
+      "range--tooltip-bottom": this.tooltip === "bottom",
+      "range--has-prefix": hasPrefix,
+      "range--has-suffix": hasSuffix
+    })}
+        >
+          <input
+            type="range"
+            class="range__native-input"
+            name=${ifDefined(this.name)}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            ?disabled=${this.disabled}
+            .value=${live(this.value.toString())}
+            tabindex="-1"
+            aria-hidden="true"
+          />
+
+          ${hasPrefix ? html`
+                <span part="prefix" class="range__prefix">
+                  <slot name="prefix"></slot>
+                </span>
+              ` : ""}
+
+          <div part="wrapper" class="range__wrapper" @pointerdown=${this.handleWrapperPointerDown}>
+            <div part="track" class="range__track">
+              <div part="track-active" class="range__track-active"></div>
+              ${markersTemplate}
+            </div>
+            ${this.tooltip !== "none" && !this.disabled ? html`
+                  <lynk-tooltip
+                    .content=${typeof this.tooltipFormatter === "function" ? this.tooltipFormatter(this.value) : this.value.toString()}
+                    .placement=${this.orientation === "vertical" ? this.tooltip === "top" ? "right" : "left" : this.tooltip}
+                    .distance=${8}
+                    trigger="manual"
+                    ?open=${this.hasTooltip}
+                    hoist
+                  >
+                    ${thumbTemplate}
+                  </lynk-tooltip>
+                ` : html` ${thumbTemplate} `}
+          </div>
+
+          ${hasSuffix ? html`
+                <span part="suffix" class="range__suffix">
+                  <slot name="suffix"></slot>
+                </span>
+              ` : ""}
+          ${hasTicks ? html`
+                <div part="ticks" class="range__ticks" aria-hidden=${this.ticks.length ? "false" : "true"}>
+                  <slot name="ticks">
+                    ${this.ticks.length ? html`
+                          ${this.ticks.filter((tick) => tick.value >= this.min && tick.value <= this.max).map((tick) => {
+      const percent = this.valueToPercent(tick.value);
+      const isSelected = tick.selected && typeof tick.selected === "boolean" ? tick.selected : false;
+      return html`
+                                <div
+                                  class=${classMap({
+        range__tick: true,
+        "range__tick--selected": isSelected
+      })}
+                                  style="--offset: ${percent}%"
+                                  @click=${(event) => this.handleTickClick(event, tick)}
+                                >
+                                  ${tick.label ? html` <span class="range__tick-label"> ${tick.label} </span> ` : ""}
+                                </div>
+                              `;
+    })}
+                        ` : ""}
+                  </slot>
+                </div>
+              ` : ""}
+          ${this.hasSlotController.test("reference") ? html`
+                <div part="references" class="range__references">
+                  <slot name="reference"></slot>
+                </div>
+              ` : ""}
+        </div>
+      </lynk-form-field>
+    `;
+  }
+};
+LynkRange.styles = [component_styles_default, range_styles_default];
+LynkRange.dependencies = {
+  "lynk-form-field": LynkFormField,
+  "lynk-tooltip": LynkTooltip
+};
+__decorateClass([
+  query(".range__wrapper")
+], LynkRange.prototype, "wrapper", 2);
+__decorateClass([
+  query(".range__thumb")
+], LynkRange.prototype, "thumb", 2);
+__decorateClass([
+  query("lynk-tooltip")
+], LynkRange.prototype, "tooltipElement", 2);
+__decorateClass([
+  query(".range__native-input")
+], LynkRange.prototype, "input", 2);
+__decorateClass([
+  state()
+], LynkRange.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], LynkRange.prototype, "hasTooltip", 2);
+__decorateClass([
+  property()
+], LynkRange.prototype, "name", 2);
+__decorateClass([
+  property()
+], LynkRange.prototype, "label", 2);
+__decorateClass([
+  property({ type: Number, attribute: "min-value" })
+], LynkRange.prototype, "minValue", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-value" })
+], LynkRange.prototype, "maxValue", 2);
+__decorateClass([
+  property({ attribute: "value", reflect: true, type: Number })
+], LynkRange.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], LynkRange.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRange.prototype, "range", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkRange.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkRange.prototype, "helpTip", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRange.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRange.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRange.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRange.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRange.prototype, "dirty", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRange.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkRange.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkRange.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkRange.prototype, "step", 2);
+__decorateClass([
+  property({ type: Array })
+], LynkRange.prototype, "ticks", 2);
+__decorateClass([
+  property({ attribute: "with-markers", type: Boolean })
+], LynkRange.prototype, "withMarkers", 2);
+__decorateClass([
+  property()
+], LynkRange.prototype, "tooltip", 2);
+__decorateClass([
+  property({ attribute: false })
+], LynkRange.prototype, "tooltipFormatter", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRange.prototype, "form", 2);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], LynkRange.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkRange.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch(["min", "max", "step"], { waitUntilFirstUpdate: true })
+], LynkRange.prototype, "handleRangePropertiesChange", 1);
+__decorateClass([
+  watch("hasTooltip", { waitUntilFirstUpdate: true })
+], LynkRange.prototype, "syncRange", 1);
+
+export {
+  LynkRange
+};

package/dist/chunks/chunk.ROYTSEWL.js

@@ -0,0 +1,25 @@
+import {
+  LynkIcon
+} from "./chunk.52NC3EYH.js";
+
+// src/react/icon/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-icon";
+LynkIcon.define("lynk-icon");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkIcon,
+  react: React,
+  events: {
+    EvLoad: "ev-load",
+    EvError: "ev-error"
+  },
+  displayName: "LynkIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};