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

package/src/lib/tabs/tabs.ts

@@ -0,0 +1,109 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChildren,
+  InjectionToken,
+  model,
+} from "@angular/core";
+import { VikingTab } from "./tab";
+
+export const VIKING_TABS = new InjectionToken<VikingTabs>("VIKING_TABS");
+
+/**
+ * viking-tabs — tablist container with roving keyboard navigation.
+ */
+@Component({
+  selector: "viking-tabs",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: VIKING_TABS, useExisting: VikingTabs }],
+  host: { class: "viking-tabs" },
+  template: `
+    <div
+      class="viking-tabs-list"
+      role="tablist"
+      (keydown)="onTabKeydown($event)"
+    >
+      <ng-content select="viking-tab" />
+    </div>
+    <ng-content select="viking-tab-panel" />
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+      }
+      .viking-tabs-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--viking-space-half);
+        padding: var(--viking-space-half);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        background: color-mix(
+          in srgb,
+          var(--viking-surface-alt) 80%,
+          var(--viking-surface)
+        );
+        box-shadow: var(--viking-shadow-sm);
+      }
+      @media (max-width: 767px) {
+        .viking-tabs-list {
+          flex-wrap: nowrap;
+          overflow-x: auto;
+          scroll-snap-type: x proximity;
+          -webkit-overflow-scrolling: touch;
+          scrollbar-width: none;
+        }
+        .viking-tabs-list::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingTabs {
+  private readonly tabComponents = contentChildren(VikingTab);
+
+  readonly value = model<string>("");
+
+  protected onTabKeydown = (event: KeyboardEvent): void => {
+    const tabs = this.tabComponents().filter((tab) => !tab.disabled());
+    if (tabs.length === 0) {
+      return;
+    }
+
+    const currentIndex = tabs.findIndex((tab) => tab.value() === this.value());
+    let nextIndex = currentIndex;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    const next = tabs[nextIndex];
+    this.value.set(next.value());
+    const button = document.getElementById(`viking-tab-${next.value()}`);
+    button?.focus();
+  };
+}

package/src/lib/textarea/textarea.ts

@@ -0,0 +1,103 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+
+/**
+ * viking-textarea — auto-growing textarea.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-textarea",
+  providers: [provideVikingCva(VikingTextarea)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-control viking-textarea-shell"
+      [class.viking-disabled]="isDisabled()"
+    >
+      <textarea
+        [rows]="rows()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="label() || placeholder() || 'Text area'"
+        [style.resize]="autoGrow() ? 'none' : 'vertical'"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+      ></textarea>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-textarea-shell {
+        display: flex;
+        width: 100%;
+        padding: var(--viking-space-1-5) var(--viking-space-2);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-sm);
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-textarea-shell:hover:not(.viking-disabled) {
+        border-color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-md);
+      }
+      .viking-textarea-shell:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+        border-color: var(--viking-accent);
+      }
+      .viking-disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      textarea {
+        width: 100%;
+        box-sizing: border-box;
+        border: none;
+        outline: none !important;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        line-height: 1.55;
+        padding: 0;
+      }
+      textarea::placeholder {
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingTextarea extends VikingControl<string> {
+  readonly value = model<string>("");
+  readonly placeholder = input<string>("");
+  readonly label = input<string>("");
+  readonly rows = input<number>(3);
+  readonly autoGrow = input<boolean>(true);
+  readonly disabled = input<boolean>(false);
+
+  protected isDisabled = (): boolean => this.disabled() || this.formDisabled();
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  protected onInput = (event: Event): void => {
+    const el = event.target as HTMLTextAreaElement;
+    this.value.set(el.value);
+    this.onChange(el.value);
+    if (this.autoGrow()) {
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  };
+}

package/src/lib/theme-toggle/theme-toggle.spec.ts

@@ -0,0 +1,40 @@
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { VikingThemeToggle } from "./theme-toggle";
+
+@Component({
+  imports: [VikingThemeToggle],
+  template: `<viking-theme-toggle [theme]="theme" (toggle)="toggled = true" />`,
+})
+class HostComponent {
+  theme: "light" | "dark" = "dark";
+  toggled = false;
+}
+
+describe("VikingThemeToggle", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+  });
+
+  it("shows sun icon in dark mode", () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector(
+      ".theme-toggle-btn",
+    ) as HTMLButtonElement;
+    expect(btn.getAttribute("aria-label")).toBe("Toggle light and dark theme");
+    expect(btn.querySelector("viking-icon")).toBeTruthy();
+  });
+
+  it("emits toggle on click", () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector(
+      ".theme-toggle-btn",
+    ) as HTMLButtonElement;
+    btn.click();
+    expect(fixture.componentInstance.toggled).toBe(true);
+  });
+});

package/src/lib/theme-toggle/theme-toggle.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-theme-toggle — navbar utility control for light/dark theme switching.
+ * Uses `.theme-toggle-btn` styles from viking-ui.css (static-navbar.scss).
+ */
+@Component({
+  selector: "viking-theme-toggle",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [VikingIcon],
+  host: { class: "viking-theme-toggle-host" },
+  template: `
+    <button
+      type="button"
+      class="theme-toggle-btn"
+      aria-label="Toggle light and dark theme"
+      (click)="toggle.emit()"
+    >
+      <viking-icon [name]="icon()" [size]="20" />
+    </button>
+  `,
+})
+export class VikingThemeToggle {
+  readonly theme = input<"light" | "dark">("dark");
+  readonly toggle = output<void>();
+
+  protected readonly icon = computed(() =>
+    this.theme() === "dark" ? "sun" : "moon",
+  );
+}

package/src/lib/time-picker/time-picker.ts

@@ -0,0 +1,197 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  input,
+  model,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-time-picker — dropdown time selection.
+ * Value is a 24h HH:MM string. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-time-picker",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingTimePicker)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(document:click)": "onDocumentClick($event)",
+    "(keydown.escape)": "open.set(false)",
+  },
+  template: `
+    <button
+      type="button"
+      class="viking-control viking-time-trigger"
+      [disabled]="disabled() || formDisabled()"
+      [attr.aria-expanded]="open()"
+      [attr.aria-label]="label() || placeholder()"
+      aria-haspopup="listbox"
+      (click)="open.set(!open())"
+    >
+      <viking-icon name="clock" [size]="20" />
+      <span
+        class="viking-time-value"
+        [class.viking-time-placeholder]="!value()"
+      >
+        {{ value() || placeholder() }}
+      </span>
+      <viking-icon
+        [name]="open() ? 'chevron-up' : 'chevron-down'"
+        [size]="18"
+      />
+    </button>
+    @if (open()) {
+      <div class="viking-time-panel" role="listbox" aria-label="Choose time">
+        @for (slot of slots(); track slot) {
+          <button
+            type="button"
+            role="option"
+            class="viking-time-option"
+            [class.viking-selected]="slot === value()"
+            [attr.aria-selected]="slot === value()"
+            (click)="pick(slot)"
+          >
+            {{ slot }}
+          </button>
+        }
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: block;
+      }
+      .viking-time-trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        width: 100%;
+        min-height: var(--viking-control-height);
+        padding: 0 var(--viking-space-2);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-sm);
+        color: var(--viking-text-muted);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        cursor: pointer;
+        transition: var(--viking-transition);
+        text-align: left;
+      }
+      .viking-time-trigger:hover:not(:disabled) {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-time-trigger:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-time-trigger:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-time-value {
+        flex: 1;
+        color: var(--viking-text);
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-time-placeholder {
+        color: var(--viking-text-muted);
+      }
+      .viking-time-panel {
+        position: absolute;
+        top: calc(100% + var(--viking-space-1));
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+        padding: var(--viking-space-1);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-md);
+        z-index: var(--viking-z-overlay);
+        max-height: 279px;
+        overflow: auto;
+      }
+      .viking-time-option {
+        padding: var(--viking-space-1);
+        border: none;
+        background: transparent;
+        text-align: left;
+        width: 100%;
+        border-radius: calc(var(--viking-radius) / 1.5);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        cursor: pointer;
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-time-option:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: -2px;
+      }
+      .viking-time-option:hover {
+        background: var(--viking-accent-soft);
+      }
+      .viking-selected {
+        color: var(--viking-accent);
+        font-weight: 600;
+      }
+    `,
+  ],
+})
+export class VikingTimePicker extends VikingControl<string | null> {
+  readonly value = model<string | null>(null);
+  readonly placeholder = input<string>("Select time");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+  /** Minute granularity for generated slots. */
+  readonly stepMinutes = input<number>(30);
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  protected readonly open = signal(false);
+
+  protected readonly slots = computed<string[]>(() => {
+    const step = Math.max(5, this.stepMinutes());
+    const result: string[] = [];
+    for (let minutes = 0; minutes < 24 * 60; minutes += step) {
+      const hours = String(Math.floor(minutes / 60)).padStart(2, "0");
+      const mins = String(minutes % 60).padStart(2, "0");
+      result.push(`${hours}:${mins}`);
+    }
+    return result;
+  });
+
+  writeValue(value: string | null): void {
+    this.value.set(value);
+  }
+
+  protected pick = (slot: string): void => {
+    this.value.set(slot);
+    this.onChange(slot);
+    this.onTouched();
+    this.open.set(false);
+  };
+
+  protected onDocumentClick = (event: Event): void => {
+    if (
+      this.open() &&
+      !this.host.nativeElement.contains(event.target as Node)
+    ) {
+      this.open.set(false);
+    }
+  };
+}

package/src/lib/timeline/timeline.ts

@@ -0,0 +1,152 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-timeline — vertical event feed.
+ * Compose with viking-timeline-item.
+ */
+@Component({
+  selector: "viking-timeline",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: "list" },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+  ],
+})
+export class VikingTimeline {}
+
+/** A single event on viking-timeline. */
+@Component({
+  selector: "viking-timeline-item",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: "listitem" },
+  template: `
+    <div class="viking-timeline-item">
+      <div class="viking-timeline-rail" aria-hidden="true">
+        <span
+          class="viking-timeline-marker"
+          [class]="'viking-marker-' + tone()"
+        >
+          @if (icon()) {
+            <viking-icon [name]="icon()!" [size]="14" />
+          }
+        </span>
+        <span class="viking-timeline-line"></span>
+      </div>
+      <div class="viking-timeline-content">
+        <div class="viking-timeline-header">
+          <span class="viking-timeline-heading">{{ heading() }}</span>
+          @if (timestamp()) {
+            <time class="viking-timeline-time">{{ timestamp() }}</time>
+          }
+        </div>
+        <div class="viking-timeline-body"><ng-content /></div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      :host:last-child .viking-timeline-line {
+        display: none;
+      }
+      .viking-timeline-item {
+        display: flex;
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+      }
+      .viking-timeline-rail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .viking-timeline-marker {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-space-3);
+        height: var(--viking-space-3);
+        border-radius: var(--viking-radius-pill);
+        border: 2px solid var(--viking-border-strong);
+        background: var(--viking-surface);
+        color: var(--viking-text-muted);
+        flex-shrink: 0;
+      }
+      .viking-marker-accent {
+        border-color: var(--viking-accent);
+        color: var(--viking-accent);
+      }
+      .viking-marker-secondary {
+        border-color: var(--viking-accent-secondary);
+        color: var(--viking-accent-secondary);
+      }
+      .viking-marker-info {
+        border-color: var(--viking-info);
+        color: var(--viking-info);
+      }
+      .viking-marker-success {
+        border-color: var(--viking-success);
+        color: var(--viking-success);
+      }
+      .viking-marker-warning {
+        border-color: var(--viking-warning);
+        color: var(--viking-text);
+      }
+      .viking-marker-danger {
+        border-color: var(--viking-danger);
+        color: var(--viking-danger);
+      }
+      .viking-timeline-line {
+        flex: 1;
+        width: 2px;
+        min-height: var(--viking-space-2);
+        background: var(--viking-border);
+      }
+      .viking-timeline-content {
+        flex: 1;
+        padding-bottom: var(--viking-space-3);
+        min-width: 0;
+      }
+      .viking-timeline-header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        flex-wrap: wrap;
+      }
+      .viking-timeline-heading {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+      }
+      .viking-timeline-time {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-timeline-body {
+        margin-top: 3px;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: 1.55;
+      }
+      .viking-timeline-body:empty {
+        display: none;
+      }
+    `,
+  ],
+})
+export class VikingTimelineItem {
+  readonly heading = input.required<string>();
+  readonly timestamp = input<string>("");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly tone = input<VikingTone>("muted");
+}