@cruglobal/cornerstone-components 0.6.1 → 0.7.0

package/dist/bundled/chunks/chunk.3KMKB57S.js

@@ -0,0 +1,136 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  scroller_styles_default
+} from "./chunk.NLNKDKKZ.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.6GJWBDJU.js";
+import {
+  LocalizeController
+} from "./chunk.HGW5EEZU.js";
+import {
+  o
+} from "./chunk.4XDNAFUH.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/scroller/scroller.ts
+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 (!o) {
+      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 b`
+      ${this.withoutShadow ? "" : b`
+              <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([
+  e("#content")
+], CsScroller.prototype, "content", 2);
+__decorateClass([
+  r()
+], CsScroller.prototype, "canScroll", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsScroller.prototype, "orientation", 2);
+__decorateClass([
+  n({ attribute: "without-scrollbar", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutScrollbar", 2);
+__decorateClass([
+  n({ attribute: "without-shadow", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutShadow", 2);
+__decorateClass([
+  t({ passive: true })
+], CsScroller.prototype, "updateScroll", 1);
+CsScroller = __decorateClass([
+  customElement("cs-scroller")
+], CsScroller);
+
+export {
+  CsScroller
+};

package/dist/bundled/chunks/chunk.3L2C4ECK.js

@@ -0,0 +1,105 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.js";
+
+// src/components/dropdown/dropdown.styles.ts
+var dropdown_styles_default = i`
+  :host {
+    --show-duration: var(--cs-transition-fast);
+    --hide-duration: var(--cs-transition-fast);
+    display: contents;
+  }
+
+  #menu {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    border: var(--cs-border-style) var(--cs-border-width-s) var(--cs-color-surface-border);
+    border-radius: var(--cs-border-radius-m);
+    background-color: var(--cs-color-surface-raised);
+    box-shadow: var(--cs-shadow-m);
+    color: var(--cs-color-text-normal);
+    text-align: start;
+    user-select: none;
+    overflow: auto;
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--hide-duration) ease reverse;
+    }
+
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(h5),
+    ::slotted(h6) {
+      display: block !important;
+      margin: 0.25em 0 !important;
+      padding: 0.25em 0.75em !important;
+      color: var(--cs-color-text-quiet);
+      font-family: var(--cs-font-family-body) !important;
+      font-weight: var(--cs-font-weight-semibold) !important;
+      font-size: var(--cs-font-size-smaller) !important;
+    }
+
+    ::slotted(cs-divider) {
+      --spacing: 0.25em; /* Component-specific, left as-is */
+    }
+  }
+
+  cs-popup[data-current-placement^='top'] #menu {
+    transform-origin: bottom;
+  }
+
+  cs-popup[data-current-placement^='bottom'] #menu {
+    transform-origin: top;
+  }
+
+  cs-popup[data-current-placement^='left'] #menu {
+    transform-origin: right;
+  }
+
+  cs-popup[data-current-placement^='right'] #menu {
+    transform-origin: left;
+  }
+
+  cs-popup[data-current-placement='left-start'] #menu {
+    transform-origin: right top;
+  }
+
+  cs-popup[data-current-placement='left-end'] #menu {
+    transform-origin: right bottom;
+  }
+
+  cs-popup[data-current-placement='right-start'] #menu {
+    transform-origin: left top;
+  }
+
+  cs-popup[data-current-placement='right-end'] #menu {
+    transform-origin: left bottom;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+
+export {
+  dropdown_styles_default
+};

package/dist/bundled/chunks/chunk.3PEM53TZ.js

@@ -0,0 +1,31 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsOtpInput
+} from "./chunk.E2FTDKVH.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/otp-input/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-otp-input";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsOtpInput,
+  react: React,
+  events: {
+    onCsComplete: "cs-complete",
+    onCsClear: "cs-clear",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsOtpInput"
+});
+var otp_input_default = reactWrapper;
+
+export {
+  otp_input_default
+};

package/dist/bundled/chunks/chunk.3VERAVBK.js

@@ -0,0 +1,246 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsStartEvent
+} from "./chunk.OVXWWQ22.js";
+import {
+  CsFinishEvent
+} from "./chunk.LG6R77RU.js";
+import {
+  CsCancelEvent
+} from "./chunk.YKDJMIO2.js";
+import {
+  animation_styles_default
+} from "./chunk.KX66J3XQ.js";
+import {
+  dist_exports
+} from "./chunk.6BPSQM77.js";
+import {
+  watch
+} from "./chunk.N6DONW5L.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n,
+  r2 as r
+} from "./chunk.6GJWBDJU.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/animation/animation.ts
+var CsAnimation = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.dispatchEvent(new CsFinishEvent());
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.dispatchEvent(new CsCancelEvent());
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    return this.animation?.currentTime ?? 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if ("animate" in this) {
+      this.createAnimation();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if ("animate" in this) {
+      this.destroyAnimation();
+    }
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    const easing = dist_exports.easings[this.easing] ?? this.easing;
+    const keyframes = this.keyframes ?? dist_exports[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.dispatchStart();
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  dispatchStart() {
+    this.hasStarted = true;
+    this.dispatchEvent(new CsStartEvent());
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.dispatchStart();
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    this.animation?.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    this.animation?.finish();
+  }
+  /**
+   * Rewinds the animation to the start and plays it, whether it has finished, been canceled, been paused or is still
+   * running. Each restart is a new run: the delay and every iteration play again as the current options describe them,
+   * `play` is set to `true`, and `cs-start` is emitted. The run it interrupts emits neither `cs-cancel` nor `cs-finish`.
+   * If the animation doesn't exist yet, for example because nothing is slotted, it starts as soon as it does.
+   * Changing an option such as `duration` while the animation plays also starts a new run, so changing one in the same
+   * tick as `restart()` emits `cs-start` twice.
+   */
+  restart() {
+    this.play = true;
+    if (!this.animation) {
+      return;
+    }
+    this.animation.currentTime = 0;
+    this.animation.play();
+    this.dispatchStart();
+  }
+  render() {
+    return b` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CsAnimation.css = animation_styles_default;
+__decorateClass([
+  r("slot")
+], CsAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  n()
+], CsAnimation.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsAnimation.prototype, "play", 2);
+__decorateClass([
+  n({ type: Number })
+], CsAnimation.prototype, "delay", 2);
+__decorateClass([
+  n()
+], CsAnimation.prototype, "direction", 2);
+__decorateClass([
+  n({ type: Number })
+], CsAnimation.prototype, "duration", 2);
+__decorateClass([
+  n()
+], CsAnimation.prototype, "easing", 2);
+__decorateClass([
+  n({ attribute: "end-delay", type: Number })
+], CsAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  n()
+], CsAnimation.prototype, "fill", 2);
+__decorateClass([
+  n({ type: Number })
+], CsAnimation.prototype, "iterations", 2);
+__decorateClass([
+  n({ attribute: "iteration-start", type: Number })
+], CsAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  n({ attribute: false })
+], CsAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  n({ attribute: "playback-rate", type: Number })
+], CsAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], CsAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], CsAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], CsAnimation.prototype, "handlePlaybackRateChange", 1);
+CsAnimation = __decorateClass([
+  customElement("cs-animation")
+], CsAnimation);
+
+export {
+  CsAnimation
+};