@cruglobal/cornerstone-components 0.6.2 → 0.7.1

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

@@ -0,0 +1,508 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  localeFieldOrder
+} from "./chunk.FSH2WOUA.js";
+import {
+  PartialDateValidator
+} from "./chunk.FFRO2Q53.js";
+import {
+  EMPTY_PARTS,
+  isoToParts,
+  partsToIso
+} from "./chunk.IZVDHH6V.js";
+import {
+  known_date_styles_default
+} from "./chunk.VNM6SSFE.js";
+import {
+  RequiredValidator
+} from "./chunk.PYK3VMXX.js";
+import {
+  form_control_styles_default
+} from "./chunk.DS56Y5EI.js";
+import {
+  l
+} from "./chunk.74YVYWGK.js";
+import {
+  HasSlotController
+} from "./chunk.RM3ZGTE7.js";
+import {
+  uniqueId
+} from "./chunk.C2NBLHP2.js";
+import {
+  MirrorValidator
+} from "./chunk.QBEGBX4G.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.QEJT5FC2.js";
+import {
+  size_styles_default
+} from "./chunk.KSRDPL74.js";
+import {
+  o as o2
+} from "./chunk.WG6DIWSE.js";
+import {
+  e as e2
+} from "./chunk.37SDUJTL.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.7X4WUQGJ.js";
+import {
+  LocalizeController
+} from "./chunk.NVIHCRM4.js";
+import {
+  o
+} from "./chunk.T7OKDWRT.js";
+import {
+  b
+} from "./chunk.JMULJQL6.js";
+import {
+  __decorateClass
+} from "./chunk.RNZTKRV7.js";
+
+// src/components/known-date/known-date.ts
+var generateId = () => uniqueId("cs-known-date-");
+var CsKnownDate = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    // Moving focus between the three internal fields shouldn't count as "leaving the group," so we key
+    // interaction off `input` alone - matching `<cs-date-input>` and `<cs-time-input>`.
+    this.assumeInteractionOn = ["input"];
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "hint", "label");
+    this.groupId = generateId();
+    this.hintId = `${this.groupId}-hint`;
+    /** Debounces duplicate `change` events when the value hasn't transitioned. */
+    this.lastEmittedValue = "";
+    this.pendingValue = null;
+    this.parts = { ...EMPTY_PARTS };
+    this.name = "";
+    this._value = "";
+    this.defaultValue = this.getAttribute("value") ?? "";
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.size = "m";
+    this.appearance = "outlined";
+    this.pill = false;
+    this.label = "";
+    this.hint = "";
+    this.autocomplete = "";
+    this.min = "";
+    this.max = "";
+    this.locale = "";
+    this.ssrLabel = false;
+    this.ssrHint = false;
+    //
+    // Field handlers
+    //
+    this.handleFieldInput = (event) => {
+      if (this.readonly) {
+        return;
+      }
+      const target = event.currentTarget;
+      const field = target.dataset.field;
+      const max = field === "year" ? 4 : 2;
+      const sanitized = target.value.replace(/\D/g, "").slice(0, max);
+      if (sanitized !== target.value) {
+        target.value = sanitized;
+      }
+      this.parts = { ...this.parts, [field]: sanitized };
+      this.recomputeValue();
+      this.requestUpdate();
+    };
+  }
+  static get validators() {
+    return [
+      ...super.validators,
+      // Order matters: the first failing validator's message wins. `PartialDateValidator` comes first so a partial
+      // or out-of-range entry (day 32, Feb 30) reports "Enter a valid date" as `badInput`, rather than
+      // `RequiredValidator`'s "Please fill out this field" (the mirror is empty whenever the entry doesn't
+      // compose).
+      PartialDateValidator(),
+      RequiredValidator({
+        validationElement: () => Object.assign(document.createElement("input"), { required: true })
+      }),
+      // Mirrors the hidden native `<input type="date">` so its min/max constraints surface as
+      // rangeUnderflow/rangeOverflow validity.
+      MirrorValidator()
+    ];
+  }
+  /**
+   * The committed value as an ISO `YYYY-MM-DD` string. The setter also accepts a `Date` or `null`. Reading
+   * returns an empty string when the value is blank or any field is only partially filled.
+   */
+  get value() {
+    if (this.valueHasChanged) {
+      return this._value;
+    }
+    return this._value || this.defaultValue || "";
+  }
+  set value(val) {
+    const normalized = this.normalizeIncomingValue(val);
+    if (normalized === this._value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = normalized;
+    this.valueHasChanged = true;
+    if (this.hasUpdated) {
+      this.syncPartsFromCanonical();
+    } else {
+      this.pendingValue = this._value;
+    }
+    this.requestUpdate("value", oldValue);
+  }
+  //
+  // Lifecycle
+  //
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.pendingValue != null) {
+      this._value = this.pendingValue;
+      this.pendingValue = null;
+    } else if (!this._value && this.defaultValue) {
+      this._value = this.defaultValue;
+    }
+    this.syncPartsFromCanonical();
+    this.input = this.valueInput;
+    this.updateValidity();
+    this.lastEmittedValue = this._value;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this.customStates.set("blank", !this._value);
+    }
+  }
+  //
+  // Public API
+  //
+  /** Focuses the first empty field, or the first field when all are filled. */
+  focus(options) {
+    const target = this.firstFocusableInput();
+    target?.focus(options);
+  }
+  /** Removes focus from the known date. */
+  blur() {
+    const active = this.shadowRoot?.activeElement;
+    active?.blur();
+  }
+  /** The committed value as a `Date`, or `null` when the value is empty/invalid. */
+  get valueAsDate() {
+    if (!this._value) {
+      return null;
+    }
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(this._value);
+    if (!match) {
+      return null;
+    }
+    return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  }
+  /**
+   * Anchor native validation popups on a real visible input. The hidden mirror handles form data, but
+   * anchoring a popup on `display: none` content would render it at offset (0, 0).
+   */
+  get validationTarget() {
+    if (!this.shadowRoot) {
+      return void 0;
+    }
+    const inputs = Array.from(this.shadowRoot.querySelectorAll('input[part~="field-input"]'));
+    if (inputs.length === 0) {
+      return void 0;
+    }
+    const offending = this.firstInvalidField();
+    if (offending) {
+      const el = inputs.find((i) => i.dataset.field === offending);
+      if (el) {
+        return el;
+      }
+    }
+    return inputs[0];
+  }
+  //
+  // Form association
+  //
+  formResetCallback() {
+    this._value = this.defaultValue;
+    this.valueHasChanged = false;
+    this.syncPartsFromCanonical();
+    super.formResetCallback();
+    this.lastEmittedValue = this._value;
+    this.requestUpdate();
+  }
+  formStateRestoreCallback(state) {
+    if (typeof state === "string") {
+      this.value = state;
+    }
+    this.updateValidity();
+  }
+  //
+  // Internal helpers
+  //
+  get resolvedLocale() {
+    return this.locale || this.localize.lang() || "en";
+  }
+  fieldOrder() {
+    return localeFieldOrder(this.resolvedLocale);
+  }
+  normalizeIncomingValue(val) {
+    if (val == null) {
+      return "";
+    }
+    if (val instanceof Date) {
+      const y = String(val.getFullYear()).padStart(4, "0");
+      const m = String(val.getMonth() + 1).padStart(2, "0");
+      const d = String(val.getDate()).padStart(2, "0");
+      return `${y}-${m}-${d}`;
+    }
+    if (typeof val === "string") {
+      const parts = isoToParts(val);
+      return partsToIso(parts);
+    }
+    return "";
+  }
+  syncPartsFromCanonical() {
+    this.parts = isoToParts(this._value);
+    this.updateHiddenInput();
+  }
+  updateHiddenInput() {
+    if (this.valueInput) {
+      this.valueInput.value = this._value;
+    }
+    this.setValue(this._value || null);
+  }
+  recomputeValue() {
+    const oldValue = this._value;
+    const newValue = partsToIso(this.parts);
+    if (newValue !== oldValue) {
+      this._value = newValue;
+      this.valueHasChanged = true;
+      this.updateHiddenInput();
+      this.updateValidity();
+    }
+    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+    if (newValue !== this.lastEmittedValue) {
+      this.lastEmittedValue = newValue;
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+  }
+  firstFocusableInput() {
+    if (!this.shadowRoot) {
+      return void 0;
+    }
+    const inputs = Array.from(this.shadowRoot.querySelectorAll('input[part~="field-input"]'));
+    for (const field of this.fieldOrder()) {
+      if (this.parts[field] === "") {
+        const el = inputs.find((i) => i.dataset.field === field);
+        if (el) {
+          return el;
+        }
+      }
+    }
+    return inputs[0];
+  }
+  /**
+   * Returns the field to fix when the value doesn't compose, in locale order: the first empty field, else the first
+   * out-of-range field (year < 1, month not 1–12, day not 1–31), else the day (e.g. Feb 30). Null when the value
+   * composes cleanly.
+   */
+  firstInvalidField() {
+    if (this._value) {
+      return null;
+    }
+    const order = this.fieldOrder();
+    const empty = order.find((field) => this.parts[field] === "");
+    if (empty) {
+      return empty;
+    }
+    const inRange = {
+      year: (n2) => Number.isInteger(n2) && n2 >= 1 && n2 <= 9999,
+      month: (n2) => Number.isInteger(n2) && n2 >= 1 && n2 <= 12,
+      day: (n2) => Number.isInteger(n2) && n2 >= 1 && n2 <= 31
+    };
+    const outOfRange = order.find((field) => !inRange[field](Number(this.parts[field])));
+    if (outOfRange) {
+      return outOfRange;
+    }
+    return "day";
+  }
+  autocompleteFor(field) {
+    const family = this.autocomplete.trim();
+    if (!family) {
+      return void 0;
+    }
+    if (family === "bday") {
+      if (field === "day") {
+        return "bday-day";
+      }
+      if (field === "month") {
+        return "bday-month";
+      }
+      return "bday-year";
+    }
+    if (family === "off" || family === "on") {
+      return family;
+    }
+    return field === "year" ? family : void 0;
+  }
+  //
+  // Render
+  //
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasLabel = !!this.label || !!hasLabelSlot;
+    const hasHint = !!this.hint || !!hasHintSlot;
+    const groupAriaLabel = this.label || this.localize.term("date") || "Date";
+    const userInvalid = !o && this.customStates.has("user-invalid");
+    const describedBy = hasHint ? this.hintId : "";
+    const fields = this.fieldOrder().map((field) => this.renderField(field, describedBy, userInvalid));
+    const groupContent = b`
+      <div part="known-date form-control-input fields" class="fields">${fields}</div>
+
+      <slot
+        name="hint"
+        part="hint"
+        id=${this.hintId}
+        class=${e2({ hint: true, "has-slotted": hasHint })}
+        aria-hidden=${hasHint ? "false" : "true"}
+      >
+        ${this.hint}
+      </slot>
+    `;
+    return b`
+      <div
+        part="form-control"
+        class=${e2({
+      "form-control": true,
+      "form-control-has-label": hasLabel
+    })}
+      >
+        ${hasLabel ? b`<fieldset part="fieldset" class="fieldset">
+                <legend part="legend">
+                  <span part="form-control-label" class="label">
+                    <slot name="label">${this.label}</slot>
+                  </span>
+                </legend>
+                ${groupContent}
+              </fieldset>` : b`<div part="fieldset" class="fieldset" role="group" aria-label=${groupAriaLabel}>
+                ${groupContent}
+              </div>`}
+
+        <input
+          class="value-input"
+          type="date"
+          tabindex="-1"
+          aria-hidden="true"
+          .value=${this._value}
+          min=${o2(this.min || void 0)}
+          max=${o2(this.max || void 0)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+        />
+      </div>
+    `;
+  }
+  renderField(field, describedBy, userInvalid) {
+    const fieldId = `${this.groupId}-${field}`;
+    const value = this.parts[field];
+    const autocompleteAttr = this.autocompleteFor(field);
+    const ariaInvalid = userInvalid ? "true" : void 0;
+    const fieldLabel = this.localize.term(field) || (field === "day" ? "Day" : field === "month" ? "Month" : "Year");
+    return b`
+      <div part="field field-${field}" class=${e2({ field: true, [`field-${field}`]: true })}>
+        <input
+          id=${fieldId}
+          part="field-input"
+          class="field-input"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength=${field === "year" ? 4 : 2}
+          data-field=${field}
+          autocomplete=${o2(autocompleteAttr)}
+          aria-describedby=${o2(describedBy || void 0)}
+          aria-invalid=${o2(ariaInvalid)}
+          aria-required=${this.required ? "true" : "false"}
+          .value=${l(value)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${this.handleFieldInput}
+        />
+        <label part="field-label" class="field-label" for=${fieldId}>${fieldLabel}</label>
+      </div>
+    `;
+  }
+};
+CsKnownDate.css = [size_styles_default, form_control_styles_default, known_date_styles_default];
+CsKnownDate.shadowRootOptions = {
+  ...CornerstoneFormAssociatedElement.shadowRootOptions,
+  delegatesFocus: true
+};
+__decorateClass([
+  e(".value-input")
+], CsKnownDate.prototype, "valueInput", 2);
+__decorateClass([
+  r()
+], CsKnownDate.prototype, "parts", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "name", 2);
+__decorateClass([
+  r()
+], CsKnownDate.prototype, "value", 1);
+__decorateClass([
+  n({ attribute: "value", reflect: true })
+], CsKnownDate.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsKnownDate.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "required", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "readonly", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "appearance", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "pill", 2);
+__decorateClass([
+  n()
+], CsKnownDate.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hint" })
+], CsKnownDate.prototype, "hint", 2);
+__decorateClass([
+  n()
+], CsKnownDate.prototype, "autocomplete", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "min", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "max", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsKnownDate.prototype, "locale", 2);
+__decorateClass([
+  n({ attribute: "ssr-label", type: Boolean })
+], CsKnownDate.prototype, "ssrLabel", 2);
+__decorateClass([
+  n({ attribute: "ssr-hint", type: Boolean })
+], CsKnownDate.prototype, "ssrHint", 2);
+CsKnownDate = __decorateClass([
+  customElement("cs-known-date")
+], CsKnownDate);
+
+export {
+  CsKnownDate
+};

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

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/known-date/internal/partial-date-validator.ts
+var PartialDateValidator = () => {
+  return {
+    checkValidity(element) {
+      const host = element;
+      const parts = host.parts;
+      const empty = parts.day === "" && parts.month === "" && parts.year === "";
+      if (empty) {
+        return { isValid: true, invalidKeys: [], message: "" };
+      }
+      if (host.value === "") {
+        const message = host.localize?.term("incompleteDate") || "Enter a valid date.";
+        return { isValid: false, invalidKeys: ["badInput"], message };
+      }
+      return { isValid: true, invalidKeys: [], message: "" };
+    }
+  };
+};
+
+export {
+  PartialDateValidator
+};

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

@@ -0,0 +1,124 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// ../../node_modules/@shoelace-style/localize/dist/index.js
+var connectedElements = /* @__PURE__ */ new Set();
+var translations = /* @__PURE__ */ new Map();
+var fallback;
+var documentDirection = "ltr";
+var documentLanguage = "en";
+var isClient = typeof MutationObserver !== "undefined" && typeof document !== "undefined" && typeof document.documentElement !== "undefined";
+if (isClient) {
+  const documentElementObserver = new MutationObserver(update);
+  documentDirection = document.documentElement.dir || "ltr";
+  documentLanguage = document.documentElement.lang || navigator.language;
+  documentElementObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["dir", "lang"]
+  });
+}
+function registerTranslation(...translation) {
+  translation.map((t) => {
+    const code = t.$code.toLowerCase();
+    if (translations.has(code)) {
+      translations.set(code, Object.assign(Object.assign({}, translations.get(code)), t));
+    } else {
+      translations.set(code, t);
+    }
+    if (!fallback) {
+      fallback = t;
+    }
+  });
+  update();
+}
+function update() {
+  if (isClient) {
+    documentDirection = document.documentElement.dir || "ltr";
+    documentLanguage = document.documentElement.lang || navigator.language;
+  }
+  [...connectedElements.keys()].map((el) => {
+    if (typeof el.requestUpdate === "function") {
+      el.requestUpdate();
+    }
+  });
+}
+var LocalizeController = class {
+  constructor(host) {
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    connectedElements.add(this.host);
+  }
+  hostDisconnected() {
+    connectedElements.delete(this.host);
+  }
+  dir() {
+    return `${this.host.dir || documentDirection}`.toLowerCase();
+  }
+  lang() {
+    const lang = `${this.host.lang || documentLanguage}`.toLowerCase().replace(/_/g, "-");
+    try {
+      new Intl.Locale(lang);
+      return lang;
+    } catch (_a) {
+      return fallback ? fallback.$code.toLowerCase() : "en";
+    }
+  }
+  getTranslationData(lang) {
+    var _a, _b;
+    let locale;
+    try {
+      locale = new Intl.Locale(lang.replace(/_/g, "-"));
+    } catch (_c) {
+      return { locale: void 0, language: "", region: "", primary: void 0, secondary: void 0 };
+    }
+    const language = locale.language.toLowerCase();
+    const region = (_b = (_a = locale.region) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+    const primary = translations.get(`${language}-${region}`);
+    const secondary = translations.get(language);
+    return { locale, language, region, primary, secondary };
+  }
+  exists(key, options) {
+    var _a;
+    const { primary, secondary } = this.getTranslationData((_a = options.lang) !== null && _a !== void 0 ? _a : this.lang());
+    options = Object.assign({ includeFallback: false }, options);
+    if (primary && primary[key] || secondary && secondary[key] || options.includeFallback && fallback && fallback[key]) {
+      return true;
+    }
+    return false;
+  }
+  term(key, ...args) {
+    const { primary, secondary } = this.getTranslationData(this.lang());
+    let term;
+    if (primary && primary[key]) {
+      term = primary[key];
+    } else if (secondary && secondary[key]) {
+      term = secondary[key];
+    } else if (fallback && fallback[key]) {
+      term = fallback[key];
+    } else {
+      console.error(`No translation found for: ${String(key)}`);
+      return String(key);
+    }
+    if (typeof term === "function") {
+      return term(...args);
+    }
+    return term;
+  }
+  date(dateToFormat, options) {
+    dateToFormat = new Date(dateToFormat);
+    return new Intl.DateTimeFormat(this.lang(), options).format(dateToFormat);
+  }
+  number(numberToFormat, options) {
+    numberToFormat = Number(numberToFormat);
+    return isNaN(numberToFormat) ? "" : new Intl.NumberFormat(this.lang(), options).format(numberToFormat);
+  }
+  relativeTime(value, unit, options) {
+    return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
+  }
+};
+
+export {
+  registerTranslation,
+  LocalizeController
+};

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

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.7FDBE7CN.js";
+import {
+  CsNumberInput
+} from "./chunk.P76I6UTQ.js";
+import {
+  __toESM
+} from "./chunk.RNZTKRV7.js";
+
+// src/react/number-input/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-number-input";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsNumberInput,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsNumberInput"
+});
+var number_input_default = reactWrapper;
+
+export {
+  number_input_default
+};

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

@@ -0,0 +1,15 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.T7OKDWRT.js";
+
+// src/components/include/include.styles.ts
+var include_styles_default = i`
+  :host {
+    display: block;
+  }
+`;
+
+export {
+  include_styles_default
+};