@cruglobal/cornerstone-components 0.1.2 → 0.1.3

package/dist/unbundled/chunks/chunk.2VF7CMA3.js

@@ -0,0 +1,128 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  scroller_styles_default
+} from "./chunk.RPCKPZCF.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  LocalizeController
+} from "./chunk.FZ4QCNJ4.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/scroller/scroller.ts
+import { html, isServer } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+var CsScroller = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.resizeObserver = null;
+    this.canScroll = false;
+    this.orientation = "horizontal";
+    this.withoutScrollbar = false;
+    this.withoutShadow = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!isServer) {
+      this.resizeObserver = new ResizeObserver(() => this.updateScroll());
+      this.resizeObserver.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.content.scrollTo({
+        left: this.orientation === "horizontal" ? 0 : void 0,
+        top: this.orientation === "vertical" ? 0 : void 0
+      });
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      this.content.scrollTo({
+        left: this.orientation === "horizontal" ? this.content.scrollWidth : void 0,
+        top: this.orientation === "vertical" ? this.content.scrollHeight : void 0
+      });
+    }
+  }
+  handleSlotChange() {
+    this.updateScroll();
+  }
+  updateScroll() {
+    if (this.orientation === "horizontal") {
+      const clientWidth = Math.ceil(this.content.clientWidth);
+      const scrollLeft = Math.abs(Math.ceil(this.content.scrollLeft));
+      const scrollWidth = Math.ceil(this.content.scrollWidth);
+      const maxScroll = scrollWidth - clientWidth;
+      this.canScroll = maxScroll > 0;
+      const startShadowOpacity = Math.min(1, scrollLeft / (maxScroll * 0.05));
+      const endShadowOpacity = Math.min(1, (maxScroll - scrollLeft) / (maxScroll * 0.05));
+      this.style.setProperty("--start-shadow-opacity", String(startShadowOpacity || 0));
+      this.style.setProperty("--end-shadow-opacity", String(endShadowOpacity || 0));
+    } else {
+      const clientHeight = Math.ceil(this.content.clientHeight);
+      const scrollTop = Math.abs(Math.ceil(this.content.scrollTop));
+      const scrollHeight = Math.ceil(this.content.scrollHeight);
+      const maxScroll = scrollHeight - clientHeight;
+      this.canScroll = maxScroll > 0;
+      const startShadowOpacity = Math.min(1, scrollTop / (maxScroll * 0.05));
+      const endShadowOpacity = Math.min(1, (maxScroll - scrollTop) / (maxScroll * 0.05));
+      this.style.setProperty("--start-shadow-opacity", String(startShadowOpacity || 0));
+      this.style.setProperty("--end-shadow-opacity", String(endShadowOpacity || 0));
+    }
+  }
+  render() {
+    return html`
+      ${this.withoutShadow ? "" : html`
+              <div id="start-shadow" part="start-shadow" aria-hidden="true"></div>
+              <div id="end-shadow" part="end-shadow" aria-hidden="true"></div>
+            `}
+
+      <div
+        id="content"
+        part="content"
+        role="region"
+        aria-label=${this.localize.term("scrollableRegion")}
+        tabindex=${this.canScroll ? "0" : "-1"}
+        @keydown=${this.handleKeyDown}
+        @scroll=${this.updateScroll}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+CsScroller.css = [scroller_styles_default];
+__decorateClass([
+  query("#content")
+], CsScroller.prototype, "content", 2);
+__decorateClass([
+  state()
+], CsScroller.prototype, "canScroll", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsScroller.prototype, "orientation", 2);
+__decorateClass([
+  property({ attribute: "without-scrollbar", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutScrollbar", 2);
+__decorateClass([
+  property({ attribute: "without-shadow", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutShadow", 2);
+__decorateClass([
+  eventOptions({ passive: true })
+], CsScroller.prototype, "updateScroll", 1);
+CsScroller = __decorateClass([
+  customElement("cs-scroller")
+], CsScroller);
+
+export {
+  CsScroller
+};

package/dist/unbundled/chunks/chunk.2WQL2A6Q.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsButton
+} from "./chunk.RHHHF56V.js";
+
+// src/react/button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-button";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsButton,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsButton"
+});
+var button_default = reactWrapper;
+
+export {
+  button_default
+};

package/dist/unbundled/chunks/chunk.3A73DUO3.js

@@ -0,0 +1,495 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  localeFieldOrder
+} from "./chunk.T4WYIVH3.js";
+import {
+  PartialDateValidator
+} from "./chunk.OEZGL5GK.js";
+import {
+  EMPTY_PARTS,
+  isoToParts,
+  partsToIso
+} from "./chunk.VRIN6NPF.js";
+import {
+  known_date_styles_default
+} from "./chunk.SGYRDCLO.js";
+import {
+  RequiredValidator
+} from "./chunk.4WMSVRXY.js";
+import {
+  form_control_styles_default
+} from "./chunk.BZRZRDCS.js";
+import {
+  HasSlotController
+} from "./chunk.7VYLODAW.js";
+import {
+  uniqueId
+} from "./chunk.OQW3LNFH.js";
+import {
+  MirrorValidator
+} from "./chunk.S32SVWDM.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.7XPYDR4R.js";
+import {
+  size_styles_default
+} from "./chunk.SWOOY6AB.js";
+import {
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  LocalizeController
+} from "./chunk.FZ4QCNJ4.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/known-date/known-date.ts
+import { html, isServer } 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 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(state2) {
+    if (typeof state2 === "string") {
+      this.value = state2;
+    }
+    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: (n) => Number.isInteger(n) && n >= 1 && n <= 9999,
+      month: (n) => Number.isInteger(n) && n >= 1 && n <= 12,
+      day: (n) => Number.isInteger(n) && n >= 1 && n <= 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 = !isServer && this.customStates.has("user-invalid");
+    const describedBy = hasHint ? this.hintId : "";
+    const fields = this.fieldOrder().map((field) => this.renderField(field, describedBy, userInvalid));
+    const groupContent = html`
+      <div part="known-date form-control-input fields" class="fields">${fields}</div>
+
+      <slot
+        name="hint"
+        part="hint"
+        id=${this.hintId}
+        class=${classMap({ hint: true, "has-slotted": hasHint })}
+        aria-hidden=${hasHint ? "false" : "true"}
+      >
+        ${this.hint}
+      </slot>
+    `;
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control-has-label": hasLabel
+    })}
+      >
+        ${hasLabel ? html`<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>` : html`<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=${ifDefined(this.min || void 0)}
+          max=${ifDefined(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 html`
+      <div part="field field-${field}" class=${classMap({ 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=${ifDefined(autocompleteAttr)}
+          aria-describedby=${ifDefined(describedBy || void 0)}
+          aria-invalid=${ifDefined(ariaInvalid)}
+          aria-required=${this.required ? "true" : "false"}
+          .value=${live(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([
+  query(".value-input")
+], CsKnownDate.prototype, "valueInput", 2);
+__decorateClass([
+  state()
+], CsKnownDate.prototype, "parts", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "name", 2);
+__decorateClass([
+  state()
+], CsKnownDate.prototype, "value", 1);
+__decorateClass([
+  property({ attribute: "value", reflect: true })
+], CsKnownDate.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsKnownDate.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "readonly", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsKnownDate.prototype, "pill", 2);
+__decorateClass([
+  property()
+], CsKnownDate.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "hint" })
+], CsKnownDate.prototype, "hint", 2);
+__decorateClass([
+  property()
+], CsKnownDate.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "min", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "max", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsKnownDate.prototype, "locale", 2);
+__decorateClass([
+  property({ attribute: "ssr-label", type: Boolean })
+], CsKnownDate.prototype, "ssrLabel", 2);
+__decorateClass([
+  property({ attribute: "ssr-hint", type: Boolean })
+], CsKnownDate.prototype, "ssrHint", 2);
+CsKnownDate = __decorateClass([
+  customElement("cs-known-date")
+], CsKnownDate);
+
+export {
+  CsKnownDate
+};

package/dist/unbundled/chunks/chunk.3BKZHSLM.js

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/resize-observer/resize-observer.styles.ts
+import { css } from "lit";
+var resize_observer_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+
+export {
+  resize_observer_styles_default
+};