@cruglobal/cornerstone-components 0.7.0 → 0.7.1

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

@@ -0,0 +1,395 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsCopyEvent
+} from "./chunk.XWETBFVU.js";
+import {
+  announce
+} from "./chunk.CJVHPSYX.js";
+import {
+  copy_button_styles_default
+} from "./chunk.ZAAYF3VS.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.QVB5JNBI.js";
+import {
+  uniqueId
+} from "./chunk.C2NBLHP2.js";
+import {
+  animateWithClass
+} from "./chunk.AXCHW7TG.js";
+import {
+  e as e2
+} from "./chunk.37SDUJTL.js";
+import {
+  CsErrorEvent
+} from "./chunk.R5IPUCKQ.js";
+import {
+  watch
+} from "./chunk.JJPQKHLN.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  host_styles_default,
+  n,
+  r
+} from "./chunk.7X4WUQGJ.js";
+import {
+  LocalizeController
+} from "./chunk.NVIHCRM4.js";
+import {
+  b
+} from "./chunk.JMULJQL6.js";
+import {
+  __decorateClass
+} from "./chunk.RNZTKRV7.js";
+
+// src/components/copy-button/copy-button.ts
+var INTERNAL_TOOLTIP_SLOT = "cs-internal-tooltip";
+var ASSIGNED_ID_PROP = "__waCopyButtonAssignedId";
+var CsCopyButton = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isCopying = false;
+    this.status = "rest";
+    this.hasCustomTrigger = false;
+    this.customTriggerEl = null;
+    this.lightTooltip = null;
+    this.feedbackTimeout = null;
+    this.value = "";
+    this.from = "";
+    this.disabled = false;
+    this.copyLabel = "";
+    this.successLabel = "";
+    this.errorLabel = "";
+    this.feedbackDuration = 1e3;
+    this.tooltipPlacement = "top";
+    this.tooltip = "full";
+    this.handleDefaultSlotChange = () => {
+      const assigned = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];
+      const trigger = assigned.find((el) => el instanceof HTMLElement) ?? null;
+      if (trigger !== this.customTriggerEl) {
+        this.releaseAssignedId(this.customTriggerEl);
+        this.customTriggerEl = trigger;
+      }
+      this.hasCustomTrigger = trigger !== null;
+      if (trigger && this.tooltip !== "none") {
+        if (!trigger.id) {
+          trigger.id = uniqueId("cs-copy-button-trigger-");
+          trigger[ASSIGNED_ID_PROP] = true;
+        }
+        this.ensureLightTooltip();
+      } else {
+        this.removeLightTooltip();
+      }
+    };
+  }
+  get activeTooltip() {
+    return this.lightTooltip ?? this.shadowTooltip ?? null;
+  }
+  get currentLabel() {
+    if (this.status === "success") {
+      return this.successLabel || this.localize.term("copied");
+    }
+    if (this.status === "error") {
+      return this.errorLabel || this.localize.term("error");
+    }
+    return this.copyLabel || this.localize.term("copy");
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.didSSR) {
+      this.updateComplete.then(() => {
+        this.handleDefaultSlotChange();
+      });
+    } else {
+      this.handleDefaultSlotChange();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeLightTooltip();
+  }
+  handleStatusChange() {
+    this.customStates.set("success", this.status === "success");
+    this.customStates.set("error", this.status === "error");
+    this.syncTooltipText();
+    if (this.status === "success" || this.status === "error") {
+      announce(this.currentLabel, "polite");
+    }
+  }
+  handleLabelChange() {
+    this.syncTooltipText();
+  }
+  handleTooltipOptionsChange() {
+    if (this.lightTooltip) {
+      this.lightTooltip.placement = this.tooltipPlacement;
+      this.lightTooltip.disabled = this.disabled;
+    }
+  }
+  handleTooltipModeChange(oldValue) {
+    if (this.tooltip === "none") {
+      this.removeLightTooltip();
+    } else if (oldValue === "none") {
+      this.handleDefaultSlotChange();
+    } else if (this.lightTooltip) {
+      this.lightTooltip.setAttribute("trigger", this.tooltip === "copy" ? "manual" : "hover focus");
+    }
+  }
+  releaseAssignedId(el) {
+    if (el && el[ASSIGNED_ID_PROP]) {
+      el.removeAttribute("id");
+      delete el[ASSIGNED_ID_PROP];
+    }
+  }
+  ensureLightTooltip() {
+    if (!this.customTriggerEl) {
+      return;
+    }
+    const triggerValue = this.tooltip === "copy" ? "manual" : "hover focus";
+    if (!this.lightTooltip) {
+      const tooltip = document.createElement("cs-tooltip");
+      tooltip.setAttribute("slot", INTERNAL_TOOLTIP_SLOT);
+      tooltip.setAttribute("part", "feedback");
+      tooltip.setAttribute("trigger", triggerValue);
+      tooltip.dataset.copyButtonTooltip = "";
+      tooltip.setAttribute("for", this.customTriggerEl.id);
+      tooltip.placement = this.tooltipPlacement;
+      tooltip.disabled = this.disabled;
+      tooltip.textContent = this.currentLabel;
+      this.appendChild(tooltip);
+      this.lightTooltip = tooltip;
+    } else {
+      this.lightTooltip.setAttribute("for", this.customTriggerEl.id);
+      this.lightTooltip.setAttribute("trigger", triggerValue);
+      this.lightTooltip.placement = this.tooltipPlacement;
+      this.lightTooltip.disabled = this.disabled;
+      this.lightTooltip.textContent = this.currentLabel;
+    }
+  }
+  removeLightTooltip() {
+    if (this.lightTooltip) {
+      this.releaseAssignedId(this.customTriggerEl);
+      this.lightTooltip.remove();
+      this.lightTooltip = null;
+    }
+  }
+  syncTooltipText() {
+    if (this.lightTooltip) {
+      this.lightTooltip.textContent = this.currentLabel;
+    }
+  }
+  async handleCopy() {
+    if (this.disabled || this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+    let valueToCopy = this.value;
+    if (this.from) {
+      const root = this.getRootNode();
+      const isProperty = this.from.includes(".");
+      const isAttribute = this.from.includes("[") && this.from.includes("]");
+      let id = this.from;
+      let field = "";
+      if (isProperty) {
+        [id, field] = this.from.trim().split(".");
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+      }
+      const target = "getElementById" in root ? root.getElementById(id) : null;
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || "";
+        } else if (isProperty) {
+          valueToCopy = target[field] || "";
+        } else {
+          valueToCopy = target.textContent || "";
+        }
+      } else {
+        this.showStatus("error");
+        this.dispatchEvent(new CsErrorEvent());
+      }
+    }
+    if (!valueToCopy) {
+      this.showStatus("error");
+      this.dispatchEvent(new CsErrorEvent());
+    } else {
+      try {
+        await navigator.clipboard.writeText(valueToCopy);
+        this.showStatus("success");
+        this.dispatchEvent(new CsCopyEvent({ value: valueToCopy }));
+      } catch {
+        this.showStatus("error");
+        this.dispatchEvent(new CsErrorEvent());
+      }
+    }
+  }
+  async showStatus(status) {
+    this.status = status;
+    if (this.copyIcon) {
+      const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+      await animateWithClass(this.copyIcon, "hide");
+      this.copyIcon.hidden = true;
+      iconToShow.hidden = false;
+      await animateWithClass(iconToShow, "show");
+    }
+    await this.updateComplete;
+    const tooltip = this.tooltip === "none" ? null : this.activeTooltip;
+    let earlyClose = null;
+    if (tooltip) {
+      tooltip.show();
+      earlyClose = new Promise((resolve) => {
+        tooltip.addEventListener(
+          "cs-after-hide",
+          () => {
+            if (this.feedbackTimeout !== null) {
+              clearTimeout(this.feedbackTimeout);
+              this.feedbackTimeout = null;
+            }
+            resolve();
+          },
+          { once: true }
+        );
+      });
+      this.feedbackTimeout = window.setTimeout(async () => {
+        this.feedbackTimeout = null;
+        await tooltip.hide();
+      }, this.feedbackDuration);
+    }
+    setTimeout(async () => {
+      if (earlyClose) {
+        await earlyClose;
+      }
+      if (this.copyIcon) {
+        const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+        await animateWithClass(iconToShow, "hide");
+        iconToShow.hidden = true;
+        this.copyIcon.hidden = false;
+        await animateWithClass(this.copyIcon, "show");
+      }
+      this.status = "rest";
+      this.isCopying = false;
+    }, this.feedbackDuration);
+  }
+  render() {
+    const hasCustomTrigger = this.hasCustomTrigger;
+    let showTooltip = !hasCustomTrigger && this.tooltip !== "none";
+    const triggerValue = this.tooltip === "copy" ? "manual" : "hover focus";
+    if (this.didSSR && !this.hasUpdated) {
+      showTooltip = false;
+    }
+    return b`
+      <div class="copy-button__trigger" @click=${this.handleCopy}>
+        <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+        <button
+          class="button"
+          part="button"
+          type="button"
+          id="copy-button"
+          aria-label=${this.currentLabel}
+          ?disabled=${this.disabled}
+          ?hidden=${this.hasCustomTrigger}
+        >
+          <slot part="copy-icon" name="copy-icon">
+            <cs-icon library="system" name="content_copy"></cs-icon>
+          </slot>
+          <slot part="success-icon" name="success-icon" hidden>
+            <cs-icon library="system" name="check"></cs-icon>
+          </slot>
+          <slot part="error-icon" name="error-icon" hidden>
+            <cs-icon library="system" name="close"></cs-icon>
+          </slot>
+        </button>
+
+        ${showTooltip ? b`
+                <cs-tooltip
+                  part="feedback"
+                  for="copy-button"
+                  placement=${this.tooltipPlacement}
+                  trigger=${triggerValue}
+                  class=${e2({
+      "copy-button-tooltip": true,
+      "copy-button-tooltip-success": this.status === "success",
+      "copy-button-tooltip-error": this.status === "error"
+    })}
+                  ?disabled=${this.disabled}
+                  >${this.currentLabel}</cs-tooltip
+                >
+              ` : ""}
+        <slot name="${INTERNAL_TOOLTIP_SLOT}"></slot>
+      </div>
+    `;
+  }
+};
+CsCopyButton.css = [host_styles_default, visually_hidden_styles_default, copy_button_styles_default];
+__decorateClass([
+  e('slot[name="copy-icon"]')
+], CsCopyButton.prototype, "copyIcon", 2);
+__decorateClass([
+  e('slot[name="success-icon"]')
+], CsCopyButton.prototype, "successIcon", 2);
+__decorateClass([
+  e('slot[name="error-icon"]')
+], CsCopyButton.prototype, "errorIcon", 2);
+__decorateClass([
+  e("slot:not([name])")
+], CsCopyButton.prototype, "defaultSlot", 2);
+__decorateClass([
+  e('cs-tooltip[part="feedback"]')
+], CsCopyButton.prototype, "shadowTooltip", 2);
+__decorateClass([
+  r()
+], CsCopyButton.prototype, "isCopying", 2);
+__decorateClass([
+  r()
+], CsCopyButton.prototype, "status", 2);
+__decorateClass([
+  r()
+], CsCopyButton.prototype, "hasCustomTrigger", 2);
+__decorateClass([
+  n()
+], CsCopyButton.prototype, "value", 2);
+__decorateClass([
+  n()
+], CsCopyButton.prototype, "from", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCopyButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ attribute: "copy-label" })
+], CsCopyButton.prototype, "copyLabel", 2);
+__decorateClass([
+  n({ attribute: "success-label" })
+], CsCopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  n({ attribute: "error-label" })
+], CsCopyButton.prototype, "errorLabel", 2);
+__decorateClass([
+  n({ attribute: "feedback-duration", type: Number })
+], CsCopyButton.prototype, "feedbackDuration", 2);
+__decorateClass([
+  n({ attribute: "tooltip-placement", reflect: true })
+], CsCopyButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsCopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  watch("status")
+], CsCopyButton.prototype, "handleStatusChange", 1);
+__decorateClass([
+  watch(["copyLabel", "successLabel", "errorLabel"])
+], CsCopyButton.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["tooltipPlacement", "disabled"], { waitUntilFirstUpdate: true })
+], CsCopyButton.prototype, "handleTooltipOptionsChange", 1);
+__decorateClass([
+  watch("tooltip", { waitUntilFirstUpdate: true })
+], CsCopyButton.prototype, "handleTooltipModeChange", 1);
+CsCopyButton = __decorateClass([
+  customElement("cs-copy-button")
+], CsCopyButton);
+
+export {
+  CsCopyButton
+};

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

@@ -0,0 +1,297 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.T7OKDWRT.js";
+
+// src/components/select/select.styles.ts
+var select_styles_default = i`
+  :host {
+    --tag-max-size: 10ch;
+    --show-duration: var(--cs-transition-fast);
+    --hide-duration: var(--cs-transition-fast);
+  }
+
+  /* Add ellipses to multi select options */
+  :host cs-tag::part(content) {
+    display: initial;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: var(--tag-max-size);
+  }
+
+  :host .disabled [part~='combobox'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  :host .enabled:is(.open, :focus-within) [part~='combobox'] {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+
+    /* Pass through from select to the popup */
+    --show-duration: inherit;
+    --hide-duration: inherit;
+
+    &::part(popup) {
+      z-index: 900;
+    }
+
+    &[data-current-placement^='top']::part(popup) {
+      transform-origin: bottom;
+    }
+
+    &[data-current-placement^='bottom']::part(popup) {
+      transform-origin: top;
+    }
+  }
+
+  /* Combobox */
+  .combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    justify-content: start;
+
+    min-height: var(--cs-form-control-height);
+
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+    border-radius: var(--cs-form-control-border-radius);
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+    color: var(--cs-form-control-value-color);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: var(--cs-form-control-value-font-weight);
+    line-height: var(--cs-form-control-value-line-height);
+    overflow: hidden;
+    padding: 0 var(--cs-form-control-padding-inline);
+    position: relative;
+    vertical-align: middle;
+    transition:
+      background-color var(--cs-transition-normal),
+      border-color var(--cs-transition-normal),
+      outline-color var(--cs-transition-fast);
+    transition-timing-function: var(--cs-transition-easing);
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+
+    /* Pills */
+    :host([pill]) & {
+      border-radius: var(--cs-border-radius-pill);
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) .combobox {
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([appearance='filled']) .combobox {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) .combobox {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  .display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    line-height: var(--cs-form-control-value-line-height);
+    color: var(--cs-form-control-value-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--cs-form-control-placeholder-color);
+    }
+  }
+
+  /* Manage spacing when tags are present */
+  :host([multiple]) {
+    --_padding-with-tags: calc(var(--cs-form-control-height) * 0.1 - var(--cs-form-control-border-width));
+
+    & .combobox:has(.tags cs-tag) {
+      padding-block: var(--_padding-with-tags);
+      padding-inline-start: var(--_padding-with-tags);
+    }
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  :host([multiple]) .combobox:has(.tags cs-tag) .display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .value-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  .tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25em;
+
+    /* These are !important because a document-level universal margin reset would otherwise beat them:
+     a slotted element belongs to the outer tree. See callout.styles.ts for the full note. */
+    &::slotted(cs-tag) {
+      cursor: pointer !important;
+    }
+
+    .disabled &,
+    .disabled &::slotted(cs-tag) {
+      cursor: not-allowed !important;
+    }
+  }
+
+  /* Start and End */
+
+  .start,
+  .end {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cs-color-neutral-on-quiet);
+  }
+
+  .end::slotted(*) {
+    margin-inline-start: var(--cs-form-control-padding-inline) !important;
+  }
+
+  .start::slotted(*) {
+    margin-inline-end: var(--cs-form-control-padding-inline) !important;
+  }
+
+  :host([multiple]) .combobox:has(.tags cs-tag) .start::slotted(*) {
+    margin-inline-start: calc(var(--cs-form-control-padding-inline) - var(--_padding-with-tags)) !important;
+  }
+
+  /* Clear button */
+  [part~='clear-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--cs-color-neutral-on-quiet);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: color var(--cs-transition-normal);
+    cursor: pointer;
+    margin-inline-start: var(--cs-form-control-padding-inline);
+
+    &:focus {
+      outline: none;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
+      }
+    }
+
+    &:active {
+      color: color-mix(in oklab, currentColor, var(--cs-color-mix-active));
+    }
+  }
+
+  /* Expand icon */
+  .expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--cs-color-neutral-on-quiet);
+    transition: rotate var(--cs-transition-slow) var(--cs-transition-easing);
+    rotate: 0deg;
+    margin-inline-start: var(--cs-form-control-padding-inline);
+
+    .open & {
+      rotate: -180deg;
+    }
+  }
+
+  /* Listbox */
+  .listbox {
+    display: block;
+    position: relative;
+    font: inherit;
+    box-shadow: var(--cs-shadow-m);
+    background: var(--cs-color-surface-raised);
+    border-color: var(--cs-color-surface-border);
+    border-radius: var(--cs-border-radius-m);
+    border-style: var(--cs-border-style);
+    border-width: var(--cs-border-width-s);
+    padding: 0.25em;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+
+    &::slotted(cs-divider) {
+      --spacing: 0.5em;
+    }
+  }
+
+  /* Space options with half the listbox's padding */
+  .listbox slot:not([name]) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125em;
+  }
+
+  slot:not([name])::slotted(small) {
+    display: block;
+    font-size: var(--cs-font-size-smaller);
+    font-weight: var(--cs-font-weight-semibold);
+    color: var(--cs-color-text-quiet);
+    padding-block: 0.5em;
+    padding-inline: 2.25em;
+  }
+`;
+
+export {
+  select_styles_default
+};

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

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