@cruglobal/cornerstone-components 0.1.0

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

@@ -0,0 +1,389 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  n as n2
+} from "./chunk.7D5RCNJC.js";
+import {
+  o as o2
+} from "./chunk.OKL7JOEL.js";
+import {
+  page_mobile_styles_default
+} from "./chunk.2DAXWPZV.js";
+import {
+  page_styles_default
+} from "./chunk.6Y52BV7N.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.HNISCUJX.js";
+import {
+  l
+} from "./chunk.CYTM5IYV.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n
+} from "./chunk.RSRMXC3L.js";
+import {
+  o
+} from "./chunk.MZHGFMA5.js";
+import {
+  b
+} from "./chunk.XOXMMJPV.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/components/page/page.ts
+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 = !o ? this.slotResizeObserver("header") : null;
+    this.subheaderResizeObserver = !o ? this.slotResizeObserver("subheader") : null;
+    this.bannerResizeObserver = !o ? this.slotResizeObserver("banner") : null;
+    this.footerResizeObserver = !o ? this.slotResizeObserver("footer") : null;
+    this.handleNavigationToggle = (e2) => {
+      if (this.view === "desktop") {
+        this.hideNavigation();
+        return;
+      }
+      const path = e2.composedPath();
+      const navigationToggleSlot = this.navigationToggleSlot;
+      if (path.find((el) => {
+        return el.hasAttribute?.("data-toggle-nav") || el.assignedSlot === navigationToggleSlot || el === navigationToggleSlot;
+      })) {
+        e2.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 = (e2) => {
+      if (e2) {
+        const slotName = e2.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 (!o) {
+      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 (!o) {
+      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 b`
+      <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 -->
+      ${o2(`
+        <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">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation-header"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+                </slot>
+                <slot name="desktop-navigation">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+                </slot>
+                <slot name="desktop-navigation-footer">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation-footer"><div></div></slot>`,
+      () => b`<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=${l(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">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot name="navigation-header"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+        <slot name="mobile-navigation">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot name="navigation"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+
+        <slot slot="footer" name="mobile-navigation-footer">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot part="navigation-footer" name="navigation-footer"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+      </cs-drawer>
+    `;
+  }
+};
+CsPage.css = [visually_hidden_styles_default, page_styles_default];
+__decorateClass([
+  e("[part~='header']")
+], CsPage.prototype, "header", 2);
+__decorateClass([
+  e("[part~='menu']")
+], CsPage.prototype, "menu", 2);
+__decorateClass([
+  e("[part~='main']")
+], CsPage.prototype, "main", 2);
+__decorateClass([
+  e("[part~='aside']")
+], CsPage.prototype, "aside", 2);
+__decorateClass([
+  e("[part~='subheader']")
+], CsPage.prototype, "subheader", 2);
+__decorateClass([
+  e("[part~='footer']")
+], CsPage.prototype, "footer", 2);
+__decorateClass([
+  e("[part~='banner']")
+], CsPage.prototype, "banner", 2);
+__decorateClass([
+  e("[part~='drawer']")
+], CsPage.prototype, "navigationDrawer", 2);
+__decorateClass([
+  e("slot[name~='navigation-toggle']")
+], CsPage.prototype, "navigationToggleSlot", 2);
+__decorateClass([
+  n({ attribute: "view", reflect: true })
+], CsPage.prototype, "view", 2);
+__decorateClass([
+  n({ attribute: "nav-open", reflect: true, type: Boolean })
+], CsPage.prototype, "navOpen", 2);
+__decorateClass([
+  n({ attribute: "mobile-breakpoint", type: String })
+], CsPage.prototype, "mobileBreakpoint", 2);
+__decorateClass([
+  n({ attribute: "navigation-placement", reflect: true })
+], CsPage.prototype, "navigationPlacement", 2);
+__decorateClass([
+  n({ attribute: "disable-navigation-toggle", reflect: true, type: Boolean })
+], CsPage.prototype, "disableNavigationToggle", 2);
+CsPage = __decorateClass([
+  customElement("cs-page")
+], CsPage);
+
+export {
+  CsPage
+};

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

@@ -0,0 +1,78 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.MZHGFMA5.js";
+
+// src/components/progress-bar/progress-bar.styles.ts
+var progress_bar_styles_default = i`
+  :host {
+    --track-height: 1rem;
+    --track-color: var(--cs-color-neutral-fill-normal);
+    --indicator-color: var(--cs-color-brand-fill-loud);
+
+    display: flex;
+  }
+
+  .progress-bar {
+    flex: 1 1 auto;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    height: var(--track-height);
+    border-radius: var(--cs-border-radius-pill);
+    background-color: var(--track-color);
+    color: var(--cs-color-brand-on-loud);
+    font-size: var(--cs-font-size-s);
+  }
+
+  .indicator {
+    width: var(--percentage);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--indicator-color);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 1;
+    font-weight: var(--cs-font-weight-semibold);
+    transition: all var(--cs-transition-slow, 200ms) var(--cs-transition-easing, ease);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Indeterminate */
+  :host([indeterminate]) .indicator {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    animation: cs-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  }
+
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--cs-color-surface-default);
+    }
+
+    .indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
+  @keyframes cs-progress-indeterminate {
+    0% {
+      inset-inline-start: -50%;
+    }
+
+    75%,
+    100% {
+      inset-inline-start: 100%;
+    }
+  }
+`;
+
+export {
+  progress_bar_styles_default
+};

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

@@ -0,0 +1,171 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o
+} from "./chunk.OPY26TZJ.js";
+import {
+  animated_image_styles_default
+} from "./chunk.DWWUU7WA.js";
+import {
+  CsErrorEvent
+} from "./chunk.RKGCFOCD.js";
+import {
+  CsLoadEvent
+} from "./chunk.O6L7CNGM.js";
+import {
+  watch
+} from "./chunk.3QOMHIHS.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.RSRMXC3L.js";
+import {
+  LocalizeController
+} from "./chunk.MGBGUTRM.js";
+import {
+  b
+} from "./chunk.XOXMMJPV.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/components/animated-image/animated-image.ts
+var CsAnimatedImage = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isLoaded = false;
+  }
+  handleClick() {
+    this.play = !this.play;
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.play = !this.play;
+    }
+  }
+  firstUpdated(changedProperties) {
+    if (this.didSSR) {
+      const img = this.animatedImage;
+      if (img && img.complete) {
+        if (img.naturalWidth > 0) {
+          img.dispatchEvent(new Event("load"));
+        } else {
+          img.dispatchEvent(new Event("error"));
+        }
+      }
+    }
+    super.firstUpdated(changedProperties);
+  }
+  handleLoad() {
+    const canvas = document.createElement("canvas");
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL("image/gif");
+    if (!this.isLoaded) {
+      this.dispatchEvent(new CsLoadEvent());
+      this.isLoaded = true;
+    }
+  }
+  handleError() {
+    this.dispatchEvent(new CsErrorEvent());
+  }
+  handlePlayChange() {
+    if (this.play) {
+      this.animatedImage.src = "";
+      this.animatedImage.src = this.src;
+    }
+  }
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+  render() {
+    const verb = this.localize.term(this.play ? "pauseAnimation" : "playAnimation");
+    const label = `${verb} ${this.alt}`;
+    const shouldShow = this.didSSR && !this.hasUpdated || this.play;
+    return b`
+      <div
+        class="animated-image"
+        tabindex="0"
+        role="button"
+        aria-pressed=${this.play ? "true" : "false"}
+        aria-label=${label}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <img
+          class="animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${shouldShow ? "false" : "true"}
+          style="visibility: hidden;"
+          role="presentation"
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded ? b`
+                <img
+                  class="frozen"
+                  src=${this.frozenFrame}
+                  alt=${this.alt}
+                  aria-hidden=${this.play ? "true" : "false"}
+                  role="presentation"
+                />
+
+                <div part="control-box" class="control-box" aria-hidden="true">
+                  <slot name="play-icon">
+                    <cs-icon
+                      name="play_arrow"
+                      library="system"
+                      class="default"
+                      style=${o({ "margin-inline-start": "3px" })}
+                    ></cs-icon>
+                  </slot>
+                  <slot name="pause-icon">
+                    <cs-icon name="pause" library="system" variant="fill" class="default"></cs-icon>
+                  </slot>
+                </div>
+              ` : ""}
+      </div>
+    `;
+  }
+};
+CsAnimatedImage.css = animated_image_styles_default;
+__decorateClass([
+  e(".animated")
+], CsAnimatedImage.prototype, "animatedImage", 2);
+__decorateClass([
+  r()
+], CsAnimatedImage.prototype, "frozenFrame", 2);
+__decorateClass([
+  r()
+], CsAnimatedImage.prototype, "isLoaded", 2);
+__decorateClass([
+  n()
+], CsAnimatedImage.prototype, "src", 2);
+__decorateClass([
+  n()
+], CsAnimatedImage.prototype, "alt", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsAnimatedImage.prototype, "play", 2);
+__decorateClass([
+  watch("play", { waitUntilFirstUpdate: true })
+], CsAnimatedImage.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("src")
+], CsAnimatedImage.prototype, "handleSrcChange", 1);
+CsAnimatedImage = __decorateClass([
+  customElement("cs-animated-image")
+], CsAnimatedImage);
+
+export {
+  CsAnimatedImage
+};

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

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