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

package/src/lib/otp-input/otp-input.ts

@@ -0,0 +1,164 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+
+/**
+ * viking-otp-input — one-time-passcode input.
+ * Auto-advances between cells and supports paste. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-otp-input",
+  providers: [provideVikingCva(VikingOtpInput)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.viking-otp-centered]": "centered()",
+  },
+  template: `
+    <div
+      class="viking-otp"
+      role="group"
+      [attr.aria-label]="label() || 'One-time passcode'"
+    >
+      @for (index of indexes(); track index) {
+        <input
+          class="viking-otp-cell"
+          type="text"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [value]="value().charAt(index) || ''"
+          [disabled]="disabled() || formDisabled()"
+          [attr.aria-label]="'Digit ' + (index + 1)"
+          (input)="onCellInput($event, index)"
+          (keydown)="onKeydown($event, index)"
+          (paste)="onPaste($event)"
+          (blur)="onTouched()"
+        />
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .viking-otp {
+        display: flex;
+        gap: var(--viking-space-1);
+      }
+      :host(.viking-otp-centered) .viking-otp {
+        justify-content: center;
+        width: 100%;
+        gap: var(--viking-space-2);
+      }
+      .viking-otp-cell {
+        width: var(--viking-control-height);
+        height: var(--viking-control-height);
+        text-align: center;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-lg);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-text);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-sm);
+        box-shadow: var(--viking-shadow-xs);
+        transition: var(--viking-transition-interactive);
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-otp-cell:hover:not(:disabled) {
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent) 35%,
+          var(--viking-border-strong)
+        );
+        box-shadow: var(--viking-shadow-sm);
+      }
+      .viking-otp-cell:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+        border-color: var(--viking-accent);
+      }
+      .viking-otp-cell:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+      }
+    `,
+  ],
+})
+export class VikingOtpInput extends VikingControl<string> {
+  readonly length = input<number>(6);
+  readonly value = model<string>("");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+  readonly centered = input<boolean>(false);
+
+  readonly completed = output<string>();
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  protected readonly indexes = computed(() =>
+    Array.from({ length: this.length() }, (_, index) => index),
+  );
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  private commit(next: string): void {
+    this.value.set(next);
+    this.onChange(next);
+    if (next.length === this.length()) {
+      this.completed.emit(next);
+    }
+  }
+
+  private focusCell(index: number): void {
+    const cells =
+      this.host.nativeElement.querySelectorAll<HTMLInputElement>(
+        ".viking-otp-cell",
+      );
+    cells[Math.min(this.length() - 1, Math.max(0, index))]?.focus();
+  }
+
+  protected onCellInput = (event: Event, index: number): void => {
+    const char = (event.target as HTMLInputElement).value
+      .replace(/\D/g, "")
+      .slice(-1);
+    const chars = this.value().padEnd(this.length(), " ").split("");
+    chars[index] = char || " ";
+    this.commit(chars.join("").trimEnd().replace(/ /g, ""));
+    if (char) {
+      this.focusCell(index + 1);
+    }
+  };
+
+  protected onKeydown = (event: KeyboardEvent, index: number): void => {
+    if (
+      event.key === "Backspace" &&
+      !(event.target as HTMLInputElement).value
+    ) {
+      this.focusCell(index - 1);
+    } else if (event.key === "ArrowLeft") {
+      this.focusCell(index - 1);
+    } else if (event.key === "ArrowRight") {
+      this.focusCell(index + 1);
+    }
+  };
+
+  protected onPaste = (event: ClipboardEvent): void => {
+    event.preventDefault();
+    const digits = (event.clipboardData?.getData("text") ?? "")
+      .replace(/\D/g, "")
+      .slice(0, this.length());
+    if (digits) {
+      this.commit(digits);
+      this.focusCell(digits.length - 1);
+    }
+  };
+}

package/src/lib/page-back-link/page-back-link.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Params, RouterLink } from "@angular/router";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-page-back-link — consistent dashboard back navigation with fixed spacing
+ * below the control so page titles never sit flush against the link.
+ */
+@Component({
+  selector: "viking-page-back-link",
+  imports: [RouterLink, VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-page-back-link-host",
+  },
+  template: `
+    <nav
+      class="viking-page-back-nav page-back-nav"
+      [attr.aria-label]="navLabel()"
+    >
+      <a
+        class="viking-page-back-link back-link"
+        [routerLink]="route()"
+        [queryParams]="queryParams()"
+        [attr.aria-label]="label()"
+      >
+        <viking-icon name="arrow-left" [size]="18" color="accent" />
+        <span>{{ label() }}</span>
+      </a>
+    </nav>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .viking-page-back-nav {
+        margin: 0;
+        padding: 0;
+      }
+
+      .viking-page-back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-half) 0;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-accent-strong);
+        text-decoration: none;
+        border-radius: var(--viking-radius-xs);
+        transition: var(--viking-transition-interactive);
+      }
+
+      .viking-page-back-link:hover {
+        color: var(--viking-accent);
+      }
+
+      .viking-page-back-link:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+    `,
+  ],
+})
+export class VikingPageBackLink {
+  readonly route = input<string | readonly string[]>("/dashboard");
+  readonly queryParams = input<Params | null>(null);
+  readonly label = input<string>("Back to Dashboard");
+  readonly navLabel = input<string>("Return to dashboard");
+}

package/src/lib/page-header/page-header.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Params } from "@angular/router";
+import { VikingPageBackLink } from "../page-back-link/page-back-link";
+
+/**
+ * viking-page-header — unified HUD page title block (tag, title, subtitle) with
+ * optional back navigation and action slots.
+ */
+@Component({
+  selector: "viking-page-header",
+  imports: [VikingPageBackLink],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.viking-page-header-sidebar]": "layout() === 'sidebar'",
+  },
+  template: `
+    <header
+      class="viking-page-header"
+      [class.dashboard-topbar]="layout() === 'sidebar'"
+      [class.hud-header]="layout() === 'hud'"
+    >
+      <div class="viking-page-header-main title-group topbar-left">
+        @if (backTo()) {
+          <viking-page-back-link
+            [route]="backTo()!"
+            [queryParams]="backQueryParams()"
+            [label]="backLabel()"
+            [navLabel]="backNavLabel()"
+          />
+        } @else {
+          <ng-content select="[vikingPageHeaderBack]" />
+        }
+
+        <div class="viking-page-header-title-block">
+          @if (tag()) {
+            <div class="section-tag-row">
+              <span class="section-tag viking-page-header-tag">{{
+                tag()
+              }}</span>
+            </div>
+          }
+          <h1 class="viking-page-header-title hud-title page-title">
+            {{ title() }}
+          </h1>
+          @if (subtitle()) {
+            <p
+              class="viking-page-header-subtitle hud-subtitle page-description"
+            >
+              {{ subtitle() }}
+            </p>
+          }
+          <ng-content select="[vikingPageHeaderExtra]" />
+        </div>
+      </div>
+      <div class="viking-page-header-actions topbar-right">
+        <ng-content select="[vikingPageHeaderActions]" />
+      </div>
+    </header>
+  `,
+})
+export class VikingPageHeader {
+  readonly tag = input<string>("");
+  readonly title = input.required<string>();
+  readonly subtitle = input<string>("");
+  readonly layout = input<"hud" | "sidebar">("hud");
+  readonly backTo = input<string | readonly string[] | null>(null);
+  readonly backQueryParams = input<Params | null>(null);
+  readonly backLabel = input<string>("Back to Dashboard");
+  readonly backNavLabel = input<string>("Return to dashboard");
+}

package/src/lib/pagination/pagination.ts

@@ -0,0 +1,157 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-pagination — page navigation.
+ */
+@Component({
+  selector: "viking-pagination",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nav class="viking-pagination" aria-label="Pagination">
+      <button
+        type="button"
+        class="viking-page-btn"
+        aria-label="Previous page"
+        [disabled]="page() <= 1"
+        (click)="goTo(page() - 1)"
+      >
+        <viking-icon name="chevron-left" [size]="18" />
+      </button>
+      @for (item of pageItems(); track $index) {
+        @if (item === null) {
+          <span class="viking-page-ellipsis" aria-hidden="true">…</span>
+        } @else {
+          <button
+            type="button"
+            class="viking-page-btn"
+            [class.viking-page-current]="item === page()"
+            [attr.aria-current]="item === page() ? 'page' : null"
+            [attr.aria-label]="'Page ' + item"
+            (click)="goTo(item)"
+          >
+            {{ item }}
+          </button>
+        }
+      }
+      <button
+        type="button"
+        class="viking-page-btn"
+        aria-label="Next page"
+        [disabled]="page() >= totalPages()"
+        (click)="goTo(page() + 1)"
+      >
+        <viking-icon name="chevron-right" [size]="18" />
+      </button>
+    </nav>
+  `,
+  styles: [
+    `
+      .viking-pagination {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--viking-space-1) / 2);
+        flex-wrap: wrap;
+      }
+      .viking-page-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--viking-control-height-sm);
+        height: var(--viking-control-height-sm);
+        padding: 0 var(--viking-space-1);
+        border: 1px solid var(--viking-border-subtle);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-medium);
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        font-variant-numeric: tabular-nums;
+        box-shadow: var(--viking-shadow-xs);
+      }
+      .viking-page-btn:hover:not(:disabled):not(.viking-page-current) {
+        background: var(--viking-accent-soft);
+        border-color: var(--viking-accent-strong);
+        transform: translateY(var(--viking-state-hover-lift));
+      }
+      .viking-page-btn:active:not(:disabled):not(.viking-page-current) {
+        transform: translateY(0) scale(var(--viking-state-active-scale));
+      }
+      .viking-page-btn:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-page-btn:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-page-current {
+        background: var(--viking-accent);
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent) 80%,
+          var(--viking-black)
+        );
+        color: var(--viking-accent-content);
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-bold);
+        box-shadow: var(--viking-shadow-sm);
+      }
+      .viking-page-ellipsis {
+        color: var(--viking-text-muted);
+        padding: 0 var(--viking-space-1);
+        font-size: var(--viking-font-size);
+      }
+    `,
+  ],
+})
+export class VikingPagination {
+  readonly page = model<number>(1);
+  readonly totalPages = input.required<number>();
+
+  /** Windowed page list with null entries marking ellipses. */
+  protected readonly pageItems = computed<(number | null)[]>(() => {
+    const total = this.totalPages();
+    const current = this.page();
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, index) => index + 1);
+    }
+    const pages = new Set<number>([
+      1,
+      2,
+      total - 1,
+      total,
+      current - 1,
+      current,
+      current + 1,
+    ]);
+    const sorted = [...pages]
+      .filter((value) => value >= 1 && value <= total)
+      .sort((a, b) => a - b);
+    const items: (number | null)[] = [];
+    let previous = 0;
+    for (const value of sorted) {
+      if (value - previous > 1) {
+        items.push(null);
+      }
+      items.push(value);
+      previous = value;
+    }
+    return items;
+  });
+
+  protected goTo = (target: number): void => {
+    const clamped = Math.min(this.totalPages(), Math.max(1, target));
+    this.page.set(clamped);
+  };
+}

package/src/lib/pillbox/pillbox.ts

@@ -0,0 +1,157 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-pillbox — multi-value tag input.
+ * Type and press Enter (or comma) to add pills. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-pillbox",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingPillbox)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-control viking-pillbox"
+      [class.viking-disabled]="disabled() || formDisabled()"
+      role="group"
+      [attr.aria-label]="label() || 'Tags'"
+    >
+      @for (pill of values(); track pill) {
+        <span class="viking-pill">
+          {{ pill }}
+          <button
+            type="button"
+            class="viking-pill-remove"
+            [attr.aria-label]="'Remove ' + pill"
+            [disabled]="disabled() || formDisabled()"
+            (click)="remove(pill)"
+          >
+            <viking-icon name="x" [size]="13" />
+          </button>
+        </span>
+      }
+      <input
+        type="text"
+        [placeholder]="values().length === 0 ? placeholder() : ''"
+        [value]="draft()"
+        [disabled]="disabled() || formDisabled()"
+        [attr.aria-label]="label() || placeholder() || 'Add tag'"
+        (input)="draft.set($any($event.target).value)"
+        (keydown)="onKeydown($event)"
+        (blur)="onTouched()"
+      />
+    </div>
+  `,
+  styles: [
+    `
+      .viking-pillbox {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: calc(var(--viking-space-1) / 1.5);
+        min-height: var(--viking-control-height);
+        padding: calc(var(--viking-space-1) / 1.5) 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-sm);
+        transition: var(--viking-transition);
+        cursor: text;
+      }
+      .viking-pillbox:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-disabled {
+        opacity: var(--viking-state-disabled-opacity);
+      }
+      .viking-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        font-weight: 500;
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+        border: 1px solid var(--viking-accent-strong);
+        border-radius: var(--viking-radius-pill);
+        padding: 2px var(--viking-space-1);
+        line-height: 1.35;
+      }
+      .viking-pill-remove {
+        display: inline-flex;
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: 2px;
+        border-radius: var(--viking-radius-pill);
+      }
+      .viking-pill-remove:hover {
+        color: var(--viking-danger);
+      }
+      .viking-pill-remove:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+      input {
+        flex: 1;
+        min-width: 108px;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        padding: calc(var(--viking-space-1) / 2);
+      }
+      input::placeholder {
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingPillbox extends VikingControl<string[]> {
+  readonly values = model<string[]>([]);
+  readonly placeholder = input<string>("Add a tag…");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+
+  protected readonly draft = signal("");
+
+  writeValue(value: string[]): void {
+    this.values.set(value ?? []);
+  }
+
+  protected onKeydown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      const next = this.draft().trim().replace(/,$/, "");
+      if (next && !this.values().includes(next)) {
+        this.values.update((list) => [...list, next]);
+        this.onChange(this.values());
+      }
+      this.draft.set("");
+    } else if (
+      event.key === "Backspace" &&
+      !this.draft() &&
+      this.values().length > 0
+    ) {
+      this.remove(this.values()[this.values().length - 1]);
+    }
+  };
+
+  protected remove = (pill: string): void => {
+    this.values.update((list) => list.filter((item) => item !== pill));
+    this.onChange(this.values());
+  };
+}