@uplynk/lynk-design 1.11.3 → 1.12.0

package/dist/chunks/chunk.JQQQPXVM.js

@@ -1,541 +0,0 @@
-import {
-  range_styles_default
-} from "./chunk.AFH3LVK3.js";
-import {
-  LynkFormField
-} from "./chunk.6JXU2MG7.js";
-import {
-  LynkTooltip
-} from "./chunk.OQMATRB5.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.DEGSHN2L.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/range/range.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import { property, query, state } from "lit/decorators.js";
-var LynkRange = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this);
-    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label", "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 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"
-    })}
-        >
-          <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"
-          />
-
-          <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>
-
-          ${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.JS2QPFB3.js

@@ -1,22 +0,0 @@
-import {
-  colgroup_styles_default
-} from "./chunk.GCILDLYX.js";
-import {
-  LynkElement
-} from "./chunk.DEGSHN2L.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-
-// src/components/colgroup/colgroup.component.ts
-import { html } from "lit";
-var LynkColGroup = class extends LynkElement {
-  render() {
-    return html` <slot part="base"></slot> `;
-  }
-};
-LynkColGroup.styles = [component_styles_default, colgroup_styles_default];
-
-export {
-  LynkColGroup
-};

package/dist/chunks/chunk.JSGZZ3KY.js

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

package/dist/chunks/chunk.JTB3E72C.js

@@ -1,85 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkElement
-} from "./chunk.DEGSHN2L.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/format-date/format-date.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var LynkFormatDate = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.date = /* @__PURE__ */ new Date();
-    this.hourFormat = "auto";
-  }
-  render() {
-    const date = new Date(this.date);
-    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
-    if (isNaN(date.getMilliseconds())) {
-      return void 0;
-    }
-    return html`
-      <time datetime=${date.toISOString()}>
-        ${this.localize.date(date, {
-      weekday: this.weekday,
-      era: this.era,
-      year: this.year,
-      month: this.month,
-      day: this.day,
-      hour: this.hour,
-      minute: this.minute,
-      second: this.second,
-      timeZoneName: this.timeZoneName,
-      timeZone: this.timeZone,
-      hour12
-    })}
-      </time>
-    `;
-  }
-};
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "date", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "weekday", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "era", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "year", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "month", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "day", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "hour", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "minute", 2);
-__decorateClass([
-  property()
-], LynkFormatDate.prototype, "second", 2);
-__decorateClass([
-  property({ attribute: "time-zone-name" })
-], LynkFormatDate.prototype, "timeZoneName", 2);
-__decorateClass([
-  property({ attribute: "time-zone" })
-], LynkFormatDate.prototype, "timeZone", 2);
-__decorateClass([
-  property({ attribute: "hour-format" })
-], LynkFormatDate.prototype, "hourFormat", 2);
-
-export {
-  LynkFormatDate
-};