@cruglobal/cornerstone-components 0.6.2 → 0.7.0

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

@@ -0,0 +1,253 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  checkbox_styles_default
+} from "./chunk.BUVLT35N.js";
+import {
+  RequiredValidator
+} from "./chunk.JWCSDME6.js";
+import {
+  form_control_styles_default
+} from "./chunk.LWG5H7OI.js";
+import {
+  l
+} from "./chunk.HEKJPFBD.js";
+import {
+  HasSlotController
+} from "./chunk.IHXNGREP.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.HNXB5BK2.js";
+import {
+  size_styles_default
+} from "./chunk.WMLOKPMQ.js";
+import {
+  o
+} from "./chunk.PKFLKOSS.js";
+import {
+  e as e2
+} from "./chunk.VKLPFGMH.js";
+import {
+  watch
+} from "./chunk.N6DONW5L.js";
+import {
+  customElement,
+  e,
+  n
+} from "./chunk.6GJWBDJU.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/checkbox/checkbox.ts
+var CsCheckbox = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "hint");
+    this.title = "";
+    // make reactive to pass through
+    this._value = this.getAttribute("value") ?? null;
+    this.size = "m";
+    this.disabled = false;
+    this.indeterminate = false;
+    this._checked = null;
+    this.defaultChecked = this.hasAttribute("checked");
+    this.required = false;
+    this.hint = "";
+    this.ssrHint = false;
+  }
+  static get validators() {
+    return [
+      ...super.validators,
+      RequiredValidator({
+        validationProperty: "checked",
+        // Use a checkbox so we get "free" translation strings.
+        validationElement: () => Object.assign(document.createElement("input"), {
+          type: "checkbox",
+          required: true
+        })
+      })
+    ];
+  }
+  /** The value of the checkbox, submitted as a name/value pair with form data. */
+  get value() {
+    return this._value ?? "on";
+  }
+  set value(val) {
+    this._value = val;
+  }
+  get checked() {
+    if (this.valueHasChanged) {
+      return Boolean(this._checked);
+    }
+    return this._checked ?? this.defaultChecked;
+  }
+  set checked(val) {
+    this._checked = Boolean(val);
+    this.valueHasChanged = true;
+  }
+  handleClick() {
+    this.hasInteracted = true;
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.updateComplete.then(() => {
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.handleDefaultCheckedChange();
+      });
+      return;
+    }
+    this.handleDefaultCheckedChange();
+  }
+  handleDefaultCheckedChange() {
+    this.handleValueOrCheckedChange();
+  }
+  handleValueOrCheckedChange() {
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.handleValueOrCheckedChange();
+      });
+      return;
+    }
+    this.setValue(this.checked ? this.value : null, this._value);
+    this.updateValidity();
+  }
+  handleStateChange() {
+    if (this.hasUpdated) {
+      this.input.checked = this.checked;
+      this.input.indeterminate = this.indeterminate;
+    }
+    this.customStates.set("checked", this.checked);
+    this.customStates.set("indeterminate", this.indeterminate);
+    this.updateValidity();
+  }
+  handleDisabledChange() {
+    this.customStates.set("disabled", this.disabled);
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("value") || changedProperties.has("checked") || changedProperties.has("defaultChecked") || changedProperties.has("disabled")) {
+      this.handleValueOrCheckedChange();
+    }
+  }
+  formResetCallback() {
+    this._checked = null;
+    super.formResetCallback();
+    this.handleValueOrCheckedChange();
+  }
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the checkbox. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasHint = this.hint ? true : !!hasHintSlot;
+    const isIndeterminate = !this.checked && this.indeterminate;
+    const iconName = isIndeterminate ? "horizontal_rule" : "check";
+    const stateIconPart = isIndeterminate ? "indeterminate-icon" : "checked-icon";
+    const checkedAttribute = this.didSSR && !this.hasUpdated ? this.checked : this.defaultChecked;
+    const checkedProperty = this.didSSR && !this.hasUpdated ? null : l(this.checked);
+    return b`
+      <label part="checkbox">
+        <span part="control">
+          <input
+            class="input"
+            type="checkbox"
+            title=${this.title}
+            name=${o(this.name)}
+            value=${o(this.value)}
+            .indeterminate=${l(this.indeterminate)}
+            .checked=${o(checkedProperty)}
+            ?checked=${checkedAttribute}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-checked=${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}
+            aria-describedby="hint"
+            @click=${this.handleClick}
+          />
+
+          <cs-icon part="${stateIconPart} icon" library="system" name=${iconName}></cs-icon>
+        </span>
+
+        <slot part="label"></slot>
+      </label>
+
+      <slot
+        id="hint"
+        part="hint"
+        name="hint"
+        aria-hidden=${hasHint ? "false" : "true"}
+        class="${e2({ "has-slotted": hasHint })}"
+      >
+        ${this.hint}
+      </slot>
+    `;
+  }
+};
+CsCheckbox.css = [form_control_styles_default, size_styles_default, checkbox_styles_default];
+CsCheckbox.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+__decorateClass([
+  e('input[type="checkbox"]')
+], CsCheckbox.prototype, "input", 2);
+__decorateClass([
+  n()
+], CsCheckbox.prototype, "title", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsCheckbox.prototype, "value", 1);
+__decorateClass([
+  n({ reflect: true })
+], CsCheckbox.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: false })
+], CsCheckbox.prototype, "checked", 1);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "checked" })
+], CsCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCheckbox.prototype, "required", 2);
+__decorateClass([
+  n()
+], CsCheckbox.prototype, "hint", 2);
+__decorateClass([
+  n({ attribute: "ssr-hint", type: Boolean })
+], CsCheckbox.prototype, "ssrHint", 2);
+__decorateClass([
+  watch(["checked", "defaultChecked"])
+], CsCheckbox.prototype, "handleDefaultCheckedChange", 1);
+__decorateClass([
+  watch(["checked", "indeterminate"])
+], CsCheckbox.prototype, "handleStateChange", 1);
+__decorateClass([
+  watch("disabled")
+], CsCheckbox.prototype, "handleDisabledChange", 1);
+CsCheckbox = __decorateClass([
+  customElement("cs-checkbox")
+], CsCheckbox);
+CsCheckbox.disableWarning?.("change-in-update");
+
+export {
+  CsCheckbox
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsQrCode
+} from "./chunk.23TJAWLT.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/qr-code/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-qr-code";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsQrCode,
+  react: React,
+  events: {},
+  displayName: "CsQrCode"
+});
+var qr_code_default = reactWrapper;
+
+export {
+  qr_code_default
+};

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

@@ -0,0 +1,20 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/utilities/defined.ts
+async function allDefined(options) {
+  const opts = {
+    match: (tagName) => tagName.startsWith("cs-"),
+    additionalElements: [],
+    root: document,
+    ...options
+  };
+  const additionalElements = Array.isArray(opts.additionalElements) ? opts.additionalElements : [opts.additionalElements];
+  const undefinedElements = [...opts.root.querySelectorAll(":not(:defined)")].map((el) => el.localName).filter((tag, index, arr) => arr.indexOf(tag) === index).filter((tag) => opts.match(tag));
+  const tagsToAwait = [...undefinedElements, ...additionalElements];
+  await Promise.all(tagsToAwait.map((tag) => customElements.whenDefined(tag)));
+  await new Promise(requestAnimationFrame);
+}
+
+export {
+  allDefined
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsRelativeTime
+} from "./chunk.B4QRAE2A.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/relative-time/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-relative-time";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsRelativeTime,
+  react: React,
+  events: {},
+  displayName: "CsRelativeTime"
+});
+var relative_time_default = reactWrapper;
+
+export {
+  relative_time_default
+};

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

@@ -0,0 +1,26 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.js";
+
+// src/components/tab-panel/tab-panel.styles.ts
+var tab_panel_styles_default = i`
+  :host {
+    --padding: 0;
+
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .tab-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+
+export {
+  tab_panel_styles_default
+};

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

@@ -0,0 +1,44 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/submit-on-enter.ts
+function submitOnEnter(event, el) {
+  const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  if (event.key === "Enter" && !hasModifier) {
+    setTimeout(() => {
+      if (!event.defaultPrevented && !event.isComposing) {
+        submitForm(el);
+      }
+    });
+  }
+}
+function submitForm(el) {
+  let form = null;
+  if ("form" in el) {
+    form = el.form;
+  }
+  if (!form && "getForm" in el) {
+    form = el.getForm();
+  }
+  if (!form) {
+    return;
+  }
+  const formElements = [...form.elements];
+  if (formElements.length === 1) {
+    form.requestSubmit(null);
+    return;
+  }
+  const button = formElements.find((el2) => el2.type === "submit" && !el2.matches(":disabled"));
+  if (!button) {
+    return;
+  }
+  if (["input", "button"].includes(button.localName)) {
+    form.requestSubmit(button);
+  } else {
+    button.click();
+  }
+}
+
+export {
+  submitOnEnter,
+  submitForm
+};

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

@@ -0,0 +1,94 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.js";
+
+// src/components/copy-button/copy-button.styles.ts
+var copy_button_styles_default = i`
+  :host {
+    display: inline-block;
+    color: var(--cs-color-neutral-on-quiet);
+  }
+
+  .copy-button__trigger {
+    position: relative;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    border-radius: var(--cs-form-control-border-radius);
+    color: inherit;
+    font-size: inherit;
+    height: calc(var(--cs-form-control-height) * 0.8);
+    aspect-ratio: 1;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--cs-transition-fast);
+    transition-timing-function: var(--cs-transition-easing);
+  }
+
+  @media (hover: hover) {
+    .button:hover:not([disabled]) {
+      background-color: var(--cs-color-neutral-fill-quiet);
+      color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
+    }
+  }
+
+  .button:focus-visible:not([disabled]) {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
+  }
+
+  .button:active:not([disabled]) {
+    color: color-mix(in oklab, currentColor, var(--cs-color-mix-active));
+  }
+
+  .button:focus-visible {
+    outline: var(--cs-focus-ring);
+    outline-offset: var(--cs-focus-ring-offset);
+  }
+
+  .button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+  }
+
+  slot {
+    display: inline-flex;
+  }
+
+  /* Icon swap animation */
+  .show {
+    animation: copy-button-icon-show var(--cs-transition-fast) var(--cs-transition-easing);
+  }
+
+  .hide {
+    animation: copy-button-icon-show var(--cs-transition-fast) var(--cs-transition-easing) reverse;
+  }
+
+  @keyframes copy-button-icon-show {
+    from {
+      scale: 0.25;
+      opacity: 0.25;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .show,
+    .hide {
+      animation-duration: 1ms;
+    }
+  }
+`;
+
+export {
+  copy_button_styles_default
+};