@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

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

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

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

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

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

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