@cruglobal/cornerstone-components 0.6.1 → 0.7.0

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

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

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

@@ -0,0 +1,75 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/offset.ts
+function getOffset(element, parent) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}
+
+// src/internal/scroll.ts
+var locks = /* @__PURE__ */ new Set();
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+function getExistingBodyPadding() {
+  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ""));
+  if (isNaN(padding) || !padding) {
+    return 0;
+  }
+  return padding;
+}
+function lockBodyScrolling(lockingEl) {
+  locks.add(lockingEl);
+  if (!document.documentElement.classList.contains("cs-scroll-lock")) {
+    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
+    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
+    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
+      scrollbarGutterProperty = "stable";
+    }
+    if (scrollbarWidth < 2) {
+      scrollbarGutterProperty = "";
+    }
+    document.documentElement.style.setProperty("--cs-scroll-lock-gutter", scrollbarGutterProperty);
+    document.documentElement.classList.add("cs-scroll-lock");
+    document.documentElement.style.setProperty("--cs-scroll-lock-size", `${scrollbarWidth}px`);
+  }
+}
+function unlockBodyScrolling(lockingEl) {
+  locks.delete(lockingEl);
+  if (locks.size === 0) {
+    document.documentElement.classList.remove("cs-scroll-lock");
+    document.documentElement.style.removeProperty("--cs-scroll-lock-size");
+  }
+}
+function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+  if (direction === "horizontal" || direction === "both") {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+  if (direction === "vertical" || direction === "both") {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}
+
+export {
+  lockBodyScrolling,
+  unlockBodyScrolling,
+  scrollIntoView
+};

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

@@ -0,0 +1,342 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  radio_group_styles_default
+} from "./chunk.POBVGGST.js";
+import {
+  RequiredValidator
+} from "./chunk.JWCSDME6.js";
+import {
+  form_control_styles_default
+} from "./chunk.LWG5H7OI.js";
+import {
+  HasSlotController
+} from "./chunk.IHXNGREP.js";
+import {
+  uniqueId
+} from "./chunk.V6RGSF6J.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.HNXB5BK2.js";
+import {
+  size_styles_default
+} from "./chunk.WMLOKPMQ.js";
+import {
+  e as e2
+} from "./chunk.VKLPFGMH.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.6GJWBDJU.js";
+import {
+  o
+} from "./chunk.4XDNAFUH.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/radio-group/radio-group.ts
+var CsRadioGroup = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super();
+    this.hasSlotController = new HasSlotController(this, "hint", "label");
+    this.label = "";
+    this.hint = "";
+    this.name = null;
+    this.disabled = false;
+    this.orientation = "vertical";
+    this._value = null;
+    this.defaultValue = this.getAttribute("value") || null;
+    this.required = false;
+    this.ssrLabel = false;
+    this.ssrHint = false;
+    this.handleRadioClick = (e3) => {
+      const clickedRadio = e3.target.closest("cs-radio");
+      if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {
+        return;
+      }
+      const oldValue = this.value;
+      this.value = clickedRadio.value;
+      clickedRadio.checked = true;
+      const radios = this.getAllRadios();
+      for (const radio of radios) {
+        if (clickedRadio === radio) {
+          continue;
+        }
+        radio.checked = false;
+        radio.setAttribute("tabindex", "-1");
+      }
+      if (this.value !== oldValue) {
+        this.updateComplete.then(() => {
+          this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+          this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        });
+      }
+    };
+    if (!o) {
+      this.addEventListener("keydown", this.handleKeyDown);
+      this.addEventListener("click", this.handleRadioClick);
+    }
+  }
+  static get validators() {
+    return [
+      ...super.validators,
+      RequiredValidator({
+        validationElement: () => Object.assign(document.createElement("input"), {
+          required: true,
+          type: "radio",
+          // we need an id that's guaranteed to be unique; users will never see this
+          name: uniqueId("__wa-radio")
+        })
+      })
+    ];
+  }
+  get value() {
+    if (this.valueHasChanged) {
+      return this._value;
+    }
+    return this._value ?? this.defaultValue;
+  }
+  set value(val) {
+    if (typeof val === "number") {
+      val = String(val);
+    }
+    this.valueHasChanged = true;
+    this._value = val;
+  }
+  /**
+   * We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
+   * the first radio element.
+   */
+  get validationTarget() {
+    if (o) {
+      return void 0;
+    }
+    const radio = this.querySelector(":is(cs-radio):not([disabled])");
+    if (!radio) {
+      return void 0;
+    }
+    return radio;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled") || changedProperties.has("size") || changedProperties.has("value") || changedProperties.has("defaultValue")) {
+      this.syncRadioElements();
+    }
+  }
+  formResetCallback(...args) {
+    this._value = null;
+    super.formResetCallback(...args);
+    this.syncRadioElements();
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("cs-radio")];
+  }
+  handleLabelClick() {
+    this.focus();
+  }
+  async syncRadioElements() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio, index) => {
+      if (this.size) {
+        radio.setAttribute("size", this.size);
+      }
+      radio.toggleAttribute("data-cs-radio-horizontal", this.orientation !== "vertical");
+      radio.toggleAttribute("data-cs-radio-vertical", this.orientation === "vertical");
+      radio.toggleAttribute("data-cs-radio-first", index === 0);
+      radio.toggleAttribute("data-cs-radio-inner", index !== 0 && index !== radios.length - 1);
+      radio.toggleAttribute("data-cs-radio-last", index === radios.length - 1);
+      radio.forceDisabled = this.disabled;
+    });
+    await Promise.all(
+      radios.map(async (radio) => {
+        await radio.updateComplete;
+        if (!radio.disabled && radio.value === this.value) {
+          radio.checked = true;
+        } else {
+          radio.checked = false;
+        }
+      })
+    );
+    if (this.disabled) {
+      radios.forEach((radio) => {
+        radio.tabIndex = -1;
+      });
+    } else {
+      const enabledRadios = radios.filter((radio) => !radio.disabled);
+      const checkedRadio = enabledRadios.find((radio) => radio.checked);
+      if (enabledRadios.length > 0) {
+        if (checkedRadio) {
+          enabledRadios.forEach((radio) => {
+            radio.tabIndex = radio.checked ? 0 : -1;
+          });
+        } else {
+          enabledRadios.forEach((radio, index) => {
+            radio.tabIndex = index === 0 ? 0 : -1;
+          });
+        }
+      }
+      radios.filter((radio) => radio.disabled).forEach((radio) => {
+        radio.tabIndex = -1;
+      });
+    }
+  }
+  handleKeyDown(event) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key) || this.disabled) {
+      return;
+    }
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    if (radios.length <= 0) {
+      return;
+    }
+    event.preventDefault();
+    const oldValue = this.value;
+    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (!index) {
+      index = 0;
+    }
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+    const hasRadioButtons = radios.some((radio) => radio.tagName.toLowerCase() === "cs-radio-button");
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      if (!hasRadioButtons) {
+        radio.setAttribute("tabindex", "-1");
+      }
+    });
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    if (!hasRadioButtons) {
+      radios[index].setAttribute("tabindex", "0");
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot.querySelector("button").focus();
+    }
+    if (this.value !== oldValue) {
+      this.updateComplete.then(() => {
+        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      });
+    }
+    event.preventDefault();
+  }
+  /** Sets focus on the radio group. */
+  focus(options) {
+    if (this.disabled) {
+      return;
+    }
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+    const radioToFocus = checked || firstEnabledRadio;
+    if (radioToFocus) {
+      radioToFocus.focus(options);
+    }
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHint = this.hint ? true : !!hasHintSlot;
+    return b`
+      <fieldset
+        part="form-control"
+        class=${e2({
+      "form-control": true,
+      "form-control-radio-group": true,
+      "form-control-has-label": hasLabel
+    })}
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="hint"
+        aria-errormessage="error-message"
+        aria-orientation=${this.orientation}
+      >
+        <label
+          part="form-control-label"
+          id="label"
+          class=${e2({
+      label: true,
+      "has-label": hasLabel
+    })}
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
+
+        <slot
+          id="hint"
+          name="hint"
+          part="hint"
+          class=${e2({
+      "has-slotted": hasHint
+    })}
+          aria-hidden=${hasHint ? "false" : "true"}
+          >${this.hint}</slot
+        >
+      </fieldset>
+    `;
+  }
+};
+CsRadioGroup.css = [size_styles_default, form_control_styles_default, radio_group_styles_default];
+//
+// We need this because if we don't have it, FormValidation yells at us that it's "not focusable".
+//   If we use `this.tabIndex = -1` we can't focus the radio inside.
+//
+CsRadioGroup.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+__decorateClass([
+  e("slot:not([name])")
+], CsRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  n()
+], CsRadioGroup.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hint" })
+], CsRadioGroup.prototype, "hint", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsRadioGroup.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsRadioGroup.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  r()
+], CsRadioGroup.prototype, "value", 1);
+__decorateClass([
+  n({ attribute: "value", reflect: true })
+], CsRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsRadioGroup.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsRadioGroup.prototype, "required", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "ssr-label" })
+], CsRadioGroup.prototype, "ssrLabel", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "ssr-hint" })
+], CsRadioGroup.prototype, "ssrHint", 2);
+CsRadioGroup = __decorateClass([
+  customElement("cs-radio-group")
+], CsRadioGroup);
+CsRadioGroup.disableWarning?.("change-in-update");
+
+export {
+  CsRadioGroup
+};

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

@@ -0,0 +1,256 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsErrorEvent
+} from "./chunk.PLLLVECA.js";
+import {
+  CsLoadEvent
+} from "./chunk.6MA5SVB3.js";
+import {
+  icon_styles_default
+} from "./chunk.GA36QVE5.js";
+import {
+  watch
+} from "./chunk.N6DONW5L.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n,
+  r
+} from "./chunk.6GJWBDJU.js";
+import {
+  l
+} from "./chunk.BBFIYGZZ.js";
+import {
+  getDefaultIconFamily,
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.TN255ITC.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/icon/icon.ts
+var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
+var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var CsIcon = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.svg = null;
+    this.weight = 400;
+    this.autoWidth = false;
+    this.label = "";
+    this.library = "default";
+    this.rotate = 0;
+    /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
+    this.resolveIcon = async (url, library) => {
+      let fileData;
+      if (library?.spriteSheet) {
+        if (!this.hasUpdated) {
+          await this.updateComplete;
+        }
+        this.svg = b`<svg part="svg">
+        <use part="use" href="${url}"></use>
+      </svg>`;
+        await this.updateComplete;
+        const svg = this.shadowRoot.querySelector("[part='svg']");
+        if (typeof library.mutator === "function") {
+          library.mutator(svg, this);
+        }
+        return this.svg;
+      }
+      try {
+        fileData = await fetch(url, { mode: "cors" });
+        if (!fileData.ok) {
+          return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
+        }
+      } catch {
+        return RETRYABLE_ERROR;
+      }
+      try {
+        const div = document.createElement("div");
+        div.innerHTML = await fileData.text();
+        const svg = div.firstElementChild;
+        if (svg?.tagName.toLowerCase() !== "svg") {
+          return CACHEABLE_ERROR;
+        }
+        if (!parser) {
+          parser = new DOMParser();
+        }
+        const doc = parser.parseFromString(svg.outerHTML, "text/html");
+        const svgEl = doc.body.querySelector("svg");
+        if (!svgEl) {
+          return CACHEABLE_ERROR;
+        }
+        svgEl.part.add("svg");
+        return document.adoptNode(svgEl);
+      } catch {
+        return CACHEABLE_ERROR;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.hasAttribute("rotate")) {
+      this.style.setProperty("--rotate-angle", `${this.rotate}deg`);
+    }
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  async getIconSource() {
+    const library = getIconLibrary(this.library);
+    const family = this.family || getDefaultIconFamily();
+    if (this.name && library) {
+      const autoWidth = this.canvas === "auto" || this.autoWidth;
+      let url;
+      try {
+        url = await library.resolver(this.name, family, this.variant, autoWidth, this.weight);
+      } catch {
+        url = void 0;
+      }
+      return { url, fromLibrary: true };
+    }
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    const { url, fromLibrary } = await this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
+    if (!url) {
+      this.svg = null;
+      return;
+    }
+    let iconResolver = iconCache.get(url);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon(url, library);
+      iconCache.set(url, iconResolver);
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(url);
+    }
+    const sourceAfterFetch = await this.getIconSource();
+    if (url !== sourceAfterFetch.url) {
+      return;
+    }
+    if (l(svg)) {
+      this.svg = svg;
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.dispatchEvent(new CsErrorEvent());
+        break;
+      default:
+        this.svg = svg.cloneNode(true);
+        library?.mutator?.(this.svg, this);
+        this.dispatchEvent(new CsLoadEvent());
+    }
+  }
+  willUpdate(changedProperties) {
+    if (!this.style) {
+      this.setStyleProperty("--rotate-angle", `${this.rotate}deg`);
+    }
+    return super.willUpdate(changedProperties);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const library = getIconLibrary(this.library);
+    if (this.hasAttribute("rotate")) {
+      this.style.setProperty("--rotate-angle", `${this.rotate}deg`);
+    }
+    const svg = this.shadowRoot?.querySelector("svg");
+    if (svg) {
+      library?.mutator?.(svg, this);
+    }
+  }
+  render() {
+    if (this.hasUpdated) {
+      return this.svg;
+    }
+    return b`<svg part="svg" width="16" height="16" viewBox="0 0 16 16"></svg>`;
+  }
+};
+CsIcon.css = icon_styles_default;
+__decorateClass([
+  r()
+], CsIcon.prototype, "svg", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsIcon.prototype, "name", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsIcon.prototype, "family", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsIcon.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsIcon.prototype, "weight", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsIcon.prototype, "canvas", 2);
+__decorateClass([
+  n({ attribute: "auto-width", type: Boolean, reflect: true })
+], CsIcon.prototype, "autoWidth", 2);
+__decorateClass([
+  n()
+], CsIcon.prototype, "src", 2);
+__decorateClass([
+  n()
+], CsIcon.prototype, "label", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsIcon.prototype, "library", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsIcon.prototype, "rotate", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], CsIcon.prototype, "flip", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], CsIcon.prototype, "animation", 2);
+__decorateClass([
+  watch("label")
+], CsIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["family", "name", "library", "variant", "weight", "src", "autoWidth", "canvas"], {
+    waitUntilFirstUpdate: true
+  })
+], CsIcon.prototype, "setIcon", 1);
+CsIcon = __decorateClass([
+  customElement("cs-icon")
+], CsIcon);
+
+export {
+  CsIcon
+};

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

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