@cruglobal/cornerstone-components 0.7.0 → 0.7.1

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

@@ -0,0 +1,342 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  radio_group_styles_default
+} from "./chunk.N4PLCA36.js";
+import {
+  RequiredValidator
+} from "./chunk.PYK3VMXX.js";
+import {
+  form_control_styles_default
+} from "./chunk.DS56Y5EI.js";
+import {
+  HasSlotController
+} from "./chunk.RM3ZGTE7.js";
+import {
+  uniqueId
+} from "./chunk.C2NBLHP2.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.QEJT5FC2.js";
+import {
+  size_styles_default
+} from "./chunk.KSRDPL74.js";
+import {
+  e as e2
+} from "./chunk.37SDUJTL.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.7X4WUQGJ.js";
+import {
+  o
+} from "./chunk.T7OKDWRT.js";
+import {
+  b
+} from "./chunk.JMULJQL6.js";
+import {
+  __decorateClass
+} from "./chunk.RNZTKRV7.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.ANOUGVNW.js

@@ -0,0 +1,85 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  progress_bar_styles_default
+} from "./chunk.ZJYDP5AS.js";
+import {
+  clamp
+} from "./chunk.C2NBLHP2.js";
+import {
+  o
+} from "./chunk.WG6DIWSE.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.7X4WUQGJ.js";
+import {
+  LocalizeController
+} from "./chunk.NVIHCRM4.js";
+import {
+  b
+} from "./chunk.JMULJQL6.js";
+import {
+  __decorateClass
+} from "./chunk.RNZTKRV7.js";
+
+// src/components/progress-bar/progress-bar.ts
+var CsProgressBar = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.indeterminate = false;
+    this.label = "";
+  }
+  willUpdate(changedProperties) {
+    if (this.style == null) {
+      this.setStyleProperty("--percentage", `${clamp(this.value, 0, 100)}%`);
+    }
+    super.willUpdate(changedProperties);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      requestAnimationFrame(() => {
+        this.style.setProperty("--percentage", `${clamp(this.value, 0, 100)}%`);
+      });
+    }
+    super.updated(changedProperties);
+  }
+  render() {
+    return b`
+      <div
+        part="progress-bar"
+        class="progress-bar"
+        role="progressbar"
+        title=${o(this.title)}
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? "0" : this.value}
+      >
+        <div part="indicator" class="indicator">
+          ${!this.indeterminate ? b` <slot id="label" part="label" class="label"></slot> ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+CsProgressBar.css = progress_bar_styles_default;
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsProgressBar.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsProgressBar.prototype, "indeterminate", 2);
+__decorateClass([
+  n()
+], CsProgressBar.prototype, "label", 2);
+CsProgressBar = __decorateClass([
+  customElement("cs-progress-bar")
+], CsProgressBar);
+
+export {
+  CsProgressBar
+};

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

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

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

@@ -0,0 +1,180 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  registerTranslation
+} from "./chunk.FGOIIDYF.js";
+
+// src/translations/en.ts
+var translation = {
+  $code: "en",
+  $name: "English",
+  $dir: "ltr",
+  am: "AM",
+  autosizeColumn: "Autosize column",
+  captions: "Captions",
+  carousel: "Carousel",
+  chooseDate: "Choose date",
+  chooseDecade: "Choose decade",
+  chooseMonth: "Choose month",
+  chooseTime: "Choose time",
+  chooseYear: "Choose year",
+  clearEntry: "Clear entry",
+  clearFilter: "Clear filter",
+  clearSort: "Clear sort",
+  close: "Close",
+  closeCalendar: "Close calendar",
+  closeTimeInput: "Close time picker",
+  collapseRow: "Collapse row",
+  columnMenu: "Column options",
+  columnMovedToPosition: (label, position, total) => `${label} moved to position ${position} of ${total}`,
+  columns: "Columns",
+  compactPageXOfY: (page, total) => `${page} of ${total}`,
+  copied: "Copied",
+  copy: "Copy",
+  createOption: (value) => `Create "${value}"`,
+  currentlyPlaying: "currently playing",
+  currentValue: "Current value",
+  date: "Date",
+  datePickerKeyboardHelp: "Use arrow keys to change values; press Alt+Down Arrow to open the calendar.",
+  day: "Day",
+  dayPeriod: "AM/PM",
+  decrement: "Decrement",
+  deselectAllRows: "Deselect all rows",
+  dropFileHere: "Drop file here or click to browse",
+  dropFilesHere: "Drop files here or click to browse",
+  empty: "Empty",
+  endDate: "End date",
+  enterFullscreen: "Enter fullscreen",
+  error: "Error",
+  exitFullscreen: "Exit fullscreen",
+  expandRow: "Expand row",
+  filterByColumn: (label) => `Filter by ${label}`,
+  filterFrom: "From",
+  filterMax: "Max",
+  filterMin: "Min",
+  filterTo: "To",
+  firstPage: "First page",
+  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
+  hideColumn: "Hide column",
+  hidePassword: "Hide password",
+  hour: "Hour",
+  incompleteDate: "Enter a valid date.",
+  increment: "Increment",
+  jumpBackwardX: (count) => `Jump back ${count} pages`,
+  jumpForwardX: (count) => `Jump forward ${count} pages`,
+  lastPage: "Last page",
+  loading: "Loading",
+  minute: "Minute",
+  month: "Month",
+  moreOptions: "More Options",
+  mute: "Mute",
+  nextDecade: "Next decade",
+  nextMonth: "Next month",
+  nextPage: "Next page",
+  nextSlide: "Next slide",
+  nextVideo: "Next Video",
+  nextYear: "Next year",
+  noData: "No data",
+  noResults: "No matching results",
+  now: "Now",
+  numCharacters: (num) => {
+    if (num === 1) {
+      return "1 character";
+    }
+    return `${num} characters`;
+  },
+  numCharactersRemaining: (num) => {
+    if (num === 1) {
+      return "1 character remaining";
+    }
+    return `${num} characters remaining`;
+  },
+  numOptionsSelected: (num) => {
+    if (num === 0) {
+      return "No options selected";
+    }
+    if (num === 1) {
+      return "1 option selected";
+    }
+    return `${num} options selected`;
+  },
+  numRowsCopied: (num) => num === 1 ? "1 row copied" : `${num} rows copied`,
+  numRowsSelected: (num) => num === 1 ? "1 row selected" : `${num} rows selected`,
+  pageXOfY: (page, total) => `Page ${page} of ${total}`,
+  pagination: "Pagination",
+  pause: "Pause",
+  pauseAnimation: "Pause animation",
+  pictureInPicture: "Picture in picture",
+  pinLeft: "Pin left",
+  pinRight: "Pin right",
+  play: "Play",
+  playAnimation: "Play animation",
+  playbackSpeed: "Playback speed",
+  playlist: "Playlist",
+  pm: "PM",
+  previousDecade: "Previous decade",
+  previousMonth: "Previous month",
+  previousPage: "Previous page",
+  previousSlide: "Previous slide",
+  previousVideo: "Previous video",
+  previousYear: "Previous year",
+  progress: "Progress",
+  rangeTooLong: (max) => {
+    if (max === 1) {
+      return "Select a range no longer than 1 day";
+    }
+    return `Select a range no longer than ${max} days`;
+  },
+  rangeTooShort: (min) => {
+    if (min === 1) {
+      return "Select a range at least 1 day long";
+    }
+    return `Select a range at least ${min} days long`;
+  },
+  readonly: "Read-only",
+  remove: "Remove",
+  resetColumns: "Reset columns",
+  resize: "Resize",
+  resizeColumn: "Resize column",
+  rowsPerPage: "Rows per page",
+  scrollableRegion: "Scrollable region",
+  scrollToEnd: "Scroll to end",
+  scrollToStart: "Scroll to start",
+  search: "Search",
+  second: "Second",
+  seek: "Seek",
+  seekProgress: (current, duration) => `${current} of ${duration}`,
+  selectAColorFromTheScreen: "Select a color from the screen",
+  selectAllRows: "Select all rows",
+  selected: "Selected",
+  selectedDateLabel: (date) => `Selected: ${date}`,
+  selectedRangeLabel: (range) => `Selected range: ${range}`,
+  selectGroup: "Select group",
+  selectionCleared: "Selection cleared",
+  selectRow: "Select row",
+  showingNofMRows: (shown, total) => `Showing ${shown} of ${total} rows`,
+  showingXtoYofZ: (start, end, total) => `${start}\u2013${end} of ${total}`,
+  showPassword: "Show password",
+  slideNum: (slide) => `Slide ${slide}`,
+  sortAscending: "Sort ascending",
+  sortColumn: "Sort column",
+  sortDescending: "Sort descending",
+  startDate: "Start date",
+  time: "Time",
+  timeInputKeyboardHelp: "Use arrow keys to change values; press Alt+Down Arrow to open the time picker.",
+  today: "Today",
+  toggleColorFormat: "Toggle color format",
+  unmute: "Unmute",
+  unpin: "Unpin",
+  unpinColumn: "Unpin column",
+  videoPlayer: "Video player",
+  volume: "Volume",
+  year: "Year",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out"
+};
+registerTranslation(translation);
+var en_default = translation;
+
+export {
+  en_default
+};