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

package/src/lib/spinner/spinner.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-spinner — clinical loading indicator.
+ */
+@Component({
+  selector: "viking-spinner",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "status",
+    "aria-live": "polite",
+    "[attr.aria-label]": "label()",
+  },
+  template: `
+    <svg
+      class="viking-spinner-svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      aria-hidden="true"
+    >
+      <circle class="viking-spinner-track" cx="12" cy="12" r="9" />
+      <circle
+        class="viking-spinner-arc"
+        cx="12"
+        cy="12"
+        r="9"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        color: var(--viking-accent);
+      }
+
+      .viking-spinner-svg {
+        --viking-spinner-stroke: 2;
+        shape-rendering: geometricPrecision;
+      }
+
+      .viking-spinner-track,
+      .viking-spinner-arc {
+        fill: none;
+        stroke-width: var(--viking-spinner-stroke);
+      }
+
+      .viking-spinner-track {
+        stroke: color-mix(in srgb, currentColor 14%, transparent);
+      }
+
+      .viking-spinner-arc {
+        stroke: currentColor;
+        stroke-dasharray: 42 84;
+        transform-origin: center;
+        animation: viking-spin var(--viking-duration-slow)
+          var(--viking-ease-default) infinite;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .viking-spinner-arc {
+          animation: none;
+          stroke-dasharray: 56 84;
+        }
+      }
+    `,
+  ],
+})
+export class VikingSpinner {
+  readonly size = input<number>(20);
+  readonly label = input<string>("Loading");
+}

package/src/lib/status-metric-row/status-metric-row.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import type { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-status-metric-row — icon + title/subtitle + value row for status cards.
+ */
+@Component({
+  selector: "viking-status-metric-row",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "viking-status-metric-row ml-stat-panel" },
+  template: `
+    <div class="stat-info">
+      <viking-icon
+        [name]="icon()"
+        [size]="22"
+        color="accent"
+        [backdrop]="true"
+      />
+      <div>
+        <span class="stat-title">{{ title() }}</span>
+        @if (subtitle()) {
+          <span class="stat-subtitle">{{ subtitle() }}</span>
+        }
+      </div>
+    </div>
+    <div class="stat-value-container">
+      <span class="stat-value"><ng-content />{{ value() }}</span>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        padding: var(--viking-space-2);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-surface);
+      }
+      .stat-info {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-2);
+        min-width: 0;
+      }
+      .stat-title {
+        display: block;
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-text);
+      }
+      .stat-subtitle {
+        display: block;
+        font-size: var(--viking-font-size-sm);
+        color: var(--viking-text-muted);
+      }
+      .stat-value {
+        font-size: calc(var(--viking-font-size) * 1.25);
+        font-weight: 700;
+        color: var(--viking-text);
+      }
+    `,
+  ],
+})
+export class VikingStatusMetricRow {
+  readonly icon = input.required<VikingIconName>();
+  readonly title = input.required<string>();
+  readonly subtitle = input<string>("");
+  readonly value = input<string | number>("");
+}

package/src/lib/suite-search-palette/suite-search-palette.ts

@@ -0,0 +1,95 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ElementRef,
+  OnInit,
+  PLATFORM_ID,
+  inject,
+  input,
+  viewChild,
+} from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+import {
+  DEFAULT_SITE_URLS,
+  type SiteDrakkarContext,
+  type SiteUrls,
+} from "../site-drakkar/site-drakkar.config";
+import { registerVikingElements } from "../../web/index";
+
+registerVikingElements();
+
+/**
+ * viking-suite-search-palette — thin Angular wrapper around `viking-suite-command-palette`.
+ * Unified ⌘K command palette for deml.app with curated suite navigation.
+ */
+@Component({
+  selector: "viking-suite-search-palette",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <viking-suite-command-palette
+      #palette
+      [attr.context]="context()"
+      [attr.app-url]="urls().app"
+      [attr.marketing-url]="urls().marketing"
+      [attr.backend-url]="urls().backend"
+      [attr.placeholder]="placeholder()"
+      [attr.global-shortcut]="bindShortcut() ? '' : 'false'"
+    />
+  `,
+})
+export class VikingSuiteSearchPalette implements OnInit, AfterViewInit {
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly context = input<SiteDrakkarContext>("app");
+  readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
+  readonly placeholder = input<string>(
+    "Search documentation, dashboard, settings…",
+  );
+  readonly bindShortcut = input<boolean>(true);
+
+  /** Optional callback when the palette opens (e.g. SearchService bridge). */
+  readonly onRegister =
+    input<(handlers: { open: () => void; close: () => void }) => void>();
+
+  private readonly paletteRef = viewChild<ElementRef<HTMLElement>>("palette");
+
+  ngOnInit(): void {
+    this.onRegister()?.({
+      open: () => this.openPalette(),
+      close: () => this.closePalette(),
+    });
+  }
+
+  ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+    const widgets =
+      (globalThis as { DemlWidgets?: Record<string, unknown> }).DemlWidgets ??
+      {};
+    (globalThis as { DemlWidgets?: Record<string, unknown> }).DemlWidgets = {
+      ...widgets,
+      openSearch: () => this.openPalette(),
+      closeSearch: () => this.closePalette(),
+    };
+  }
+
+  /** Opens the palette. */
+  openPalette(): void {
+    const el = this.paletteRef()?.nativeElement as HTMLElement & {
+      openPalette?: () => void;
+    };
+    el?.openPalette?.();
+  }
+
+  /** Closes the palette and clears the query. */
+  closePalette(): void {
+    const el = this.paletteRef()?.nativeElement as HTMLElement & {
+      closePalette?: () => void;
+    };
+    el?.closePalette?.();
+  }
+}

package/src/lib/switch/switch.ts

@@ -0,0 +1,131 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+
+/**
+ * viking-switch — toggle switch.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-switch",
+  providers: [provideVikingCva(VikingSwitch)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label
+      class="viking-switch"
+      [class.viking-disabled]="disabled() || formDisabled()"
+    >
+      <span class="viking-switch-track" [class.viking-checked]="checked()">
+        <input
+          type="checkbox"
+          role="switch"
+          [checked]="checked()"
+          [disabled]="disabled() || formDisabled()"
+          (change)="toggle($event)"
+          (blur)="onTouched()"
+        />
+        <span class="viking-switch-thumb"></span>
+      </span>
+      <span class="viking-switch-content">
+        <span class="viking-switch-label"><ng-content /></span>
+        @if (description()) {
+          <span class="viking-switch-description">{{ description() }}</span>
+        }
+      </span>
+    </label>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+      }
+      .viking-switch {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--viking-space-1);
+        cursor: pointer;
+      }
+      .viking-disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-switch-track {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        width: var(--viking-space-4);
+        height: calc(var(--viking-space-2) + 2px);
+        padding: 2px;
+        margin-top: 3px;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border-strong);
+        transition: var(--viking-transition-interactive);
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+      /* The native input fills the visual track so clicks and focus land on it. */
+      .viking-switch-track input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .viking-switch-thumb {
+        width: 14px;
+        height: 14px;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-text-muted);
+        transition: var(--viking-transition-transform);
+      }
+      .viking-switch-track.viking-checked {
+        background: var(--viking-accent);
+        border-color: var(--viking-accent);
+      }
+      .viking-switch-track.viking-checked .viking-switch-thumb {
+        background: var(--viking-accent-content);
+        transform: translateX(calc(var(--viking-space-4) - 22px));
+      }
+      .viking-switch-track:has(input:focus-visible) {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-switch-content {
+        display: flex;
+        flex-direction: column;
+      }
+      .viking-switch-label {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        line-height: 1.45;
+      }
+      .viking-switch-description {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingSwitch extends VikingControl<boolean> {
+  readonly checked = model<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly description = input<string>("");
+
+  writeValue(value: boolean): void {
+    this.checked.set(!!value);
+  }
+
+  protected toggle = (event: Event): void => {
+    const next = (event.target as HTMLInputElement).checked;
+    this.checked.set(next);
+    this.onChange(next);
+  };
+}

package/src/lib/table/table.ts

@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingEmptyState } from "../empty-state/empty-state";
+import { VikingSkeleton } from "../skeleton/skeleton";
+
+/**
+ * viking-table — clinical data table wrapper.
+ */
+@Component({
+  selector: "viking-table",
+  imports: [VikingEmptyState, VikingSkeleton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-table-wrap",
+    "[class.viking-table-compact]": "compact()",
+    "[class.viking-table-striped]": "striped()",
+    "[class.viking-table-loading]": "loading()",
+    "[attr.aria-busy]": "loading() ? 'true' : null",
+  },
+  template: `
+    @if (loading()) {
+      <div class="viking-table-loading-state" aria-hidden="true">
+        @for (row of [1, 2, 3, 4]; track row) {
+          <viking-skeleton height="44px" />
+        }
+      </div>
+    } @else if (emptyMessage()) {
+      <viking-empty-state
+        [heading]="emptyMessage()"
+        [description]="emptyDescription()"
+        icon="search-off"
+      />
+    } @else {
+      <table class="viking-table">
+        <ng-content />
+      </table>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-surface);
+        box-shadow: var(--viking-shadow-sm);
+        transition: var(--viking-transition-colors);
+        position: relative;
+      }
+      :host::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          color-mix(in srgb, var(--viking-metallic-200) 18%, transparent),
+          transparent
+        );
+        pointer-events: none;
+        z-index: 1;
+      }
+      .viking-table-loading-state {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-2);
+      }
+      .viking-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        color: var(--viking-text);
+      }
+      :host ::ng-deep thead th {
+        font-size: var(--viking-font-size-xs);
+        font-weight: var(--viking-font-weight-bold);
+        text-align: left;
+        letter-spacing: var(--viking-letter-spacing-caps);
+        text-transform: uppercase;
+        color: var(--viking-text-muted);
+        background: color-mix(
+          in srgb,
+          var(--viking-bg) 40%,
+          var(--viking-surface)
+        );
+        padding: var(--viking-space-1-5) var(--viking-space-2);
+        border-bottom: 1px solid var(--viking-border-strong);
+        white-space: nowrap;
+      }
+      :host ::ng-deep tbody td {
+        padding: var(--viking-space-1-5) var(--viking-space-2);
+        border-bottom: 1px solid var(--viking-border-subtle);
+        vertical-align: middle;
+        transition: background-color var(--viking-duration-fast)
+          var(--viking-ease-default);
+      }
+      :host ::ng-deep tbody tr:last-child td {
+        border-bottom: none;
+      }
+      :host ::ng-deep tbody tr:hover td {
+        background: var(--viking-accent-soft);
+      }
+      :host(.viking-table-striped) ::ng-deep tbody tr:nth-child(even) td {
+        background: color-mix(
+          in srgb,
+          var(--viking-surface-alt) 50%,
+          transparent
+        );
+      }
+      :host(.viking-table-striped) ::ng-deep tbody tr:nth-child(even):hover td {
+        background: var(--viking-accent-soft);
+      }
+      :host(.viking-table-compact) ::ng-deep thead th,
+      :host(.viking-table-compact) ::ng-deep tbody td {
+        padding: var(--viking-space-1) var(--viking-space-2);
+      }
+      @media (max-width: 640px) {
+        :host ::ng-deep thead th,
+        :host ::ng-deep tbody td {
+          padding: var(--viking-space-1);
+          font-size: var(--viking-font-size-xs);
+        }
+      }
+    `,
+  ],
+})
+export class VikingTable {
+  readonly compact = input(false);
+  readonly striped = input(false);
+  readonly loading = input(false);
+  readonly emptyMessage = input<string>("");
+  readonly emptyDescription = input<string>("");
+}

package/src/lib/tabs/tab-panel.ts

@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Optional,
+  computed,
+  input,
+} from "@angular/core";
+import { VIKING_TABS, VikingTabs } from "./tabs";
+
+/**
+ * viking-tab-panel — tabpanel region inside viking-tabs.
+ */
+@Component({
+  selector: "viking-tab-panel",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "tabpanel",
+    "[attr.id]": "panelId()",
+    "[attr.aria-labelledby]": "tabId()",
+    "[attr.hidden]": 'hidden() ? "" : null',
+    "[class.viking-hidden]": "hidden()",
+  },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: block;
+        padding: var(--viking-space-2);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-relaxed);
+        animation: viking-fade-in var(--viking-duration-fast)
+          var(--viking-ease-out);
+      }
+      :host(.viking-hidden) {
+        display: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingTabPanel {
+  constructor(@Optional() private readonly tabs: VikingTabs | null) {}
+
+  readonly value = input.required<string>();
+
+  protected readonly panelId = computed(
+    () => `viking-tab-panel-${this.value()}`,
+  );
+  protected readonly tabId = computed(() => `viking-tab-${this.value()}`);
+
+  protected hidden = () => (this.tabs?.value() ?? "") !== this.value();
+}

package/src/lib/tabs/tab.ts

@@ -0,0 +1,107 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Optional,
+  computed,
+  input,
+} from "@angular/core";
+import { VIKING_TABS, VikingTabs } from "./tabs";
+
+/**
+ * viking-tab — tab trigger button inside viking-tabs.
+ */
+@Component({
+  selector: "viking-tab",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      role="tab"
+      class="viking-tab"
+      [class.viking-active]="active()"
+      [id]="tabId()"
+      [attr.aria-selected]="active()"
+      [attr.aria-controls]="panelId()"
+      [attr.tabindex]="active() ? 0 : -1"
+      [disabled]="disabled()"
+      (click)="select()"
+    >
+      <ng-content />
+    </button>
+  `,
+  styles: [
+    `
+      .viking-tab {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        letter-spacing: var(--viking-letter-spacing-wide);
+        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);
+        border: 1px solid transparent;
+        border-radius: var(--viking-radius);
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        position: relative;
+        -webkit-tap-highlight-color: transparent;
+      }
+      @media (max-width: 767px) {
+        .viking-tab {
+          min-height: var(--viking-control-height);
+          flex: 1 1 auto;
+        }
+      }
+      .viking-tab:hover:not(:disabled):not(.viking-active) {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+      }
+      .viking-tab:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-tab:active:not(:disabled) {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-tab.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-tab:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+    `,
+  ],
+})
+export class VikingTab {
+  constructor(@Optional() private readonly tabs: VikingTabs | null) {}
+
+  readonly value = input.required<string>();
+  readonly disabled = input(false);
+
+  protected readonly tabId = computed(() => `viking-tab-${this.value()}`);
+  protected readonly panelId = computed(
+    () => `viking-tab-panel-${this.value()}`,
+  );
+
+  protected active = () => (this.tabs?.value() ?? "") === this.value();
+
+  protected select = (): void => {
+    if (this.disabled() || !this.tabs) {
+      return;
+    }
+    this.tabs.value.set(this.value());
+  };
+}