@cruglobal/cornerstone-components 0.6.2 → 0.7.1

package/dist/unbundled/chunks/chunk.ITWO4C4O.js

@@ -1,332 +0,0 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsInvalidEvent
-} from "./chunk.NYORTQAI.js";
-import {
-  CornerstoneElement
-} from "./chunk.4H5TQFVZ.js";
-import {
-  __decorateClass
-} from "./chunk.HBAVB7LX.js";
-
-// src/internal/cornerstone-form-associated-element.ts
-import { isServer } from "lit";
-import { property } from "lit/decorators.js";
-
-// src/internal/validators/custom-error-validator.ts
-var CustomErrorValidator = () => {
-  return {
-    observedAttributes: ["custom-error"],
-    checkValidity(element) {
-      const validity = {
-        message: "",
-        isValid: true,
-        invalidKeys: []
-      };
-      if (element.customError) {
-        validity.message = element.customError;
-        validity.isValid = false;
-        validity.invalidKeys = ["customError"];
-      }
-      return validity;
-    }
-  };
-};
-
-// src/internal/cornerstone-form-associated-element.ts
-var CornerstoneFormAssociatedElement = class extends CornerstoneElement {
-  constructor() {
-    super();
-    this.name = null;
-    this.disabled = false;
-    this.required = false;
-    this.assumeInteractionOn = ["input"];
-    this.validators = [];
-    this.valueHasChanged = false;
-    this.hasInteracted = false;
-    this.customError = null;
-    this.emittedEvents = [];
-    this.emitInvalid = (e) => {
-      if (e.target !== this) {
-        return;
-      }
-      this.hasInteracted = true;
-      this.dispatchEvent(new CsInvalidEvent());
-    };
-    this.handleInteraction = (event) => {
-      const emittedEvents = this.emittedEvents;
-      if (!emittedEvents.includes(event.type)) {
-        emittedEvents.push(event.type);
-      }
-      if (emittedEvents.length === this.assumeInteractionOn?.length) {
-        this.hasInteracted = true;
-      }
-    };
-    if ("addEventListener" in this) {
-      this.addEventListener("invalid", this.emitInvalid);
-    }
-  }
-  /**
-   * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
-   * for changes. Whenever these attributes change, we want to be notified and update the validator.
-   */
-  static get validators() {
-    return isServer ? [] : [CustomErrorValidator()];
-  }
-  // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
-  static get observedAttributes() {
-    const parentAttrs = new Set(super.observedAttributes || []);
-    for (const validator of this.validators) {
-      if (!validator.observedAttributes) {
-        continue;
-      }
-      for (const attr of validator.observedAttributes) {
-        parentAttrs.add(attr);
-      }
-    }
-    return [...parentAttrs];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.didSSR && !this.hasUpdated) {
-      this.updateComplete.then(() => {
-        this.updateValidity();
-      });
-    } else {
-      this.updateValidity();
-    }
-    this.assumeInteractionOn.forEach((event) => {
-      this.addEventListener?.(event, this.handleInteraction);
-    });
-  }
-  firstUpdated(...args) {
-    super.firstUpdated(...args);
-    this.updateValidity();
-  }
-  willUpdate(changedProperties) {
-    if (!isServer && changedProperties.has("customError")) {
-      if (!this.customError) {
-        this.customError = null;
-      }
-      this.setCustomValidity(this.customError || "");
-    }
-    if (changedProperties.has("value") || changedProperties.has("disabled") || changedProperties.has("defaultValue")) {
-      const value = this.value;
-      this.updateFormValue(value);
-    }
-    if (changedProperties.has("disabled")) {
-      this.customStates.set("disabled", this.disabled);
-      if (this.hasAttribute("disabled") || !isServer && !this.matches(":disabled")) {
-        this.toggleAttribute("disabled", this.disabled);
-      }
-    }
-    super.willUpdate(changedProperties);
-    if (this.didSSR && !this.hasUpdated) {
-      this.updateComplete.then(() => this.updateValidity());
-    } else {
-      this.updateValidity();
-    }
-  }
-  /**
-   * @internal
-   */
-  updateFormValue(value) {
-    if (Array.isArray(value)) {
-      if (this.name) {
-        const formData = new FormData();
-        for (const val of value) {
-          formData.append(this.name, val);
-        }
-        this.setValue(formData, formData);
-      }
-    } else {
-      this.setValue(value, value);
-    }
-  }
-  get labels() {
-    return this.internals.labels;
-  }
-  getForm() {
-    return this.internals.form;
-  }
-  /**
-   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-   * the same document or shadow root for this to work.
-   */
-  set form(val) {
-    if (val) {
-      this.setAttribute("form", val);
-    } else {
-      this.removeAttribute("form");
-    }
-  }
-  get form() {
-    return this.internals.form;
-  }
-  get validity() {
-    return this.internals.validity;
-  }
-  // Not sure if this supports `novalidate`. Will need to test.
-  get willValidate() {
-    return this.internals.willValidate;
-  }
-  get validationMessage() {
-    return this.internals.validationMessage;
-  }
-  checkValidity() {
-    this.updateValidity();
-    return this.internals.checkValidity();
-  }
-  reportValidity() {
-    this.updateValidity();
-    this.hasInteracted = true;
-    return this.internals.reportValidity();
-  }
-  /**
-   * Override this to change where constraint validation popups are anchored.
-   */
-  get validationTarget() {
-    return this.input || void 0;
-  }
-  setValidity(...args) {
-    const flags = args[0];
-    const message = args[1];
-    let anchor = args[2];
-    if (!anchor) {
-      anchor = this.validationTarget;
-    }
-    this.internals.setValidity(flags, message, anchor || void 0);
-    this.requestUpdate("validity");
-    this.setCustomStates();
-  }
-  setCustomStates() {
-    const required = Boolean(this.required);
-    const isValid = this.internals.validity.valid;
-    const hasInteracted = this.hasInteracted;
-    this.customStates.set("required", required);
-    this.customStates.set("optional", !required);
-    this.customStates.set("invalid", !isValid);
-    this.customStates.set("valid", isValid);
-    this.customStates.set("user-invalid", !isValid && hasInteracted);
-    this.customStates.set("user-valid", isValid && hasInteracted);
-  }
-  /**
-   * Do not use this when creating a "Validator". This is intended for end users of components.
-   * We track manually defined custom errors so we don't clear them on accident in our validators.
-   *
-   */
-  setCustomValidity(message) {
-    if (!message) {
-      this.customError = null;
-      this.setValidity({});
-      return;
-    }
-    this.customError = message;
-    this.setValidity({ customError: true }, message, this.validationTarget);
-  }
-  formResetCallback() {
-    this.resetValidity();
-    this.hasInteracted = false;
-    this.valueHasChanged = false;
-    this.emittedEvents = [];
-    this.updateValidity();
-  }
-  formDisabledCallback(isDisabled) {
-    this.disabled = isDisabled;
-    this.updateValidity();
-  }
-  /**
-   * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
-   * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
-   * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
-   */
-  formStateRestoreCallback(state, reason) {
-    if (this.didSSR && !this.hasUpdated) {
-      this.updateComplete.then(() => {
-        this.value = state;
-        if (reason === "restore") {
-          this.resetValidity();
-        }
-        this.updateValidity();
-      });
-    } else {
-      this.value = state;
-      if (reason === "restore") {
-        this.resetValidity();
-      }
-      this.updateValidity();
-    }
-  }
-  setValue(...args) {
-    const [value, state] = args;
-    this.internals.setFormValue(value, state);
-  }
-  get allValidators() {
-    const staticValidators = this.constructor.validators || [];
-    const validators = this.validators || [];
-    return [...staticValidators, ...validators];
-  }
-  /**
-   * Reset validity is a way of removing manual custom errors and native validation.
-   */
-  resetValidity() {
-    this.setCustomValidity("");
-    this.setValidity({});
-  }
-  updateValidity() {
-    if (this.disabled || this.hasAttribute("disabled") || !this.willValidate) {
-      this.resetValidity();
-      return;
-    }
-    const validators = this.allValidators;
-    if (!validators?.length) {
-      return;
-    }
-    const flags = {
-      // Don't trust custom errors from the Browser. Safari breaks the spec.
-      customError: Boolean(this.customError)
-    };
-    const formControl = this.validationTarget || this.input || void 0;
-    let finalMessage = "";
-    for (const validator of validators) {
-      const { isValid, message, invalidKeys } = validator.checkValidity(this);
-      if (isValid) {
-        continue;
-      }
-      if (!finalMessage) {
-        finalMessage = message;
-      }
-      if (invalidKeys?.length >= 0) {
-        invalidKeys.forEach((str) => flags[str] = true);
-      }
-    }
-    if (!finalMessage) {
-      finalMessage = this.validationMessage;
-    }
-    this.setValidity(flags, finalMessage, formControl);
-  }
-};
-CornerstoneFormAssociatedElement.formAssociated = true;
-__decorateClass([
-  property({ reflect: true })
-], CornerstoneFormAssociatedElement.prototype, "name", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CornerstoneFormAssociatedElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ state: true, attribute: false })
-], CornerstoneFormAssociatedElement.prototype, "valueHasChanged", 2);
-__decorateClass([
-  property({ state: true, attribute: false })
-], CornerstoneFormAssociatedElement.prototype, "hasInteracted", 2);
-__decorateClass([
-  property({ attribute: "custom-error", reflect: true })
-], CornerstoneFormAssociatedElement.prototype, "customError", 2);
-__decorateClass([
-  property({ attribute: false, state: true, type: Object })
-], CornerstoneFormAssociatedElement.prototype, "validity", 1);
-
-export {
-  CornerstoneFormAssociatedElement
-};

package/dist/unbundled/chunks/chunk.IXYMBNTU.js

@@ -1,332 +0,0 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  zoomable_frame_styles_default
-} from "./chunk.LH3NPPW7.js";
-import {
-  parseSpaceDelimitedTokens
-} from "./chunk.QVMFBQ5Z.js";
-import {
-  CornerstoneElement,
-  customElement
-} from "./chunk.4H5TQFVZ.js";
-import {
-  LocalizeController
-} from "./chunk.TFKBFNPO.js";
-import {
-  __decorateClass
-} from "./chunk.HBAVB7LX.js";
-
-// src/components/zoomable-frame/zoomable-frame.ts
-import { html, isServer } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-// src/internal/color-scheme-controller.ts
-var ColorSchemeController = class {
-  constructor(host, onThemeChange) {
-    this.handleTransitionEnd = () => {
-      this.onThemeChange();
-    };
-    (this.host = host).addController(this);
-    this.onThemeChange = onThemeChange;
-    if (typeof document !== "undefined") {
-      this.hiddenElement = document.createElement("div");
-      this.hiddenElement.setAttribute("aria-hidden", "true");
-      Object.assign(this.hiddenElement.style, {
-        position: "absolute",
-        width: "0",
-        height: "0",
-        overflow: "hidden",
-        pointerEvents: "none",
-        opacity: "0",
-        // Transition on a WA surface token — changes whenever the theme class changes
-        color: "var(--cs-color-surface-default, transparent)",
-        transition: "color 0.001ms"
-      });
-    }
-  }
-  hostConnected() {
-    if (this.hiddenElement) {
-      this.host.appendChild(this.hiddenElement);
-      this.hiddenElement.addEventListener("transitionend", this.handleTransitionEnd);
-    }
-  }
-  hostDisconnected() {
-    if (this.hiddenElement) {
-      this.hiddenElement.removeEventListener("transitionend", this.handleTransitionEnd);
-      this.hiddenElement.remove();
-    }
-  }
-};
-
-// src/components/zoomable-frame/zoomable-frame.ts
-var CsZoomableFrame = class extends CornerstoneElement {
-  constructor() {
-    super();
-    this.localize = new LocalizeController(this);
-    // SSR guard: MutationObserver is not available during server-side rendering
-    this.themeObserver = !isServer ? new MutationObserver(() => this.syncTheme()) : null;
-    this.availableZoomLevels = [];
-    this.allowfullscreen = false;
-    this.loading = "eager";
-    this.zoom = 1;
-    this.zoomLevels = "25% 50% 75% 100% 125% 150% 175% 200%";
-    this.withoutControls = false;
-    this.withoutInteraction = false;
-    this.withThemeSync = false;
-    new ColorSchemeController(this, () => this.syncTheme());
-  }
-  /** Returns the internal iframe's `window` object. (Readonly property) */
-  get contentWindow() {
-    return this.iframe?.contentWindow || null;
-  }
-  /** Returns the internal iframe's `document` object. (Readonly property) */
-  get contentDocument() {
-    return this.iframe?.contentDocument || null;
-  }
-  parseZoomLevels(zoomLevelsString) {
-    const tokens = parseSpaceDelimitedTokens(zoomLevelsString);
-    const levels = [];
-    for (const token of tokens) {
-      let value;
-      if (token.endsWith("%")) {
-        const percentage = parseFloat(token.slice(0, -1));
-        if (!isNaN(percentage)) {
-          value = Math.max(0, percentage / 100);
-        } else {
-          continue;
-        }
-      } else {
-        value = parseFloat(token);
-        if (!isNaN(value)) {
-          value = Math.max(0, value);
-        } else {
-          continue;
-        }
-      }
-      levels.push(value);
-    }
-    return [...new Set(levels)].sort((a, b) => a - b);
-  }
-  getCurrentZoomIndex() {
-    if (this.availableZoomLevels.length === 0) {
-      return -1;
-    }
-    let closestIndex = 0;
-    let closestDiff = Math.abs(this.availableZoomLevels[0] - this.zoom);
-    for (let i = 1; i < this.availableZoomLevels.length; i++) {
-      const diff = Math.abs(this.availableZoomLevels[i] - this.zoom);
-      if (diff < closestDiff) {
-        closestDiff = diff;
-        closestIndex = i;
-      }
-    }
-    return closestIndex;
-  }
-  isZoomInDisabled() {
-    if (this.availableZoomLevels.length === 0) {
-      return false;
-    }
-    const currentIndex = this.getCurrentZoomIndex();
-    return currentIndex >= this.availableZoomLevels.length - 1;
-  }
-  isZoomOutDisabled() {
-    if (this.availableZoomLevels.length === 0) {
-      return false;
-    }
-    const currentIndex = this.getCurrentZoomIndex();
-    return currentIndex <= 0;
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("zoom")) {
-      this.setStyleProperty("--zoom", `${this.zoom}`);
-    }
-    super.willUpdate(changedProperties);
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("zoomLevels")) {
-      this.availableZoomLevels = this.parseZoomLevels(this.zoomLevels);
-      if (this.availableZoomLevels.length > 0) {
-        const currentIndex = this.getCurrentZoomIndex();
-        if (Math.abs(this.availableZoomLevels[currentIndex] - this.zoom) > 1e-3) {
-          this.zoom = this.availableZoomLevels[currentIndex];
-        }
-      }
-    }
-    if (changedProperties.has("withThemeSync")) {
-      if (this.withThemeSync) {
-        this.themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-        this.syncTheme();
-      } else {
-        this.themeObserver?.disconnect();
-      }
-    }
-    super.updated(changedProperties);
-  }
-  /** Zooms in to the next available zoom level. */
-  zoomIn() {
-    if (this.availableZoomLevels.length === 0) {
-      this.zoom = Math.min(this.zoom + 0.05, 2);
-      return;
-    }
-    const currentIndex = this.getCurrentZoomIndex();
-    if (currentIndex < this.availableZoomLevels.length - 1) {
-      this.zoom = this.availableZoomLevels[currentIndex + 1];
-    }
-  }
-  /** Zooms out to the previous available zoom level. */
-  zoomOut() {
-    if (this.availableZoomLevels.length === 0) {
-      this.zoom = Math.max(this.zoom - 0.05, 0);
-      return;
-    }
-    const currentIndex = this.getCurrentZoomIndex();
-    if (currentIndex > 0) {
-      this.zoom = this.availableZoomLevels[currentIndex - 1];
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.themeObserver?.disconnect();
-  }
-  syncTheme() {
-    if (!this.withThemeSync) {
-      return;
-    }
-    try {
-      const iframeRoot = this.contentDocument?.documentElement;
-      if (!iframeRoot) {
-        return;
-      }
-      const prefixes = ["cs-theme-", "cs-brand-", "cs-palette-"];
-      const schemeCls = /* @__PURE__ */ new Set();
-      const themeCls = /* @__PURE__ */ new Set();
-      let el = this;
-      let schemeFound = false;
-      while (el) {
-        if (!schemeFound) {
-          if (el.classList.contains("cs-dark")) {
-            schemeCls.add("cs-dark");
-            schemeFound = true;
-          } else if (el.classList.contains("cs-light")) {
-            schemeCls.add("cs-light");
-            schemeFound = true;
-          }
-        }
-        for (const cls of el.classList) {
-          if (prefixes.some((p) => cls.startsWith(p))) {
-            themeCls.add(cls);
-          }
-        }
-        el = el.parentElement;
-      }
-      iframeRoot.classList.toggle("cs-dark", schemeCls.has("cs-dark"));
-      iframeRoot.classList.toggle("cs-light", schemeCls.has("cs-light"));
-      const toRemove = Array.from(iframeRoot.classList).filter((c) => prefixes.some((p) => c.startsWith(p)));
-      iframeRoot.classList.remove(...toRemove);
-      iframeRoot.classList.add(...themeCls);
-    } catch {
-    }
-  }
-  handleLoad() {
-    if (this.withThemeSync) {
-      this.syncTheme();
-    }
-    this.dispatchEvent(new Event("load", { bubbles: false, cancelable: false, composed: true }));
-  }
-  handleError() {
-    this.dispatchEvent(new Event("error", { bubbles: false, cancelable: false, composed: true }));
-  }
-  render() {
-    return html`
-      <div id="frame-container">
-        <iframe
-          id="iframe"
-          part="iframe"
-          ?inert=${this.withoutInteraction}
-          ?allowfullscreen=${this.allowfullscreen}
-          loading=${this.loading}
-          referrerpolicy=${this.referrerpolicy}
-          sandbox=${ifDefined(this.sandbox ?? void 0)}
-          src=${ifDefined(this.src ?? void 0)}
-          srcdoc=${ifDefined(this.srcdoc ?? void 0)}
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        ></iframe>
-      </div>
-
-      ${!this.withoutControls ? html`
-              <div id="controls" part="controls">
-                <button
-                  part="zoom-out-button"
-                  aria-label=${this.localize.term("zoomOut")}
-                  @click=${this.zoomOut}
-                  ?disabled=${this.isZoomOutDisabled()}
-                >
-                  <slot name="zoom-out-icon">
-                    <cs-icon name="remove" label="Zoom out"></cs-icon>
-                  </slot>
-                </button>
-                <span>${this.localize.number(this.zoom, { style: "percent", maximumFractionDigits: 1 })}</span>
-                <button
-                  part="zoom-in-button"
-                  aria-label=${this.localize.term("zoomIn")}
-                  @click=${this.zoomIn}
-                  ?disabled=${this.isZoomInDisabled()}
-                >
-                  <slot name="zoom-in-icon">
-                    <cs-icon name="add" label="Zoom in"></cs-icon>
-                  </slot>
-                </button>
-              </div>
-            ` : ""}
-    `;
-  }
-};
-CsZoomableFrame.css = zoomable_frame_styles_default;
-__decorateClass([
-  state()
-], CsZoomableFrame.prototype, "availableZoomLevels", 2);
-__decorateClass([
-  query("#iframe")
-], CsZoomableFrame.prototype, "iframe", 2);
-__decorateClass([
-  property()
-], CsZoomableFrame.prototype, "src", 2);
-__decorateClass([
-  property()
-], CsZoomableFrame.prototype, "srcdoc", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CsZoomableFrame.prototype, "allowfullscreen", 2);
-__decorateClass([
-  property()
-], CsZoomableFrame.prototype, "loading", 2);
-__decorateClass([
-  property()
-], CsZoomableFrame.prototype, "referrerpolicy", 2);
-__decorateClass([
-  property()
-], CsZoomableFrame.prototype, "sandbox", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], CsZoomableFrame.prototype, "zoom", 2);
-__decorateClass([
-  property({ attribute: "zoom-levels" })
-], CsZoomableFrame.prototype, "zoomLevels", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "without-controls", reflect: true })
-], CsZoomableFrame.prototype, "withoutControls", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "without-interaction", reflect: true })
-], CsZoomableFrame.prototype, "withoutInteraction", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "with-theme-sync", reflect: true })
-], CsZoomableFrame.prototype, "withThemeSync", 2);
-CsZoomableFrame = __decorateClass([
-  customElement("cs-zoomable-frame")
-], CsZoomableFrame);
-
-export {
-  CsZoomableFrame
-};

package/dist/unbundled/chunks/chunk.J6VJNUSG.js

@@ -1,27 +0,0 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsAccordion
-} from "./chunk.ZWFNEA25.js";
-
-// src/react/accordion/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-accordion";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsAccordion,
-  react: React,
-  events: {
-    onCsAccordionExpand: "cs-accordion-expand",
-    onCsAccordionAfterExpand: "cs-accordion-after-expand",
-    onCsAccordionCollapse: "cs-accordion-collapse",
-    onCsAccordionAfterCollapse: "cs-accordion-after-collapse"
-  },
-  displayName: "CsAccordion"
-});
-var accordion_default = reactWrapper;
-
-export {
-  accordion_default
-};