@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/metric-card/metric-card.ts

@@ -1,33 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
-/** viking-metric-row — responsive grid row for HUD metric cards. */
-@Component({
-  selector: "viking-metric-row",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="viking-metric-row hud-metrics"><ng-content /></div>`,
-})
-export class VikingMetricRow {}
-
-/** viking-metric-card — single KPI tile in a metric row. */
-@Component({
-  selector: "viking-metric-card",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: "viking-metric-card metric-card col-span-4 col-span-md-4",
-    "[class.viking-metric-card-warning]": "variant() === 'warning'",
-    "[class.warning]": "variant() === 'warning'",
-    "[class.viking-metric-card-critical]": "variant() === 'critical'",
-    "[class.critical]": "variant() === 'critical'",
-  },
-  template: `
-    <span class="viking-metric-label metric-label">{{ label() }}</span>
-    <span class="viking-metric-value metric-value"
-      ><ng-content />{{ value() }}</span
-    >
-  `,
-})
-export class VikingMetricCard {
-  readonly label = input.required<string>();
-  readonly value = input<string | number>("");
-  readonly variant = input<"default" | "warning" | "critical">("default");
-}

package/src/lib/modal/modal.ts

@@ -1,207 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  effect,
-  input,
-  model,
-  viewChild,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-
-/**
- * viking-modal — dialog built on the native <dialog> element
- *. Toggle via the `open` model.
- */
-@Component({
-  selector: "viking-modal",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <dialog
-      #dialog
-      class="viking-modal"
-      tabindex="-1"
-      [attr.aria-label]="heading() || 'Dialog'"
-      (close)="open.set(false)"
-      (click)="onBackdropClick($event)"
-      (keydown.escape)="dismissible() && open.set(false)"
-    >
-      <div class="viking-modal-surface">
-        <header class="viking-modal-header">
-          @if (heading()) {
-            <h2 class="viking-modal-heading">{{ heading() }}</h2>
-          }
-          @if (dismissible()) {
-            <button
-              type="button"
-              class="viking-modal-close"
-              aria-label="Close dialog"
-              (click)="open.set(false)"
-            >
-              <viking-icon name="x" [size]="20" />
-            </button>
-          }
-        </header>
-        <div class="viking-modal-body"><ng-content /></div>
-        <footer class="viking-modal-footer">
-          <ng-content select="[vikingModalActions]" />
-        </footer>
-      </div>
-    </dialog>
-  `,
-  styles: [
-    `
-      .viking-modal {
-        padding: 0;
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius-lg);
-        background: var(--viking-surface);
-        color: var(--viking-text);
-        box-shadow: var(--viking-shadow-lg);
-        width: min(522px, calc(100vw - var(--viking-space-4)));
-        animation: viking-modal-in var(--viking-duration)
-          var(--viking-ease-default);
-        overflow: hidden;
-      }
-      .viking-modal::backdrop {
-        background: var(--viking-overlay-backdrop);
-        backdrop-filter: blur(8px);
-        animation: viking-backdrop-in var(--viking-duration-fast)
-          var(--viking-ease-default);
-      }
-      .viking-modal-surface {
-        display: flex;
-        flex-direction: column;
-        padding: var(--viking-space-3);
-        gap: var(--viking-space-2);
-        font-family: var(--viking-font-family);
-        position: relative;
-      }
-      .viking-modal-surface::before {
-        content: "";
-        position: absolute;
-        inset: 0 0 auto;
-        height: 1px;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
-          transparent
-        );
-        pointer-events: none;
-      }
-      .viking-modal-header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: var(--viking-space-2);
-        padding-bottom: var(--viking-space-1);
-        border-bottom: 1px solid var(--viking-border-subtle);
-      }
-      .viking-modal-heading {
-        margin: 0;
-        font-size: var(--viking-font-size-md);
-        font-weight: var(--viking-font-weight-bold);
-        letter-spacing: var(--viking-letter-spacing-tight);
-        color: var(--viking-text);
-        line-height: var(--viking-line-height-tight);
-      }
-      .viking-modal-close {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--viking-control-height-sm);
-        height: var(--viking-control-height-sm);
-        border: 1px solid transparent;
-        background: transparent;
-        color: var(--viking-text-muted);
-        cursor: pointer;
-        padding: 0;
-        border-radius: var(--viking-radius);
-        transition: var(--viking-transition-interactive);
-        flex-shrink: 0;
-      }
-      .viking-modal-close:hover {
-        color: var(--viking-text);
-        background: var(--viking-accent-soft);
-        border-color: var(--viking-border-subtle);
-      }
-      .viking-modal-close:active {
-        transform: scale(var(--viking-state-active-scale));
-      }
-      .viking-modal-close:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-modal-body {
-        font-size: var(--viking-font-size);
-        line-height: var(--viking-line-height-relaxed);
-        color: var(--viking-text-muted);
-        animation: viking-fade-in var(--viking-duration)
-          var(--viking-ease-default);
-      }
-      .viking-modal-footer {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        align-items: center;
-        gap: var(--viking-space-2);
-        padding-top: var(--viking-space-2);
-        border-top: 1px solid var(--viking-border-subtle);
-      }
-      .viking-modal-footer:empty {
-        display: none;
-      }
-      /* Projected action wrappers keep buttons in a single slot — spread gap inside */
-      :host ::ng-deep .viking-modal-footer [vikingModalActions] {
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-        align-items: center;
-        gap: var(--viking-space-2);
-        width: 100%;
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .viking-modal {
-          animation: none;
-        }
-        .viking-modal::backdrop {
-          animation: none;
-        }
-        .viking-modal-body {
-          animation: none;
-        }
-      }
-    `,
-  ],
-})
-export class VikingModal {
-  private readonly dialogRef =
-    viewChild.required<ElementRef<HTMLDialogElement>>("dialog");
-
-  readonly open = model<boolean>(false);
-  readonly heading = input<string>("");
-  readonly dismissible = input<boolean>(true);
-
-  constructor(host: ElementRef<HTMLElement>) {
-    effect(() => {
-      const dialog = this.dialogRef().nativeElement;
-      // showModal is unavailable during SSR; the dialog stays closed there.
-      if (typeof dialog.showModal !== "function") {
-        return;
-      }
-      if (this.open() && host.nativeElement.isConnected && !dialog.open) {
-        dialog.showModal();
-      } else if (!this.open() && dialog.open) {
-        dialog.close();
-      }
-    });
-  }
-
-  protected onBackdropClick = (event: MouseEvent): void => {
-    if (this.dismissible() && event.target === this.dialogRef().nativeElement) {
-      this.open.set(false);
-    }
-  };
-}

package/src/lib/native-select/native-select.ts

@@ -1,124 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  model,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-import { VikingSelectOption } from "../../core/types";
-import type { VikingSelectWidth } from "../select/select";
-import { vikingUid } from "../../core/uid";
-
-/**
- * viking-native-select — styled native <select>.
- */
-@Component({
-  selector: "viking-native-select",
-  providers: [provideVikingCva(VikingNativeSelect)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "[class.viking-native-select-full]": "width() === 'full'",
-    "[class.viking-native-select-half]": "width() === 'half'",
-  },
-  template: `
-    <label
-      class="viking-native-select"
-      [class.viking-disabled]="disabled() || formDisabled()"
-    >
-      @if (label()) {
-        <span class="viking-native-select-label">{{ label() }}</span>
-      }
-      <select
-        class="viking-native-select-control"
-        [id]="selectId"
-        [disabled]="disabled() || formDisabled()"
-        [value]="value() ?? ''"
-        (change)="onSelectChange($event)"
-        (blur)="onTouched()"
-      >
-        @if (placeholder()) {
-          <option value="" disabled [selected]="!value()">
-            {{ placeholder() }}
-          </option>
-        }
-        @for (option of options(); track option.label) {
-          <option [value]="option.value" [disabled]="option.disabled">
-            {{ option.label }}
-          </option>
-        }
-      </select>
-    </label>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        min-width: 0;
-        font-family: var(--viking-font-family);
-      }
-      :host(.viking-native-select-full) {
-        width: 100%;
-      }
-      :host(.viking-native-select-half) {
-        width: 100%;
-        max-width: var(--viking-select-half-max-width, min(100%, 24rem));
-      }
-      .viking-native-select {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1);
-      }
-      .viking-native-select-label {
-        font-size: var(--viking-font-size-ui);
-        font-weight: 700;
-        color: var(--viking-text);
-      }
-      .viking-native-select-control {
-        width: 100%;
-        min-height: var(--viking-control-height);
-        padding: 0 var(--viking-space-2);
-        font-size: var(--viking-font-size);
-        color: var(--viking-text);
-        background: var(--viking-surface);
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        cursor: pointer;
-        transition: var(--viking-transition);
-      }
-      .viking-native-select-control:hover:not(:disabled) {
-        border-color: var(--viking-accent-strong);
-      }
-      .viking-native-select-control:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-disabled .viking-native-select-control {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-    `,
-  ],
-})
-export class VikingNativeSelect extends VikingControl<string | number | null> {
-  readonly label = input("");
-  readonly placeholder = input("");
-  readonly options = input<VikingSelectOption[]>([]);
-  readonly disabled = input(false);
-  readonly width = input<VikingSelectWidth>("half");
-
-  readonly value = model<string | number | null>(null);
-
-  protected readonly selectId = vikingUid("viking-native-select");
-
-  writeValue(value: string | number | null): void {
-    this.value.set(value);
-  }
-
-  protected onSelectChange = (event: Event): void => {
-    const raw = (event.target as HTMLSelectElement).value;
-    const match = this.options().find((o) => String(o.value) === raw);
-    const next = (match?.value ?? raw) as string | number;
-    this.value.set(next);
-    this.onChange(next);
-  };
-}

package/src/lib/navbar/navbar.ts

@@ -1,124 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-
-/**
- * viking-navbar — horizontal navigation container.
- * Compose with viking-navbar-item and any other inline content.
- */
-@Component({
-  selector: "viking-navbar",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { "[attr.aria-label]": "label()" },
-  template: `<nav class="viking-navbar" [attr.aria-label]="label()">
-    <ng-content />
-  </nav>`,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .viking-navbar {
-        display: flex;
-        align-items: center;
-        gap: var(--viking-space-half);
-        flex-wrap: wrap;
-        padding: var(--viking-space-half);
-        background: color-mix(in srgb, var(--viking-surface) 96%, transparent);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-lg);
-        box-shadow: var(--viking-shadow-sm);
-      }
-    `,
-  ],
-})
-export class VikingNavbar {
-  readonly label = input<string>("Primary");
-}
-
-/** Navigation link/button inside viking-navbar. */
-@Component({
-  selector: "viking-navbar-item",
-  imports: [VikingIcon, NgTemplateOutlet],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-template #content>
-      @if (icon()) {
-        <viking-icon [name]="icon()!" [size]="18" />
-      }
-      <ng-content />
-    </ng-template>
-
-    @if (href()) {
-      <a
-        class="viking-navbar-item"
-        [href]="href()"
-        [class.viking-current]="current()"
-        [attr.aria-current]="current() ? 'page' : null"
-      >
-        <ng-container *ngTemplateOutlet="content" />
-      </a>
-    } @else {
-      <button
-        type="button"
-        class="viking-navbar-item"
-        [class.viking-current]="current()"
-      >
-        <ng-container *ngTemplateOutlet="content" />
-      </button>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-      }
-      .viking-navbar-item {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--viking-space-1);
-        border: 1px solid transparent;
-        background: transparent;
-        color: var(--viking-text-muted);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-sm);
-        font-weight: var(--viking-font-weight-medium);
-        padding: var(--viking-space-1) var(--viking-space-1-5);
-        border-radius: var(--viking-radius);
-        text-decoration: none;
-        cursor: pointer;
-        transition: var(--viking-transition-interactive);
-        position: relative;
-      }
-      .viking-navbar-item:hover {
-        color: var(--viking-text);
-        background: var(--viking-accent-soft);
-      }
-      .viking-navbar-item:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-current {
-        color: var(--viking-text);
-        font-weight: var(--viking-font-weight-semibold);
-        background: var(--viking-accent-soft);
-      }
-      .viking-current::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: var(--viking-space-1);
-        right: var(--viking-space-1);
-        height: 2px;
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-accent);
-      }
-    `,
-  ],
-})
-export class VikingNavbarItem {
-  readonly href = input<string | null>(null);
-  readonly icon = input<VikingIconName | null>(null);
-  readonly current = input<boolean>(false);
-}

package/src/lib/navigation-menu/navigation-menu.ts

@@ -1,116 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
-export interface VikingNavItem {
-  label: string;
-  href?: string;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-/**
- * viking-navigation-menu — primary nav links with active indicator.
- */
-@Component({
-  selector: "viking-navigation-menu",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: "navigation",
-    class: "viking-navigation-menu",
-    "[attr.aria-label]": "label()",
-  },
-  template: `
-    <ul class="viking-nav-list" role="list">
-      @for (item of items(); track item.label) {
-        <li class="viking-nav-item" role="listitem">
-          @if (item.href && !item.disabled) {
-            <a
-              class="viking-nav-link"
-              [class.viking-active]="item.active"
-              [href]="item.href"
-              [attr.aria-current]="item.active ? 'page' : null"
-            >
-              {{ item.label }}
-            </a>
-          } @else {
-            <span
-              class="viking-nav-link"
-              [class.viking-active]="item.active"
-              [class.viking-disabled]="item.disabled"
-              [attr.aria-disabled]="item.disabled ? 'true' : null"
-            >
-              {{ item.label }}
-            </span>
-          }
-        </li>
-      }
-    </ul>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-      }
-      .viking-nav-list {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--viking-space-half);
-        margin: 0;
-        padding: var(--viking-space-half);
-        list-style: none;
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-lg);
-        background: color-mix(
-          in srgb,
-          var(--viking-surface-alt) 80%,
-          var(--viking-surface)
-        );
-        box-shadow: var(--viking-shadow-sm);
-      }
-      .viking-nav-link {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: var(--viking-control-height-sm);
-        min-width: var(--viking-btn-min-width, 120px);
-        padding: 0 var(--viking-space-2);
-        font-size: var(--viking-font-size-sm);
-        font-weight: var(--viking-font-weight-semibold);
-        color: var(--viking-text-muted);
-        text-decoration: none;
-        border-radius: var(--viking-radius);
-        border: 1px solid transparent;
-        transition: var(--viking-transition-interactive);
-        position: relative;
-      }
-      a.viking-nav-link:hover {
-        color: var(--viking-text);
-        background: var(--viking-accent-soft);
-        border-color: var(--viking-border-subtle);
-      }
-      a.viking-nav-link:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-nav-link.viking-active {
-        color: var(--viking-accent-content);
-        background: var(--viking-accent);
-        border-color: color-mix(
-          in srgb,
-          var(--viking-accent) 80%,
-          var(--viking-black)
-        );
-        box-shadow: var(--viking-shadow-sm);
-      }
-      .viking-nav-link.viking-disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-    `,
-  ],
-})
-export class VikingNavigationMenu {
-  readonly label = input("Main");
-  readonly items = input<VikingNavItem[]>([]);
-}