@cruglobal/cornerstone-components 0.1.3 → 0.6.1

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

@@ -1,61 +0,0 @@
-/*! Cornerstone Components 0.1.3 - 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.YUJJSC63.js

@@ -1,75 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/internal/offset.ts
-function getOffset(element, parent) {
-  return {
-    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
-    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
-  };
-}
-
-// src/internal/scroll.ts
-var locks = /* @__PURE__ */ new Set();
-function getScrollbarWidth() {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-}
-function getExistingBodyPadding() {
-  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ""));
-  if (isNaN(padding) || !padding) {
-    return 0;
-  }
-  return padding;
-}
-function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  if (!document.documentElement.classList.contains("cs-scroll-lock")) {
-    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
-    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
-    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
-      scrollbarGutterProperty = "stable";
-    }
-    if (scrollbarWidth < 2) {
-      scrollbarGutterProperty = "";
-    }
-    document.documentElement.style.setProperty("--cs-scroll-lock-gutter", scrollbarGutterProperty);
-    document.documentElement.classList.add("cs-scroll-lock");
-    document.documentElement.style.setProperty("--cs-scroll-lock-size", `${scrollbarWidth}px`);
-  }
-}
-function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.documentElement.classList.remove("cs-scroll-lock");
-    document.documentElement.style.removeProperty("--cs-scroll-lock-size");
-  }
-}
-function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
-  const offset = getOffset(element, container);
-  const offsetTop = offset.top + container.scrollTop;
-  const offsetLeft = offset.left + container.scrollLeft;
-  const minX = container.scrollLeft;
-  const maxX = container.scrollLeft + container.offsetWidth;
-  const minY = container.scrollTop;
-  const maxY = container.scrollTop + container.offsetHeight;
-  if (direction === "horizontal" || direction === "both") {
-    if (offsetLeft < minX) {
-      container.scrollTo({ left: offsetLeft, behavior });
-    } else if (offsetLeft + element.clientWidth > maxX) {
-      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
-    }
-  }
-  if (direction === "vertical" || direction === "both") {
-    if (offsetTop < minY) {
-      container.scrollTo({ top: offsetTop, behavior });
-    } else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
-    }
-  }
-}
-
-export {
-  lockBodyScrolling,
-  unlockBodyScrolling,
-  scrollIntoView
-};

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

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

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

@@ -1,21 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsFormatDate
-} from "./chunk.AAX3B4RY.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.YZPBLI7S.js

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

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

@@ -1,13 +0,0 @@
-/*! Cornerstone Components 0.1.3 - 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.ZCN7L3UE.js

@@ -1,26 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsOtpInput
-} from "./chunk.6OJRSA6J.js";
-
-// src/react/otp-input/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-otp-input";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsOtpInput,
-  react: React,
-  events: {
-    onCsComplete: "cs-complete",
-    onCsClear: "cs-clear",
-    onCsInvalid: "cs-invalid"
-  },
-  displayName: "CsOtpInput"
-});
-var otp_input_default = reactWrapper;
-
-export {
-  otp_input_default
-};

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

@@ -1,24 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsAvatar
-} from "./chunk.PG3QZQ4X.js";
-
-// src/react/avatar/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-avatar";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsAvatar,
-  react: React,
-  events: {
-    onCsError: "cs-error"
-  },
-  displayName: "CsAvatar"
-});
-var avatar_default = reactWrapper;
-
-export {
-  avatar_default
-};

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

@@ -1,29 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/ssr/trim-outer-markers.ts
-function trimOuterMarkers(renderedContent) {
-  const q = "<?>";
-  const startMarker = "<!--lit-part ";
-  const endMarker = "<!--/lit-part-->";
-  renderedContent = renderedContent.trim();
-  let start;
-  let end;
-  if (renderedContent.startsWith(q)) {
-    start = q.length;
-  } else if (renderedContent.startsWith(startMarker)) {
-    start = renderedContent.indexOf("-->") + 3;
-  }
-  if (renderedContent.endsWith(q)) {
-    end = renderedContent.length - q.length;
-  } else if (renderedContent.endsWith(endMarker)) {
-    end = renderedContent.length - endMarker.length;
-  }
-  if (start || end) {
-    return trimOuterMarkers(renderedContent.slice(start ?? 0, end ?? renderedContent.length));
-  }
-  return renderedContent;
-}
-
-export {
-  trimOuterMarkers
-};

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

@@ -1,16 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/animation/animations.ts
-import * as animations from "@shoelace-style/animations";
-function getAnimationNames() {
-  return Object.entries(animations).filter(([name]) => name !== "easings").map(([name]) => name);
-}
-function getEasingNames() {
-  return Object.entries(animations.easings).map(([name]) => name);
-}
-
-export {
-  animations,
-  getAnimationNames,
-  getEasingNames
-};

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

@@ -1,377 +0,0 @@
-/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  page_mobile_styles_default
-} from "./chunk.GIDGPXQW.js";
-import {
-  page_styles_default
-} from "./chunk.QHPZ4EC7.js";
-import {
-  visually_hidden_styles_default
-} from "./chunk.JPNKXSBR.js";
-import {
-  CornerstoneElement,
-  customElement
-} from "./chunk.LGF4LDQG.js";
-import {
-  __decorateClass
-} from "./chunk.6UN6XRW4.js";
-
-// src/components/page/page.ts
-import { html, isServer } from "lit";
-import { property, query } from "lit/decorators.js";
-import { live } from "lit/directives/live.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { when } from "lit/directives/when.js";
-function toPx(value, element = document.documentElement) {
-  if (!Number.isNaN(Number(value))) {
-    return Number(value);
-  }
-  if (!window.CSS || !CSS.registerProperty) {
-    if (typeof value === "string" && value.endsWith("px")) {
-      return parseFloat(value);
-    }
-    return Number(value) || 0;
-  }
-  const resolver = "--cs-length-resolver";
-  if (!CSS.registerProperty.toString().includes(resolver)) {
-    try {
-      CSS.registerProperty({
-        name: resolver,
-        syntax: "<length>",
-        inherits: false,
-        initialValue: "0px"
-      });
-    } catch {
-    }
-  }
-  const previousValue = element.style.getPropertyValue(resolver);
-  element.style.setProperty(resolver, value);
-  const computedValue = getComputedStyle(element)?.getPropertyValue(resolver);
-  element.style.setProperty(resolver, previousValue);
-  if (computedValue?.endsWith("px")) {
-    return parseFloat(computedValue);
-  }
-  return Number(computedValue) || 0;
-}
-function toLength(px) {
-  return Number.isNaN(Number(px)) ? px : `${px}px`;
-}
-var CsPage = class extends CornerstoneElement {
-  constructor() {
-    super();
-    // SSR guard: ResizeObserver is not available during server-side rendering
-    this.headerResizeObserver = !isServer ? this.slotResizeObserver("header") : null;
-    this.subheaderResizeObserver = !isServer ? this.slotResizeObserver("subheader") : null;
-    this.bannerResizeObserver = !isServer ? this.slotResizeObserver("banner") : null;
-    this.footerResizeObserver = !isServer ? this.slotResizeObserver("footer") : null;
-    this.handleNavigationToggle = (e) => {
-      if (this.view === "desktop") {
-        this.hideNavigation();
-        return;
-      }
-      const path = e.composedPath();
-      const navigationToggleSlot = this.navigationToggleSlot;
-      if (path.find((el) => {
-        return el.hasAttribute?.("data-toggle-nav") || el.assignedSlot === navigationToggleSlot || el === navigationToggleSlot;
-      })) {
-        e.preventDefault();
-        this.toggleNavigation();
-      }
-    };
-    this.view = "desktop";
-    this.navOpen = false;
-    this.mobileBreakpoint = "768px";
-    this.navigationPlacement = "start";
-    this.disableNavigationToggle = false;
-    this.pageResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
-      requestAnimationFrame(() => {
-        for (const entry of entries) {
-          if (entry.contentBoxSize) {
-            const contentBoxSize = entry.borderBoxSize[0];
-            const pageWidth = contentBoxSize.inlineSize;
-            const oldView = this.view;
-            if (pageWidth >= toPx(this.mobileBreakpoint)) {
-              this.view = "desktop";
-            } else {
-              this.view = "mobile";
-            }
-            this.requestUpdate("view", oldView);
-          }
-        }
-      });
-    }) : null;
-    this.updateNavigationToggleState = (e) => {
-      if (e) {
-        const slotName = e.target.name;
-        if (!["navigation", "navigation-header", "navigation-footer"].includes(slotName)) {
-          return;
-        }
-      }
-      const hasCustomToggle = Boolean(this.querySelector(":not([slot='navigation-toggle']) [data-toggle-nav]"));
-      const hasNavigationContent = Boolean(this.querySelector('[slot="navigation"]')) || Boolean(this.querySelector('[slot="navigation-header"]')) || Boolean(this.querySelector('[slot="navigation-footer"]'));
-      this.disableNavigationToggle = hasCustomToggle || !hasNavigationContent;
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.handleNavigationToggle);
-    }
-  }
-  slotResizeObserver(slot) {
-    return new ResizeObserver((entries) => {
-      requestAnimationFrame(() => {
-        for (const entry of entries) {
-          if (entry.contentBoxSize) {
-            const contentBoxSize = entry.borderBoxSize[0];
-            this.style.setProperty(`--${slot}-height`, `${Math.round(contentBoxSize.blockSize)}px`);
-          }
-        }
-      });
-    });
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("view")) {
-      this.hideNavigation();
-    }
-    super.updated(changedProperties);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!isServer) {
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          this.pageResizeObserver?.observe(this);
-          this.headerResizeObserver?.observe(this.header);
-          this.subheaderResizeObserver?.observe(this.subheader);
-          this.bannerResizeObserver?.observe(this.banner);
-          this.footerResizeObserver?.observe(this.footer);
-        });
-      });
-    }
-  }
-  /**
-   * https://stackoverflow.com/a/26831113
-   * This prevents awkward gaps when scrolling the page and the aside / menu don't "fill" the gaps.
-   */
-  visiblePixelsInViewport(element) {
-    if (!element) {
-      return null;
-    }
-    const elementHeight = element.clientHeight;
-    const windowHeight = window.innerHeight;
-    const rect = element.getBoundingClientRect?.();
-    if (!rect) {
-      return null;
-    }
-    const { top, bottom } = rect;
-    return Math.max(0, top > 0 ? Math.min(elementHeight, windowHeight - top) : Math.min(bottom, windowHeight));
-  }
-  firstUpdated(changedProperties) {
-    if (!document.getElementById("main-content")) {
-      const div = document.createElement("div");
-      div.id = "main-content";
-      div.slot = "skip-to-content-target";
-      this.prepend(div);
-    }
-    this.shadowRoot.addEventListener("slotchange", this.updateNavigationToggleState);
-    this.updateNavigationToggleState();
-    super.firstUpdated(changedProperties);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.pageResizeObserver?.unobserve(this);
-    this.headerResizeObserver?.unobserve(this.header);
-    this.subheaderResizeObserver?.unobserve(this.subheader);
-    this.footerResizeObserver?.unobserve(this.footer);
-    this.bannerResizeObserver?.unobserve(this.banner);
-  }
-  /**
-   * Shows the mobile navigation drawer
-   */
-  showNavigation() {
-    this.navOpen = true;
-  }
-  /**
-   * Hides the mobile navigation drawer
-   */
-  hideNavigation() {
-    this.navOpen = false;
-  }
-  /**
-   * Toggles the mobile navigation drawer
-   */
-  toggleNavigation() {
-    this.navOpen = !this.navOpen;
-  }
-  render() {
-    return html`
-      <a href="#main-content" part="skip-to-content" class="cs-visually-hidden">
-        <slot name="skip-to-content">Skip to content</slot>
-      </a>
-
-      <!-- unsafeHTML needed for SSR until this is solved: https://github.com/lit/lit/issues/4696 -->
-      ${unsafeHTML(`
-        <style id="mobile-styles">
-          ${page_mobile_styles_default(toLength(this.mobileBreakpoint))}
-        </style>
-      `)}
-
-      <div class="base" part="page">
-        <div class="banner" part="banner">
-          <slot name="banner"></slot>
-        </div>
-        <div class="header" part="header">
-          <slot name="navigation-toggle">
-            <cs-button part="navigation-toggle" size="s" appearance="plain" variant="neutral">
-              <slot name="navigation-toggle-icon">
-                <cs-icon name="menu" part="navigation-toggle-icon" label="Toggle navigation drawer"></cs-icon>
-              </slot>
-            </cs-button>
-          </slot>
-          <slot name="header"></slot>
-        </div>
-        <div class="subheader" part="subheader">
-          <slot name="subheader"></slot>
-        </div>
-        <div class="body" part="body">
-          <div class="menu" part="menu">
-            <slot name="menu">
-              <nav name="navigation" class="navigation" part="navigation navigation-desktop">
-                <!-- Add fallback divs so that CSS grid works properly. -->
-                <slot name="desktop-navigation-header">
-                  ${when(
-      this.view === "desktop",
-      () => html`<slot name="navigation-header"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-                </slot>
-                <slot name="desktop-navigation">
-                  ${when(
-      this.view === "desktop",
-      () => html`<slot name="navigation"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-                </slot>
-                <slot name="desktop-navigation-footer">
-                  ${when(
-      this.view === "desktop",
-      () => html`<slot name="navigation-footer"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-                </slot>
-              </nav>
-            </slot>
-          </div>
-          <div class="main" part="main">
-            <div class="main-header" part="main-header">
-              <slot name="main-header"></slot>
-            </div>
-            <div class="main-content" part="main-content">
-              <slot name="skip-to-content-target"></slot>
-              <slot></slot>
-            </div>
-            <div class="main-footer" part="main-footer">
-              <slot name="main-footer"></slot>
-            </div>
-          </div>
-          <div class="aside" part="aside">
-            <slot name="aside"></slot>
-          </div>
-        </div>
-        <div class="footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-      <cs-drawer
-        part="drawer"
-        placement=${this.navigationPlacement}
-        light-dismiss
-        ?open=${live(this.navOpen)}
-        @cs-after-show=${() => this.navOpen = this.navigationDrawer.open}
-        @cs-after-hide=${() => this.navOpen = this.navigationDrawer.open}
-        exportparts="
-          dialog:drawer__dialog,
-          header:drawer__header,
-          header-actions:drawer__header-actions,
-          title:drawer__title,
-          close-button:drawer__close-button,
-          close-button__button:drawer__close-button__button,
-          body:drawer__body,
-          footer:drawer__footer
-        "
-        class="navigation-drawer"
-      >
-        <slot slot="label" part="navigation-header" name="mobile-navigation-header">
-          ${when(
-      this.view === "mobile",
-      () => html`<slot name="navigation-header"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-        </slot>
-        <slot name="mobile-navigation">
-          ${when(
-      this.view === "mobile",
-      () => html`<slot name="navigation"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-        </slot>
-
-        <slot slot="footer" name="mobile-navigation-footer">
-          ${when(
-      this.view === "mobile",
-      () => html`<slot part="navigation-footer" name="navigation-footer"><div></div></slot>`,
-      () => html`<div></div>`
-    )}
-        </slot>
-      </cs-drawer>
-    `;
-  }
-};
-CsPage.css = [visually_hidden_styles_default, page_styles_default];
-__decorateClass([
-  query("[part~='header']")
-], CsPage.prototype, "header", 2);
-__decorateClass([
-  query("[part~='menu']")
-], CsPage.prototype, "menu", 2);
-__decorateClass([
-  query("[part~='main']")
-], CsPage.prototype, "main", 2);
-__decorateClass([
-  query("[part~='aside']")
-], CsPage.prototype, "aside", 2);
-__decorateClass([
-  query("[part~='subheader']")
-], CsPage.prototype, "subheader", 2);
-__decorateClass([
-  query("[part~='footer']")
-], CsPage.prototype, "footer", 2);
-__decorateClass([
-  query("[part~='banner']")
-], CsPage.prototype, "banner", 2);
-__decorateClass([
-  query("[part~='drawer']")
-], CsPage.prototype, "navigationDrawer", 2);
-__decorateClass([
-  query("slot[name~='navigation-toggle']")
-], CsPage.prototype, "navigationToggleSlot", 2);
-__decorateClass([
-  property({ attribute: "view", reflect: true })
-], CsPage.prototype, "view", 2);
-__decorateClass([
-  property({ attribute: "nav-open", reflect: true, type: Boolean })
-], CsPage.prototype, "navOpen", 2);
-__decorateClass([
-  property({ attribute: "mobile-breakpoint", type: String })
-], CsPage.prototype, "mobileBreakpoint", 2);
-__decorateClass([
-  property({ attribute: "navigation-placement", reflect: true })
-], CsPage.prototype, "navigationPlacement", 2);
-__decorateClass([
-  property({ attribute: "disable-navigation-toggle", reflect: true, type: Boolean })
-], CsPage.prototype, "disableNavigationToggle", 2);
-CsPage = __decorateClass([
-  customElement("cs-page")
-], CsPage);
-
-export {
-  CsPage
-};