@cruglobal/cornerstone-components 0.1.1 → 0.1.2

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

@@ -0,0 +1,339 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  zoomable_frame_styles_default
+} from "./chunk.AV4XZ7TM.js";
+import {
+  parseSpaceDelimitedTokens
+} from "./chunk.NIHFTMFY.js";
+import {
+  o as o2
+} from "./chunk.6PVYO5CE.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.LQ7XXMRT.js";
+import {
+  LocalizeController
+} from "./chunk.Y4VPKQYM.js";
+import {
+  o
+} from "./chunk.WH4RAXRT.js";
+import {
+  b
+} from "./chunk.QZ4WRTL6.js";
+import {
+  __decorateClass
+} from "./chunk.RMUSUQ7M.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 = !o ? 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, b2) => a - b2);
+  }
+  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 b`
+      <div id="frame-container">
+        <iframe
+          id="iframe"
+          part="iframe"
+          ?inert=${this.withoutInteraction}
+          ?allowfullscreen=${this.allowfullscreen}
+          loading=${this.loading}
+          referrerpolicy=${this.referrerpolicy}
+          sandbox=${o2(this.sandbox ?? void 0)}
+          src=${o2(this.src ?? void 0)}
+          srcdoc=${o2(this.srcdoc ?? void 0)}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        ></iframe>
+      </div>
+
+      ${!this.withoutControls ? b`
+              <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([
+  r()
+], CsZoomableFrame.prototype, "availableZoomLevels", 2);
+__decorateClass([
+  e("#iframe")
+], CsZoomableFrame.prototype, "iframe", 2);
+__decorateClass([
+  n()
+], CsZoomableFrame.prototype, "src", 2);
+__decorateClass([
+  n()
+], CsZoomableFrame.prototype, "srcdoc", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsZoomableFrame.prototype, "allowfullscreen", 2);
+__decorateClass([
+  n()
+], CsZoomableFrame.prototype, "loading", 2);
+__decorateClass([
+  n()
+], CsZoomableFrame.prototype, "referrerpolicy", 2);
+__decorateClass([
+  n()
+], CsZoomableFrame.prototype, "sandbox", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsZoomableFrame.prototype, "zoom", 2);
+__decorateClass([
+  n({ attribute: "zoom-levels" })
+], CsZoomableFrame.prototype, "zoomLevels", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "without-controls", reflect: true })
+], CsZoomableFrame.prototype, "withoutControls", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "without-interaction", reflect: true })
+], CsZoomableFrame.prototype, "withoutInteraction", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "with-theme-sync", reflect: true })
+], CsZoomableFrame.prototype, "withThemeSync", 2);
+CsZoomableFrame = __decorateClass([
+  customElement("cs-zoomable-frame")
+], CsZoomableFrame);
+
+export {
+  CsZoomableFrame
+};

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

@@ -0,0 +1,44 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  divider_styles_default
+} from "./chunk.56HJHLUN.js";
+import {
+  watch
+} from "./chunk.CZUH2SE2.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.LQ7XXMRT.js";
+import {
+  __decorateClass
+} from "./chunk.RMUSUQ7M.js";
+
+// src/components/divider/divider.ts
+var CsDivider = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.orientation);
+  }
+};
+CsDivider.css = divider_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], CsDivider.prototype, "orientation", 2);
+__decorateClass([
+  watch("orientation")
+], CsDivider.prototype, "handleVerticalChange", 1);
+CsDivider = __decorateClass([
+  customElement("cs-divider")
+], CsDivider);
+
+export {
+  CsDivider
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.3OGRFC36.js";
+import {
+  CsComparison
+} from "./chunk.MZ2AOGVK.js";
+import {
+  __toESM
+} from "./chunk.RMUSUQ7M.js";
+
+// src/react/comparison/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-comparison";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsComparison,
+  react: React,
+  events: {},
+  displayName: "CsComparison"
+});
+var comparison_default = reactWrapper;
+
+export {
+  comparison_default
+};

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

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.1.2 - 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.MNYD2AYE.js

@@ -0,0 +1,19 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// ../../node_modules/lit-html/directives/when.js
+function n(n2, r, t) {
+  return n2 ? r(n2) : t?.(n2);
+}
+
+export {
+  n
+};
+/*! Bundled license information:
+
+lit-html/directives/when.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

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

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/page-change.ts
+var CsPageChangeEvent = class extends Event {
+  constructor(detail) {
+    super("cs-page-change", { bubbles: true, cancelable: true, composed: true });
+    this.detail = detail;
+  }
+};
+
+export {
+  CsPageChangeEvent
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.3OGRFC36.js";
+import {
+  CsCheckboxGroup
+} from "./chunk.TS7G4RGE.js";
+import {
+  __toESM
+} from "./chunk.RMUSUQ7M.js";
+
+// src/react/checkbox-group/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-checkbox-group";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsCheckboxGroup,
+  react: React,
+  events: {},
+  displayName: "CsCheckboxGroup"
+});
+var checkbox_group_default = reactWrapper;
+
+export {
+  checkbox_group_default
+};

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

@@ -0,0 +1,71 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  tab_panel_styles_default
+} from "./chunk.ALOW6ETZ.js";
+import {
+  e
+} from "./chunk.NZZROG3B.js";
+import {
+  watch
+} from "./chunk.CZUH2SE2.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.LQ7XXMRT.js";
+import {
+  b
+} from "./chunk.QZ4WRTL6.js";
+import {
+  __decorateClass
+} from "./chunk.RMUSUQ7M.js";
+
+// src/components/tab-panel/tab-panel.ts
+var id = 0;
+var CsTabPanel = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `cs-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+    this.role = "tabpanel";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = (this.id || "").length > 0 ? this.id : this.componentId;
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return b`
+      <slot
+        class=${e({
+      "tab-panel": true,
+      "tab-panel-active": this.active
+    })}
+      ></slot>
+    `;
+  }
+};
+CsTabPanel.css = tab_panel_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], CsTabPanel.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsTabPanel.prototype, "active", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsTabPanel.prototype, "role", 2);
+__decorateClass([
+  watch("active")
+], CsTabPanel.prototype, "handleActiveChange", 1);
+CsTabPanel = __decorateClass([
+  customElement("cs-tab-panel")
+], CsTabPanel);
+
+export {
+  CsTabPanel
+};

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

@@ -0,0 +1,44 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.WH4RAXRT.js";
+
+// src/components/radio-group/radio-group.styles.ts
+var radio_group_styles_default = i`
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .label {
+    padding: 0;
+  }
+
+  .radio-group-required .label::after {
+    content: var(--cs-form-control-required-content);
+    margin-inline-start: var(--cs-form-control-required-content-offset);
+  }
+
+  [part~='form-control-input'] {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0; /* Radios handle their own spacing */
+  }
+
+  /* Horizontal */
+  :host([orientation='horizontal']) [part~='form-control-input'] {
+    flex-direction: row;
+  }
+
+  /* Help text */
+  [part~='hint'] {
+    margin-block-start: 0.5em;
+  }
+`;
+
+export {
+  radio_group_styles_default
+};

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

@@ -0,0 +1,51 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  e,
+  i,
+  t
+} from "./chunk.FHWZXZ3Z.js";
+import {
+  E
+} from "./chunk.QZ4WRTL6.js";
+
+// ../../node_modules/lit-html/directives/style-map.js
+var n = "important";
+var i2 = " !" + n;
+var o = e(class extends i {
+  constructor(t2) {
+    if (super(t2), t2.type !== t.ATTRIBUTE || "style" !== t2.name || t2.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t2) {
+    return Object.keys(t2).reduce((e2, r) => {
+      const s = t2[r];
+      return null == s ? e2 : e2 + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(e2, [r]) {
+    const { style: s } = e2.element;
+    if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+    for (const t2 of this.ft) null == r[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
+    for (const t2 in r) {
+      const e3 = r[t2];
+      if (null != e3) {
+        this.ft.add(t2);
+        const r2 = "string" == typeof e3 && e3.endsWith(i2);
+        t2.includes("-") || r2 ? s.setProperty(t2, r2 ? e3.slice(0, -11) : e3, r2 ? n : "") : s[t2] = e3;
+      }
+    }
+    return E;
+  }
+});
+
+export {
+  o
+};
+/*! Bundled license information:
+
+lit-html/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/