@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/site-drakkar/suite-search-items.ts

@@ -1,246 +0,0 @@
-import type {
-  SiteDrakkarContext,
-  SiteFooterLink,
-  SiteNavLink,
-  SiteUrls,
-} from "./site-drakkar.config";
-import {
-  SITE_FOOTER_COLUMNS,
-  SITE_NAV_LINKS,
-  bugReportHref,
-  cookieSettingsHref,
-  resolveFooterHref,
-  resolveNavHref,
-} from "./site-drakkar.config";
-
-/** Curated command-palette entry for cross-surface navigation. */
-export type SuiteSearchItem = {
-  title: string;
-  href: string;
-  snippet?: string;
-  group?: string;
-  keywords?: string[];
-  action?: "cookie-settings" | "bug-report";
-};
-
-const dedupeItems = (items: SuiteSearchItem[]): SuiteSearchItem[] => {
-  const seen = new Set<string>();
-  return items.filter((item) => {
-    const key = `${item.title}:${item.href}:${item.action ?? ""}`;
-    if (seen.has(key)) {
-      return false;
-    }
-    seen.add(key);
-    return true;
-  });
-};
-
-const navItem = (
-  link: SiteNavLink,
-  context: SiteDrakkarContext,
-  urls: SiteUrls,
-): SuiteSearchItem => ({
-  title: link.label,
-  href: resolveNavHref(link, context, urls),
-  snippet: `Open ${link.label}`,
-  group: "Platform",
-  keywords: [link.id, link.label.toLowerCase(), "navigate", "go"],
-});
-
-const footerItem = (
-  link: SiteFooterLink,
-  columnTitle: string,
-  context: SiteDrakkarContext,
-  urls: SiteUrls,
-): SuiteSearchItem => {
-  if (link.action === "cookie-settings") {
-    return {
-      title: link.label,
-      href: cookieSettingsHref(urls),
-      snippet: "Manage analytics and cookie preferences",
-      group: columnTitle,
-      keywords: ["cookies", "consent", "privacy", "gdpr"],
-      action: "cookie-settings",
-    };
-  }
-
-  if (link.action === "bug-report") {
-    return {
-      title: link.label,
-      href: context === "app" ? "#" : bugReportHref(urls),
-      snippet: "Submit a product issue or regression",
-      group: columnTitle,
-      keywords: ["bug", "issue", "support", "feedback"],
-      action: "bug-report",
-    };
-  }
-
-  return {
-    title: link.label,
-    href: resolveFooterHref(link, context, urls),
-    snippet: `Open ${link.label}`,
-    group: columnTitle,
-    keywords: [link.label.toLowerCase(), columnTitle.toLowerCase()],
-  };
-};
-
-/** Static entries that are not derived from Drakkar nav/footer config. */
-const SUITE_SEARCH_EXTRAS: readonly Omit<SuiteSearchItem, "href">[] = [
-  {
-    title: "Viking-UI Components",
-    snippet: "Browse the design system showcase",
-    group: "Resources",
-    keywords: ["viking", "ui", "design system", "components", "showcase"],
-  },
-  {
-    title: "Design tokens",
-    snippet: "Canonical --viking-* token matrix",
-    group: "Resources",
-    keywords: ["tokens", "theme", "css", "variables"],
-  },
-  {
-    title: "API reference",
-    snippet: "OpenAPI schema and REST endpoints",
-    group: "Resources",
-    keywords: ["api", "openapi", "swagger", "rest"],
-  },
-];
-
-const resolveExtraHref = (
-  extra: (typeof SUITE_SEARCH_EXTRAS)[number],
-  context: SiteDrakkarContext,
-  urls: SiteUrls,
-): string => {
-  switch (extra.title) {
-    case "Viking-UI Components":
-      return "https://ui.dataengineeringformachinelearning.com/components";
-    case "Design tokens":
-      return "https://ui.dataengineeringformachinelearning.com/tokens";
-    case "API reference":
-      return `${urls.backend.replace(/\/$/, "")}/api/docs`;
-    default:
-      return context === "app" ? urls.app : urls.marketing;
-  }
-};
-
-/** Viking-UI docs site entries (ui.dataengineeringformachinelearning.com). */
-const DOCS_SEARCH_EXTRAS: readonly SuiteSearchItem[] = [
-  {
-    title: "Components",
-    href: "/components",
-    snippet: "Browse all documented primitives",
-    group: "Viking-UI",
-    keywords: ["components", "showcase", "registry"],
-  },
-  {
-    title: "Playground",
-    href: "/playground",
-    snippet: "Live Web Component sandbox",
-    group: "Viking-UI",
-    keywords: ["playground", "sandbox", "demo"],
-  },
-  {
-    title: "Architecture",
-    href: "/architecture",
-    snippet: "CSS + WC + Angular layers",
-    group: "Viking-UI",
-    keywords: ["architecture", "layers", "web component"],
-  },
-  {
-    title: "Design tokens",
-    href: "/tokens",
-    snippet: "Canonical --viking-* token matrix",
-    group: "Viking-UI",
-    keywords: ["tokens", "theme", "css", "variables"],
-  },
-  {
-    title: "Theming",
-    href: "/theming",
-    snippet: "Light/dark mode and sync pipeline",
-    group: "Viking-UI",
-    keywords: ["theming", "dark", "light", "mode"],
-  },
-  {
-    title: "Framework guides",
-    href: "/frameworks",
-    snippet: "Angular, Astro, Django setup",
-    group: "Viking-UI",
-    keywords: ["frameworks", "angular", "astro", "django"],
-  },
-  {
-    title: "Contributing",
-    href: "/contributing",
-    snippet: "Extend the Viking-UI kit",
-    group: "Viking-UI",
-    keywords: ["contributing", "extend", "primitives"],
-  },
-];
-
-const resolveDocsHref = (href: string, docsOrigin: string): string =>
-  href.startsWith("http")
-    ? href
-    : `${docsOrigin.replace(/\/$/, "")}${href.startsWith("/") ? href : `/${href}`}`;
-
-/**
- * Builds curated command-palette links for deml.app, marketing, backend, and docs.
- * Used by the static widget and Angular `viking-suite-search-palette`.
- */
-export const buildSuiteSearchItems = (
-  context: SiteDrakkarContext,
-  urls: SiteUrls,
-  options?: { docsOrigin?: string },
-): SuiteSearchItem[] => {
-  const paletteContext = context === "docs" ? "marketing" : context;
-
-  const items: SuiteSearchItem[] = [
-    ...SITE_NAV_LINKS.map((link) => navItem(link, paletteContext, urls)),
-    ...SITE_FOOTER_COLUMNS.flatMap((column) =>
-      column.links.map((link) =>
-        footerItem(link, column.title, paletteContext, urls),
-      ),
-    ),
-    ...SUITE_SEARCH_EXTRAS.map((extra) => ({
-      ...extra,
-      href: resolveExtraHref(extra, paletteContext, urls),
-    })),
-  ];
-
-  if (context === "app") {
-    items.push(
-      {
-        title: "Settings",
-        href: "/settings",
-        snippet: "Workspace domains, billing, and security",
-        group: "Platform",
-        keywords: ["settings", "sites", "workspace", "configuration"],
-      },
-      {
-        title: "Billing & subscription",
-        href: "/settings/billing",
-        snippet: "Manage plan, invoices, and payment methods",
-        group: "Platform",
-        keywords: ["billing", "stripe", "subscription", "payment"],
-      },
-      {
-        title: "Security settings",
-        href: "/settings/security",
-        snippet: "Keys, sessions, and access controls",
-        group: "Platform",
-        keywords: ["security", "keys", "auth", "rbac"],
-      },
-    );
-  }
-
-  if (context === "docs") {
-    const docsOrigin =
-      options?.docsOrigin ?? "https://ui.dataengineeringformachinelearning.com";
-    items.push(
-      ...DOCS_SEARCH_EXTRAS.map((extra) => ({
-        ...extra,
-        href: resolveDocsHref(extra.href, docsOrigin),
-      })),
-    );
-  }
-
-  return dedupeItems(items);
-};

package/src/lib/skeleton/skeleton.ts

@@ -1,51 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
-/**
- * viking-skeleton — loading placeholder.
- */
-@Component({
-  selector: "viking-skeleton",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "aria-hidden": "true",
-    "[class.viking-skeleton-circle]": "shape() === 'circle'",
-    "[style.width]": "width()",
-    "[style.height]": "height()",
-  },
-  template: ``,
-  styles: [
-    `
-      :host {
-        display: block;
-        border-radius: var(--viking-radius-sm);
-        background: linear-gradient(
-          100deg,
-          var(--viking-surface-alt) 38%,
-          color-mix(
-              in srgb,
-              var(--viking-text-muted) 10%,
-              var(--viking-surface-alt)
-            )
-            50%,
-          var(--viking-surface-alt) 62%
-        );
-        background-size: 200% 100%;
-        animation: viking-shimmer 1.6s ease-in-out infinite;
-      }
-      :host(.viking-skeleton-circle) {
-        border-radius: var(--viking-radius-pill);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        :host {
-          animation: none;
-          background: var(--viking-surface-alt);
-        }
-      }
-    `,
-  ],
-})
-export class VikingSkeleton {
-  readonly shape = input<"line" | "rect" | "circle">("line");
-  readonly width = input<string>("100%");
-  readonly height = input<string>("var(--viking-font-size-sm)");
-}

package/src/lib/slider/slider.ts

@@ -1,133 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-
-/**
- * viking-slider — range slider.
- * ControlValueAccessor-compatible.
- */
-@Component({
-  selector: "viking-slider",
-  providers: [provideVikingCva(VikingSlider)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="viking-slider-header">
-      @if (label()) {
-        <span class="viking-slider-label">{{ label() }}</span>
-      }
-      @if (showValue()) {
-        <output class="viking-slider-value">{{ value() }}</output>
-      }
-    </div>
-    <input
-      type="range"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [value]="value()"
-      [disabled]="disabled() || formDisabled()"
-      [attr.aria-label]="label() || 'Slider'"
-      [style.--viking-slider-fill.%]="fillPercent()"
-      (input)="onInput($event)"
-      (blur)="onTouched()"
-    />
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-      }
-      .viking-slider-header {
-        display: flex;
-        justify-content: space-between;
-        gap: var(--viking-space-2);
-        margin-bottom: calc(var(--viking-space-1) / 2);
-        font-size: var(--viking-font-size);
-      }
-      .viking-slider-label {
-        color: var(--viking-text);
-        font-weight: 500;
-      }
-      .viking-slider-value {
-        color: var(--viking-text-muted);
-        font-variant-numeric: tabular-nums;
-      }
-      input[type="range"] {
-        appearance: none;
-        width: 100%;
-        height: var(--viking-space-1);
-        border-radius: var(--viking-radius-pill);
-        border: 1px solid var(--viking-border);
-        background: linear-gradient(
-          to right,
-          var(--viking-accent) var(--viking-slider-fill, 0%),
-          var(--viking-surface-alt) var(--viking-slider-fill, 0%)
-        );
-        cursor: pointer;
-        margin: var(--viking-space-1) 0;
-      }
-      input[type="range"]:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      input[type="range"]::-webkit-slider-thumb {
-        appearance: none;
-        width: var(--viking-space-2);
-        height: var(--viking-space-2);
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-surface);
-        border: 2px solid var(--viking-accent);
-        box-shadow: var(--viking-shadow-sm);
-        transition: transform 0.15s ease;
-      }
-      input[type="range"]::-webkit-slider-thumb:hover {
-        transform: scale(1.15);
-      }
-      input[type="range"]::-moz-range-thumb {
-        width: var(--viking-space-2);
-        height: var(--viking-space-2);
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-surface);
-        border: 2px solid var(--viking-accent);
-        box-shadow: var(--viking-shadow-sm);
-      }
-      input[type="range"]:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-    `,
-  ],
-})
-export class VikingSlider extends VikingControl<number> {
-  readonly value = model<number>(0);
-  readonly min = input<number>(0);
-  readonly max = input<number>(100);
-  readonly step = input<number>(1);
-  readonly label = input<string>("");
-  readonly showValue = input<boolean>(true);
-  readonly disabled = input<boolean>(false);
-
-  protected readonly fillPercent = computed(() => {
-    const range = this.max() - this.min();
-    if (range <= 0) {
-      return 0;
-    }
-    return ((this.value() - this.min()) / range) * 100;
-  });
-
-  writeValue(value: number): void {
-    this.value.set(Number(value ?? 0));
-  }
-
-  protected onInput = (event: Event): void => {
-    const next = Number((event.target as HTMLInputElement).value);
-    this.value.set(next);
-    this.onChange(next);
-  };
-}

package/src/lib/spinner/spinner.ts

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

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

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