@cruglobal/cornerstone-components 0.1.0 → 0.1.1

package/dist/unbundled/chunks/chunk.5IU24I6J.js

@@ -0,0 +1,28 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsColorPicker
+} from "./chunk.IUG4D7C7.js";
+
+// src/react/color-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-color-picker";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsColorPicker,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsColorPicker"
+});
+var color_picker_default = reactWrapper;
+
+export {
+  color_picker_default
+};

package/dist/unbundled/chunks/chunk.5NOZVNIQ.js

@@ -0,0 +1,83 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  progress_ring_styles_default
+} from "./chunk.APNNNVXM.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LIUE7EB7.js";
+import {
+  LocalizeController
+} from "./chunk.P4N57CDG.js";
+import {
+  __decorateClass
+} from "./chunk.2VAPLWBF.js";
+
+// src/components/progress-ring/progress-ring.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+var CsProgressRing = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return html`
+      <div
+        part="progress-ring"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style=${styleMap({ "--percentage": this.value / 100 })}
+      >
+        <svg class="image">
+          <circle part="track" class="track"></circle>
+          <circle
+            part="indicator"
+            class="indicator"
+            style=${styleMap({ "stroke-dashoffset": this.indicatorOffset })}
+          ></circle>
+        </svg>
+
+        <slot id="label" part="label" class="label"></slot>
+      </div>
+    `;
+  }
+};
+CsProgressRing.css = progress_ring_styles_default;
+__decorateClass([
+  query(".indicator")
+], CsProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  state()
+], CsProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], CsProgressRing.prototype, "value", 2);
+__decorateClass([
+  property()
+], CsProgressRing.prototype, "label", 2);
+CsProgressRing = __decorateClass([
+  customElement("cs-progress-ring")
+], CsProgressRing);
+CsProgressRing.disableWarning?.("change-in-update");
+
+export {
+  CsProgressRing
+};

package/dist/unbundled/chunks/chunk.5TDUWT4M.js

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsDivider
+} from "./chunk.FNUS2RRT.js";
+
+// src/react/divider/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-divider";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsDivider,
+  react: React,
+  events: {},
+  displayName: "CsDivider"
+});
+var divider_default = reactWrapper;
+
+export {
+  divider_default
+};

package/dist/unbundled/chunks/chunk.5XKILQVJ.js

@@ -0,0 +1,116 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/drag.ts
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options?.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options?.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if (options?.initialEvent instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+}
+var supportsTouch = typeof window !== "undefined" && "ontouchstart" in window;
+var DraggableElement = class {
+  constructor(el, options) {
+    this.isActive = false;
+    this.isDragging = false;
+    this.handleDragStart = (event) => {
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      const clientY = "touches" in event ? event.touches[0].clientY : event.clientY;
+      if (this.isDragging || // Prevent right-clicks from triggering drags
+      !supportsTouch && event.buttons > 1) {
+        return;
+      }
+      this.isDragging = true;
+      document.addEventListener("pointerup", this.handleDragStop);
+      document.addEventListener("pointermove", this.handleDragMove);
+      document.addEventListener("pointercancel", this.handleDragStop);
+      document.addEventListener("touchend", this.handleDragStop);
+      document.addEventListener("touchmove", this.handleDragMove);
+      document.addEventListener("touchcancel", this.handleDragStop);
+      this.options.start(clientX, clientY);
+    };
+    this.handleDragStop = (event) => {
+      const clientX = "changedTouches" in event ? event.changedTouches[0].clientX : event.clientX;
+      const clientY = "changedTouches" in event ? event.changedTouches[0].clientY : event.clientY;
+      this.isDragging = false;
+      document.removeEventListener("pointerup", this.handleDragStop);
+      document.removeEventListener("pointermove", this.handleDragMove);
+      document.removeEventListener("pointercancel", this.handleDragStop);
+      document.removeEventListener("touchend", this.handleDragStop);
+      document.removeEventListener("touchmove", this.handleDragMove);
+      document.removeEventListener("touchcancel", this.handleDragStop);
+      this.options.stop(clientX, clientY);
+    };
+    this.handleDragMove = (event) => {
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      const clientY = "touches" in event ? event.touches[0].clientY : event.clientY;
+      window.getSelection()?.removeAllRanges();
+      this.options.move(clientX, clientY);
+    };
+    this.element = el;
+    this.options = {
+      start: () => void 0,
+      stop: () => void 0,
+      move: () => void 0,
+      ...options
+    };
+    this.start();
+  }
+  /** Start listening to drags. */
+  start() {
+    if (!this.isActive) {
+      this.element.addEventListener("pointerdown", this.handleDragStart);
+      if (supportsTouch) {
+        this.element.addEventListener("touchstart", this.handleDragStart);
+      }
+      this.isActive = true;
+    }
+  }
+  /** Stop listening to drags. */
+  stop() {
+    document.removeEventListener("pointerup", this.handleDragStop);
+    document.removeEventListener("pointermove", this.handleDragMove);
+    document.removeEventListener("pointercancel", this.handleDragStop);
+    document.removeEventListener("touchend", this.handleDragStop);
+    document.removeEventListener("touchmove", this.handleDragMove);
+    document.removeEventListener("touchcancel", this.handleDragStop);
+    this.element.removeEventListener("pointerdown", this.handleDragStart);
+    if (supportsTouch) {
+      this.element.removeEventListener("touchstart", this.handleDragStart);
+    }
+    this.isActive = false;
+    this.isDragging = false;
+  }
+  /** Starts or stops the drag listeners. */
+  toggle(isActive) {
+    const isGoingToBeActive = isActive !== void 0 ? isActive : !this.isActive;
+    if (isGoingToBeActive) {
+      this.start();
+    } else {
+      this.stop();
+    }
+  }
+};
+
+export {
+  drag,
+  DraggableElement
+};

package/dist/unbundled/chunks/chunk.67APTA2K.js

@@ -0,0 +1,332 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  zoomable_frame_styles_default
+} from "./chunk.DAMUJTQC.js";
+import {
+  parseSpaceDelimitedTokens
+} from "./chunk.Z7XBBCOI.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LIUE7EB7.js";
+import {
+  LocalizeController
+} from "./chunk.P4N57CDG.js";
+import {
+  __decorateClass
+} from "./chunk.2VAPLWBF.js";
+
+// src/components/zoomable-frame/zoomable-frame.ts
+import { html, isServer } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/internal/color-scheme-controller.ts
+var ColorSchemeController = class {
+  constructor(host, onThemeChange) {
+    this.handleTransitionEnd = () => {
+      this.onThemeChange();
+    };
+    (this.host = host).addController(this);
+    this.onThemeChange = onThemeChange;
+    if (typeof document !== "undefined") {
+      this.hiddenElement = document.createElement("div");
+      this.hiddenElement.setAttribute("aria-hidden", "true");
+      Object.assign(this.hiddenElement.style, {
+        position: "absolute",
+        width: "0",
+        height: "0",
+        overflow: "hidden",
+        pointerEvents: "none",
+        opacity: "0",
+        // Transition on a WA surface token — changes whenever the theme class changes
+        color: "var(--cs-color-surface-default, transparent)",
+        transition: "color 0.001ms"
+      });
+    }
+  }
+  hostConnected() {
+    if (this.hiddenElement) {
+      this.host.appendChild(this.hiddenElement);
+      this.hiddenElement.addEventListener("transitionend", this.handleTransitionEnd);
+    }
+  }
+  hostDisconnected() {
+    if (this.hiddenElement) {
+      this.hiddenElement.removeEventListener("transitionend", this.handleTransitionEnd);
+      this.hiddenElement.remove();
+    }
+  }
+};
+
+// src/components/zoomable-frame/zoomable-frame.ts
+var CsZoomableFrame = class extends CornerstoneElement {
+  constructor() {
+    super();
+    this.localize = new LocalizeController(this);
+    // SSR guard: MutationObserver is not available during server-side rendering
+    this.themeObserver = !isServer ? new MutationObserver(() => this.syncTheme()) : null;
+    this.availableZoomLevels = [];
+    this.allowfullscreen = false;
+    this.loading = "eager";
+    this.zoom = 1;
+    this.zoomLevels = "25% 50% 75% 100% 125% 150% 175% 200%";
+    this.withoutControls = false;
+    this.withoutInteraction = false;
+    this.withThemeSync = false;
+    new ColorSchemeController(this, () => this.syncTheme());
+  }
+  /** Returns the internal iframe's `window` object. (Readonly property) */
+  get contentWindow() {
+    return this.iframe?.contentWindow || null;
+  }
+  /** Returns the internal iframe's `document` object. (Readonly property) */
+  get contentDocument() {
+    return this.iframe?.contentDocument || null;
+  }
+  parseZoomLevels(zoomLevelsString) {
+    const tokens = parseSpaceDelimitedTokens(zoomLevelsString);
+    const levels = [];
+    for (const token of tokens) {
+      let value;
+      if (token.endsWith("%")) {
+        const percentage = parseFloat(token.slice(0, -1));
+        if (!isNaN(percentage)) {
+          value = Math.max(0, percentage / 100);
+        } else {
+          continue;
+        }
+      } else {
+        value = parseFloat(token);
+        if (!isNaN(value)) {
+          value = Math.max(0, value);
+        } else {
+          continue;
+        }
+      }
+      levels.push(value);
+    }
+    return [...new Set(levels)].sort((a, b) => a - b);
+  }
+  getCurrentZoomIndex() {
+    if (this.availableZoomLevels.length === 0) {
+      return -1;
+    }
+    let closestIndex = 0;
+    let closestDiff = Math.abs(this.availableZoomLevels[0] - this.zoom);
+    for (let i = 1; i < this.availableZoomLevels.length; i++) {
+      const diff = Math.abs(this.availableZoomLevels[i] - this.zoom);
+      if (diff < closestDiff) {
+        closestDiff = diff;
+        closestIndex = i;
+      }
+    }
+    return closestIndex;
+  }
+  isZoomInDisabled() {
+    if (this.availableZoomLevels.length === 0) {
+      return false;
+    }
+    const currentIndex = this.getCurrentZoomIndex();
+    return currentIndex >= this.availableZoomLevels.length - 1;
+  }
+  isZoomOutDisabled() {
+    if (this.availableZoomLevels.length === 0) {
+      return false;
+    }
+    const currentIndex = this.getCurrentZoomIndex();
+    return currentIndex <= 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("zoom")) {
+      this.setStyleProperty("--zoom", `${this.zoom}`);
+    }
+    super.willUpdate(changedProperties);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("zoomLevels")) {
+      this.availableZoomLevels = this.parseZoomLevels(this.zoomLevels);
+      if (this.availableZoomLevels.length > 0) {
+        const currentIndex = this.getCurrentZoomIndex();
+        if (Math.abs(this.availableZoomLevels[currentIndex] - this.zoom) > 1e-3) {
+          this.zoom = this.availableZoomLevels[currentIndex];
+        }
+      }
+    }
+    if (changedProperties.has("withThemeSync")) {
+      if (this.withThemeSync) {
+        this.themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+        this.syncTheme();
+      } else {
+        this.themeObserver?.disconnect();
+      }
+    }
+    super.updated(changedProperties);
+  }
+  /** Zooms in to the next available zoom level. */
+  zoomIn() {
+    if (this.availableZoomLevels.length === 0) {
+      this.zoom = Math.min(this.zoom + 0.05, 2);
+      return;
+    }
+    const currentIndex = this.getCurrentZoomIndex();
+    if (currentIndex < this.availableZoomLevels.length - 1) {
+      this.zoom = this.availableZoomLevels[currentIndex + 1];
+    }
+  }
+  /** Zooms out to the previous available zoom level. */
+  zoomOut() {
+    if (this.availableZoomLevels.length === 0) {
+      this.zoom = Math.max(this.zoom - 0.05, 0);
+      return;
+    }
+    const currentIndex = this.getCurrentZoomIndex();
+    if (currentIndex > 0) {
+      this.zoom = this.availableZoomLevels[currentIndex - 1];
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.themeObserver?.disconnect();
+  }
+  syncTheme() {
+    if (!this.withThemeSync) {
+      return;
+    }
+    try {
+      const iframeRoot = this.contentDocument?.documentElement;
+      if (!iframeRoot) {
+        return;
+      }
+      const prefixes = ["cs-theme-", "cs-brand-", "cs-palette-"];
+      const schemeCls = /* @__PURE__ */ new Set();
+      const themeCls = /* @__PURE__ */ new Set();
+      let el = this;
+      let schemeFound = false;
+      while (el) {
+        if (!schemeFound) {
+          if (el.classList.contains("cs-dark")) {
+            schemeCls.add("cs-dark");
+            schemeFound = true;
+          } else if (el.classList.contains("cs-light")) {
+            schemeCls.add("cs-light");
+            schemeFound = true;
+          }
+        }
+        for (const cls of el.classList) {
+          if (prefixes.some((p) => cls.startsWith(p))) {
+            themeCls.add(cls);
+          }
+        }
+        el = el.parentElement;
+      }
+      iframeRoot.classList.toggle("cs-dark", schemeCls.has("cs-dark"));
+      iframeRoot.classList.toggle("cs-light", schemeCls.has("cs-light"));
+      const toRemove = Array.from(iframeRoot.classList).filter((c) => prefixes.some((p) => c.startsWith(p)));
+      iframeRoot.classList.remove(...toRemove);
+      iframeRoot.classList.add(...themeCls);
+    } catch {
+    }
+  }
+  handleLoad() {
+    if (this.withThemeSync) {
+      this.syncTheme();
+    }
+    this.dispatchEvent(new Event("load", { bubbles: false, cancelable: false, composed: true }));
+  }
+  handleError() {
+    this.dispatchEvent(new Event("error", { bubbles: false, cancelable: false, composed: true }));
+  }
+  render() {
+    return html`
+      <div id="frame-container">
+        <iframe
+          id="iframe"
+          part="iframe"
+          ?inert=${this.withoutInteraction}
+          ?allowfullscreen=${this.allowfullscreen}
+          loading=${this.loading}
+          referrerpolicy=${this.referrerpolicy}
+          sandbox=${ifDefined(this.sandbox ?? void 0)}
+          src=${ifDefined(this.src ?? void 0)}
+          srcdoc=${ifDefined(this.srcdoc ?? void 0)}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        ></iframe>
+      </div>
+
+      ${!this.withoutControls ? html`
+              <div id="controls" part="controls">
+                <button
+                  part="zoom-out-button"
+                  aria-label=${this.localize.term("zoomOut")}
+                  @click=${this.zoomOut}
+                  ?disabled=${this.isZoomOutDisabled()}
+                >
+                  <slot name="zoom-out-icon">
+                    <cs-icon name="remove" label="Zoom out"></cs-icon>
+                  </slot>
+                </button>
+                <span>${this.localize.number(this.zoom, { style: "percent", maximumFractionDigits: 1 })}</span>
+                <button
+                  part="zoom-in-button"
+                  aria-label=${this.localize.term("zoomIn")}
+                  @click=${this.zoomIn}
+                  ?disabled=${this.isZoomInDisabled()}
+                >
+                  <slot name="zoom-in-icon">
+                    <cs-icon name="add" label="Zoom in"></cs-icon>
+                  </slot>
+                </button>
+              </div>
+            ` : ""}
+    `;
+  }
+};
+CsZoomableFrame.css = zoomable_frame_styles_default;
+__decorateClass([
+  state()
+], CsZoomableFrame.prototype, "availableZoomLevels", 2);
+__decorateClass([
+  query("#iframe")
+], CsZoomableFrame.prototype, "iframe", 2);
+__decorateClass([
+  property()
+], CsZoomableFrame.prototype, "src", 2);
+__decorateClass([
+  property()
+], CsZoomableFrame.prototype, "srcdoc", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsZoomableFrame.prototype, "allowfullscreen", 2);
+__decorateClass([
+  property()
+], CsZoomableFrame.prototype, "loading", 2);
+__decorateClass([
+  property()
+], CsZoomableFrame.prototype, "referrerpolicy", 2);
+__decorateClass([
+  property()
+], CsZoomableFrame.prototype, "sandbox", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], CsZoomableFrame.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "zoom-levels" })
+], CsZoomableFrame.prototype, "zoomLevels", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "without-controls", reflect: true })
+], CsZoomableFrame.prototype, "withoutControls", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "without-interaction", reflect: true })
+], CsZoomableFrame.prototype, "withoutInteraction", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "with-theme-sync", reflect: true })
+], CsZoomableFrame.prototype, "withThemeSync", 2);
+CsZoomableFrame = __decorateClass([
+  customElement("cs-zoomable-frame")
+], CsZoomableFrame);
+
+export {
+  CsZoomableFrame
+};

package/dist/unbundled/chunks/chunk.6BGUWLYG.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.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/unbundled/chunks/chunk.6JCIJJHI.js

@@ -0,0 +1,31 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  carousel_item_styles_default
+} from "./chunk.CFSAPX66.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LIUE7EB7.js";
+import {
+  __decorateClass
+} from "./chunk.2VAPLWBF.js";
+
+// src/components/carousel-item/carousel-item.ts
+import { html } from "lit";
+var CsCarouselItem = class extends CornerstoneElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "group");
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+CsCarouselItem.css = carousel_item_styles_default;
+CsCarouselItem = __decorateClass([
+  customElement("cs-carousel-item")
+], CsCarouselItem);
+
+export {
+  CsCarouselItem
+};

package/dist/unbundled/chunks/chunk.6RXPEKZ4.js

@@ -0,0 +1,47 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/validators/mirror-validator.ts
+var MirrorValidator = () => {
+  return {
+    checkValidity(element) {
+      const formControl = element.input;
+      const validity = {
+        message: "",
+        isValid: true,
+        invalidKeys: []
+      };
+      if (!formControl) {
+        return validity;
+      }
+      let isValid = true;
+      if ("checkValidity" in formControl) {
+        isValid = formControl.checkValidity();
+      }
+      if (isValid) {
+        return validity;
+      }
+      validity.isValid = false;
+      if ("validationMessage" in formControl) {
+        validity.message = formControl.validationMessage;
+      }
+      if (!("validity" in formControl)) {
+        validity.invalidKeys.push("customError");
+        return validity;
+      }
+      for (const key in formControl.validity) {
+        if (key === "valid") {
+          continue;
+        }
+        const checkedKey = key;
+        if (formControl.validity[checkedKey]) {
+          validity.invalidKeys.push(checkedKey);
+        }
+      }
+      return validity;
+    }
+  };
+};
+
+export {
+  MirrorValidator
+};