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

package/src/lib/icon-badge/icon-badge.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import {
+  VikingIconColorToken,
+  VikingIconName,
+  VikingIconSizePreset,
+} from "../../core/icons";
+
+export type VikingIconBadgeTone =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+/**
+ * viking-icon-badge — consistent icon backdrop for empty states, callouts, and metric headers.
+ */
+@Component({
+  selector: "viking-icon-badge",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-icon-badge",
+    "[class.viking-icon-badge-success]": "tone() === 'success'",
+    "[class.viking-icon-badge-warning]": "tone() === 'warning'",
+    "[class.viking-icon-badge-danger]": "tone() === 'danger'",
+    "[class.viking-icon-badge-info]": "tone() === 'info'",
+    "[attr.aria-hidden]": 'decorative() ? "true" : null',
+  },
+  template: `
+    <viking-icon
+      [name]="icon()"
+      [size]="size()"
+      [sizePreset]="sizePreset()"
+      [color]="color()"
+      [variant]="variant()"
+    />
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: var(--viking-icon-badge-size, var(--viking-space-6));
+        height: var(--viking-icon-badge-size, var(--viking-space-6));
+        padding: var(--viking-icon-badge-padding, var(--viking-space-half));
+        box-sizing: border-box;
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-accent-soft);
+        color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-sm);
+      }
+
+      :host(.viking-icon-badge-success) {
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+        color: var(--viking-success);
+      }
+
+      :host(.viking-icon-badge-warning) {
+        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
+        color: var(--viking-warning);
+      }
+
+      :host(.viking-icon-badge-danger) {
+        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
+        color: var(--viking-danger);
+      }
+
+      :host(.viking-icon-badge-info) {
+        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
+        color: var(--viking-info);
+      }
+    `,
+  ],
+})
+export class VikingIconBadge {
+  readonly icon = input.required<VikingIconName>();
+  readonly tone = input<VikingIconBadgeTone>("default");
+  readonly size = input<number | undefined>(28);
+  readonly sizePreset = input<VikingIconSizePreset | null>(null);
+  readonly color = input<VikingIconColorToken | string | undefined>(undefined);
+  readonly variant = input<"outline" | "filled">("outline");
+  readonly decorative = input<boolean>(true);
+}

package/src/lib/icon-heading/icon-heading.spec.ts

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { VikingIconHeading } from "./icon-heading";
+
+@Component({
+  imports: [VikingIconHeading],
+  template: `<viking-icon-heading icon="shield" headingLevel="h3"
+    >Tenant Isolation</viking-icon-heading
+  >`,
+})
+class HostComponent {}
+
+describe("VikingIconHeading", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+  });
+
+  it("renders aligned icon and title", () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const heading = fixture.nativeElement.querySelector(
+      ".viking-icon-heading",
+    ) as HTMLElement;
+    expect(heading).toBeTruthy();
+    expect(heading.querySelector(".viking-icon-heading__icon")).toBeTruthy();
+    expect(
+      heading.querySelector("h3.viking-icon-heading__title")?.textContent,
+    ).toContain("Tenant Isolation");
+  });
+});

package/src/lib/icon-heading/icon-heading.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-icon-heading — icon + title row with shared vertical alignment.
+ * Use in bento cards, integration tiles, and docs panels.
+ */
+@Component({
+  selector: "viking-icon-heading",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [VikingIcon],
+  host: {
+    class: "viking-icon-heading",
+    "[class.viking-icon-heading--lg]": 'size() === "lg"',
+  },
+  template: `
+    <span class="viking-icon-heading__icon" aria-hidden="true">
+      <viking-icon [name]="icon()" [size]="24" color="accent" />
+    </span>
+    @if (headingLevel() === "h2") {
+      <h2 class="viking-icon-heading__title"><ng-content /></h2>
+    } @else {
+      <h3 class="viking-icon-heading__title"><ng-content /></h3>
+    }
+  `,
+})
+export class VikingIconHeading {
+  readonly icon = input.required<VikingIconName>();
+  readonly size = input<"md" | "lg">("md");
+  readonly headingLevel = input<"h2" | "h3">("h3");
+}

package/src/lib/icon-text/icon-text.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-icon-text — icon aligned beside a title and optional description.
+ * Use for status rows (MFA enrolled, connected accounts, subscription state).
+ */
+@Component({
+  selector: "viking-icon-text",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-icon-text",
+    "[class.viking-icon-text--muted]": "tone() === 'muted'",
+  },
+  template: `
+    <span
+      class="viking-icon-text-icon"
+      [class]="'viking-icon-text-icon--' + tone()"
+    >
+      @if (icon()) {
+        <viking-icon [name]="icon()!" [size]="iconSize()" />
+      } @else {
+        <ng-content select="[vikingIconTextIcon]" />
+      }
+    </span>
+    <span class="viking-icon-text-body">
+      <strong class="viking-icon-text-title">{{ title() }}</strong>
+      @if (description()) {
+        <span class="viking-icon-text-desc">{{ description() }}</span>
+      } @else {
+        <ng-content select="[vikingIconTextDesc]" />
+      }
+    </span>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--viking-space-1-5, 12px);
+        min-width: 0;
+        flex: 1;
+        font-family: var(--viking-font-family);
+      }
+
+      .viking-icon-text-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        margin-top: 1px;
+        border-radius: var(--viking-radius-sm);
+        background: var(--viking-accent-soft);
+        color: var(--viking-text-muted);
+      }
+
+      .viking-icon-text-icon--success {
+        color: var(--viking-success);
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--info {
+        color: var(--viking-info);
+        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--warning {
+        color: var(--viking-warning);
+        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--danger {
+        color: var(--viking-danger);
+        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--accent {
+        color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+      }
+
+      .viking-icon-text-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-half, 4px);
+        min-width: 0;
+        padding-top: 1px;
+      }
+
+      .viking-icon-text-title {
+        display: block;
+        font-size: var(--viking-font-size, 16px);
+        font-weight: var(--viking-font-weight-semibold, 600);
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-tight, 1.25);
+      }
+
+      .viking-icon-text-desc {
+        display: block;
+        margin: 0;
+        font-size: var(--viking-font-size-sm, 14px);
+        font-weight: var(--viking-font-weight-regular, 400);
+        color: var(--viking-text-muted);
+        line-height: var(--viking-line-height-relaxed, 1.625);
+      }
+    `,
+  ],
+})
+export class VikingIconText {
+  readonly icon = input<VikingIconName | null>(null);
+  readonly title = input.required<string>();
+  readonly description = input<string>("");
+  readonly tone = input<VikingTone>("muted");
+  readonly iconSize = input<number>(16);
+}

package/src/lib/input/input.ts

@@ -0,0 +1,119 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingSpinner } from "../spinner/spinner";
+import { registerVikingElements } from "../../web/index";
+import type { VikingInputWc } from "../../web/input/viking-input-wc";
+
+registerVikingElements();
+
+/**
+ * viking-input — thin Angular wrapper around `viking-input-wc`.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-input",
+  imports: [VikingIcon, VikingSpinner],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [provideVikingCva(VikingInput)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <viking-input-wc
+      [attr.type]="type()"
+      [attr.placeholder]="placeholder()"
+      [attr.value]="value()"
+      [attr.disabled]="isDisabled() ? '' : null"
+      [attr.loading]="loading() ? '' : null"
+      [attr.clearable]="clearable() ? '' : null"
+      [attr.autocomplete]="autocomplete() || null"
+      [attr.aria-label]="label() || placeholder() || 'Text input'"
+      (input)="onWcInput($event)"
+      (blur)="onTouched()"
+      (viking-cleared)="clear()"
+    >
+      @if (icon()) {
+        <viking-icon
+          slot="leading"
+          class="viking-input-icon"
+          [name]="icon()!"
+          [size]="20"
+        />
+      }
+      @if (loading()) {
+        <viking-spinner slot="trailing" [size]="16" label="Loading input" />
+      } @else if (iconTrailing()) {
+        <viking-icon
+          slot="trailing"
+          class="viking-input-icon"
+          [name]="iconTrailing()!"
+          [size]="20"
+        />
+      }
+      @if (kbd()) {
+        <kbd slot="trailing" class="viking-input-kbd">{{ kbd() }}</kbd>
+      }
+    </viking-input-wc>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-input-icon {
+        color: var(--viking-text-muted);
+      }
+      .viking-input-kbd {
+        font-family: var(--viking-font-family-mono);
+        font-size: var(--viking-font-size-xs);
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-xs);
+        padding: 0 var(--viking-space-half);
+        line-height: 1.4;
+      }
+    `,
+  ],
+})
+export class VikingInput extends VikingControl<string> {
+  readonly value = model<string>("");
+  readonly type = input<string>("text");
+  readonly placeholder = input<string>("");
+  readonly label = input<string>("");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly iconTrailing = input<VikingIconName | null>(null);
+  readonly kbd = input<string | null>(null);
+  readonly clearable = input<boolean>(false);
+  readonly loading = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly autocomplete = input<string>("");
+
+  readonly cleared = output<void>();
+
+  protected isDisabled = (): boolean => this.disabled() || this.formDisabled();
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  protected onWcInput = (event: Event): void => {
+    const wc = event.currentTarget as VikingInputWc | null;
+    const next = wc?.value ?? this.value();
+    this.value.set(next);
+    this.onChange(next);
+  };
+
+  protected clear = (): void => {
+    this.value.set("");
+    this.onChange("");
+    this.cleared.emit();
+  };
+}

package/src/lib/kanban/kanban.ts

@@ -0,0 +1,211 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+  output,
+  signal,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingBadge } from "../badge/badge";
+import {
+  VikingKanbanCard,
+  VikingKanbanColumn,
+  VikingKanbanMove,
+} from "../../core/types";
+
+/**
+ * viking-kanban — drag & drop board.
+ * Native HTML5 drag and drop; emits `moved` and updates the `columns` model.
+ */
+@Component({
+  selector: "viking-kanban",
+  imports: [VikingIcon, VikingBadge],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-kanban"
+      role="group"
+      aria-label="Kanban board"
+      tabindex="0"
+    >
+      @for (column of columns(); track column.id) {
+        <section
+          class="viking-kanban-column"
+          [attr.aria-label]="column.title"
+          [class.viking-drop-target]="dropColumnId() === column.id"
+          (dragover)="onDragOver($event, column.id)"
+          (dragleave)="dropColumnId.set(null)"
+          (drop)="onDrop($event, column.id)"
+        >
+          <header class="viking-kanban-header">
+            <span class="viking-kanban-title">{{ column.title }}</span>
+            <viking-badge size="sm">{{ column.cards.length }}</viking-badge>
+          </header>
+          <div class="viking-kanban-cards">
+            @for (card of column.cards; track card.id) {
+              <article
+                class="viking-kanban-card"
+                draggable="true"
+                [class.viking-dragging]="draggingId() === card.id"
+                (dragstart)="onDragStart(card, column.id)"
+                (dragend)="resetDrag()"
+              >
+                <div class="viking-kanban-card-header">
+                  <span class="viking-kanban-card-title">{{ card.title }}</span>
+                  <viking-icon
+                    class="viking-kanban-grip"
+                    name="grip-vertical"
+                    [size]="16"
+                  />
+                </div>
+                @if (card.description) {
+                  <p class="viking-kanban-card-text">{{ card.description }}</p>
+                }
+              </article>
+            }
+          </div>
+        </section>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .viking-kanban:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-kanban {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(234px, 1fr);
+        gap: var(--viking-space-2);
+        overflow-x: auto;
+        padding-bottom: var(--viking-space-1);
+        font-family: var(--viking-font-family);
+      }
+      .viking-kanban-column {
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        padding: var(--viking-space-1);
+        transition: var(--viking-transition);
+      }
+      .viking-drop-target {
+        border-color: var(--viking-accent);
+        background: var(--viking-accent-soft);
+      }
+      .viking-kanban-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-1);
+      }
+      .viking-kanban-title {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .viking-kanban-cards {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        min-height: var(--viking-space-4);
+      }
+      .viking-kanban-card {
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border);
+        border-radius: calc(var(--viking-radius) / 1.2);
+        box-shadow: var(--viking-shadow-sm);
+        padding: var(--viking-space-1) var(--viking-space-2);
+        cursor: grab;
+        transition: var(--viking-transition);
+      }
+      .viking-kanban-card:hover {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-dragging {
+        opacity: 0.45;
+      }
+      .viking-kanban-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+      }
+      .viking-kanban-card-title {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+      }
+      .viking-kanban-grip {
+        color: var(--viking-text-muted);
+      }
+      .viking-kanban-card-text {
+        margin: 3px 0 0;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: 1.45;
+      }
+    `,
+  ],
+})
+export class VikingKanban {
+  readonly columns = model<VikingKanbanColumn[]>([]);
+
+  readonly moved = output<VikingKanbanMove>();
+
+  protected readonly draggingId = signal<string | null>(null);
+  protected readonly dropColumnId = signal<string | null>(null);
+
+  private dragSource: { card: VikingKanbanCard; columnId: string } | null =
+    null;
+
+  protected onDragStart = (card: VikingKanbanCard, columnId: string): void => {
+    this.dragSource = { card, columnId };
+    this.draggingId.set(card.id);
+  };
+
+  protected onDragOver = (event: DragEvent, columnId: string): void => {
+    event.preventDefault();
+    this.dropColumnId.set(columnId);
+  };
+
+  protected onDrop = (event: DragEvent, toColumnId: string): void => {
+    event.preventDefault();
+    const source = this.dragSource;
+    this.resetDrag();
+    if (!source || source.columnId === toColumnId) {
+      return;
+    }
+    this.columns.update((columns) =>
+      columns.map((column) => {
+        if (column.id === source.columnId) {
+          return {
+            ...column,
+            cards: column.cards.filter((card) => card.id !== source.card.id),
+          };
+        }
+        if (column.id === toColumnId) {
+          return { ...column, cards: [...column.cards, source.card] };
+        }
+        return column;
+      }),
+    );
+    const target = this.columns().find((column) => column.id === toColumnId);
+    this.moved.emit({
+      cardId: source.card.id,
+      fromColumnId: source.columnId,
+      toColumnId,
+      toIndex: (target?.cards.length ?? 1) - 1,
+    });
+  };
+
+  protected resetDrag = (): void => {
+    this.draggingId.set(null);
+    this.dropColumnId.set(null);
+    this.dragSource = null;
+  };
+}

package/src/lib/kbd/kbd.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+/**
+ * viking-kbd — keyboard hint chip.
+ */
+@Component({
+  selector: "viking-kbd",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        line-height: 1.2;
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: calc(var(--viking-radius) / 2);
+        padding: 2px var(--viking-space-1);
+        min-width: 1.5rem;
+        box-shadow: inset 0 -1px 0
+          color-mix(in srgb, var(--viking-border) 65%, transparent);
+      }
+    `,
+  ],
+})
+export class VikingKbd {}

package/src/lib/label/label.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-label — accessible form label.
+ */
+@Component({
+  selector: "viking-label",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label class="viking-label" [attr.for]="htmlFor() || null">
+      <ng-content />
+      @if (required()) {
+        <span class="viking-label-required" aria-hidden="true">*</span>
+      }
+    </label>
+  `,
+  styles: [
+    `
+      .viking-label {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--viking-space-1) / 4);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        color: var(--viking-text);
+        letter-spacing: 0.01em;
+        line-height: 1.3;
+      }
+      .viking-label-required {
+        color: var(--viking-accent);
+      }
+    `,
+  ],
+})
+export class VikingLabel {
+  readonly htmlFor = input<string>("");
+  readonly required = input<boolean>(false);
+}