@cruglobal/cornerstone-components 0.1.3 → 0.6.2

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

@@ -0,0 +1,176 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  markdown_styles_default
+} from "./chunk.L3MARBHQ.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/markdown/markdown.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { Marked } from "marked";
+var sharedMarked = new Marked();
+var connectedInstances = /* @__PURE__ */ new Set();
+var CsMarkdown = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.renderGeneration = 0;
+    this.suppressSlotChange = false;
+    this.tabSize = 4;
+  }
+  /** Returns the shared Marked instance used by all `<cs-markdown>` components. */
+  static getMarked() {
+    return sharedMarked;
+  }
+  /** Re-renders all connected `<cs-markdown>` instances. Call this after changing the Marked configuration. */
+  static updateAll() {
+    for (const instance of connectedInstances) {
+      instance.renderMarkdown();
+    }
+  }
+  /** A reference to the shared Marked instance for convenience. Equivalent to `CsMarkdown.getMarked()`. */
+  get marked() {
+    return sharedMarked;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    connectedInstances.add(this);
+  }
+  disconnectedCallback() {
+    connectedInstances.delete(this);
+    super.disconnectedCallback();
+  }
+  /**
+   * Normalizes whitespace in the given text by converting leading tabs to spaces, trimming leading/trailing blank
+   * lines, and removing the common indentation prefix from all lines.
+   */
+  dedent(text) {
+    const normalized = text.replace(/\r\n/g, "\n");
+    const lines = normalized.split("\n").map((line) => {
+      let expanded = "";
+      let column = 0;
+      for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        if (char === "	") {
+          const spacesToNextStop = this.tabSize - column % this.tabSize;
+          expanded += " ".repeat(spacesToNextStop);
+          column += spacesToNextStop;
+        } else if (char === " ") {
+          expanded += " ";
+          column++;
+        } else {
+          expanded += line.slice(i);
+          break;
+        }
+      }
+      return expanded;
+    });
+    let start = 0;
+    while (start < lines.length && lines[start].trim() === "") {
+      start++;
+    }
+    let end = lines.length - 1;
+    while (end >= start && lines[end].trim() === "") {
+      end--;
+    }
+    const trimmedLines = lines.slice(start, end + 1);
+    if (trimmedLines.length === 0) {
+      return "";
+    }
+    let minIndent = Infinity;
+    for (const line of trimmedLines) {
+      if (line.trim() === "") {
+        continue;
+      }
+      const match = line.match(/^( *)/);
+      const leadingSpaces = match ? match[1].length : 0;
+      minIndent = Math.min(minIndent, leadingSpaces);
+    }
+    if (minIndent === Infinity) {
+      minIndent = 0;
+    }
+    const dedentedLines = trimmedLines.map((line) => {
+      if (line.trim() === "") {
+        return "";
+      }
+      return line.slice(minIndent);
+    });
+    return dedentedLines.join("\n");
+  }
+  /** Finds the `<script type="text/markdown">` source element inside this component. */
+  getSourceScript() {
+    return this.querySelector('script[type="text/markdown"]');
+  }
+  /** Reads the script content, normalizes whitespace, parses markdown, and injects the result. */
+  renderMarkdown() {
+    const script = this.getSourceScript();
+    if (!script) {
+      console.warn(
+        'No <script type="text/markdown"> found. Provide markdown content inside a <script type="text/markdown"> element.',
+        this
+      );
+      return;
+    }
+    const generation = ++this.renderGeneration;
+    const raw = script.textContent ?? "";
+    const dedented = this.dedent(raw);
+    let result;
+    try {
+      result = sharedMarked.parse(dedented);
+    } catch (error) {
+      console.error("Failed to parse markdown content.", error, this);
+      return;
+    }
+    const inject = (renderedHtml) => {
+      if (generation !== this.renderGeneration) {
+        return;
+      }
+      this.suppressSlotChange = true;
+      for (const child of [...this.childNodes]) {
+        if (child !== script) {
+          child.remove();
+        }
+      }
+      const fragment = document.createRange().createContextualFragment(renderedHtml);
+      this.appendChild(fragment);
+      queueMicrotask(() => {
+        this.suppressSlotChange = false;
+      });
+    };
+    if (typeof result === "string") {
+      inject(result);
+    } else {
+      result.then(inject).catch((error) => {
+        console.error("Failed to parse markdown content.", error, this);
+      });
+    }
+  }
+  handleSlotChange() {
+    if (this.suppressSlotChange) {
+      return;
+    }
+    if (this.didSSR && !this.hasUpdated) {
+      return;
+    }
+    this.renderMarkdown();
+  }
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+CsMarkdown.css = markdown_styles_default;
+__decorateClass([
+  property({ type: Number, attribute: "tab-size" })
+], CsMarkdown.prototype, "tabSize", 2);
+CsMarkdown = __decorateClass([
+  customElement("cs-markdown")
+], CsMarkdown);
+
+export {
+  CsMarkdown
+};

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

@@ -0,0 +1 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */

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

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsMutationObserver
+} from "./chunk.U66JN7EU.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-mutation-observer";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsMutationObserver,
+  react: React,
+  events: {
+    onCsMutation: "cs-mutation"
+  },
+  displayName: "CsMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsDrawer
+} from "./chunk.5XIAQ2PB.js";
+
+// src/react/drawer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-drawer";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsDrawer,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsDrawer"
+});
+var drawer_default = reactWrapper;
+
+export {
+  drawer_default
+};

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

@@ -0,0 +1,61 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/carousel/autoplay-controller.ts
+var AutoplayController = class {
+  constructor(host, tickCallback) {
+    this.timerId = 0;
+    this.activeInteractions = 0;
+    this.paused = false;
+    this.stopped = true;
+    this.pause = () => {
+      if (!this.activeInteractions++) {
+        this.paused = true;
+        this.host.requestUpdate();
+      }
+    };
+    this.resume = () => {
+      if (!--this.activeInteractions) {
+        this.paused = false;
+        this.host.requestUpdate();
+      }
+    };
+    host.addController(this);
+    this.host = host;
+    this.tickCallback = tickCallback;
+  }
+  hostConnected() {
+    this.host.addEventListener("mouseenter", this.pause);
+    this.host.addEventListener("mouseleave", this.resume);
+    this.host.addEventListener("focusin", this.pause);
+    this.host.addEventListener("focusout", this.resume);
+    this.host.addEventListener("touchstart", this.pause, { passive: true });
+    this.host.addEventListener("touchend", this.resume);
+  }
+  hostDisconnected() {
+    this.stop();
+    this.host.removeEventListener("mouseenter", this.pause);
+    this.host.removeEventListener("mouseleave", this.resume);
+    this.host.removeEventListener("focusin", this.pause);
+    this.host.removeEventListener("focusout", this.resume);
+    this.host.removeEventListener("touchstart", this.pause);
+    this.host.removeEventListener("touchend", this.resume);
+  }
+  start(interval) {
+    this.stop();
+    this.stopped = false;
+    this.timerId = window.setInterval(() => {
+      if (!this.paused) {
+        this.tickCallback();
+      }
+    }, interval);
+  }
+  stop() {
+    clearInterval(this.timerId);
+    this.stopped = true;
+    this.host.requestUpdate();
+  }
+};
+
+export {
+  AutoplayController
+};

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

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsFormatNumber
+} from "./chunk.KLDSUYP3.js";
+
+// src/react/format-number/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-format-number";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsFormatNumber,
+  react: React,
+  events: {},
+  displayName: "CsFormatNumber"
+});
+var format_number_default = reactWrapper;
+
+export {
+  format_number_default
+};

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

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

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

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsFormatDate
+} from "./chunk.SZH276KU.js";
+
+// src/react/format-date/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-format-date";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsFormatDate,
+  react: React,
+  events: {},
+  displayName: "CsFormatDate"
+});
+var format_date_default = reactWrapper;
+
+export {
+  format_date_default
+};

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

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/include/include.styles.ts
+import { css } from "lit";
+var include_styles_default = css`
+  :host {
+    display: block;
+  }
+`;
+
+export {
+  include_styles_default
+};

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

@@ -0,0 +1,63 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/checkbox-group/checkbox-group.styles.ts
+import { css } from "lit";
+var checkbox_group_styles_default = css`
+  :host {
+    --gap: 0.5em;
+
+    display: block;
+  }
+
+  :host([orientation='horizontal']) {
+    --gap: 1em;
+  }
+
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .label {
+    padding: 0;
+  }
+
+  .checkbox-group-required .label::after {
+    content: var(--cs-form-control-required-content);
+    margin-inline-start: var(--cs-form-control-required-content-offset);
+  }
+
+  /* The group of checkboxes */
+  [part~='form-control-input'] {
+    display: flex;
+    flex-direction: column;
+    /* Keep items sized to their content so the clickable label doesn't span the full width */
+    align-items: start;
+    gap: var(--gap);
+    margin-block-start: 0.5em;
+  }
+
+  /* Horizontal */
+  :host([orientation='horizontal']) [part~='form-control-input'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  /* Hint */
+  [part~='hint'] {
+    margin-block-start: 0.5em;
+  }
+
+  /* Hide the required asterisk on individual controls; the group's label carries the indicator instead. */
+  ::slotted(cs-checkbox[required]),
+  ::slotted(cs-switch[required]) {
+    --cs-form-control-required-content: '';
+  }
+`;
+
+export {
+  checkbox_group_styles_default
+};

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

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

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

@@ -0,0 +1,220 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsAccordionAfterExpandEvent
+} from "./chunk.QNZZU272.js";
+import {
+  CsAccordionCollapseEvent
+} from "./chunk.25QWNZW6.js";
+import {
+  CsAccordionExpandEvent
+} from "./chunk.ZTDXG7TX.js";
+import {
+  CsAccordionAfterCollapseEvent
+} from "./chunk.XSNXTL3J.js";
+import {
+  accordion_styles_default
+} from "./chunk.PSI3YOEP.js";
+import {
+  watch
+} from "./chunk.3QN4KTE6.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/accordion/accordion.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var CsAccordion = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "multiple";
+    this.iconPlacement = "end";
+    this.headingLevel = "3";
+    this.appearance = "outlined";
+  }
+  getAllItems() {
+    return this.defaultSlot.assignedElements({ flatten: true }).filter((el) => el.tagName.toLowerCase() === "cs-accordion-item");
+  }
+  getFocusableItems() {
+    return this.getAllItems().filter((item) => !item.disabled);
+  }
+  ownsItem(item) {
+    return item.closest("cs-accordion") === this;
+  }
+  initRovingTabIndex() {
+    this.getFocusableItems().forEach((item, index) => {
+      item.isTabbable = index === 0;
+    });
+  }
+  handleSlotChange() {
+    if (this.didSSR) {
+      const promises = [];
+      this.getAllItems().forEach((item) => {
+        if (item.didSSR && !item.hasUpdated) {
+          promises.push(item.updateComplete);
+        }
+      });
+      if (promises.length > 0) {
+        Promise.allSettled(promises).then(() => {
+          this.handleSlotChange();
+        });
+        return;
+      }
+    }
+    this.syncIconPlacement();
+    this.syncHeadingLevel();
+    this.syncAppearance();
+    this.initRovingTabIndex();
+  }
+  handleFocusIn(event) {
+    const items = this.getFocusableItems();
+    const path = event.composedPath();
+    const closestItem = path.find(
+      (el) => el instanceof Element && el.tagName.toLowerCase() === "cs-accordion-item"
+    );
+    if (!closestItem || !this.ownsItem(closestItem)) {
+      return;
+    }
+    const focusedItem = items.find((item) => item === closestItem);
+    if (!focusedItem) {
+      return;
+    }
+    items.forEach((item) => item.isTabbable = item === focusedItem);
+  }
+  handleKeyDown(event) {
+    const items = this.getFocusableItems();
+    if (!items.length) {
+      return;
+    }
+    const path = event.composedPath();
+    const closestItem = path.find(
+      (el) => el instanceof Element && el.tagName.toLowerCase() === "cs-accordion-item"
+    );
+    if (!closestItem || !this.ownsItem(closestItem)) {
+      return;
+    }
+    const currentIndex = items.findIndex((item) => item.isTabbable);
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % items.length;
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + items.length) % items.length;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    items.forEach((item, index) => item.isTabbable = index === nextIndex);
+    items[nextIndex].focus();
+  }
+  syncIconPlacement() {
+    this.getAllItems().forEach((item) => item.iconPlacement = this.iconPlacement);
+  }
+  syncHeadingLevel() {
+    this.getAllItems().forEach((item) => item.headingLevel = this.headingLevel);
+  }
+  syncAppearance() {
+    this.getAllItems().forEach((item) => item.appearance = this.appearance);
+  }
+  async handleItemTrigger(event) {
+    const { item } = event.detail;
+    if (!this.ownsItem(item)) {
+      return;
+    }
+    event.stopPropagation();
+    if (item.disabled) {
+      return;
+    }
+    if (item.expanded) {
+      if (this.mode === "single") {
+        return;
+      }
+      const csCollapse = new CsAccordionCollapseEvent({ item });
+      this.dispatchEvent(csCollapse);
+      if (csCollapse.defaultPrevented) {
+        return;
+      }
+      await item.collapse();
+      this.dispatchEvent(new CsAccordionAfterCollapseEvent({ item }));
+    } else {
+      if (this.mode === "single" || this.mode === "single-collapsible") {
+        this.getAllItems().filter((i) => i !== item && i.expanded).forEach((i) => i.collapse());
+      }
+      const csExpand = new CsAccordionExpandEvent({ item });
+      this.dispatchEvent(csExpand);
+      if (csExpand.defaultPrevented) {
+        return;
+      }
+      await item.expand();
+      this.dispatchEvent(new CsAccordionAfterExpandEvent({ item }));
+    }
+  }
+  /** Expands all accordion items. No-op when `mode` is `single` or `single-collapsible`. */
+  expandAll() {
+    if (this.mode === "single" || this.mode === "single-collapsible") {
+      return;
+    }
+    this.getAllItems().filter((item) => !item.disabled && !item.expanded).forEach((item) => item.expand());
+  }
+  /** Collapses all accordion items. */
+  collapseAll() {
+    this.getAllItems().filter((item) => item.expanded).forEach((item) => item.collapse());
+  }
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @cs-accordion-item-trigger=${this.handleItemTrigger}
+        @focusin=${this.handleFocusIn}
+        @keydown=${this.handleKeyDown}
+      ></slot>
+    `;
+  }
+};
+CsAccordion.css = accordion_styles_default;
+__decorateClass([
+  query("slot")
+], CsAccordion.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsAccordion.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "icon-placement", reflect: true })
+], CsAccordion.prototype, "iconPlacement", 2);
+__decorateClass([
+  property({ attribute: "heading-level", reflect: true })
+], CsAccordion.prototype, "headingLevel", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsAccordion.prototype, "appearance", 2);
+__decorateClass([
+  watch("iconPlacement", { waitUntilFirstUpdate: true })
+], CsAccordion.prototype, "syncIconPlacement", 1);
+__decorateClass([
+  watch("headingLevel", { waitUntilFirstUpdate: true })
+], CsAccordion.prototype, "syncHeadingLevel", 1);
+__decorateClass([
+  watch("appearance", { waitUntilFirstUpdate: true })
+], CsAccordion.prototype, "syncAppearance", 1);
+CsAccordion = __decorateClass([
+  customElement("cs-accordion")
+], CsAccordion);
+
+export {
+  CsAccordion
+};