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

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());
+  };
+}

package/src/lib/tabs/tabs.ts

@@ -0,0 +1,109 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChildren,
+  InjectionToken,
+  model,
+} from "@angular/core";
+import { VikingTab } from "./tab";
+
+export const VIKING_TABS = new InjectionToken<VikingTabs>("VIKING_TABS");
+
+/**
+ * viking-tabs — tablist container with roving keyboard navigation.
+ */
+@Component({
+  selector: "viking-tabs",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: VIKING_TABS, useExisting: VikingTabs }],
+  host: { class: "viking-tabs" },
+  template: `
+    <div
+      class="viking-tabs-list"
+      role="tablist"
+      (keydown)="onTabKeydown($event)"
+    >
+      <ng-content select="viking-tab" />
+    </div>
+    <ng-content select="viking-tab-panel" />
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+      }
+      .viking-tabs-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--viking-space-half);
+        padding: var(--viking-space-half);
+        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);
+      }
+      @media (max-width: 767px) {
+        .viking-tabs-list {
+          flex-wrap: nowrap;
+          overflow-x: auto;
+          scroll-snap-type: x proximity;
+          -webkit-overflow-scrolling: touch;
+          scrollbar-width: none;
+        }
+        .viking-tabs-list::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingTabs {
+  private readonly tabComponents = contentChildren(VikingTab);
+
+  readonly value = model<string>("");
+
+  protected onTabKeydown = (event: KeyboardEvent): void => {
+    const tabs = this.tabComponents().filter((tab) => !tab.disabled());
+    if (tabs.length === 0) {
+      return;
+    }
+
+    const currentIndex = tabs.findIndex((tab) => tab.value() === this.value());
+    let nextIndex = currentIndex;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    const next = tabs[nextIndex];
+    this.value.set(next.value());
+    const button = document.getElementById(`viking-tab-${next.value()}`);
+    button?.focus();
+  };
+}