@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/calendar/calendar.ts

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

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

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

@@ -1,50 +0,0 @@
-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);
-}