@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/lib/card/card.ts

@@ -1,200 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  input,
-} from "@angular/core";
-import { VikingSkeleton } from "../skeleton/skeleton";
-
-/**
- * viking-card — surface container.
- * Compose with viking-card-header / viking-card-footer for structured layouts.
- */
-@Component({
-  selector: "viking-card",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "[class.viking-card-interactive]": "interactive()",
-    "[class.viking-card-loading]": "loading()",
-    "[class.viking-card-compact]": "compact()",
-    "[attr.aria-busy]": "loading() ? 'true' : null",
-    "[attr.tabindex]": "interactive() ? 0 : null",
-    "[attr.role]": "interactive() ? 'button' : null",
-    "(keydown.enter)": "onActivate($event)",
-    "(keydown.space)": "onActivate($event)",
-  },
-  template: `
-    @if (loading()) {
-      <div class="viking-card-skeleton" aria-hidden="true">
-        <viking-skeleton height="var(--viking-font-size-lg)" width="45%" />
-        <viking-skeleton height="var(--viking-font-size-sm)" width="80%" />
-        <viking-skeleton height="var(--viking-font-size-sm)" width="65%" />
-      </div>
-    } @else {
-      <ng-content />
-    }
-  `,
-  imports: [VikingSkeleton],
-  styles: [
-    `
-      :host {
-        display: block;
-        background: var(--viking-surface-recipe, var(--viking-surface));
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-lg);
-        box-shadow:
-          var(--viking-shadow-sm),
-          inset 0 1px 0
-            color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
-        padding: var(--viking-card-padding, var(--viking-space-3));
-        color: var(--viking-text);
-        transition: var(--viking-transition-interactive);
-        position: relative;
-        isolation: isolate;
-        overflow: hidden;
-        min-width: 0;
-        background-clip: padding-box;
-      }
-      :host(.viking-card-headerless) .viking-card-header,
-      :host(.viking-card-headerless) viking-card-header {
-        display: none;
-      }
-      :host::before {
-        content: "";
-        position: absolute;
-        inset: 0 0 auto;
-        height: 1px;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          color-mix(
-            in srgb,
-            var(--viking-metallic-200)
-              var(--viking-surface-hairline-strength, 22%),
-            transparent
-          ),
-          transparent
-        );
-        pointer-events: none;
-      }
-
-      :host::after {
-        content: "";
-        position: absolute;
-        inset: 0 auto auto 0;
-        right: 0;
-        width: 1px;
-        height: 28px;
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--viking-metallic-100) 22%, transparent),
-          transparent
-        );
-        pointer-events: none;
-      }
-
-      :host(.viking-card-interactive) {
-        cursor: pointer;
-      }
-
-      :host(.viking-card-interactive):focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      :host(.viking-card-interactive):hover {
-        border-color: var(--viking-accent-strong);
-        box-shadow:
-          var(--viking-shadow-hover),
-          inset 0 1px 0
-            color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
-        transform: translateY(var(--viking-state-hover-lift));
-      }
-      :host(.viking-card-interactive):active {
-        transform: translateY(0) scale(var(--viking-state-active-scale));
-        box-shadow:
-          inset 0 1px 2px
-            color-mix(in srgb, var(--viking-black) 24%, transparent),
-          var(--viking-shadow-sm);
-      }
-      :host(.viking-card-interactive):focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      :host(.viking-card-loading) {
-        pointer-events: none;
-      }
-      :host(.viking-card-compact) {
-        padding: var(--viking-card-padding-compact, var(--viking-space-2));
-      }
-      .viking-card-skeleton {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1-5);
-      }
-    `,
-  ],
-})
-export class VikingCard {
-  readonly interactive = input<boolean>(false);
-  readonly loading = input<boolean>(false);
-  readonly compact = input<boolean>(false);
-
-  constructor(private readonly host: ElementRef<HTMLElement>) {}
-
-  protected onActivate = (event: Event): void => {
-    if (!this.interactive() || this.loading()) {
-      return;
-    }
-    event.preventDefault();
-    this.host.nativeElement.click();
-  };
-}
-
-/** Header row for viking-card. */
-@Component({
-  selector: "viking-card-header",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-2);
-        padding-bottom: var(--viking-space-2);
-        margin-bottom: var(--viking-space-2);
-      }
-      /* Support slotted left meta + right actions uniformly */
-      :host ::ng-deep > * {
-        display: inline-flex;
-        align-items: center;
-      }
-
-      :host ::ng-deep viking-card-title {
-        flex: 1 1 auto;
-        min-width: 0;
-      }
-    `,
-  ],
-})
-export class VikingCardHeader {}
-
-/** Footer row for viking-card. */
-@Component({
-  selector: "viking-card-footer",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: center;
-        gap: var(--viking-space-2);
-        padding-top: var(--viking-space-2);
-        margin-top: var(--viking-space-2);
-      }
-    `,
-  ],
-})
-export class VikingCardFooter {}

package/src/lib/carousel/carousel.ts

@@ -1,206 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/** 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);