@reliability-design/web 1.0.3 → 1.1.1

package/dist/components/rel-carousel/rel-carousel.ts

@@ -0,0 +1,468 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+@customElement("rel-carousel")
+export class RelCarousel extends LitElement {
+  @property({ type: Number, reflect: true }) value = 0;
+  @property({ type: Boolean }) loop = false;
+  @property({ type: Boolean }) autoplay = false;
+  @property({ type: Number }) interval = 5000;
+  @property({ type: Boolean, attribute: "pause-on-hover" }) pauseOnHover = true;
+  @property({ type: Boolean, attribute: "show-buttons" }) showButtons = true;
+  @property({ type: Boolean, attribute: "show-dots" }) showDots = true;
+  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
+  @property({ type: String }) label: string = "Carousel";
+  @property({ type: Number }) gap?: number;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() private slideCount = 0;
+  @state() private isDragging = false;
+  @state() private dragStartX = 0;
+  @state() private currentTranslate = 0;
+  @state() private prevTranslate = 0;
+
+  @query(".viewport") private viewport?: HTMLElement;
+  @query(".track") private track?: HTMLElement;
+  @query("slot") private slotElement?: HTMLSlotElement;
+
+  private autoplayTimer?: number;
+  private animationId?: number;
+  private prefersReducedMotion = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      position: relative;
+      user-select: none;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .viewport {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+    }
+
+    .track {
+      display: flex;
+      transition: transform 0.3s ease-out;
+      will-change: transform;
+    }
+
+    .track.dragging {
+      transition: none;
+    }
+
+    .track.no-transition {
+      transition: none;
+    }
+
+    ::slotted(*) {
+      flex: 0 0 100%;
+      min-width: 0;
+    }
+
+    /* Navigation buttons */
+    .nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      width: var(--rel-carousel-nav-size, 40px);
+      height: var(--rel-carousel-nav-size, 40px);
+      border-radius: 50%;
+      border: 1px solid var(--rel-color-border-default);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-colors-gray-primary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    .nav-button:hover:not(:disabled) {
+      background: var(--rel-surface-secondary);
+    }
+
+    .nav-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .nav-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .nav-button.prev {
+      left: 12px;
+    }
+
+    .nav-button.next {
+      right: 12px;
+    }
+
+    .nav-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* Dots indicator */
+    .dots {
+      display: flex;
+      justify-content: center;
+      gap: var(--rel-spacing-space-xs);
+      margin-top: var(--rel-spacing-space-md);
+    }
+
+    .dot {
+      width: var(--rel-carousel-dot-size, 8px);
+      height: var(--rel-carousel-dot-size, 8px);
+      border-radius: 50%;
+      border: none;
+      background: var(--rel-colors-gray-border);
+      cursor: pointer;
+      padding: 0;
+      transition: all 0.15s ease;
+    }
+
+    .dot:hover {
+      background: var(--rel-colors-gray-divider);
+    }
+
+    .dot.active {
+      background: var(--rel-color-brand);
+      width: var(--rel-carousel-dot-size-active, 24px);
+      border-radius: 4px;
+    }
+
+    .dot:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      .track {
+        transition: none;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+
+    if (this.autoplay) {
+      this.startAutoplay();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopAutoplay();
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+  }
+
+  private handleSlotChange() {
+    const slot = this.slotElement;
+    if (!slot) return;
+
+    const elements = slot.assignedElements();
+    this.slideCount = elements.length;
+
+    // Ensure value is within bounds
+    if (this.value >= this.slideCount) {
+      this.value = this.slideCount - 1;
+    }
+    if (this.value < 0) {
+      this.value = 0;
+    }
+
+    this.updateTransform();
+  }
+
+  private updateTransform() {
+    if (!this.track || !this.viewport) return;
+
+    const slideWidth = this.viewport.offsetWidth;
+    const gapValue = this.gap ?? 0;
+    const translate = -(this.value * (slideWidth + gapValue));
+
+    this.currentTranslate = translate;
+    this.prevTranslate = translate;
+    this.track.style.transform = `translateX(${translate}px)`;
+
+    if (this.gap) {
+      this.track.style.gap = `${this.gap}px`;
+    } else {
+      this.track.style.gap = "";
+    }
+  }
+
+  private goToPrevious() {
+    if (this.disabled) return;
+
+    if (this.value > 0) {
+      this.value--;
+    } else if (this.loop) {
+      this.value = this.slideCount - 1;
+    }
+
+    this.updateTransform();
+    this.emitChange();
+  }
+
+  private goToNext() {
+    if (this.disabled) return;
+
+    if (this.value < this.slideCount - 1) {
+      this.value++;
+    } else if (this.loop) {
+      this.value = 0;
+    }
+
+    this.updateTransform();
+    this.emitChange();
+  }
+
+  private goToSlide(index: number) {
+    if (this.disabled || index < 0 || index >= this.slideCount) return;
+
+    this.value = index;
+    this.updateTransform();
+    this.emitChange();
+  }
+
+  private emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private startAutoplay() {
+    if (!this.autoplay || this.disabled) return;
+
+    this.stopAutoplay();
+    this.autoplayTimer = window.setInterval(() => {
+      this.goToNext();
+    }, this.interval);
+  }
+
+  private stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = undefined;
+    }
+  }
+
+  private handlePointerDown(e: PointerEvent) {
+    if (this.disabled || !this.track) return;
+
+    this.isDragging = true;
+    this.dragStartX = e.clientX;
+    this.prevTranslate = this.currentTranslate;
+
+    this.track.classList.add("dragging");
+
+    if (this.autoplay && this.pauseOnHover) {
+      this.stopAutoplay();
+    }
+
+    e.preventDefault();
+  }
+
+  private handlePointerMove(e: PointerEvent) {
+    if (!this.isDragging || !this.track) return;
+
+    const currentX = e.clientX;
+    const deltaX = currentX - this.dragStartX;
+    this.currentTranslate = this.prevTranslate + deltaX;
+
+    if (!this.prefersReducedMotion && this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+
+    this.animationId = requestAnimationFrame(() => {
+      if (this.track) {
+        this.track.style.transform = `translateX(${this.currentTranslate}px)`;
+      }
+    });
+  }
+
+  private handlePointerUp(e: PointerEvent) {
+    if (!this.isDragging || !this.track || !this.viewport) return;
+
+    this.isDragging = false;
+    this.track.classList.remove("dragging");
+
+    const deltaX = e.clientX - this.dragStartX;
+    const slideWidth = this.viewport.offsetWidth;
+    const threshold = slideWidth * 0.2; // 20% threshold
+
+    if (Math.abs(deltaX) > threshold) {
+      if (deltaX > 0 && (this.value > 0 || this.loop)) {
+        this.goToPrevious();
+      } else if (deltaX < 0 && (this.value < this.slideCount - 1 || this.loop)) {
+        this.goToNext();
+      } else {
+        this.updateTransform();
+      }
+    } else {
+      this.updateTransform();
+    }
+
+    if (this.autoplay) {
+      this.startAutoplay();
+    }
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) return;
+
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        this.goToPrevious();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        this.goToNext();
+        break;
+      case "Home":
+        e.preventDefault();
+        this.goToSlide(0);
+        break;
+      case "End":
+        e.preventDefault();
+        this.goToSlide(this.slideCount - 1);
+        break;
+    }
+  }
+
+  private handleMouseEnter() {
+    if (this.autoplay && this.pauseOnHover) {
+      this.stopAutoplay();
+    }
+  }
+
+  private handleMouseLeave() {
+    if (this.autoplay && this.pauseOnHover) {
+      this.startAutoplay();
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has("autoplay") || changedProperties.has("interval")) {
+      if (this.autoplay) {
+        this.startAutoplay();
+      } else {
+        this.stopAutoplay();
+      }
+    }
+
+    if (changedProperties.has("value")) {
+      this.updateTransform();
+    }
+  }
+
+  render() {
+    const canGoPrev = this.loop || this.value > 0;
+    const canGoNext = this.loop || this.value < this.slideCount - 1;
+
+    return html`
+      <div
+        class="viewport"
+        part="viewport"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label=${this.label}
+        @keydown=${this.handleKeyDown}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        tabindex="0"
+      >
+        <div
+          class="track"
+          part="track"
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerUp}
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+
+        ${this.showButtons
+          ? html`
+              <button
+                class="nav-button prev"
+                part="prev-button"
+                aria-label="Previous slide"
+                ?disabled=${!canGoPrev || this.disabled}
+                @click=${this.goToPrevious}
+              >
+                <svg viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M10 12L6 8L10 4"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+
+              <button
+                class="nav-button next"
+                part="next-button"
+                aria-label="Next slide"
+                ?disabled=${!canGoNext || this.disabled}
+                @click=${this.goToNext}
+              >
+                <svg viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M6 4L10 8L6 12"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            `
+          : nothing}
+      </div>
+
+      ${this.showDots && this.slideCount > 1
+        ? html`
+            <div class="dots" part="dots">
+              ${Array.from({ length: this.slideCount }, (_, i) => html`
+                <button
+                  class="dot ${i === this.value ? "active" : ""}"
+                  part="dot"
+                  aria-label="Go to slide ${i + 1}"
+                  @click=${() => this.goToSlide(i)}
+                ></button>
+              `)}
+            </div>
+          `
+        : nothing}
+    `;
+  }
+}