@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/icon-text/icon-text.ts

@@ -1,120 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-import { VikingTone } from "../../core/types";
-
-/**
- * viking-icon-text — icon aligned beside a title and optional description.
- * Use for status rows (MFA enrolled, connected accounts, subscription state).
- */
-@Component({
-  selector: "viking-icon-text",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: "viking-icon-text",
-    "[class.viking-icon-text--muted]": "tone() === 'muted'",
-  },
-  template: `
-    <span
-      class="viking-icon-text-icon"
-      [class]="'viking-icon-text-icon--' + tone()"
-    >
-      @if (icon()) {
-        <viking-icon [name]="icon()!" [size]="iconSize()" />
-      } @else {
-        <ng-content select="[vikingIconTextIcon]" />
-      }
-    </span>
-    <span class="viking-icon-text-body">
-      <strong class="viking-icon-text-title">{{ title() }}</strong>
-      @if (description()) {
-        <span class="viking-icon-text-desc">{{ description() }}</span>
-      } @else {
-        <ng-content select="[vikingIconTextDesc]" />
-      }
-    </span>
-  `,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-        align-items: flex-start;
-        gap: var(--viking-space-1-5, 12px);
-        min-width: 0;
-        flex: 1;
-        font-family: var(--viking-font-family);
-      }
-
-      .viking-icon-text-icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        width: 24px;
-        height: 24px;
-        margin-top: 1px;
-        border-radius: var(--viking-radius-sm);
-        background: var(--viking-accent-soft);
-        color: var(--viking-text-muted);
-      }
-
-      .viking-icon-text-icon--success {
-        color: var(--viking-success);
-        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
-      }
-
-      .viking-icon-text-icon--info {
-        color: var(--viking-info);
-        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
-      }
-
-      .viking-icon-text-icon--warning {
-        color: var(--viking-warning);
-        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
-      }
-
-      .viking-icon-text-icon--danger {
-        color: var(--viking-danger);
-        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
-      }
-
-      .viking-icon-text-icon--accent {
-        color: var(--viking-accent-strong);
-        background: var(--viking-accent-soft);
-      }
-
-      .viking-icon-text-body {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-half, 4px);
-        min-width: 0;
-        padding-top: 1px;
-      }
-
-      .viking-icon-text-title {
-        display: block;
-        font-size: var(--viking-font-size, 16px);
-        font-weight: var(--viking-font-weight-semibold, 600);
-        color: var(--viking-text);
-        line-height: var(--viking-line-height-tight, 1.25);
-      }
-
-      .viking-icon-text-desc {
-        display: block;
-        margin: 0;
-        font-size: var(--viking-font-size-sm, 14px);
-        font-weight: var(--viking-font-weight-regular, 400);
-        color: var(--viking-text-muted);
-        line-height: var(--viking-line-height-relaxed, 1.625);
-      }
-    `,
-  ],
-})
-export class VikingIconText {
-  readonly icon = input<VikingIconName | null>(null);
-  readonly title = input.required<string>();
-  readonly description = input<string>("");
-  readonly tone = input<VikingTone>("muted");
-  readonly iconSize = input<number>(16);
-}

package/src/lib/input/input.ts

@@ -1,119 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  input,
-  model,
-  output,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-import { VikingSpinner } from "../spinner/spinner";
-import { registerVikingElements } from "../../web/index";
-import type { VikingInputWc } from "../../web/input/viking-input-wc";
-
-registerVikingElements();
-
-/**
- * viking-input — thin Angular wrapper around `viking-input-wc`.
- * ControlValueAccessor-compatible.
- */
-@Component({
-  selector: "viking-input",
-  imports: [VikingIcon, VikingSpinner],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  providers: [provideVikingCva(VikingInput)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <viking-input-wc
-      [attr.type]="type()"
-      [attr.placeholder]="placeholder()"
-      [attr.value]="value()"
-      [attr.disabled]="isDisabled() ? '' : null"
-      [attr.loading]="loading() ? '' : null"
-      [attr.clearable]="clearable() ? '' : null"
-      [attr.autocomplete]="autocomplete() || null"
-      [attr.aria-label]="label() || placeholder() || 'Text input'"
-      (input)="onWcInput($event)"
-      (blur)="onTouched()"
-      (viking-cleared)="clear()"
-    >
-      @if (icon()) {
-        <viking-icon
-          slot="leading"
-          class="viking-input-icon"
-          [name]="icon()!"
-          [size]="20"
-        />
-      }
-      @if (loading()) {
-        <viking-spinner slot="trailing" [size]="16" label="Loading input" />
-      } @else if (iconTrailing()) {
-        <viking-icon
-          slot="trailing"
-          class="viking-input-icon"
-          [name]="iconTrailing()!"
-          [size]="20"
-        />
-      }
-      @if (kbd()) {
-        <kbd slot="trailing" class="viking-input-kbd">{{ kbd() }}</kbd>
-      }
-    </viking-input-wc>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .viking-input-icon {
-        color: var(--viking-text-muted);
-      }
-      .viking-input-kbd {
-        font-family: var(--viking-font-family-mono);
-        font-size: var(--viking-font-size-xs);
-        color: var(--viking-text-muted);
-        background: var(--viking-surface-alt);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-xs);
-        padding: 0 var(--viking-space-half);
-        line-height: 1.4;
-      }
-    `,
-  ],
-})
-export class VikingInput extends VikingControl<string> {
-  readonly value = model<string>("");
-  readonly type = input<string>("text");
-  readonly placeholder = input<string>("");
-  readonly label = input<string>("");
-  readonly icon = input<VikingIconName | null>(null);
-  readonly iconTrailing = input<VikingIconName | null>(null);
-  readonly kbd = input<string | null>(null);
-  readonly clearable = input<boolean>(false);
-  readonly loading = input<boolean>(false);
-  readonly disabled = input<boolean>(false);
-  readonly autocomplete = input<string>("");
-
-  readonly cleared = output<void>();
-
-  protected isDisabled = (): boolean => this.disabled() || this.formDisabled();
-
-  writeValue(value: string): void {
-    this.value.set(value ?? "");
-  }
-
-  protected onWcInput = (event: Event): void => {
-    const wc = event.currentTarget as VikingInputWc | null;
-    const next = wc?.value ?? this.value();
-    this.value.set(next);
-    this.onChange(next);
-  };
-
-  protected clear = (): void => {
-    this.value.set("");
-    this.onChange("");
-    this.cleared.emit();
-  };
-}

package/src/lib/kanban/kanban.ts

@@ -1,211 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  model,
-  output,
-  signal,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingBadge } from "../badge/badge";
-import {
-  VikingKanbanCard,
-  VikingKanbanColumn,
-  VikingKanbanMove,
-} from "../../core/types";
-
-/**
- * viking-kanban — drag & drop board.
- * Native HTML5 drag and drop; emits `moved` and updates the `columns` model.
- */
-@Component({
-  selector: "viking-kanban",
-  imports: [VikingIcon, VikingBadge],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div
-      class="viking-kanban"
-      role="group"
-      aria-label="Kanban board"
-      tabindex="0"
-    >
-      @for (column of columns(); track column.id) {
-        <section
-          class="viking-kanban-column"
-          [attr.aria-label]="column.title"
-          [class.viking-drop-target]="dropColumnId() === column.id"
-          (dragover)="onDragOver($event, column.id)"
-          (dragleave)="dropColumnId.set(null)"
-          (drop)="onDrop($event, column.id)"
-        >
-          <header class="viking-kanban-header">
-            <span class="viking-kanban-title">{{ column.title }}</span>
-            <viking-badge size="sm">{{ column.cards.length }}</viking-badge>
-          </header>
-          <div class="viking-kanban-cards">
-            @for (card of column.cards; track card.id) {
-              <article
-                class="viking-kanban-card"
-                draggable="true"
-                [class.viking-dragging]="draggingId() === card.id"
-                (dragstart)="onDragStart(card, column.id)"
-                (dragend)="resetDrag()"
-              >
-                <div class="viking-kanban-card-header">
-                  <span class="viking-kanban-card-title">{{ card.title }}</span>
-                  <viking-icon
-                    class="viking-kanban-grip"
-                    name="grip-vertical"
-                    [size]="16"
-                  />
-                </div>
-                @if (card.description) {
-                  <p class="viking-kanban-card-text">{{ card.description }}</p>
-                }
-              </article>
-            }
-          </div>
-        </section>
-      }
-    </div>
-  `,
-  styles: [
-    `
-      .viking-kanban:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-kanban {
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: minmax(234px, 1fr);
-        gap: var(--viking-space-2);
-        overflow-x: auto;
-        padding-bottom: var(--viking-space-1);
-        font-family: var(--viking-font-family);
-      }
-      .viking-kanban-column {
-        background: var(--viking-surface-alt);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius);
-        padding: var(--viking-space-1);
-        transition: var(--viking-transition);
-      }
-      .viking-drop-target {
-        border-color: var(--viking-accent);
-        background: var(--viking-accent-soft);
-      }
-      .viking-kanban-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-1);
-      }
-      .viking-kanban-title {
-        font-size: var(--viking-font-size);
-        font-weight: 600;
-        color: var(--viking-text);
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-      .viking-kanban-cards {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1);
-        min-height: var(--viking-space-4);
-      }
-      .viking-kanban-card {
-        background: var(--viking-surface);
-        border: 1px solid var(--viking-border);
-        border-radius: calc(var(--viking-radius) / 1.2);
-        box-shadow: var(--viking-shadow-sm);
-        padding: var(--viking-space-1) var(--viking-space-2);
-        cursor: grab;
-        transition: var(--viking-transition);
-      }
-      .viking-kanban-card:hover {
-        border-color: var(--viking-accent-strong);
-      }
-      .viking-dragging {
-        opacity: 0.45;
-      }
-      .viking-kanban-card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-1);
-      }
-      .viking-kanban-card-title {
-        font-size: var(--viking-font-size);
-        font-weight: 600;
-        color: var(--viking-text);
-      }
-      .viking-kanban-grip {
-        color: var(--viking-text-muted);
-      }
-      .viking-kanban-card-text {
-        margin: 3px 0 0;
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-        line-height: 1.45;
-      }
-    `,
-  ],
-})
-export class VikingKanban {
-  readonly columns = model<VikingKanbanColumn[]>([]);
-
-  readonly moved = output<VikingKanbanMove>();
-
-  protected readonly draggingId = signal<string | null>(null);
-  protected readonly dropColumnId = signal<string | null>(null);
-
-  private dragSource: { card: VikingKanbanCard; columnId: string } | null =
-    null;
-
-  protected onDragStart = (card: VikingKanbanCard, columnId: string): void => {
-    this.dragSource = { card, columnId };
-    this.draggingId.set(card.id);
-  };
-
-  protected onDragOver = (event: DragEvent, columnId: string): void => {
-    event.preventDefault();
-    this.dropColumnId.set(columnId);
-  };
-
-  protected onDrop = (event: DragEvent, toColumnId: string): void => {
-    event.preventDefault();
-    const source = this.dragSource;
-    this.resetDrag();
-    if (!source || source.columnId === toColumnId) {
-      return;
-    }
-    this.columns.update((columns) =>
-      columns.map((column) => {
-        if (column.id === source.columnId) {
-          return {
-            ...column,
-            cards: column.cards.filter((card) => card.id !== source.card.id),
-          };
-        }
-        if (column.id === toColumnId) {
-          return { ...column, cards: [...column.cards, source.card] };
-        }
-        return column;
-      }),
-    );
-    const target = this.columns().find((column) => column.id === toColumnId);
-    this.moved.emit({
-      cardId: source.card.id,
-      fromColumnId: source.columnId,
-      toColumnId,
-      toIndex: (target?.cards.length ?? 1) - 1,
-    });
-  };
-
-  protected resetDrag = (): void => {
-    this.draggingId.set(null);
-    this.dropColumnId.set(null);
-    this.dragSource = null;
-  };
-}

package/src/lib/kbd/kbd.ts

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
-
-/**
- * viking-kbd — keyboard hint chip.
- */
-@Component({
-  selector: "viking-kbd",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-ui);
-        font-weight: 600;
-        line-height: 1.2;
-        color: var(--viking-text-muted);
-        background: var(--viking-surface-alt);
-        border: 1px solid var(--viking-border);
-        border-radius: calc(var(--viking-radius) / 2);
-        padding: 2px var(--viking-space-1);
-        min-width: 1.5rem;
-        box-shadow: inset 0 -1px 0
-          color-mix(in srgb, var(--viking-border) 65%, transparent);
-      }
-    `,
-  ],
-})
-export class VikingKbd {}

package/src/lib/label/label.ts

@@ -1,39 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
-/**
- * viking-label — accessible form label.
- */
-@Component({
-  selector: "viking-label",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <label class="viking-label" [attr.for]="htmlFor() || null">
-      <ng-content />
-      @if (required()) {
-        <span class="viking-label-required" aria-hidden="true">*</span>
-      }
-    </label>
-  `,
-  styles: [
-    `
-      .viking-label {
-        display: inline-flex;
-        align-items: center;
-        gap: calc(var(--viking-space-1) / 4);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-ui);
-        font-weight: 600;
-        color: var(--viking-text);
-        letter-spacing: 0.01em;
-        line-height: 1.3;
-      }
-      .viking-label-required {
-        color: var(--viking-accent);
-      }
-    `,
-  ],
-})
-export class VikingLabel {
-  readonly htmlFor = input<string>("");
-  readonly required = input<boolean>(false);
-}

package/src/lib/loading-overlay/loading-overlay.ts

@@ -1,80 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { VikingSpinner } from "../spinner/spinner";
-
-/**
- * viking-loading-overlay — blocks interaction with a centered spinner.
- * Use on cards, panels, or full-page surfaces during async operations.
- */
-@Component({
-  selector: "viking-loading-overlay",
-  imports: [VikingSpinner],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: "status",
-    "aria-live": "polite",
-    "[attr.aria-label]": "label()",
-    "[class.viking-loading-overlay-full]": "full()",
-  },
-  template: `
-    <div class="viking-loading-overlay-backdrop" aria-hidden="true"></div>
-    <div class="viking-loading-overlay-content">
-      <viking-spinner [size]="spinnerSize()" [label]="label()" />
-      @if (message()) {
-        <p class="viking-loading-overlay-message">{{ message() }}</p>
-      }
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        position: absolute;
-        inset: 0;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: inherit;
-        animation: viking-fade-in var(--viking-duration-fast)
-          var(--viking-ease-out);
-      }
-      :host(.viking-loading-overlay-full) {
-        position: fixed;
-        z-index: var(--viking-z-overlay);
-        border-radius: 0;
-      }
-      .viking-loading-overlay-backdrop {
-        position: absolute;
-        inset: 0;
-        background: color-mix(in srgb, var(--viking-bg) 55%, transparent);
-        backdrop-filter: blur(2px);
-        border-radius: inherit;
-      }
-      .viking-loading-overlay-content {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-2);
-      }
-      .viking-loading-overlay-message {
-        margin: 0;
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-sm);
-        color: var(--viking-text-muted);
-        text-align: center;
-      }
-      @media (prefers-reduced-motion: reduce) {
-        :host {
-          animation: none;
-        }
-      }
-    `,
-  ],
-})
-export class VikingLoadingOverlay {
-  readonly label = input<string>("Loading");
-  readonly message = input<string>("");
-  readonly spinnerSize = input<number>(28);
-  readonly full = input<boolean>(false);
-}

package/src/lib/menubar/menubar.ts

@@ -1,77 +0,0 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
-
-/**
- * viking-menubar — horizontal application menu bar.
- */
-@Component({
-  selector: "viking-menubar",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: "menubar",
-    class: "viking-menubar",
-  },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-1);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        font-family: var(--viking-font-family);
-      }
-      :host ::ng-deep .viking-menubar-item,
-      :host ::ng-deep button[role="menuitem"] {
-        font-size: var(--viking-font-size-ui);
-        font-weight: 600;
-        display: inline-flex;
-        align-items: center;
-        gap: var(--viking-space-1);
-        min-height: var(--viking-control-height-sm);
-        padding: 0 var(--viking-space-2);
-        border: 1px solid transparent;
-        border-radius: var(--viking-radius);
-        background: transparent;
-        color: var(--viking-text);
-        cursor: pointer;
-        transition: var(--viking-transition);
-      }
-      :host ::ng-deep .viking-menubar-item:hover,
-      :host ::ng-deep button[role="menuitem"]:hover {
-        background: var(--viking-accent-soft);
-        color: var(--viking-accent);
-      }
-      :host ::ng-deep .viking-menubar-item:focus-visible,
-      :host ::ng-deep button[role="menuitem"]:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-    `,
-  ],
-})
-export class VikingMenubar {}
-
-/**
- * viking-menubar-item — menu item trigger for viking-menubar.
- */
-@Component({
-  selector: "viking-menubar-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <button type="button" role="menuitem" class="viking-menubar-item">
-      <ng-content />
-    </button>
-  `,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-      }
-    `,
-  ],
-})
-export class VikingMenubarItem {}