@cruglobal/cornerstone-components 0.1.3 → 0.6.2

package/dist/bundled/chunks/chunk.6ZEMDJBR.js

@@ -0,0 +1,92 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.VO5P54JZ.js";
+import {
+  LocalizeController
+} from "./chunk.QUVFD4CZ.js";
+import {
+  b
+} from "./chunk.B2T6AD2P.js";
+import {
+  __decorateClass
+} from "./chunk.QQCENPXN.js";
+
+// src/components/format-date/format-date.ts
+var CsFormatDate = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.date = /* @__PURE__ */ new Date();
+    this.hourFormat = "auto";
+  }
+  static get styles() {
+    return [];
+  }
+  render() {
+    const date = new Date(this.date);
+    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
+    if (isNaN(date.getMilliseconds())) {
+      return void 0;
+    }
+    const displayDate = this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12
+    });
+    return b`<time datetime=${date.toISOString()}>${displayDate}</time>`;
+  }
+};
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "date", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "era", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "year", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "month", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "day", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "hour", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "minute", 2);
+__decorateClass([
+  n()
+], CsFormatDate.prototype, "second", 2);
+__decorateClass([
+  n({ attribute: "time-zone-name" })
+], CsFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  n({ attribute: "time-zone" })
+], CsFormatDate.prototype, "timeZone", 2);
+__decorateClass([
+  n({ attribute: "hour-format" })
+], CsFormatDate.prototype, "hourFormat", 2);
+CsFormatDate = __decorateClass([
+  customElement("cs-format-date")
+], CsFormatDate);
+
+export {
+  CsFormatDate
+};

package/dist/bundled/chunks/chunk.74O2IAEM.js

@@ -0,0 +1,127 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.CRKHH5GL.js";
+
+// src/components/accordion-item/accordion-item.styles.ts
+var accordion_item_styles_default = i`
+  @layer cs-component {
+    :host {
+      --spacing: var(--cs-space-m);
+      --show-duration: var(--cs-transition-normal);
+      --hide-duration: var(--cs-transition-normal);
+      --easing: var(--cs-transition-easing);
+
+      display: block;
+    }
+
+    :host(:not(:first-child)) {
+      border-top: var(--cs-panel-border-width) var(--cs-panel-border-style) var(--cs-color-surface-border);
+    }
+
+    :host([appearance='filled']) {
+      background-color: var(--cs-color-neutral-fill-quiet);
+    }
+
+    :host([appearance='filled']:not(:first-child)) {
+      margin-block-start: var(--cs-panel-border-width);
+      border-top: none;
+    }
+
+    [part~='heading'] {
+      margin: 0;
+      font: inherit;
+    }
+
+    [part~='button'] {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing);
+      padding: var(--spacing);
+      width: 100%;
+      background: none;
+      border: none;
+      cursor: pointer;
+      text-align: start;
+      color: var(--cs-color-text-normal);
+      font: inherit;
+      font-weight: var(--cs-font-weight-semibold);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: var(--cs-focus-ring);
+        /* Inset by the full ring width + offset so the parent's overflow:hidden doesn't clip it */
+        outline-offset: calc(0px - var(--cs-focus-ring-width) - var(--cs-focus-ring-offset));
+      }
+    }
+
+    /* Icon at end (default) */
+    :host([icon-placement='end']) [part~='button'] {
+      justify-content: space-between;
+    }
+
+    /* Icon at start */
+    :host([icon-placement='start']) [part~='button'] {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) [part~='button'] {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host(:first-child) [part~='button'] {
+      border-top-left-radius: var(--cs-panel-border-radius);
+      border-top-right-radius: var(--cs-panel-border-radius);
+    }
+
+    :host(:last-child:not([expanded])) [part~='button'] {
+      border-bottom-left-radius: var(--cs-panel-border-radius);
+      border-bottom-right-radius: var(--cs-panel-border-radius);
+    }
+
+    [part~='icon'] {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      color: var(--cs-color-text-quiet);
+      transition: rotate var(--hide-duration) var(--easing);
+    }
+
+    :host([expanded]) [part~='icon'] {
+      rotate: 90deg;
+      transition-duration: var(--show-duration);
+    }
+
+    :host([expanded]:dir(rtl)) [part~='icon'] {
+      rotate: -90deg;
+    }
+
+    .body {
+      overflow: hidden;
+      color: var(--cs-color-text-quiet);
+    }
+
+    :host([expanded]) .body:not(.animating) {
+      overflow: visible;
+    }
+
+    .content {
+      display: block;
+      padding: 0 var(--spacing) var(--spacing);
+    }
+  }
+`;
+
+export {
+  accordion_item_styles_default
+};

package/dist/bundled/chunks/chunk.766IYUWO.js

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.6.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.76Q5DGFE.js

@@ -0,0 +1,58 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.VO5P54JZ.js";
+import {
+  LocalizeController
+} from "./chunk.QUVFD4CZ.js";
+import {
+  __decorateClass
+} from "./chunk.QQCENPXN.js";
+
+// src/components/format-bytes/format-bytes.ts
+var CsFormatBytes = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  static get styles() {
+    return [];
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], CsFormatBytes.prototype, "value", 2);
+__decorateClass([
+  n()
+], CsFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  n()
+], CsFormatBytes.prototype, "display", 2);
+CsFormatBytes = __decorateClass([
+  customElement("cs-format-bytes")
+], CsFormatBytes);
+
+export {
+  CsFormatBytes
+};

package/dist/bundled/chunks/chunk.7FYJ6LGB.js

@@ -0,0 +1,342 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  radio_group_styles_default
+} from "./chunk.GNKFO4G2.js";
+import {
+  RequiredValidator
+} from "./chunk.BWRQEKED.js";
+import {
+  form_control_styles_default
+} from "./chunk.GNP22RG3.js";
+import {
+  HasSlotController
+} from "./chunk.25L55TBI.js";
+import {
+  uniqueId
+} from "./chunk.VJSGOTOR.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.6URCDSBB.js";
+import {
+  size_styles_default
+} from "./chunk.ZJRKBGXI.js";
+import {
+  e as e2
+} from "./chunk.WDXZHMSD.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.VO5P54JZ.js";
+import {
+  o
+} from "./chunk.CRKHH5GL.js";
+import {
+  b
+} from "./chunk.B2T6AD2P.js";
+import {
+  __decorateClass
+} from "./chunk.QQCENPXN.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
+};