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

package/src/lib/toast/toast.ts

@@ -0,0 +1,196 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injectable,
+  input,
+  signal,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingToastInstance, VikingToastOptions } from "../../core/types";
+
+const TONE_ICONS: Record<string, VikingIconName> = {
+  accent: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle",
+  muted: "info",
+};
+
+/**
+ * VikingToastService — imperative toast API.
+ * Render a single <viking-toaster> outlet near the app root.
+ */
+@Injectable({ providedIn: "root" })
+export class VikingToastService {
+  private nextId = 1;
+  readonly toasts = signal<VikingToastInstance[]>([]);
+
+  readonly show = (options: VikingToastOptions): number => {
+    const toast: VikingToastInstance = {
+      id: this.nextId++,
+      heading: options.heading ?? "",
+      text: options.text,
+      tone: options.tone ?? "accent",
+      duration: options.duration ?? 4500,
+    };
+    this.toasts.update((list) => [...list, toast]);
+    if (toast.duration > 0) {
+      setTimeout(() => this.dismiss(toast.id), toast.duration);
+    }
+    return toast.id;
+  };
+
+  readonly dismiss = (id: number): void => {
+    this.toasts.update((list) => list.filter((toast) => toast.id !== id));
+  };
+}
+
+/**
+ * viking-toaster — fixed-position outlet that renders active toasts.
+ */
+@Component({
+  selector: "viking-toaster",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "[class.viking-toaster-top]": "position() === 'top-end'" },
+  template: `
+    @for (toast of service.toasts(); track toast.id) {
+      <div
+        class="viking-toast"
+        [class]="'viking-toast-' + toast.tone"
+        role="status"
+      >
+        <viking-icon
+          class="viking-toast-icon"
+          [name]="toneIcon(toast.tone)"
+          [size]="20"
+        />
+        <div class="viking-toast-body">
+          @if (toast.heading) {
+            <p class="viking-toast-heading">{{ toast.heading }}</p>
+          }
+          <p class="viking-toast-text">{{ toast.text }}</p>
+        </div>
+        <button
+          type="button"
+          class="viking-toast-close"
+          aria-label="Dismiss notification"
+          (click)="service.dismiss(toast.id)"
+        >
+          <viking-icon name="x" [size]="16" />
+        </button>
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: fixed;
+        bottom: var(--viking-space-3);
+        right: var(--viking-space-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        z-index: var(--viking-z-toast);
+        max-width: min(414px, calc(100vw - var(--viking-space-4)));
+      }
+      @media (max-width: 767px) {
+        :host {
+          bottom: var(--viking-space-2);
+          right: var(--viking-space-2);
+          left: var(--viking-space-2);
+          max-width: none;
+        }
+      }
+      :host(.viking-toaster-top) {
+        bottom: auto;
+        top: var(--viking-space-3);
+      }
+      .viking-toast {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--viking-space-1);
+        padding: 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-md);
+        font-family: var(--viking-font-family);
+        animation: viking-toast-in var(--viking-duration) var(--viking-ease-out);
+      }
+      @keyframes viking-toast-in {
+        from {
+          transform: translateY(var(--viking-space-1));
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .viking-toast {
+          animation: none;
+        }
+      }
+      .viking-toast-icon {
+        margin-top: 2px;
+      }
+      .viking-toast-accent .viking-toast-icon {
+        color: var(--viking-accent);
+      }
+      .viking-toast-success .viking-toast-icon {
+        color: var(--viking-success);
+      }
+      .viking-toast-warning .viking-toast-icon {
+        color: var(--viking-warning);
+      }
+      .viking-toast-danger .viking-toast-icon {
+        color: var(--viking-danger);
+      }
+      .viking-toast-body {
+        flex: 1;
+        min-width: 0;
+      }
+      .viking-toast-heading {
+        margin: 0;
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+      }
+      .viking-toast-text {
+        margin: 0;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: 1.45;
+      }
+      .viking-toast-close {
+        display: inline-flex;
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: var(--viking-space-half);
+        border-radius: var(--viking-radius-pill);
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-toast-close:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+      }
+      .viking-toast-close:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+    `,
+  ],
+})
+export class VikingToaster {
+  readonly position = input<"bottom-end" | "top-end">("bottom-end");
+
+  constructor(protected readonly service: VikingToastService) {}
+
+  protected toneIcon = (tone: string): VikingIconName =>
+    TONE_ICONS[tone] ?? "info";
+}

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

@@ -0,0 +1,60 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  model,
+} from "@angular/core";
+
+export const VIKING_TOGGLE_GROUP = new InjectionToken<VikingToggleGroup>(
+  "VIKING_TOGGLE_GROUP",
+);
+
+/**
+ * viking-toggle-group — exclusive or multi toggle cluster.
+ */
+@Component({
+  selector: "viking-toggle-group",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: VIKING_TOGGLE_GROUP, useExisting: VikingToggleGroup }],
+  host: {
+    role: "group",
+    class: "viking-toggle-group",
+    "[class.viking-exclusive]": "exclusive()",
+  },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: 0;
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        overflow: hidden;
+        box-shadow: var(--viking-shadow-sm);
+      }
+      :host ::ng-deep viking-toggle:not(:first-child) .viking-toggle {
+        border-left: none;
+        margin-left: -1px;
+        border-radius: 0;
+      }
+      :host ::ng-deep viking-toggle:first-child .viking-toggle {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      :host ::ng-deep viking-toggle:last-child .viking-toggle {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      :host ::ng-deep viking-toggle .viking-toggle {
+        min-width: var(--viking-btn-min-width, 120px);
+        border-radius: 0;
+        box-shadow: none;
+      }
+    `,
+  ],
+})
+export class VikingToggleGroup {
+  readonly value = model<string>("");
+  readonly exclusive = model(true);
+}

package/src/lib/toggle/toggle.ts

@@ -0,0 +1,101 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Optional,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VIKING_TOGGLE_GROUP, VikingToggleGroup } from "./toggle-group";
+
+/**
+ * viking-toggle — pressed-state button toggle.
+ */
+@Component({
+  selector: "viking-toggle",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      class="viking-toggle"
+      [class.viking-pressed]="isPressed()"
+      [attr.aria-pressed]="isPressed()"
+      [disabled]="disabled()"
+      [attr.aria-label]="label() || null"
+      (click)="toggle()"
+    >
+      <ng-content />
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+      }
+      .viking-toggle {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 700;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--viking-space-1);
+        min-height: var(--viking-control-height-sm);
+        min-width: var(--viking-btn-min-width, 120px);
+        padding: 0 var(--viking-space-2);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+        color: var(--viking-text);
+        cursor: pointer;
+        transition: var(--viking-transition);
+      }
+      .viking-toggle:hover:not(:disabled) {
+        border-color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+      }
+      .viking-toggle:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-toggle.viking-pressed {
+        background: var(--viking-accent);
+        border-color: var(--viking-accent);
+        color: var(--viking-accent-content);
+      }
+      .viking-toggle:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+    `,
+  ],
+})
+export class VikingToggle {
+  constructor(@Optional() private readonly group: VikingToggleGroup | null) {}
+
+  readonly pressed = model(false);
+  readonly value = input<string>("");
+  readonly disabled = input(false);
+  readonly label = input("");
+
+  readonly toggled = output<boolean>();
+
+  protected isPressed = (): boolean => {
+    if (this.group && this.value()) {
+      return this.group.value() === this.value();
+    }
+    return this.pressed();
+  };
+
+  protected toggle = (): void => {
+    if (this.disabled()) return;
+    if (this.group && this.value()) {
+      this.group.value.set(this.value());
+      this.toggled.emit(true);
+      return;
+    }
+    const next = !this.pressed();
+    this.pressed.set(next);
+    this.toggled.emit(next);
+  };
+}

package/src/lib/tooltip/tooltip.ts

@@ -0,0 +1,119 @@
+import {
+  DOCUMENT,
+  Directive,
+  ElementRef,
+  Inject,
+  OnDestroy,
+  input,
+} from "@angular/core";
+
+let tooltipIdCounter = 0;
+
+/**
+ * vikingTooltip — attribute directive tooltip.
+ * Shows on hover and keyboard focus; positions itself relative to the host.
+ */
+@Directive({
+  selector: "[vikingTooltip]",
+  host: {
+    class: "viking-tooltip-host viking-focus-ring",
+    "(mouseenter)": "show()",
+    "(mouseleave)": "hide()",
+    "(focusin)": "show()",
+    "(focusout)": "hide()",
+    "(keydown.escape)": "hide()",
+    "[attr.aria-describedby]": "visible() ? tooltipId : null",
+  },
+})
+export class VikingTooltip implements OnDestroy {
+  constructor(
+    private readonly host: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) private readonly document: Document,
+  ) {}
+
+  readonly vikingTooltip = input.required<string>();
+  readonly tooltipPosition = input<"top" | "bottom" | "left" | "right">("top");
+  readonly tooltipKbd = input<string>("");
+
+  protected readonly tooltipId = `viking-tooltip-${++tooltipIdCounter}`;
+
+  private element: HTMLElement | null = null;
+
+  protected visible = (): boolean => this.element !== null;
+
+  protected show = (): void => {
+    if (this.element || !this.vikingTooltip()) {
+      return;
+    }
+    const tip = this.document.createElement("div");
+    tip.id = this.tooltipId;
+    tip.setAttribute("role", "tooltip");
+    tip.className = "viking-tooltip";
+
+    const text = this.document.createElement("span");
+    text.className = "viking-tooltip-text";
+    text.textContent = this.vikingTooltip();
+    tip.appendChild(text);
+
+    if (this.tooltipKbd()) {
+      const kbd = this.document.createElement("kbd");
+      kbd.className = "viking-tooltip-kbd";
+      kbd.textContent = this.tooltipKbd();
+      tip.appendChild(kbd);
+    }
+
+    this.document.body.appendChild(tip);
+    this.position(tip);
+    this.element = tip;
+  };
+
+  private position = (tip: HTMLElement): void => {
+    const anchor = this.host.nativeElement.getBoundingClientRect();
+    const rect = tip.getBoundingClientRect();
+    const gap =
+      parseInt(
+        getComputedStyle(this.document.documentElement).getPropertyValue(
+          "--viking-space-1",
+        ),
+        10,
+      ) || 8;
+    const edge =
+      parseInt(
+        getComputedStyle(this.document.documentElement).getPropertyValue(
+          "--viking-space-1",
+        ),
+        10,
+      ) || 8;
+
+    let left = anchor.left + anchor.width / 2 - rect.width / 2;
+    let top = anchor.top - rect.height - gap;
+
+    switch (this.tooltipPosition()) {
+      case "bottom":
+        top = anchor.bottom + gap;
+        break;
+      case "left":
+        left = anchor.left - rect.width - gap;
+        top = anchor.top + anchor.height / 2 - rect.height / 2;
+        break;
+      case "right":
+        left = anchor.right + gap;
+        top = anchor.top + anchor.height / 2 - rect.height / 2;
+        break;
+      default:
+        break;
+    }
+
+    tip.style.left = `${Math.max(edge, Math.min(left, window.innerWidth - rect.width - edge))}px`;
+    tip.style.top = `${Math.max(edge, top)}px`;
+  };
+
+  protected hide = (): void => {
+    this.element?.remove();
+    this.element = null;
+  };
+
+  ngOnDestroy(): void {
+    this.hide();
+  }
+}

package/src/lib/typography/heading.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+/**
+ * viking-heading — consistent heading sizes.
+ */
+@Component({
+  selector: "viking-heading",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "heading",
+    "[attr.aria-level]": "ariaLevel()",
+    "[class]": "hostClass()",
+  },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+        font-weight: 600;
+        color: var(--viking-text);
+        letter-spacing: var(--header-letter-spacing, -0.02em);
+        font-size: var(--viking-font-size-ui);
+        line-height: 1.25;
+      }
+      :host(.viking-heading-sm) {
+        font-size: var(--viking-font-size-sm);
+      }
+      :host(.viking-heading-lg) {
+        font-size: var(--viking-font-size);
+      }
+      :host(.viking-heading-xl) {
+        font-size: var(--viking-font-size-lg);
+        font-weight: 700;
+      }
+    `,
+  ],
+})
+export class VikingHeading {
+  readonly size = input<"sm" | "base" | "lg" | "xl">("base");
+  readonly level = input<1 | 2 | 3 | 4>(3);
+
+  protected readonly ariaLevel = computed(() => this.level());
+  protected readonly hostClass = computed(
+    () => `viking-heading-${this.size()}`,
+  );
+}

package/src/lib/typography/text.ts

@@ -0,0 +1,51 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+/**
+ * viking-text — body text with semantic variants.
+ */
+@Component({
+  selector: "viking-text",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "[class]": "hostClass()" },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        line-height: 1.65;
+        color: var(--viking-text);
+      }
+      :host(.viking-text-inline) {
+        display: inline;
+      }
+      :host(.viking-text-muted) {
+        color: var(--viking-text-muted);
+      }
+      :host(.viking-text-strong) {
+        font-weight: 600;
+      }
+      :host(.viking-text-accent) {
+        color: var(--viking-accent);
+        font-weight: 500;
+      }
+    `,
+  ],
+})
+export class VikingText {
+  readonly variant = input<"default" | "muted" | "strong" | "accent">(
+    "default",
+  );
+  readonly inline = input<boolean>(false);
+
+  protected readonly hostClass = computed(() => ({
+    [`viking-text-${this.variant()}`]: this.variant() !== "default",
+    "viking-text-inline": this.inline(),
+  }));
+}

package/src/lib/uptime-bar/uptime-bar.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+export type VikingUptimeStatus =
+  | "operational"
+  | "partial_outage"
+  | "major_outage"
+  | "no_data";
+
+/** viking-uptime-bar — timeline bar for uptime history visualizations. */
+@Component({
+  selector: "viking-uptime-bar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-uptime-bar",
+    "[class.viking-uptime-partial]": "status() === 'partial_outage'",
+    "[class.viking-uptime-major]": "status() === 'major_outage'",
+    "[class.viking-uptime-nodata]": "status() === 'no_data'",
+    "[attr.title]": "title()",
+  },
+  template: "",
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--viking-radius);
+        background: var(--viking-success);
+      }
+      :host(.viking-uptime-partial) {
+        height: 70%;
+        align-self: flex-end;
+        background: var(--viking-warning);
+      }
+      :host(.viking-uptime-major) {
+        height: 40%;
+        align-self: flex-end;
+        background: var(--viking-danger);
+      }
+      :host(.viking-uptime-nodata) {
+        background: var(--viking-text-muted);
+        opacity: 0.35;
+      }
+    `,
+  ],
+})
+export class VikingUptimeBar {
+  readonly status = input<VikingUptimeStatus>("operational");
+  readonly title = input<string>("");
+}