@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.4

package/src/lib/calendar/calendar.ts

@@ -0,0 +1,253 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  model,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+
+interface CalendarDay {
+  iso: string;
+  day: number;
+  inMonth: boolean;
+  isToday: boolean;
+}
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const toIso = (date: Date): string =>
+  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+
+/**
+ * viking-calendar — month-grid date selection.
+ * Value is an ISO date string (YYYY-MM-DD). ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-calendar",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingCalendar)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="viking-calendar">
+      <div class="viking-calendar-header">
+        <button
+          type="button"
+          class="viking-calendar-nav"
+          aria-label="Previous month"
+          (click)="move(-1)"
+        >
+          <viking-icon name="chevron-left" [size]="18" />
+        </button>
+        <span class="viking-calendar-title" aria-live="polite">{{
+          title()
+        }}</span>
+        <button
+          type="button"
+          class="viking-calendar-nav"
+          aria-label="Next month"
+          (click)="move(1)"
+        >
+          <viking-icon name="chevron-right" [size]="18" />
+        </button>
+      </div>
+      <div
+        class="viking-calendar-grid"
+        role="group"
+        [attr.aria-label]="title()"
+      >
+        @for (weekday of weekdays; track weekday) {
+          <span class="viking-calendar-weekday" aria-hidden="true">{{
+            weekday
+          }}</span>
+        }
+        @for (day of days(); track day.iso) {
+          <button
+            type="button"
+            class="viking-calendar-day"
+            [class.viking-outside]="!day.inMonth"
+            [class.viking-today]="day.isToday"
+            [class.viking-selected]="day.iso === value()"
+            [attr.aria-label]="day.iso"
+            [attr.aria-pressed]="day.iso === value()"
+            (click)="pick(day)"
+          >
+            {{ day.day }}
+          </button>
+        }
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .viking-calendar {
+        display: inline-block;
+        padding: var(--viking-space-2);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        font-family: var(--viking-font-family);
+      }
+      .viking-calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+        margin-bottom: var(--viking-space-1);
+      }
+      .viking-calendar-title {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+      }
+      .viking-calendar-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);
+        background: transparent;
+        color: var(--viking-text-muted);
+        border-radius: var(--viking-radius-sm);
+        padding: var(--viking-space-half);
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .viking-calendar-nav:hover {
+        color: var(--viking-text);
+        border-color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+      }
+      .viking-calendar-nav:active {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-calendar-nav:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--viking-space-half);
+      }
+      .viking-calendar-weekday {
+        text-align: center;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        padding: calc(var(--viking-space-1) / 2);
+      }
+      .viking-calendar-day {
+        width: 100%;
+        aspect-ratio: 1;
+        min-width: var(--viking-control-height-sm);
+        min-height: var(--viking-control-height-sm);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--viking-text);
+        border-radius: var(--viking-radius-sm);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        font-variant-numeric: tabular-nums;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .viking-calendar-day:hover:not(.viking-selected) {
+        background: var(--viking-accent-soft);
+      }
+      .viking-calendar-day:active:not(.viking-selected) {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-calendar-day:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-outside {
+        color: var(--viking-text-muted);
+      }
+      .viking-today {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-selected {
+        background: var(--viking-accent);
+        color: var(--viking-accent-content);
+        font-weight: 600;
+      }
+    `,
+  ],
+})
+export class VikingCalendar extends VikingControl<string | null> {
+  readonly value = model<string | null>(null);
+
+  protected readonly weekdays = WEEKDAYS;
+  protected readonly viewDate = signal(new Date());
+
+  protected readonly title = computed(() => {
+    const view = this.viewDate();
+    return `${MONTHS[view.getMonth()]} ${view.getFullYear()}`;
+  });
+
+  protected readonly days = computed<CalendarDay[]>(() => {
+    const view = this.viewDate();
+    const year = view.getFullYear();
+    const month = view.getMonth();
+    const firstOfMonth = new Date(year, month, 1);
+    const start = new Date(year, month, 1 - firstOfMonth.getDay());
+    const todayIso = toIso(new Date());
+    return Array.from({ length: 42 }, (_, index) => {
+      const date = new Date(
+        start.getFullYear(),
+        start.getMonth(),
+        start.getDate() + index,
+      );
+      const iso = toIso(date);
+      return {
+        iso,
+        day: date.getDate(),
+        inMonth: date.getMonth() === month,
+        isToday: iso === todayIso,
+      };
+    });
+  });
+
+  writeValue(value: string | null): void {
+    this.value.set(value);
+    if (value) {
+      const [year, month] = value.split("-").map(Number);
+      this.viewDate.set(new Date(year, month - 1, 1));
+    }
+  }
+
+  protected move = (delta: number): void => {
+    this.viewDate.update(
+      (view) => new Date(view.getFullYear(), view.getMonth() + delta, 1),
+    );
+  };
+
+  protected pick = (day: CalendarDay): void => {
+    this.value.set(day.iso);
+    this.onChange(day.iso);
+    this.onTouched();
+  };
+}

package/src/lib/callout/callout.ts

@@ -0,0 +1,211 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingTone } from "../../core/types";
+
+const TONE_ICONS: Record<string, VikingIconName> = {
+  accent: "info",
+  secondary: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle",
+  info: "info",
+  muted: "info",
+};
+
+/**
+ * viking-callout — highlighted message block.
+ */
+@Component({
+  selector: "viking-callout",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "note",
+    "[class]": "'viking-callout-' + tone()",
+    "[style.display]": "dismissed() ? 'none' : null",
+  },
+  template: `
+    <viking-icon
+      class="viking-callout-icon"
+      [name]="resolvedIcon()"
+      [size]="22"
+    />
+    <div class="viking-callout-body">
+      @if (heading()) {
+        <p class="viking-callout-heading">{{ heading() }}</p>
+      }
+      <div class="viking-callout-text"><ng-content /></div>
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        class="viking-callout-close"
+        aria-label="Dismiss"
+        (click)="dismiss()"
+      >
+        <viking-icon name="x" [size]="18" />
+      </button>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--viking-space-2);
+        padding: var(--viking-space-2);
+        border-radius: var(--viking-radius-lg);
+        border: 1px solid var(--viking-border);
+        border-left-width: 3px;
+        background: var(--viking-surface-alt);
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        box-shadow: var(--viking-shadow-sm);
+        animation: viking-fade-in var(--viking-duration)
+          var(--viking-ease-default);
+      }
+      .viking-callout-icon {
+        margin-top: 2px;
+        color: var(--viking-text-muted);
+      }
+      :host(.viking-callout-accent) {
+        border-color: var(--viking-accent);
+        border-left-color: var(--viking-accent);
+        background: var(--viking-accent-soft);
+      }
+      :host(.viking-callout-accent) .viking-callout-icon {
+        color: var(--viking-accent);
+      }
+      :host(.viking-callout-secondary) {
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent-secondary) 45%,
+          transparent
+        );
+        border-left-color: var(--viking-accent-secondary);
+        background: var(--viking-accent-secondary-soft);
+      }
+      :host(.viking-callout-secondary) .viking-callout-icon {
+        color: var(--viking-accent-secondary);
+      }
+      :host(.viking-callout-info) {
+        border-color: color-mix(in srgb, var(--viking-info) 45%, transparent);
+        border-left-color: var(--viking-info);
+        background: color-mix(
+          in srgb,
+          var(--viking-info) 10%,
+          var(--viking-surface)
+        );
+      }
+      :host(.viking-callout-info) .viking-callout-icon {
+        color: var(--viking-info);
+      }
+      :host(.viking-callout-success) {
+        border-color: color-mix(
+          in srgb,
+          var(--viking-success) 45%,
+          transparent
+        );
+        border-left-color: var(--viking-success);
+        background: color-mix(
+          in srgb,
+          var(--viking-success) 10%,
+          var(--viking-surface)
+        );
+      }
+      :host(.viking-callout-success) .viking-callout-icon {
+        color: var(--viking-success);
+      }
+      :host(.viking-callout-warning) {
+        border-color: color-mix(
+          in srgb,
+          var(--viking-warning) 45%,
+          transparent
+        );
+        border-left-color: var(--viking-warning);
+        background: color-mix(
+          in srgb,
+          var(--viking-warning) 12%,
+          var(--viking-surface)
+        );
+      }
+      :host(.viking-callout-warning) .viking-callout-icon {
+        color: var(--viking-warning);
+      }
+      :host(.viking-callout-danger) {
+        border-color: var(--viking-danger);
+        border-left-color: var(--viking-danger);
+        background: color-mix(
+          in srgb,
+          var(--viking-crimson-600) 22%,
+          var(--viking-surface)
+        );
+        color: var(--viking-white);
+      }
+      :host(.viking-callout-danger) .viking-callout-icon {
+        color: var(--viking-crimson-400);
+      }
+      :host(.viking-callout-danger) .viking-callout-text {
+        color: var(--viking-white);
+      }
+      .viking-callout-body {
+        flex: 1;
+        min-width: 0;
+      }
+      .viking-callout-heading {
+        margin: 0 0 calc(var(--viking-space-1) / 2);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 700;
+      }
+      .viking-callout-text {
+        color: var(--viking-text);
+        line-height: 1.55;
+      }
+      .viking-callout-close {
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: var(--viking-space-half);
+        border-radius: var(--viking-radius);
+        display: inline-flex;
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-callout-close:hover {
+        color: var(--viking-text);
+        background: color-mix(in srgb, currentColor 8%, transparent);
+      }
+      .viking-callout-close:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+    `,
+  ],
+})
+export class VikingCallout {
+  readonly tone = input<VikingTone>("accent");
+  readonly heading = input<string>("");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly dismissible = input<boolean>(false);
+
+  readonly closed = output<void>();
+
+  protected readonly dismissed = signal(false);
+  protected readonly resolvedIcon = computed<VikingIconName>(
+    () => this.icon() ?? TONE_ICONS[this.tone()] ?? "info",
+  );
+
+  protected dismiss = (): void => {
+    this.dismissed.set(true);
+    this.closed.emit();
+  };
+}

package/src/lib/card/card-title.spec.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { VikingCardTitle } from "./card-title";
+
+@Component({
+  imports: [VikingCardTitle],
+  template: `<viking-card-title icon="shield">Security</viking-card-title>`,
+})
+class HostComponent {}
+
+describe("VikingCardTitle", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+  });
+
+  it("renders icon badge and heading text", () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const host = fixture.nativeElement.querySelector(
+      "viking-card-title",
+    ) as HTMLElement;
+    expect(host.querySelector("viking-icon-badge")).toBeTruthy();
+    expect(host.textContent).toContain("Security");
+  });
+});

package/src/lib/card/card-title.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIconBadge, VikingIconBadgeTone } from "../icon-badge/icon-badge";
+import { VikingIconName } from "../../core/icons";
+import { VikingHeading } from "../typography/heading";
+
+/**
+ * viking-card-title — card header title row with tokenized icon badge + heading.
+ * Compose inside viking-card-header for premium, consistent section titles.
+ */
+@Component({
+  selector: "viking-card-title",
+  imports: [VikingIconBadge, VikingHeading],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "viking-card-title" },
+  template: `
+    <viking-icon-badge [icon]="icon()" [tone]="tone()" [size]="iconSize()" />
+    <viking-heading [level]="level()" [size]="size()">
+      <ng-content />
+    </viking-heading>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+      }
+
+      :host ::ng-deep viking-heading {
+        display: block;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 0;
+      }
+    `,
+  ],
+})
+export class VikingCardTitle {
+  readonly icon = input.required<VikingIconName>();
+  readonly tone = input<VikingIconBadgeTone>("default");
+  readonly level = input<1 | 2 | 3 | 4>(2);
+  readonly size = input<"sm" | "base" | "lg" | "xl">("xl");
+  readonly iconSize = input<number>(20);
+}

package/src/lib/card/card.ts

@@ -0,0 +1,170 @@
+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);
+        padding: var(--viking-card-padding, var(--viking-space-3));
+        color: var(--viking-text);
+        transition: var(--viking-transition-interactive);
+        position: relative;
+        overflow: hidden;
+        min-width: 0;
+      }
+      :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(.viking-card-interactive) {
+        cursor: pointer;
+      }
+      :host(.viking-card-interactive):hover {
+        border-color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-hover);
+        transform: translateY(var(--viking-state-hover-lift));
+      }
+      :host(.viking-card-interactive):active {
+        transform: translateY(0) scale(var(--viking-state-active-scale));
+        box-shadow: var(--viking-shadow-md);
+      }
+      :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);
+        border-bottom: 1px solid var(--viking-border-subtle);
+      }
+      /* 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);
+        border-top: 1px solid var(--viking-border-subtle);
+      }
+    `,
+  ],
+})
+export class VikingCardFooter {}