@cruglobal/cornerstone-components 0.6.2 → 0.7.0

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

@@ -1,92 +0,0 @@
-/*! 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

@@ -1,127 +0,0 @@
-/*! 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

@@ -1,13 +0,0 @@
-/*! 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

@@ -1,58 +0,0 @@
-/*! 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

@@ -1,342 +0,0 @@
-/*! 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
-};