@cruglobal/cornerstone-components 0.1.0 → 0.1.2

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

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.3OGRFC36.js";
+import {
+  CsPopover
+} from "./chunk.VKBKDT5V.js";
+import {
+  __toESM
+} from "./chunk.RMUSUQ7M.js";
+
+// src/react/popover/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-popover";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsPopover,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsPopover"
+});
+var popover_default = reactWrapper;
+
+export {
+  popover_default
+};

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

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

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

@@ -0,0 +1,342 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  radio_group_styles_default
+} from "./chunk.MTI5GJJY.js";
+import {
+  RequiredValidator
+} from "./chunk.RSLXLQ7Z.js";
+import {
+  form_control_styles_default
+} from "./chunk.GJCOW76P.js";
+import {
+  HasSlotController
+} from "./chunk.YU2E4JNS.js";
+import {
+  uniqueId
+} from "./chunk.SD5D3CA5.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.OWQSTBI7.js";
+import {
+  size_styles_default
+} from "./chunk.F524OZ6M.js";
+import {
+  e as e2
+} from "./chunk.NZZROG3B.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.LQ7XXMRT.js";
+import {
+  o
+} from "./chunk.WH4RAXRT.js";
+import {
+  b
+} from "./chunk.QZ4WRTL6.js";
+import {
+  __decorateClass
+} from "./chunk.RMUSUQ7M.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.YTVB3RDP.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/dismissible-stack.ts
+var dismissibleStack = [];
+function registerDismissible(key) {
+  dismissibleStack.push(key);
+}
+function unregisterDismissible(key) {
+  for (let i = dismissibleStack.length - 1; i >= 0; i--) {
+    if (dismissibleStack[i] === key) {
+      dismissibleStack.splice(i, 1);
+      break;
+    }
+  }
+}
+function isTopDismissible(key) {
+  return dismissibleStack.length > 0 && dismissibleStack[dismissibleStack.length - 1] === key;
+}
+
+export {
+  registerDismissible,
+  unregisterDismissible,
+  isTopDismissible
+};

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

@@ -0,0 +1,66 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/slot.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    if (!this.host.childNodes) {
+      return false;
+    }
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        if (tagName === "cs-visually-hidden") {
+          return false;
+        }
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return Boolean(this.host.querySelector?.(`:scope > [slot="${name}"]`));
+  }
+  /**
+   * @param slotName     - Name of the slot to look for
+   * @param propertyName - Generally we infer via the matching `ssr*` property on the host, but in cases where its different, you can specify a manual property name.
+   */
+  test(slotName, propertyName) {
+    if (propertyName && this.host.didSSR && !this.host.hasUpdated) {
+      return Boolean(this.host[propertyName]);
+    }
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    const shadowRoot = this.host.shadowRoot;
+    if (shadowRoot && "addEventListener" in shadowRoot) {
+      shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+    }
+  }
+  hostDisconnected() {
+    const shadowRoot = this.host.shadowRoot;
+    if (shadowRoot && "removeEventListener" in shadowRoot) {
+      shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
+    }
+  }
+};
+
+export {
+  HasSlotController
+};

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

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

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

@@ -0,0 +1,31 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.WH4RAXRT.js";
+
+// src/components/carousel-item/carousel-item.styles.ts
+var carousel_item_styles_default = i`
+  :host {
+    --aspect-ratio: inherit;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+
+  ::slotted(img) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+`;
+
+export {
+  carousel_item_styles_default
+};

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

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