@cordwainer/cw-elements 1.4.0 → 1.4.1

package/dist/chunks/chunk.HXWVY643.js

@@ -1,550 +0,0 @@
-import {
-  clamp
-} from "./chunk.HF7GESMZ.js";
-import {
-  AutoplayController
-} from "./chunk.F4VGSDIW.js";
-import {
-  carousel_styles_default
-} from "./chunk.OSSEP4TK.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  prefersReducedMotion
-} from "./chunk.TJQYJP53.js";
-import {
-  LocalizeController
-} from "./chunk.OFFCHZOX.js";
-import {
-  CwIcon
-} from "./chunk.SKHX4OLU.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.QNSZUVGZ.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/carousel/carousel.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { eventOptions, property, query, state } from "lit/decorators.js";
-import { html } from "lit";
-import { map } from "lit/directives/map.js";
-import { range } from "lit/directives/range.js";
-var CwCarousel = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.loop = false;
-    this.navigation = false;
-    this.pagination = false;
-    this.autoplay = false;
-    this.autoplayInterval = 3e3;
-    this.slidesPerPage = 1;
-    this.slidesPerMove = 1;
-    this.orientation = "horizontal";
-    this.mouseDragging = false;
-    this.activeSlide = 0;
-    this.scrolling = false;
-    this.dragging = false;
-    this.autoplayController = new AutoplayController(this, () => this.next());
-    this.dragStartPosition = [-1, -1];
-    this.localize = new LocalizeController(this);
-    this.pendingSlideChange = false;
-    this.handleMouseDrag = (event) => {
-      if (!this.dragging) {
-        this.scrollContainer.style.setProperty("scroll-snap-type", "none");
-        this.dragging = true;
-        this.dragStartPosition = [event.clientX, event.clientY];
-      }
-      this.scrollContainer.scrollBy({
-        left: -event.movementX,
-        top: -event.movementY,
-        behavior: "instant"
-      });
-    };
-    this.handleMouseDragEnd = () => {
-      const scrollContainer = this.scrollContainer;
-      document.removeEventListener("pointermove", this.handleMouseDrag, { capture: true });
-      const startLeft = scrollContainer.scrollLeft;
-      const startTop = scrollContainer.scrollTop;
-      scrollContainer.style.removeProperty("scroll-snap-type");
-      scrollContainer.style.setProperty("overflow", "hidden");
-      const finalLeft = scrollContainer.scrollLeft;
-      const finalTop = scrollContainer.scrollTop;
-      scrollContainer.style.removeProperty("overflow");
-      scrollContainer.style.setProperty("scroll-snap-type", "none");
-      scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: "instant" });
-      requestAnimationFrame(async () => {
-        if (startLeft !== finalLeft || startTop !== finalTop) {
-          scrollContainer.scrollTo({
-            left: finalLeft,
-            top: finalTop,
-            behavior: prefersReducedMotion() ? "auto" : "smooth"
-          });
-          await waitForEvent(scrollContainer, "scrollend");
-        }
-        scrollContainer.style.removeProperty("scroll-snap-type");
-        this.dragging = false;
-        this.dragStartPosition = [-1, -1];
-        this.handleScrollEnd();
-      });
-    };
-    this.handleSlotChange = (mutations) => {
-      const needsInitialization = mutations.some(
-        (mutation) => [...mutation.addedNodes, ...mutation.removedNodes].some(
-          (el) => this.isCarouselItem(el) && !el.hasAttribute("data-clone")
-        )
-      );
-      if (needsInitialization) {
-        this.initializeSlides();
-      }
-      this.requestUpdate();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "region");
-    this.setAttribute("aria-label", this.localize.term("carousel"));
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
-  }
-  firstUpdated() {
-    this.initializeSlides();
-    this.mutationObserver = new MutationObserver(this.handleSlotChange);
-    this.mutationObserver.observe(this, {
-      childList: true,
-      subtree: true
-    });
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("slidesPerMove") || changedProperties.has("slidesPerPage")) {
-      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
-    }
-  }
-  getPageCount() {
-    const slidesCount = this.getSlides().length;
-    const { slidesPerPage, slidesPerMove, loop } = this;
-    const pages = loop ? slidesCount / slidesPerMove : (slidesCount - slidesPerPage) / slidesPerMove + 1;
-    return Math.ceil(pages);
-  }
-  getCurrentPage() {
-    return Math.ceil(this.activeSlide / this.slidesPerMove);
-  }
-  canScrollNext() {
-    return this.loop || this.getCurrentPage() < this.getPageCount() - 1;
-  }
-  canScrollPrev() {
-    return this.loop || this.getCurrentPage() > 0;
-  }
-  /** @internal Gets all carousel items. */
-  getSlides({ excludeClones = true } = {}) {
-    return [...this.children].filter(
-      (el) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute("data-clone"))
-    );
-  }
-  handleClick(event) {
-    if (this.dragging && this.dragStartPosition[0] > 0 && this.dragStartPosition[1] > 0) {
-      const deltaX = Math.abs(this.dragStartPosition[0] - event.clientX);
-      const deltaY = Math.abs(this.dragStartPosition[1] - event.clientY);
-      const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      if (delta >= 10) {
-        event.preventDefault();
-      }
-    }
-  }
-  handleKeyDown(event) {
-    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
-      const target = event.target;
-      const isRtl = this.localize.dir() === "rtl";
-      const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
-      const isNext = event.key === "ArrowDown" || !isRtl && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft";
-      const isPrevious = event.key === "ArrowUp" || !isRtl && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight";
-      event.preventDefault();
-      if (isPrevious) {
-        this.previous();
-      }
-      if (isNext) {
-        this.next();
-      }
-      if (event.key === "Home") {
-        this.goToSlide(0);
-      }
-      if (event.key === "End") {
-        this.goToSlide(this.getSlides().length - 1);
-      }
-      if (isFocusInPagination) {
-        this.updateComplete.then(() => {
-          var _a;
-          const activePaginationItem = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-            '[part~="pagination-item--active"]'
-          );
-          if (activePaginationItem) {
-            activePaginationItem.focus();
-          }
-        });
-      }
-    }
-  }
-  handleMouseDragStart(event) {
-    const canDrag = this.mouseDragging && event.button === 0;
-    if (canDrag) {
-      event.preventDefault();
-      document.addEventListener("pointermove", this.handleMouseDrag, { capture: true, passive: true });
-      document.addEventListener("pointerup", this.handleMouseDragEnd, { capture: true, once: true });
-    }
-  }
-  handleScroll() {
-    this.scrolling = true;
-    if (!this.pendingSlideChange) {
-      this.synchronizeSlides();
-    }
-  }
-  /** @internal Synchronizes the slides with the IntersectionObserver API. */
-  synchronizeSlides() {
-    const io = new IntersectionObserver(
-      (entries) => {
-        io.disconnect();
-        for (const entry of entries) {
-          const slide = entry.target;
-          slide.toggleAttribute("inert", !entry.isIntersecting);
-          slide.classList.toggle("--in-view", entry.isIntersecting);
-          slide.setAttribute("aria-hidden", entry.isIntersecting ? "false" : "true");
-        }
-        const firstIntersecting = entries.find((entry) => entry.isIntersecting);
-        if (!firstIntersecting) {
-          return;
-        }
-        const slidesWithClones = this.getSlides({ excludeClones: false });
-        const slidesCount = this.getSlides().length;
-        const slideIndex = slidesWithClones.indexOf(firstIntersecting.target);
-        const normalizedIndex = this.loop ? slideIndex - this.slidesPerPage : slideIndex;
-        this.activeSlide = (Math.ceil(normalizedIndex / this.slidesPerMove) * this.slidesPerMove + slidesCount) % slidesCount;
-        if (!this.scrolling) {
-          if (this.loop && firstIntersecting.target.hasAttribute("data-clone")) {
-            const clonePosition = Number(firstIntersecting.target.getAttribute("data-clone"));
-            this.goToSlide(clonePosition, "instant");
-          }
-        }
-      },
-      {
-        root: this.scrollContainer,
-        threshold: 0.6
-      }
-    );
-    this.getSlides({ excludeClones: false }).forEach((slide) => {
-      io.observe(slide);
-    });
-  }
-  handleScrollEnd() {
-    if (!this.scrolling || this.dragging) return;
-    this.scrolling = false;
-    this.pendingSlideChange = false;
-    this.synchronizeSlides();
-  }
-  isCarouselItem(node) {
-    return node instanceof Element && node.tagName.toLowerCase() === "cw-carousel-item";
-  }
-  initializeSlides() {
-    this.getSlides({ excludeClones: false }).forEach((slide, index) => {
-      slide.classList.remove("--in-view");
-      slide.classList.remove("--is-active");
-      slide.setAttribute("role", "group");
-      slide.setAttribute("aria-label", this.localize.term("slideNum", index + 1));
-      if (this.pagination) {
-        slide.setAttribute("id", `slide-${index + 1}`);
-        slide.setAttribute("role", "tabpanel");
-        slide.removeAttribute("aria-label");
-        slide.setAttribute("aria-labelledby", `tab-${index + 1}`);
-      }
-      if (slide.hasAttribute("data-clone")) {
-        slide.remove();
-      }
-    });
-    this.updateSlidesSnap();
-    if (this.loop) {
-      this.createClones();
-    }
-    this.goToSlide(this.activeSlide, "auto");
-    this.synchronizeSlides();
-  }
-  createClones() {
-    const slides = this.getSlides();
-    const slidesPerPage = this.slidesPerPage;
-    const lastSlides = slides.slice(-slidesPerPage);
-    const firstSlides = slides.slice(0, slidesPerPage);
-    lastSlides.reverse().forEach((slide, i) => {
-      const clone = slide.cloneNode(true);
-      clone.setAttribute("data-clone", String(slides.length - i - 1));
-      this.prepend(clone);
-    });
-    firstSlides.forEach((slide, i) => {
-      const clone = slide.cloneNode(true);
-      clone.setAttribute("data-clone", String(i));
-      this.append(clone);
-    });
-  }
-  handleSlideChange() {
-    const slides = this.getSlides();
-    slides.forEach((slide, i) => {
-      slide.classList.toggle("--is-active", i === this.activeSlide);
-    });
-    if (this.hasUpdated) {
-      this.emit("cw-slide-change", {
-        detail: {
-          index: this.activeSlide,
-          slide: slides[this.activeSlide]
-        }
-      });
-    }
-  }
-  updateSlidesSnap() {
-    const slides = this.getSlides();
-    const slidesPerMove = this.slidesPerMove;
-    slides.forEach((slide, i) => {
-      const shouldSnap = (i + slidesPerMove) % slidesPerMove === 0;
-      if (shouldSnap) {
-        slide.style.removeProperty("scroll-snap-align");
-      } else {
-        slide.style.setProperty("scroll-snap-align", "none");
-      }
-    });
-  }
-  handleAutoplayChange() {
-    this.autoplayController.stop();
-    if (this.autoplay) {
-      this.autoplayController.start(this.autoplayInterval);
-    }
-  }
-  /**
-   * Move the carousel backward by `slides-per-move` slides.
-   *
-   * @param behavior - The behavior used for scrolling.
-   */
-  previous(behavior = "smooth") {
-    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
-  }
-  /**
-   * Move the carousel forward by `slides-per-move` slides.
-   *
-   * @param behavior - The behavior used for scrolling.
-   */
-  next(behavior = "smooth") {
-    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
-  }
-  /**
-   * Scrolls the carousel to the slide specified by `index`.
-   *
-   * @param index - The slide index.
-   * @param behavior - The behavior used for scrolling.
-   */
-  goToSlide(index, behavior = "smooth") {
-    const { slidesPerPage, loop } = this;
-    const slides = this.getSlides();
-    const slidesWithClones = this.getSlides({ excludeClones: false });
-    if (!slides.length) {
-      return;
-    }
-    const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - slidesPerPage);
-    this.activeSlide = newActiveSlide;
-    const isRtl = this.localize.dir() === "rtl";
-    const nextSlideIndex = clamp(
-      index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0),
-      0,
-      slidesWithClones.length - 1
-    );
-    const nextSlide = slidesWithClones[nextSlideIndex];
-    this.scrollToSlide(nextSlide, prefersReducedMotion() ? "auto" : behavior);
-  }
-  scrollToSlide(slide, behavior = "smooth") {
-    this.pendingSlideChange = true;
-    window.requestAnimationFrame(() => {
-      if (!this.scrollContainer) {
-        return;
-      }
-      const scrollContainer = this.scrollContainer;
-      const scrollContainerRect = scrollContainer.getBoundingClientRect();
-      const nextSlideRect = slide.getBoundingClientRect();
-      const nextLeft = nextSlideRect.left - scrollContainerRect.left;
-      const nextTop = nextSlideRect.top - scrollContainerRect.top;
-      if (nextLeft || nextTop) {
-        this.pendingSlideChange = true;
-        scrollContainer.scrollTo({
-          left: nextLeft + scrollContainer.scrollLeft,
-          top: nextTop + scrollContainer.scrollTop,
-          behavior
-        });
-      } else {
-        this.pendingSlideChange = false;
-      }
-    });
-  }
-  render() {
-    const { slidesPerMove, scrolling } = this;
-    const pagesCount = this.getPageCount();
-    const currentPage = this.getCurrentPage();
-    const prevEnabled = this.canScrollPrev();
-    const nextEnabled = this.canScrollNext();
-    const isLtr = this.localize.dir() === "ltr";
-    return html`
-      <div part="base" class="carousel">
-        <div
-          id="scroll-container"
-          part="scroll-container"
-          class="${classMap({
-      carousel__slides: true,
-      "carousel__slides--horizontal": this.orientation === "horizontal",
-      "carousel__slides--vertical": this.orientation === "vertical",
-      "carousel__slides--dragging": this.dragging
-    })}"
-          style="--slides-per-page: ${this.slidesPerPage};"
-          aria-busy="${scrolling ? "true" : "false"}"
-          aria-atomic="true"
-          tabindex="0"
-          @keydown=${this.handleKeyDown}
-          @mousedown="${this.handleMouseDragStart}"
-          @scroll="${this.handleScroll}"
-          @scrollend=${this.handleScrollEnd}
-          @click=${this.handleClick}
-        >
-          <slot></slot>
-        </div>
-
-        ${this.navigation ? html`
-                <div part="navigation" class="carousel__navigation">
-                  <button
-                    part="navigation-button navigation-button--previous"
-                    class="${classMap({
-      "carousel__navigation-button": true,
-      "carousel__navigation-button--previous": true,
-      "carousel__navigation-button--disabled": !prevEnabled
-    })}"
-                    aria-label="${this.localize.term("previousSlide")}"
-                    aria-controls="scroll-container"
-                    aria-disabled="${prevEnabled ? "false" : "true"}"
-                    @click=${prevEnabled ? () => this.previous() : null}
-                  >
-                    <slot name="previous-icon">
-                      <cw-icon library="system" name="${isLtr ? "chevron-left" : "chevron-right"}"></cw-icon>
-                    </slot>
-                  </button>
-
-                  <button
-                    part="navigation-button navigation-button--next"
-                    class=${classMap({
-      "carousel__navigation-button": true,
-      "carousel__navigation-button--next": true,
-      "carousel__navigation-button--disabled": !nextEnabled
-    })}
-                    aria-label="${this.localize.term("nextSlide")}"
-                    aria-controls="scroll-container"
-                    aria-disabled="${nextEnabled ? "false" : "true"}"
-                    @click=${nextEnabled ? () => this.next() : null}
-                  >
-                    <slot name="next-icon">
-                      <cw-icon library="system" name="${isLtr ? "chevron-right" : "chevron-left"}"></cw-icon>
-                    </slot>
-                  </button>
-                </div>
-              ` : ""}
-        ${this.pagination ? html`
-                <div part="pagination" role="tablist" class="carousel__pagination">
-                  ${map(range(pagesCount), (index) => {
-      const isActive = index === currentPage;
-      return html`
-                      <button
-                        part="pagination-item ${isActive ? "pagination-item--active" : ""}"
-                        class="${classMap({
-        "carousel__pagination-item": true,
-        "carousel__pagination-item--active": isActive
-      })}"
-                        role="tab"
-                        id="tab-${index + 1}"
-                        aria-controls="slide-${index + 1}"
-                        aria-selected="${isActive ? "true" : "false"}"
-                        aria-label="${isActive ? this.localize.term("slideNum", index + 1) : this.localize.term("goToSlide", index + 1, pagesCount)}"
-                        tabindex=${isActive ? "0" : "-1"}
-                        @click=${() => this.goToSlide(index * slidesPerMove)}
-                        @keydown=${this.handleKeyDown}
-                      ></button>
-                    `;
-    })}
-                </div>
-              ` : ""}
-      </div>
-    `;
-  }
-};
-CwCarousel.styles = [component_styles_default, carousel_styles_default];
-CwCarousel.dependencies = { "cw-icon": CwIcon };
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwCarousel.prototype, "loop", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwCarousel.prototype, "navigation", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwCarousel.prototype, "pagination", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwCarousel.prototype, "autoplay", 2);
-__decorateClass([
-  property({ type: Number, attribute: "autoplay-interval" })
-], CwCarousel.prototype, "autoplayInterval", 2);
-__decorateClass([
-  property({ type: Number, attribute: "slides-per-page" })
-], CwCarousel.prototype, "slidesPerPage", 2);
-__decorateClass([
-  property({ type: Number, attribute: "slides-per-move" })
-], CwCarousel.prototype, "slidesPerMove", 2);
-__decorateClass([
-  property()
-], CwCarousel.prototype, "orientation", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
-], CwCarousel.prototype, "mouseDragging", 2);
-__decorateClass([
-  query(".carousel__slides")
-], CwCarousel.prototype, "scrollContainer", 2);
-__decorateClass([
-  query(".carousel__pagination")
-], CwCarousel.prototype, "paginationContainer", 2);
-__decorateClass([
-  state()
-], CwCarousel.prototype, "activeSlide", 2);
-__decorateClass([
-  state()
-], CwCarousel.prototype, "scrolling", 2);
-__decorateClass([
-  state()
-], CwCarousel.prototype, "dragging", 2);
-__decorateClass([
-  eventOptions({ passive: true })
-], CwCarousel.prototype, "handleScroll", 1);
-__decorateClass([
-  watch("loop", { waitUntilFirstUpdate: true }),
-  watch("slidesPerPage", { waitUntilFirstUpdate: true })
-], CwCarousel.prototype, "initializeSlides", 1);
-__decorateClass([
-  watch("activeSlide")
-], CwCarousel.prototype, "handleSlideChange", 1);
-__decorateClass([
-  watch("slidesPerMove")
-], CwCarousel.prototype, "updateSlidesSnap", 1);
-__decorateClass([
-  watch("autoplay")
-], CwCarousel.prototype, "handleAutoplayChange", 1);
-
-export {
-  CwCarousel
-};

package/dist/chunks/chunk.IEAMYQ3R.js

@@ -1,21 +0,0 @@
-import {
-  CwTabPanel
-} from "./chunk.DGPMDRA6.js";
-
-// src/react/tab-panel/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cw-tab-panel";
-CwTabPanel.define("cw-tab-panel");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwTabPanel,
-  react: React,
-  events: {},
-  displayName: "CwTabPanel"
-});
-var tab_panel_default = reactWrapper;
-
-export {
-  tab_panel_default
-};