@cruglobal/cornerstone-components 0.6.1 → 0.7.0

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

@@ -0,0 +1,47 @@
+/*! Cornerstone Components 0.7.0 - 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
+};

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

@@ -0,0 +1,171 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o
+} from "./chunk.RZ5QECBK.js";
+import {
+  CsErrorEvent
+} from "./chunk.PLLLVECA.js";
+import {
+  CsLoadEvent
+} from "./chunk.6MA5SVB3.js";
+import {
+  watch
+} from "./chunk.N6DONW5L.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.6GJWBDJU.js";
+import {
+  LocalizeController
+} from "./chunk.HGW5EEZU.js";
+import {
+  animated_image_styles_default
+} from "./chunk.D2YYAVLA.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/animated-image/animated-image.ts
+var CsAnimatedImage = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isLoaded = false;
+  }
+  handleClick() {
+    this.play = !this.play;
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.play = !this.play;
+    }
+  }
+  firstUpdated(changedProperties) {
+    if (this.didSSR) {
+      const img = this.animatedImage;
+      if (img && img.complete) {
+        if (img.naturalWidth > 0) {
+          img.dispatchEvent(new Event("load"));
+        } else {
+          img.dispatchEvent(new Event("error"));
+        }
+      }
+    }
+    super.firstUpdated(changedProperties);
+  }
+  handleLoad() {
+    const canvas = document.createElement("canvas");
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL("image/gif");
+    if (!this.isLoaded) {
+      this.dispatchEvent(new CsLoadEvent());
+      this.isLoaded = true;
+    }
+  }
+  handleError() {
+    this.dispatchEvent(new CsErrorEvent());
+  }
+  handlePlayChange() {
+    if (this.play) {
+      this.animatedImage.src = "";
+      this.animatedImage.src = this.src;
+    }
+  }
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+  render() {
+    const verb = this.localize.term(this.play ? "pauseAnimation" : "playAnimation");
+    const label = `${verb} ${this.alt}`;
+    const shouldShow = this.didSSR && !this.hasUpdated || this.play;
+    return b`
+      <div
+        class="animated-image"
+        tabindex="0"
+        role="button"
+        aria-pressed=${this.play ? "true" : "false"}
+        aria-label=${label}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <img
+          class="animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${shouldShow ? "false" : "true"}
+          style="visibility: hidden;"
+          role="presentation"
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded ? b`
+                <img
+                  class="frozen"
+                  src=${this.frozenFrame}
+                  alt=${this.alt}
+                  aria-hidden=${this.play ? "true" : "false"}
+                  role="presentation"
+                />
+
+                <div part="control-box" class="control-box" aria-hidden="true">
+                  <slot name="play-icon">
+                    <cs-icon
+                      name="play_arrow"
+                      library="system"
+                      class="default"
+                      style=${o({ "margin-inline-start": "3px" })}
+                    ></cs-icon>
+                  </slot>
+                  <slot name="pause-icon">
+                    <cs-icon name="pause" library="system" variant="fill" class="default"></cs-icon>
+                  </slot>
+                </div>
+              ` : ""}
+      </div>
+    `;
+  }
+};
+CsAnimatedImage.css = animated_image_styles_default;
+__decorateClass([
+  e(".animated")
+], CsAnimatedImage.prototype, "animatedImage", 2);
+__decorateClass([
+  r()
+], CsAnimatedImage.prototype, "frozenFrame", 2);
+__decorateClass([
+  r()
+], CsAnimatedImage.prototype, "isLoaded", 2);
+__decorateClass([
+  n()
+], CsAnimatedImage.prototype, "src", 2);
+__decorateClass([
+  n()
+], CsAnimatedImage.prototype, "alt", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsAnimatedImage.prototype, "play", 2);
+__decorateClass([
+  watch("play", { waitUntilFirstUpdate: true })
+], CsAnimatedImage.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("src")
+], CsAnimatedImage.prototype, "handleSrcChange", 1);
+CsAnimatedImage = __decorateClass([
+  customElement("cs-animated-image")
+], CsAnimatedImage);
+
+export {
+  CsAnimatedImage
+};

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

@@ -0,0 +1,155 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.js";
+
+// src/components/popup/popup.styles.ts
+var popup_styles_default = i`
+  :host {
+    --arrow-color: black;
+    --arrow-size: var(--cs-tooltip-arrow-size);
+    --popup-border-width: 0px;
+    --show-duration: var(--cs-transition-fast);
+    --hide-duration: var(--cs-transition-fast);
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45) to calculate the length of the arrow after rotation.
+     *
+     * The diamond will be translated inward by --arrow-base-offset, the border thickness, to centralise it on
+     * the inner edge of the popup border. This also means we need to increase the size of the arrow by the
+     * same amount to compensate.
+     *
+     * A diamond shaped clipping mask is used to avoid overlap of popup content. This extends slightly inward so
+     * the popup border is covered with no sub-pixel rounding artifacts. The diamond corners are mitred at 22.5º
+     * to properly merge any arrow border with the popup border. The constant 1.4142 is derived from 1 + tan(22.5).
+     *
+     */
+    --arrow-base-offset: var(--popup-border-width);
+    --arrow-size-diagonal: calc((var(--arrow-size) + var(--arrow-base-offset)) * 0.7071);
+    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+    --arrow-size-div: calc(var(--arrow-size-diagonal) * 2);
+    --arrow-clipping-corner: calc(var(--arrow-base-offset) * 1.4142);
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+
+    /* Clear UA styles for [popover] */
+    :where(&) {
+      inset: unset;
+      padding: unset;
+      margin: unset;
+      width: unset;
+      height: unset;
+      color: unset;
+      background: unset;
+      border: unset;
+      overflow: unset;
+    }
+  }
+
+  .popup-fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup-active) {
+    display: none;
+  }
+
+  .arrow {
+    position: absolute;
+    width: var(--arrow-size-div);
+    height: var(--arrow-size-div);
+    background: var(--arrow-color);
+    z-index: 3;
+    clip-path: polygon(
+      var(--arrow-clipping-corner) 100%,
+      var(--arrow-base-offset) calc(100% - var(--arrow-base-offset)),
+      calc(var(--arrow-base-offset) - 2px) calc(100% - var(--arrow-base-offset)),
+      calc(100% - var(--arrow-base-offset)) calc(var(--arrow-base-offset) - 2px),
+      calc(100% - var(--arrow-base-offset)) var(--arrow-base-offset),
+      100% var(--arrow-clipping-corner),
+      100% 100%
+    );
+    rotate: 45deg;
+  }
+
+  :host([data-current-placement|='left']) .arrow {
+    rotate: -45deg;
+  }
+
+  :host([data-current-placement|='right']) .arrow {
+    rotate: 135deg;
+  }
+
+  :host([data-current-placement|='bottom']) .arrow {
+    rotate: 225deg;
+  }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge-visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: 899;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
+
+  /* Built-in animations */
+  .show {
+    animation: show var(--show-duration) ease;
+  }
+
+  .hide {
+    animation: show var(--hide-duration) ease reverse;
+  }
+
+  @keyframes show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .show-with-scale {
+    animation: show-with-scale var(--show-duration) ease;
+  }
+
+  .hide-with-scale {
+    animation: show-with-scale var(--hide-duration) ease reverse;
+  }
+
+  @keyframes show-with-scale {
+    from {
+      opacity: 0;
+      scale: 0.8;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+`;
+
+export {
+  popup_styles_default
+};

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

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsCarousel
+} from "./chunk.GOW3HLG5.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/carousel/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-carousel";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsCarousel,
+  react: React,
+  events: {
+    onCsSlideChange: "cs-slide-change"
+  },
+  displayName: "CsCarousel"
+});
+var carousel_default = reactWrapper;
+
+export {
+  carousel_default
+};

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

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/cancel.ts
+var CsCancelEvent = class extends Event {
+  constructor() {
+    super("cs-cancel", { bubbles: true, cancelable: false, composed: true });
+  }
+};
+
+export {
+  CsCancelEvent
+};

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

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/reposition.ts
+var CsRepositionEvent = class extends Event {
+  constructor() {
+    super("cs-reposition", { bubbles: true, cancelable: false, composed: true });
+  }
+};
+
+export {
+  CsRepositionEvent
+};

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

@@ -0,0 +1,268 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  toast_styles_default
+} from "./chunk.QLW2S2BD.js";
+import {
+  uniqueId
+} from "./chunk.V6RGSF6J.js";
+import {
+  animate,
+  prefersReducedMotion
+} from "./chunk.CKMYRTBN.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n
+} from "./chunk.6GJWBDJU.js";
+import {
+  o
+} from "./chunk.4XDNAFUH.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/toast/toast.ts
+var sharedLiveRegionContainer = null;
+var sharedLiveRegionRefCount = 0;
+function mountSharedLiveRegions() {
+  sharedLiveRegionRefCount += 1;
+  if (sharedLiveRegionContainer || typeof document === "undefined") {
+    return;
+  }
+  const container = document.createElement("div");
+  container.id = uniqueId("cs-toast-live-region-");
+  container.setAttribute("data-cs-toast-live-region", "");
+  container.style.cssText = `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+    pointer-events: none;
+    top: 0;
+    left: 0;
+  `;
+  document.body.append(container);
+  sharedLiveRegionContainer = container;
+}
+function unmountSharedLiveRegions() {
+  sharedLiveRegionRefCount = Math.max(0, sharedLiveRegionRefCount - 1);
+  if (sharedLiveRegionRefCount > 0) {
+    return;
+  }
+  sharedLiveRegionContainer?.remove();
+  sharedLiveRegionContainer = null;
+}
+function announceViaSharedLiveRegion(text, variant) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const container = sharedLiveRegionContainer;
+  if (!container) {
+    return;
+  }
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return;
+  }
+  const announcer = document.createElement("div");
+  announcer.setAttribute("role", variant === "danger" ? "alert" : "status");
+  announcer.setAttribute("aria-live", variant === "danger" ? "assertive" : "polite");
+  announcer.setAttribute("aria-atomic", "true");
+  container.append(announcer);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      announcer.textContent = trimmed;
+    });
+  });
+  setTimeout(() => announcer.remove(), 1e3);
+}
+var CsToast = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.activatedToastItems = /* @__PURE__ */ new WeakSet();
+    this.positionCache = /* @__PURE__ */ new Map();
+    this.placement = "top-end";
+    this.handleDocumentKeyDown = async (event) => {
+      await new Promise((resolve) => setTimeout(resolve));
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        const toastItems = this.getToastItems();
+        if (toastItems.length > 0) {
+          event.preventDefault();
+          const mostRecent = toastItems[toastItems.length - 1];
+          mostRecent?.hide();
+        }
+      }
+    };
+    this.handleAfterHide = async (event) => {
+      const toastItem = event.target;
+      if (toastItem.parentElement === this) {
+        this.capturePositions();
+        toastItem.remove();
+        await this.animatePositions();
+      }
+      if (this.getToastItems().length === 0) {
+        this.hideStack();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!o) {
+      this.popover = "manual";
+      mountSharedLiveRegions();
+      document.addEventListener("keydown", this.handleDocumentKeyDown);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener?.("keydown", this.handleDocumentKeyDown);
+    unmountSharedLiveRegions();
+  }
+  handleSlotChange() {
+    const toastItems = this.getToastItems();
+    const newItems = [];
+    toastItems.forEach((toastItem) => {
+      if (!this.activatedToastItems.has(toastItem)) {
+        newItems.push(toastItem);
+      }
+    });
+    if (newItems.length > 0) {
+      this.capturePositions();
+      newItems.forEach((toastItem) => {
+        this.activatedToastItems.add(toastItem);
+        this.showStack();
+        toastItem.startTimer();
+        this.announceToastItem(toastItem);
+      });
+      requestAnimationFrame(() => this.animatePositions());
+    }
+  }
+  announceToastItem(toastItem) {
+    announceViaSharedLiveRegion(toastItem.textContent ?? "", toastItem.variant);
+  }
+  getToastItems() {
+    return [...this.querySelectorAll(":scope > cs-toast-item")];
+  }
+  /** Captures the current position of all toast items for FLIP animation. */
+  capturePositions() {
+    this.positionCache.clear();
+    for (const item of this.getToastItems()) {
+      this.positionCache.set(item, item.getBoundingClientRect());
+    }
+  }
+  /** Animates toast items from their cached positions to their new positions using FLIP. */
+  async animatePositions() {
+    if (prefersReducedMotion()) {
+      this.positionCache.clear();
+      return;
+    }
+    const animations = [];
+    for (const item of this.getToastItems()) {
+      const oldRect = this.positionCache.get(item);
+      if (!oldRect) {
+        continue;
+      }
+      const newRect = item.getBoundingClientRect();
+      const deltaY = oldRect.top - newRect.top;
+      if (Math.abs(deltaY) > 1) {
+        const animation = animate(item, [{ transform: `translateY(${deltaY}px)` }, { transform: "translateY(0)" }], {
+          duration: 200,
+          easing: "cubic-bezier(0.2, 0, 0, 1)"
+          // Material Design standard easing
+        });
+        animations.push(animation);
+      }
+    }
+    this.positionCache.clear();
+    await Promise.all(animations);
+  }
+  showStack() {
+    if (!this.matches(":popover-open")) {
+      this.showPopover();
+      this.customStates.set("visible", true);
+    }
+  }
+  hideStack() {
+    if (this.matches(":popover-open")) {
+      this.hidePopover();
+      this.customStates.set("visible", false);
+    }
+  }
+  /**
+   * Creates a toast notification programmatically and adds it to the stack. Returns a reference to the created toast
+   * item element.
+   */
+  async create(message, options) {
+    const opts = {
+      allowHtml: false,
+      duration: 5e3,
+      variant: "neutral",
+      size: "m",
+      ...options
+    };
+    const toastItem = document.createElement("cs-toast-item");
+    toastItem.variant = opts.variant;
+    toastItem.size = opts.size;
+    toastItem.duration = opts.duration;
+    if (opts.allowHtml) {
+      toastItem.innerHTML = message;
+    } else {
+      toastItem.textContent = message;
+    }
+    if (opts.icon) {
+      const icon = document.createElement("cs-icon");
+      icon.setAttribute("slot", "icon");
+      if (typeof opts.icon === "string") {
+        icon.setAttribute("name", opts.icon);
+      } else {
+        icon.setAttribute("name", opts.icon.name);
+        if (opts.icon.library) {
+          icon.setAttribute("library", opts.icon.library);
+        }
+        if (opts.icon.family) {
+          icon.setAttribute("family", opts.icon.family);
+        }
+        if (opts.icon.variant) {
+          icon.setAttribute("variant", opts.icon.variant);
+        }
+      }
+      toastItem.prepend(icon);
+    }
+    this.activatedToastItems.add(toastItem);
+    this.capturePositions();
+    this.showStack();
+    this.prepend(toastItem);
+    await toastItem.updateComplete;
+    this.animatePositions();
+    toastItem.startTimer();
+    this.announceToastItem(toastItem);
+    return toastItem;
+  }
+  render() {
+    return b`
+      <div part="stack" class="stack" @cs-after-hide=${this.handleAfterHide}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+CsToast.css = toast_styles_default;
+__decorateClass([
+  e(".stack")
+], CsToast.prototype, "stack", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsToast.prototype, "placement", 2);
+CsToast = __decorateClass([
+  customElement("cs-toast")
+], CsToast);
+
+export {
+  CsToast
+};