@cruglobal/cornerstone-components 0.1.1 → 0.1.3

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

@@ -1,389 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  n as n2
-} from "./chunk.XXC6CPPP.js";
-import {
-  o as o2
-} from "./chunk.VFPOH474.js";
-import {
-  page_mobile_styles_default
-} from "./chunk.SGS7XARV.js";
-import {
-  page_styles_default
-} from "./chunk.NQBSLVHA.js";
-import {
-  visually_hidden_styles_default
-} from "./chunk.EUM7S7GY.js";
-import {
-  l
-} from "./chunk.YKSV4OV2.js";
-import {
-  CornerstoneElement,
-  customElement,
-  e,
-  n
-} from "./chunk.INTFG23Q.js";
-import {
-  o
-} from "./chunk.SIBGI35S.js";
-import {
-  b
-} from "./chunk.3LJH5JH3.js";
-import {
-  __decorateClass
-} from "./chunk.A5EHX6OY.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.PYNQ2IX4.js

@@ -1,227 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsStartEvent
-} from "./chunk.UD3P2T6G.js";
-import {
-  CsFinishEvent
-} from "./chunk.WX5ORU2P.js";
-import {
-  CsCancelEvent
-} from "./chunk.T43HDG2Q.js";
-import {
-  animation_styles_default
-} from "./chunk.COQAO534.js";
-import {
-  dist_exports
-} from "./chunk.BR5NTII7.js";
-import {
-  watch
-} from "./chunk.P4DNU2MI.js";
-import {
-  CornerstoneElement,
-  customElement,
-  n,
-  r2 as r
-} from "./chunk.INTFG23Q.js";
-import {
-  b
-} from "./chunk.3LJH5JH3.js";
-import {
-  __decorateClass
-} from "./chunk.A5EHX6OY.js";
-
-// src/components/animation/animation.ts
-var CsAnimation = class extends CornerstoneElement {
-  constructor() {
-    super(...arguments);
-    this.hasStarted = false;
-    this.name = "none";
-    this.play = false;
-    this.delay = 0;
-    this.direction = "normal";
-    this.duration = 1e3;
-    this.easing = "linear";
-    this.endDelay = 0;
-    this.fill = "auto";
-    this.iterations = Infinity;
-    this.iterationStart = 0;
-    this.playbackRate = 1;
-    this.handleAnimationFinish = () => {
-      this.play = false;
-      this.hasStarted = false;
-      this.dispatchEvent(new CsFinishEvent());
-    };
-    this.handleAnimationCancel = () => {
-      this.play = false;
-      this.hasStarted = false;
-      this.dispatchEvent(new CsCancelEvent());
-    };
-  }
-  /** Gets and sets the current animation time. */
-  get currentTime() {
-    return this.animation?.currentTime ?? 0;
-  }
-  set currentTime(time) {
-    if (this.animation) {
-      this.animation.currentTime = time;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if ("animate" in this) {
-      this.createAnimation();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if ("animate" in this) {
-      this.destroyAnimation();
-    }
-  }
-  handleSlotChange() {
-    this.destroyAnimation();
-    this.createAnimation();
-  }
-  async createAnimation() {
-    const easing = dist_exports.easings[this.easing] ?? this.easing;
-    const keyframes = this.keyframes ?? dist_exports[this.name];
-    const slot = await this.defaultSlot;
-    const element = slot.assignedElements()[0];
-    if (!element || !keyframes) {
-      return false;
-    }
-    this.destroyAnimation();
-    this.animation = element.animate(keyframes, {
-      delay: this.delay,
-      direction: this.direction,
-      duration: this.duration,
-      easing,
-      endDelay: this.endDelay,
-      fill: this.fill,
-      iterationStart: this.iterationStart,
-      iterations: this.iterations
-    });
-    this.animation.playbackRate = this.playbackRate;
-    this.animation.addEventListener("cancel", this.handleAnimationCancel);
-    this.animation.addEventListener("finish", this.handleAnimationFinish);
-    if (this.play) {
-      this.hasStarted = true;
-      this.dispatchEvent(new CsStartEvent());
-    } else {
-      this.animation.pause();
-    }
-    return true;
-  }
-  destroyAnimation() {
-    if (this.animation) {
-      this.animation.cancel();
-      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
-      this.animation.removeEventListener("finish", this.handleAnimationFinish);
-      this.hasStarted = false;
-    }
-  }
-  handleAnimationChange() {
-    if (!this.hasUpdated) {
-      return;
-    }
-    this.createAnimation();
-  }
-  handlePlayChange() {
-    if (this.animation) {
-      if (this.play && !this.hasStarted) {
-        this.hasStarted = true;
-        this.dispatchEvent(new CsStartEvent());
-      }
-      if (this.play) {
-        this.animation.play();
-      } else {
-        this.animation.pause();
-      }
-      return true;
-    }
-    return false;
-  }
-  handlePlaybackRateChange() {
-    if (this.animation) {
-      this.animation.playbackRate = this.playbackRate;
-    }
-  }
-  /** Clears all keyframe effects caused by this animation and aborts its playback. */
-  cancel() {
-    this.animation?.cancel();
-  }
-  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
-  finish() {
-    this.animation?.finish();
-  }
-  render() {
-    return b` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-};
-CsAnimation.css = animation_styles_default;
-__decorateClass([
-  r("slot")
-], CsAnimation.prototype, "defaultSlot", 2);
-__decorateClass([
-  n()
-], CsAnimation.prototype, "name", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsAnimation.prototype, "play", 2);
-__decorateClass([
-  n({ type: Number })
-], CsAnimation.prototype, "delay", 2);
-__decorateClass([
-  n()
-], CsAnimation.prototype, "direction", 2);
-__decorateClass([
-  n({ type: Number })
-], CsAnimation.prototype, "duration", 2);
-__decorateClass([
-  n()
-], CsAnimation.prototype, "easing", 2);
-__decorateClass([
-  n({ attribute: "end-delay", type: Number })
-], CsAnimation.prototype, "endDelay", 2);
-__decorateClass([
-  n()
-], CsAnimation.prototype, "fill", 2);
-__decorateClass([
-  n({ type: Number })
-], CsAnimation.prototype, "iterations", 2);
-__decorateClass([
-  n({ attribute: "iteration-start", type: Number })
-], CsAnimation.prototype, "iterationStart", 2);
-__decorateClass([
-  n({ attribute: false })
-], CsAnimation.prototype, "keyframes", 2);
-__decorateClass([
-  n({ attribute: "playback-rate", type: Number })
-], CsAnimation.prototype, "playbackRate", 2);
-__decorateClass([
-  watch([
-    "name",
-    "delay",
-    "direction",
-    "duration",
-    "easing",
-    "endDelay",
-    "fill",
-    "iterations",
-    "iterationsStart",
-    "keyframes"
-  ])
-], CsAnimation.prototype, "handleAnimationChange", 1);
-__decorateClass([
-  watch("play")
-], CsAnimation.prototype, "handlePlayChange", 1);
-__decorateClass([
-  watch("playbackRate")
-], CsAnimation.prototype, "handlePlaybackRateChange", 1);
-CsAnimation = __decorateClass([
-  customElement("cs-animation")
-], CsAnimation);
-
-export {
-  CsAnimation
-};

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

@@ -1,51 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  e,
-  i,
-  t
-} from "./chunk.6ORRK2GO.js";
-import {
-  E
-} from "./chunk.3LJH5JH3.js";
-
-// ../../node_modules/lit-html/directives/style-map.js
-var n = "important";
-var i2 = " !" + n;
-var o = e(class extends i {
-  constructor(t2) {
-    if (super(t2), t2.type !== t.ATTRIBUTE || "style" !== t2.name || t2.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
-  }
-  render(t2) {
-    return Object.keys(t2).reduce((e2, r) => {
-      const s = t2[r];
-      return null == s ? e2 : e2 + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
-    }, "");
-  }
-  update(e2, [r]) {
-    const { style: s } = e2.element;
-    if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
-    for (const t2 of this.ft) null == r[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
-    for (const t2 in r) {
-      const e3 = r[t2];
-      if (null != e3) {
-        this.ft.add(t2);
-        const r2 = "string" == typeof e3 && e3.endsWith(i2);
-        t2.includes("-") || r2 ? s.setProperty(t2, r2 ? e3.slice(0, -11) : e3, r2 ? n : "") : s[t2] = e3;
-      }
-    }
-    return E;
-  }
-});
-
-export {
-  o
-};
-/*! Bundled license information:
-
-lit-html/directives/style-map.js:
-  (**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/