@cruglobal/cornerstone-components 0.1.2 → 0.1.3

package/dist/bundled/chunks/chunk.AV4XZ7TM.js

@@ -1,94 +0,0 @@
-/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.WH4RAXRT.js";
-
-// src/components/zoomable-frame/zoomable-frame.styles.ts
-var zoomable_frame_styles_default = i`
-  :host {
-    display: block;
-    position: relative;
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    overflow: hidden;
-    border-radius: var(--cs-border-radius-m);
-  }
-
-  #frame-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% / var(--zoom));
-    height: calc(100% / var(--zoom));
-    transform: scale(var(--zoom));
-    transform-origin: 0 0;
-  }
-
-  #iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-radius: inherit;
-    /* Prevent the iframe from being selected, e.g. by a double click. Doesn't affect selection withing the iframe. */
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  #controls {
-    display: flex;
-    position: absolute;
-    bottom: 0.5em;
-    align-items: center;
-    font-weight: var(--cs-font-weight-semibold);
-    padding: 0.25em 0.5em;
-    gap: 0.5em;
-    border-radius: var(--cs-border-radius-s);
-    background: #000b;
-    color: white;
-    font-size: min(12px, 0.75em);
-    user-select: none;
-    -webkit-user-select: none;
-
-    &:dir(ltr) {
-      right: 0.5em;
-    }
-
-    &:dir(rtl) {
-      left: 0.5em;
-    }
-
-    button {
-      display: flex;
-      align-items: center;
-      padding: 0.25em;
-      border: none;
-      background: none;
-      color: inherit;
-      cursor: pointer;
-
-      &:focus {
-        outline: none;
-      }
-
-      &:focus-visible {
-        outline: var(--cs-focus-ring);
-        outline-offset: var(--cs-focus-ring-offset);
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
-    }
-
-    span {
-      min-width: 4.5ch; /* extra space so numbers don't shift */
-      font-variant-numeric: tabular-nums;
-      text-align: center;
-    }
-  }
-`;
-
-export {
-  zoomable_frame_styles_default
-};

package/dist/bundled/chunks/chunk.BAHBZMF5.js

@@ -1,583 +0,0 @@
-/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsCompleteEvent
-} from "./chunk.IENW5FLI.js";
-import {
-  otp_input_styles_default
-} from "./chunk.N3M2UA2T.js";
-import {
-  scrollIntoView
-} from "./chunk.ANWBZNKT.js";
-import {
-  CsClearEvent
-} from "./chunk.HTOOG2FD.js";
-import {
-  submitForm,
-  submitOnEnter
-} from "./chunk.EMLJGP53.js";
-import {
-  form_control_styles_default
-} from "./chunk.GJCOW76P.js";
-import {
-  l
-} from "./chunk.37ON6BAT.js";
-import {
-  HasSlotController
-} from "./chunk.YU2E4JNS.js";
-import {
-  MirrorValidator
-} from "./chunk.QDRJMOWZ.js";
-import {
-  CornerstoneFormAssociatedElement
-} from "./chunk.OWQSTBI7.js";
-import {
-  size_styles_default
-} from "./chunk.F524OZ6M.js";
-import {
-  e as e2
-} from "./chunk.NZZROG3B.js";
-import {
-  customElement,
-  e,
-  n,
-  r
-} from "./chunk.LQ7XXMRT.js";
-import {
-  b
-} from "./chunk.QZ4WRTL6.js";
-import {
-  __decorateClass
-} from "./chunk.RMUSUQ7M.js";
-
-// src/components/otp-input/otp-input.ts
-var CsOtpInput = class extends CornerstoneFormAssociatedElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "label", "hint");
-    this._focused = false;
-    this._activeIndex = -1;
-    this._selectionAnchor = -1;
-    // The segment a pointerdown landed on, precomputed so handleFocus() can position the caret
-    // there on its very first render instead of defaulting to the end of the value and then
-    // jumping. `delegatesFocus` lets the browser move focus (and fire handleFocus) as part of the
-    // mousedown's default action, before our own click handler runs.
-    this._pendingClickIndex = null;
-    // Backing field — not a reactive @state; value setter triggers requestUpdate() manually
-    this._value = "";
-    this.defaultValue = this.getAttribute("value") ?? null;
-    this.length = 6;
-    this.appearance = "outlined";
-    this.type = "numeric";
-    this.mask = false;
-    this.case = "preserve";
-    this.size = "m";
-    this.label = "";
-    this.hint = "";
-    this.ssrLabel = false;
-    this.ssrHint = false;
-    this.format = "";
-    this.autocomplete = "one-time-code";
-    this.required = false;
-    this.readonly = false;
-    this.autosubmit = false;
-    this.autofocus = false;
-    this.withMask = false;
-    this.assumeInteractionOn = ["blur", "input"];
-    this._lastChangeValue = "";
-  }
-  static get validators() {
-    return [...super.validators, MirrorValidator()];
-  }
-  get validationTarget() {
-    return this.segmentsContainer;
-  }
-  get hasSelection() {
-    return this._selectionAnchor >= 0 && this._selectionAnchor !== this._activeIndex;
-  }
-  // Move the caret to `index` with no active selection.
-  setCaretIndex(index) {
-    this._activeIndex = index;
-    this._selectionAnchor = -1;
-  }
-  /** The current value of the OTP field, submitted as a name/value pair with form data. */
-  get value() {
-    return this._value;
-  }
-  set value(val) {
-    const next = this.filterAndTransform(val).slice(0, this.effectiveLength);
-    if (this._value === next) {
-      return;
-    }
-    const oldValue = this._value;
-    this._value = next;
-    this.setValue(next);
-    if (this.input) {
-      this.input.value = next;
-    }
-    if (this._focused) {
-      this.setCaretIndex(Math.min(next.length, this.effectiveLength - 1));
-    }
-    this.requestUpdate("value", oldValue);
-  }
-  /** Number of segments derived from `format` (count of `#`) or `length`. */
-  get effectiveLength() {
-    return this.format ? [...this.format].filter((c) => c === "#").length : this.length;
-  }
-  /** Parsed format array — each entry is a segment slot or a literal separator character. */
-  get parsedFormat() {
-    const src = this.format || "#".repeat(this.length);
-    return [...src].map((c) => ({ type: c === "#" ? "segment" : "separator", char: c }));
-  }
-  filterAndTransform(val) {
-    let s = val;
-    if (this.type === "numeric") {
-      s = s.replace(/\D/g, "");
-    } else if (this.type === "alpha") {
-      s = s.replace(/[^a-zA-Z]/g, "");
-    } else if (this.type === "alphanumeric") {
-      s = s.replace(/[^a-zA-Z0-9]/g, "");
-    }
-    if (this.case === "upper") {
-      s = s.toUpperCase();
-    } else if (this.case === "lower") {
-      s = s.toLowerCase();
-    }
-    return s;
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (!this.hasUpdated) {
-      const initial = this.filterAndTransform(this.defaultValue ?? "").slice(0, this.effectiveLength);
-      if (this._value !== initial) {
-        this._value = initial;
-        this.setValue(initial);
-        this._lastChangeValue = initial;
-      }
-    }
-    if (this.hasUpdated && (changedProperties.has("type") || changedProperties.has("case") || changedProperties.has("length") || changedProperties.has("format"))) {
-      const refiltered = this.filterAndTransform(this._value).slice(0, this.effectiveLength);
-      if (refiltered !== this._value) {
-        this._value = refiltered;
-        this.setValue(refiltered);
-        if (this.input) {
-          this.input.value = refiltered;
-        }
-      }
-    }
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    const v = this._value;
-    this.customStates.set("--blank", v.length === 0);
-    this.customStates.set("--filled", v.length === this.effectiveLength);
-    this.customStates.set("readonly", this.readonly);
-    if (changedProperties.has("value") || changedProperties.has("required") || changedProperties.has("length") || changedProperties.has("format")) {
-      this.updateValidity();
-    }
-    this.syncCursor();
-    const activeSegment = this.segmentsContainer?.querySelector(".segment--active, .segment--selected");
-    if (activeSegment && this.segmentsContainer) {
-      scrollIntoView(activeSegment, this.segmentsContainer, "horizontal", "auto");
-    }
-  }
-  // Position the hidden input cursor at _activeIndex. If the slot has a character,
-  // select it (so typing replaces it); otherwise place an empty cursor there.
-  syncCursor() {
-    if (!this._focused || !this.input || this._activeIndex < 0) {
-      return;
-    }
-    if (this.hasSelection) {
-      return;
-    }
-    const len = this._value.length;
-    const start = Math.min(this._activeIndex, len);
-    const end = this._activeIndex < len ? start + 1 : start;
-    this.input.setSelectionRange(start, end);
-  }
-  formResetCallback() {
-    super.formResetCallback();
-    const reset = this.filterAndTransform(this.defaultValue ?? "").slice(0, this.effectiveLength);
-    const oldValue = this._value;
-    this._value = reset;
-    this.setValue(reset);
-    this._lastChangeValue = reset;
-    if (this.input) {
-      this.input.value = reset;
-    }
-    this.requestUpdate("value", oldValue);
-  }
-  handleInput(event) {
-    if (this.readonly) {
-      return;
-    }
-    const input = event.target;
-    const rawValue = input.value;
-    const rawCursor = input.selectionStart ?? rawValue.length;
-    const filtered = this.filterAndTransform(rawValue).slice(0, this.effectiveLength);
-    let cursorAfterFilter = rawCursor;
-    if (rawValue !== filtered) {
-      input.value = filtered;
-      const rawPrefix = rawValue.slice(0, rawCursor);
-      cursorAfterFilter = Math.min(this.filterAndTransform(rawPrefix).length, this.effectiveLength);
-    }
-    this.setCaretIndex(Math.min(cursorAfterFilter, this.effectiveLength - 1));
-    const prevLength = this._value.length;
-    const oldValue = this._value;
-    this._value = filtered;
-    this.setValue(filtered);
-    this.maybeDispatchComplete(filtered.length === this.effectiveLength && prevLength < this.effectiveLength);
-    this.requestUpdate("value", oldValue);
-  }
-  // Dispatch cs-complete when the value just became fully filled, then submit the form if
-  // autosubmit is enabled and no listener canceled the event.
-  maybeDispatchComplete(justCompleted) {
-    if (!justCompleted) {
-      return;
-    }
-    const notCanceled = this.dispatchEvent(new CsCompleteEvent());
-    if (this.autosubmit && notCanceled) {
-      setTimeout(() => submitForm(this));
-    }
-  }
-  handleKeyDown(event) {
-    if (event.isComposing) {
-      return;
-    }
-    const max = this.effectiveLength;
-    if (event.key === "Enter") {
-      submitOnEnter(event, this);
-    } else if (this.readonly) {
-      if (event.key === "Backspace" || event.key === "Delete") {
-        event.preventDefault();
-      }
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault();
-      if (this.hasSelection) {
-        this.setCaretIndex(Math.min(Math.max(this._selectionAnchor, this._activeIndex), max - 1));
-      } else {
-        this._activeIndex = Math.min(this._activeIndex + 1, max - 1);
-      }
-    } else if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      if (this.hasSelection) {
-        this.setCaretIndex(Math.max(Math.min(this._selectionAnchor, this._activeIndex), 0));
-      } else {
-        this._activeIndex = Math.max(this._activeIndex - 1, 0);
-      }
-    } else if (event.key === "Backspace") {
-      event.preventDefault();
-      if (this.hasSelection) {
-        const start = Math.min(this._selectionAnchor, this._activeIndex);
-        const end = Math.max(this._selectionAnchor, this._activeIndex);
-        this.spliceValue(start, end);
-        this.setCaretIndex(Math.min(start, max - 1));
-      } else {
-        const idx = this._activeIndex;
-        if (idx < this._value.length) {
-          this.spliceValue(idx);
-        }
-        this.setCaretIndex(Math.max(idx - 1, 0));
-      }
-    } else if (event.key === "Delete") {
-      event.preventDefault();
-      if (this.hasSelection) {
-        const start = Math.min(this._selectionAnchor, this._activeIndex);
-        const end = Math.max(this._selectionAnchor, this._activeIndex);
-        this.spliceValue(start, end);
-        this.setCaretIndex(Math.min(start, max - 1));
-      } else {
-        const idx = this._activeIndex;
-        if (idx < this._value.length) {
-          this.spliceValue(idx);
-        }
-      }
-    }
-  }
-  // Remove the characters in [start, end) from _value and sync state.
-  spliceValue(start, end = start + 1) {
-    const next = this._value.slice(0, start) + this._value.slice(end);
-    const oldValue = this._value;
-    this._value = next;
-    this.setValue(next);
-    if (this.input) {
-      this.input.value = next;
-    }
-    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    this.requestUpdate("value", oldValue);
-  }
-  handlePaste(event) {
-    event.preventDefault();
-    if (this.readonly) {
-      return;
-    }
-    const text = event.clipboardData?.getData("text/plain") ?? "";
-    const filtered = this.filterAndTransform(text);
-    if (!filtered) {
-      return;
-    }
-    const idx = this._activeIndex;
-    const max = this.effectiveLength;
-    const slots = Array.from({ length: max }, (_, i) => this._value[i] ?? "");
-    for (let i = 0; i < filtered.length && idx + i < max; i++) {
-      slots[idx + i] = filtered[i];
-    }
-    let end = max - 1;
-    while (end >= 0 && !slots[end]) {
-      end--;
-    }
-    const next = end >= 0 ? slots.slice(0, end + 1).join("") : "";
-    const prevLength = this._value.length;
-    const oldValue = this._value;
-    this._value = next;
-    this.setValue(next);
-    if (this.input) {
-      this.input.value = next;
-    }
-    this.setCaretIndex(Math.min(idx + filtered.length, max - 1));
-    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    this.maybeDispatchComplete(next.length === max && prevLength < max);
-    this.requestUpdate("value", oldValue);
-  }
-  handleFocus() {
-    this._focused = true;
-    this.setCaretIndex(this._pendingClickIndex ?? Math.min(this._value.length, this.effectiveLength - 1));
-  }
-  // Mirror a native multi-character selection (e.g. Cmd/Ctrl+A) into component state so
-  // render() can highlight it and Backspace/Delete can clear the whole range.
-  handleSelect() {
-    if (!this.input) {
-      return;
-    }
-    const start = this.input.selectionStart ?? 0;
-    const end = this.input.selectionEnd ?? start;
-    if (end - start > 1) {
-      this._selectionAnchor = start;
-      this._activeIndex = end;
-    } else if (this._selectionAnchor !== -1) {
-      this._selectionAnchor = -1;
-    }
-  }
-  handleBlur() {
-    this._focused = false;
-    this.setCaretIndex(-1);
-    if (this._value !== this._lastChangeValue) {
-      this._lastChangeValue = this._value;
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-    }
-  }
-  // Index of the segment under `target`, clamped so clicking past the filled portion lands on
-  // the first empty slot rather than the segments array boundary. Null if the click missed every
-  // segment (e.g. it landed on the container's padding).
-  segmentIndexAt(target) {
-    const segment = target.closest('[part~="segment"]');
-    if (!segment || !this.shadowRoot) {
-      return null;
-    }
-    const segments = [...this.shadowRoot.querySelectorAll('[part~="segment"]')];
-    const index = segments.indexOf(segment);
-    return index >= 0 ? Math.min(index, this._value.length) : null;
-  }
-  handleSegmentsPointerDown(event) {
-    if (this.disabled) {
-      return;
-    }
-    this._pendingClickIndex = this.segmentIndexAt(event.target);
-  }
-  handleSegmentsClick(event) {
-    if (this.disabled) {
-      return;
-    }
-    this.input?.focus();
-    const index = this.segmentIndexAt(event.target);
-    if (index !== null) {
-      this.setCaretIndex(index);
-    }
-    this._pendingClickIndex = null;
-  }
-  /** Clears the current value and returns focus to the field. */
-  clear() {
-    this.value = "";
-    this.dispatchEvent(new CsClearEvent());
-    this.focus();
-  }
-  /** Focuses the field. */
-  focus(options) {
-    this.input?.focus(options);
-  }
-  /** Removes focus from the field. */
-  blur() {
-    this.input?.blur();
-  }
-  /** Selects all entered characters in the hidden input. */
-  select() {
-    this.input?.select();
-  }
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
-    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHint = this.hint ? true : !!hasHintSlot;
-    const chars = [...this._value];
-    const parts = this.parsedFormat;
-    const activeIndex = this._activeIndex;
-    const selected = this.hasSelection ? [Math.min(this._selectionAnchor, activeIndex), Math.max(this._selectionAnchor, activeIndex)] : null;
-    let segmentIndex = 0;
-    return b`
-      <label
-        id="label"
-        part="label"
-        class=${e2({ label: true, "has-label": hasLabel })}
-        for="hidden-input"
-        aria-hidden=${hasLabel ? "false" : "true"}
-      >
-        <slot name="label">${this.label}</slot>
-      </label>
-
-      <div
-        part="segments"
-        class="segments"
-        role="group"
-        aria-labelledby="label"
-        @pointerdown=${this.handleSegmentsPointerDown}
-        @click=${this.handleSegmentsClick}
-      >
-        ${parts.map((part) => {
-      if (part.type === "separator") {
-        return b`<span part="segment-literal" class="segment-literal" aria-hidden="true">${part.char}</span>`;
-      }
-      const i = segmentIndex++;
-      const char = chars[i] ?? "";
-      const filled = Boolean(char);
-      const isSelected = !this.readonly && selected !== null && i >= selected[0] && i < selected[1];
-      const isActive = !this.readonly && selected === null && i === activeIndex;
-      const masked = filled && this.mask;
-      return b`
-            <div
-              part="segment"
-              class=${e2({
-        segment: true,
-        "segment--active": isActive,
-        "segment--selected": isSelected,
-        "segment--filled": filled,
-        "segment--masked": masked,
-        "segment--mask-hint": !filled && this.withMask
-      })}
-              aria-hidden="true"
-            >
-              ${masked ? "" : char} ${isActive && !char ? b`<span class="caret"></span>` : ""}
-            </div>
-          `;
-    })}
-
-        <input
-          id="hidden-input"
-          class="hidden-input"
-          type="text"
-          .value=${l(this._value)}
-          minlength=${this.effectiveLength}
-          autocomplete=${this.autocomplete}
-          inputmode=${this.type === "numeric" ? "numeric" : "text"}
-          aria-describedby="hint"
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?autofocus=${this.autofocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleKeyDown}
-          @paste=${this.handlePaste}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @select=${this.handleSelect}
-        />
-      </div>
-
-      <slot
-        id="hint"
-        part="hint"
-        name="hint"
-        class=${e2({ hint: true, "has-slotted": hasHint })}
-        aria-hidden=${hasHint ? "false" : "true"}
-        >${this.hint}</slot
-      >
-    `;
-  }
-};
-CsOtpInput.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
-CsOtpInput.css = [size_styles_default, form_control_styles_default, otp_input_styles_default];
-__decorateClass([
-  e(".hidden-input")
-], CsOtpInput.prototype, "input", 2);
-__decorateClass([
-  e(".segments")
-], CsOtpInput.prototype, "segmentsContainer", 2);
-__decorateClass([
-  r()
-], CsOtpInput.prototype, "_focused", 2);
-__decorateClass([
-  r()
-], CsOtpInput.prototype, "_activeIndex", 2);
-__decorateClass([
-  r()
-], CsOtpInput.prototype, "_selectionAnchor", 2);
-__decorateClass([
-  n({ attribute: "value", reflect: true })
-], CsOtpInput.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Number, reflect: true })
-], CsOtpInput.prototype, "length", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsOtpInput.prototype, "appearance", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsOtpInput.prototype, "type", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsOtpInput.prototype, "mask", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsOtpInput.prototype, "case", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsOtpInput.prototype, "size", 2);
-__decorateClass([
-  n()
-], CsOtpInput.prototype, "label", 2);
-__decorateClass([
-  n()
-], CsOtpInput.prototype, "hint", 2);
-__decorateClass([
-  n({ attribute: "ssr-label", type: Boolean })
-], CsOtpInput.prototype, "ssrLabel", 2);
-__decorateClass([
-  n({ attribute: "ssr-hint", type: Boolean })
-], CsOtpInput.prototype, "ssrHint", 2);
-__decorateClass([
-  n()
-], CsOtpInput.prototype, "format", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsOtpInput.prototype, "autocomplete", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsOtpInput.prototype, "required", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsOtpInput.prototype, "readonly", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsOtpInput.prototype, "autosubmit", 2);
-__decorateClass([
-  n({ type: Boolean })
-], CsOtpInput.prototype, "autofocus", 2);
-__decorateClass([
-  n({ type: Boolean, attribute: "with-mask", reflect: true })
-], CsOtpInput.prototype, "withMask", 2);
-CsOtpInput = __decorateClass([
-  customElement("cs-otp-input")
-], CsOtpInput);
-CsOtpInput.disableWarning?.("change-in-update");
-
-export {
-  CsOtpInput
-};