@dataengineeringformachinelearning/viking-ui 3.0.0-alpha.2 → 4.0.0

package/src/lib/carousel/carousel.ts

@@ -0,0 +1,206 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  contentChildren,
+  signal,
+  viewChild,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/** A single slide inside viking-carousel. */
+@Component({
+  selector: "viking-carousel-slide",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: "group", "aria-roledescription": "slide" },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        flex: 0 0 100%;
+        scroll-snap-align: start;
+        display: block;
+        box-sizing: border-box;
+      }
+    `,
+  ],
+})
+export class VikingCarouselSlide {}
+
+/**
+ * viking-carousel — scroll-snap slideshow.
+ */
+@Component({
+  selector: "viking-carousel",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "aria-roledescription": "carousel" },
+  template: `
+    <div
+      class="viking-carousel-viewport"
+      #viewport
+      tabindex="0"
+      role="group"
+      aria-label="Carousel slides"
+      (scroll)="onScroll()"
+    >
+      <ng-content />
+    </div>
+    <div class="viking-carousel-controls">
+      <button
+        type="button"
+        class="viking-carousel-nav"
+        aria-label="Previous slide"
+        [disabled]="index() <= 0"
+        (click)="goTo(index() - 1)"
+      >
+        <viking-icon name="chevron-left" [size]="18" />
+      </button>
+      <div class="viking-carousel-dots">
+        @for (slide of slides(); track $index) {
+          <button
+            type="button"
+            class="viking-carousel-dot"
+            [class.viking-active]="$index === index()"
+            [attr.aria-label]="'Go to slide ' + ($index + 1)"
+            [attr.aria-current]="$index === index()"
+            (click)="goTo($index)"
+          ></button>
+        }
+      </div>
+      <button
+        type="button"
+        class="viking-carousel-nav"
+        aria-label="Next slide"
+        [disabled]="index() >= slides().length - 1"
+        (click)="goTo(index() + 1)"
+      >
+        <viking-icon name="chevron-right" [size]="18" />
+      </button>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-carousel-viewport {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        border-radius: var(--viking-radius);
+        border: 1px solid var(--viking-border);
+        background: var(--viking-surface);
+        scrollbar-width: none;
+      }
+      .viking-carousel-viewport::-webkit-scrollbar {
+        display: none;
+      }
+      .viking-carousel-viewport:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-carousel-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--viking-space-2);
+        margin-top: var(--viking-space-1);
+      }
+      .viking-carousel-nav {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--viking-touch-target-comfort);
+        min-height: var(--viking-touch-target-comfort);
+        border: 1px solid var(--viking-border-strong);
+        background: var(--viking-surface);
+        color: var(--viking-text);
+        border-radius: var(--viking-radius-pill);
+        padding: var(--viking-space-1);
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .viking-carousel-nav:hover:not(:disabled) {
+        border-color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+        box-shadow: var(--viking-shadow-sm);
+        transform: translateY(var(--viking-state-hover-lift));
+      }
+      .viking-carousel-nav:active:not(:disabled) {
+        transform: translateY(0) scale(var(--viking-state-active-scale));
+      }
+      .viking-carousel-nav:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-carousel-nav:disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+      .viking-carousel-dots {
+        display: flex;
+        gap: var(--viking-space-1);
+      }
+      .viking-carousel-dot {
+        position: relative;
+        width: var(--viking-space-1);
+        height: var(--viking-space-1);
+        border-radius: var(--viking-radius-pill);
+        border: 1px solid var(--viking-border-strong);
+        background: var(--viking-surface-alt);
+        cursor: pointer;
+        padding: 0;
+        transition: var(--viking-transition-interactive);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .viking-carousel-dot::before {
+        content: "";
+        position: absolute;
+        inset: 50%;
+        width: var(--viking-touch-target-min);
+        height: var(--viking-touch-target-min);
+        transform: translate(-50%, -50%);
+      }
+      .viking-carousel-dot:hover:not(.viking-active) {
+        border-color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+      }
+      .viking-carousel-dot.viking-active {
+        background: var(--viking-accent);
+        border-color: var(--viking-accent);
+        box-shadow: 0 0 0 2px var(--viking-accent-soft);
+      }
+      .viking-carousel-dot:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+    `,
+  ],
+})
+export class VikingCarousel {
+  private readonly viewport =
+    viewChild.required<ElementRef<HTMLElement>>("viewport");
+
+  protected readonly slides = contentChildren(VikingCarouselSlide);
+  protected readonly index = signal(0);
+
+  protected goTo = (target: number): void => {
+    const clamped = Math.min(this.slides().length - 1, Math.max(0, target));
+    const element = this.viewport().nativeElement;
+    element.scrollTo({
+      left: clamped * element.clientWidth,
+      behavior: "smooth",
+    });
+    this.index.set(clamped);
+  };
+
+  protected onScroll = (): void => {
+    const element = this.viewport().nativeElement;
+    if (element.clientWidth > 0) {
+      this.index.set(Math.round(element.scrollLeft / element.clientWidth));
+    }
+  };
+}

package/src/lib/chart/chart-zoom.spec.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import {
+  clampChartWindow,
+  fullChartWindow,
+  panChartWindow,
+  sliceChartData,
+  zoomChartWindow,
+} from "./chart-zoom";
+
+describe("chart-zoom", () => {
+  it("returns full window for positive counts", () => {
+    expect(fullChartWindow(10)).toEqual({ start: 0, end: 10 });
+    expect(fullChartWindow(0)).toEqual({ start: 0, end: 1 });
+  });
+
+  it("clamps window to valid bounds with minimum span", () => {
+    expect(clampChartWindow({ start: -5, end: 20 }, 10, 3)).toEqual({
+      start: 0,
+      end: 10,
+    });
+    expect(clampChartWindow({ start: 0, end: 1 }, 10, 3)).toEqual({
+      start: 0,
+      end: 3,
+    });
+    expect(clampChartWindow({ start: 0, end: 0 }, 0, 3)).toEqual({
+      start: 0,
+      end: 0,
+    });
+  });
+
+  it("zooms in on wheel up and out on wheel down", () => {
+    const current = { start: 0, end: 20 };
+    const zoomedIn = zoomChartWindow(current, 20, 0.5, -100, 3);
+    const zoomedOut = zoomChartWindow(current, 20, 0.5, 100, 3);
+    expect(zoomedIn.end - zoomedIn.start).toBeLessThan(20);
+    expect(zoomedOut.end - zoomedOut.start).toBeGreaterThanOrEqual(20);
+  });
+
+  it("returns full window when count is at or below min span", () => {
+    expect(zoomChartWindow({ start: 0, end: 3 }, 3, 0.5, -100, 3)).toEqual({
+      start: 0,
+      end: 3,
+    });
+  });
+
+  it("pans window by delta points", () => {
+    expect(panChartWindow({ start: 5, end: 15 }, 20, 3, 3)).toEqual({
+      start: 2,
+      end: 12,
+    });
+    expect(panChartWindow({ start: 0, end: 10 }, 20, -5, 3)).toEqual({
+      start: 5,
+      end: 15,
+    });
+  });
+
+  it("slices data for the active window", () => {
+    const values = ["a", "b", "c", "d", "e"];
+    expect(sliceChartData(values, { start: 1, end: 4 })).toEqual([
+      "b",
+      "c",
+      "d",
+    ]);
+  });
+});

package/src/lib/chart/chart-zoom.ts

@@ -0,0 +1,71 @@
+/** Visible index window for chart zoom/pan (inclusive start, exclusive end). */
+export interface ChartZoomWindow {
+  start: number;
+  end: number;
+}
+
+export const fullChartWindow = (count: number): ChartZoomWindow => ({
+  start: 0,
+  end: Math.max(count, 1),
+});
+
+/** Clamp zoom window to valid bounds with a minimum visible span. */
+export const clampChartWindow = (
+  window: ChartZoomWindow,
+  count: number,
+  minSpan = 3,
+): ChartZoomWindow => {
+  if (count <= 0) {
+    return { start: 0, end: 0 };
+  }
+  const span = Math.max(minSpan, Math.min(count, window.end - window.start));
+  let start = Math.max(0, Math.min(window.start, count - span));
+  let end = start + span;
+  if (end > count) {
+    end = count;
+    start = Math.max(0, end - span);
+  }
+  return { start, end };
+};
+
+/** Wheel delta → narrower/wider window centered on cursor fraction (0–1). */
+export const zoomChartWindow = (
+  current: ChartZoomWindow,
+  count: number,
+  cursorFraction: number,
+  deltaY: number,
+  minSpan = 3,
+): ChartZoomWindow => {
+  if (count <= minSpan) {
+    return fullChartWindow(count);
+  }
+  const span = current.end - current.start;
+  const factor = deltaY < 0 ? 0.85 : 1.15;
+  const nextSpan = Math.max(
+    minSpan,
+    Math.min(count, Math.round(span * factor)),
+  );
+  const anchor = current.start + span * cursorFraction;
+  const raw: ChartZoomWindow = {
+    start: Math.round(anchor - nextSpan * cursorFraction),
+    end: Math.round(anchor - nextSpan * cursorFraction) + nextSpan,
+  };
+  return clampChartWindow(raw, count, minSpan);
+};
+
+/** Drag delta in data points → pan window. */
+export const panChartWindow = (
+  current: ChartZoomWindow,
+  count: number,
+  deltaPoints: number,
+  minSpan = 3,
+): ChartZoomWindow =>
+  clampChartWindow(
+    { start: current.start - deltaPoints, end: current.end - deltaPoints },
+    count,
+    minSpan,
+  );
+
+/** Slice series rows and category labels for the active window. */
+export const sliceChartData = <T>(values: T[], window: ChartZoomWindow): T[] =>
+  values.slice(window.start, window.end);