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

package/src/lib/site-drakkar/site-footer.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { VikingFooter } from "../footer/footer";
+import {
+  cookieSettingsHref,
+  DEFAULT_SITE_URLS,
+  isAppRouterPath,
+  resolveFooterHref,
+  SITE_FOOTER_COLUMNS,
+  SiteDrakkarContext,
+  SiteFooterLink,
+  SiteUrls,
+} from "./site-drakkar.config";
+
+/**
+ * viking-site-footer — canonical site footer shared across DEML surfaces.
+ */
+@Component({
+  selector: "viking-site-footer",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, VikingFooter],
+  template: `
+    <viking-footer>
+      <nav
+        vikingFooterDirectory
+        class="viking-footer-directory footer-directory"
+        aria-label="Footer Directory"
+      >
+        @for (column of columns; track column.title) {
+          <div class="footer-column">
+            <h3 class="footer-column-title">{{ column.title }}</h3>
+            <ul class="footer-list">
+              @for (link of column.links; track link.label) {
+                <li>
+                  @if (link.action === "cookie-settings") {
+                    @if (context() === "marketing") {
+                      <a href="#" (click)="onCookieSettings($event)">{{
+                        link.label
+                      }}</a>
+                    } @else {
+                      <a [href]="cookieSettingsUrl()">{{ link.label }}</a>
+                    }
+                  } @else if (link.action === "bug-report") {
+                    @if (context() === "app") {
+                      <a href="#" (click)="onBugReport($event)">{{
+                        link.label
+                      }}</a>
+                    } @else {
+                      <a [href]="resolveHref(link)">{{ link.label }}</a>
+                    }
+                  } @else if (context() === "app" && isAppRoute(link)) {
+                    <a [routerLink]="link.appHref">{{ link.label }}</a>
+                  } @else {
+                    <a [href]="resolveHref(link)">{{ link.label }}</a>
+                  }
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </nav>
+
+      <ng-container vikingFooterBottom>
+        <div class="footer-badges-top">
+          <span
+            class="usa-badge viking-usa-badge"
+            id="usa-badge"
+            (mouseenter)="usaBadgeHover.emit($event)"
+          >
+            <span
+              class="usa-badge-icon viking-usa-badge-icon"
+              aria-hidden="true"
+              >🇺🇸</span
+            >
+            <span>Made in the U.S.A</span>
+          </span>
+        </div>
+
+        <div class="footer-compliance-row">
+          <div class="copyright-info">
+            <span class="copyright-text">
+              Copyright © {{ year() }} Data Engineering for Machine Learning by
+              <a
+                href="https://joealongi.dev/"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Joe Alongi</a
+              >. All rights reserved.
+            </span>
+          </div>
+        </div>
+      </ng-container>
+    </viking-footer>
+  `,
+})
+export class VikingSiteFooter {
+  readonly context = input<SiteDrakkarContext>("app");
+  readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
+  readonly year = input<number>(new Date().getFullYear());
+
+  readonly cookieSettings = output<Event>();
+  readonly bugReport = output<Event>();
+  readonly usaBadgeHover = output<MouseEvent>();
+
+  protected readonly columns = SITE_FOOTER_COLUMNS;
+
+  protected readonly cookieSettingsUrl = () => cookieSettingsHref(this.urls());
+
+  protected resolveHref = (link: SiteFooterLink): string =>
+    resolveFooterHref(link, this.context(), this.urls());
+
+  protected isAppRoute = (link: SiteFooterLink): boolean =>
+    !link.action && isAppRouterPath(link.appHref);
+
+  protected onCookieSettings(event: Event): void {
+    event.preventDefault();
+    this.cookieSettings.emit(event);
+  }
+
+  protected onBugReport(event: Event): void {
+    event.preventDefault();
+    this.bugReport.emit(event);
+  }
+}

package/src/lib/site-drakkar/site-navbar.scss

@@ -0,0 +1,2 @@
+// Navbar styles live in static-navbar.scss (global viking-ui.css + app styles.scss).
+// ViewEncapsulation.None — do not @use static-navbar here (duplicates ~46kB into component budget).

package/src/lib/site-drakkar/site-navbar.ts

@@ -0,0 +1,267 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+  signal,
+} from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { VikingButton } from "../button/button";
+import { VikingIcon } from "../icon/icon";
+import { VikingThemeToggle } from "../theme-toggle/theme-toggle";
+import {
+  DEFAULT_SITE_URLS,
+  isAppRouterPath,
+  resolveBrandHref,
+  resolveNavHref,
+  SITE_NAV_LINKS,
+  SiteDrakkarContext,
+  SiteUrls,
+  visibleNavLinks,
+} from "./site-drakkar.config";
+
+/**
+ * viking-site-navbar — canonical site header shared across DEML surfaces.
+ * Uses `.navbar` markup + viking-ui.css (same structure as marketing/backend static HTML).
+ */
+@Component({
+  selector: "viking-site-navbar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    VikingButton,
+    VikingIcon,
+    VikingThemeToggle,
+  ],
+  styleUrl: "./site-navbar.scss",
+  template: `
+    <header class="navbar">
+      <div class="navbar-content">
+        <div class="navbar-left">
+          @if (context() === "app") {
+            <a
+              [href]="brandHref()"
+              class="navbar-brand"
+              aria-label="Go to marketing homepage"
+              (click)="onBrandClick($event)"
+            >
+              <viking-icon
+                name="drakkar"
+                [size]="28"
+                color="accent"
+                class="brand-icon navbar-logo"
+              />
+            </a>
+          } @else {
+            <a
+              [href]="brandHref()"
+              class="navbar-brand"
+              aria-label="Go to homepage"
+            >
+              <viking-icon
+                name="drakkar"
+                [size]="28"
+                color="accent"
+                class="brand-icon navbar-logo"
+              />
+            </a>
+          }
+        </div>
+
+        <nav class="navbar-center desktop-nav" aria-label="Main navigation">
+          @for (link of navLinks(); track link.id) {
+            @if (context() === "app" && isAppRouterPath(link.appHref)) {
+              <a
+                [routerLink]="link.appHref"
+                routerLinkActive="active"
+                [routerLinkActiveOptions]="{
+                  exact: link.appHref === '/explore',
+                }"
+                class="nav-btn"
+              >
+                <viking-icon [name]="link.icon" [size]="16" />
+                <span>{{ link.label }}</span>
+              </a>
+            } @else {
+              <a [href]="resolveHref(link)" class="nav-btn">
+                <viking-icon [name]="link.icon" [size]="16" />
+                <span>{{ link.label }}</span>
+              </a>
+            }
+          }
+        </nav>
+
+        <div class="navbar-right">
+          @if (showSearch()) {
+            <div class="navbar-search" role="search">
+              <viking-button
+                variant="outline"
+                [square]="true"
+                [compact]="true"
+                icon="search"
+                label="Open search (⌘K)"
+                (pressed)="openSearch()"
+              />
+            </div>
+          }
+
+          <div class="desktop-auth">
+            @if (!isAuthenticated()) {
+              <viking-button
+                variant="primary"
+                icon="arrow-right"
+                (pressed)="login.emit()"
+              >
+                Sign In
+              </viking-button>
+            } @else {
+              <viking-button
+                variant="primary"
+                icon="home"
+                [href]="urls().app + '/dashboard'"
+              >
+                Dashboard
+              </viking-button>
+              <viking-button variant="ghost" (pressed)="logout.emit()"
+                >Sign Out</viking-button
+              >
+            }
+          </div>
+
+          <viking-theme-toggle
+            [theme]="theme()"
+            (toggle)="themeToggle.emit()"
+          />
+
+          <viking-button
+            variant="outline"
+            [square]="true"
+            class="menu-toggle-btn"
+            [icon]="mobileMenuOpen() ? 'x' : 'menu'"
+            [label]="
+              mobileMenuOpen()
+                ? 'Close navigation menu'
+                : 'Toggle navigation menu'
+            "
+            (pressed)="toggleMobileMenu()"
+          />
+        </div>
+      </div>
+
+      <nav
+        class="mobile-menu"
+        [class.open]="mobileMenuOpen()"
+        aria-label="Mobile navigation"
+      >
+        @for (link of navLinks(); track link.id + "-mobile") {
+          @if (context() === "app" && isAppRouterPath(link.appHref)) {
+            <a
+              [routerLink]="link.appHref"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: link.appHref === '/explore' }"
+              class="mobile-nav-btn"
+              (click)="closeMobileMenu()"
+            >
+              <viking-icon [name]="link.icon" [size]="16" />
+              <span>{{ link.label }}</span>
+            </a>
+          } @else {
+            <a
+              [href]="resolveHref(link)"
+              class="mobile-nav-btn"
+              (click)="closeMobileMenu()"
+            >
+              <viking-icon [name]="link.icon" [size]="16" />
+              <span>{{ link.label }}</span>
+            </a>
+          }
+        }
+
+        <div class="mobile-divider"></div>
+
+        @if (!isAuthenticated()) {
+          <viking-button
+            variant="primary"
+            icon="arrow-right"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            (pressed)="login.emit(); closeMobileMenu()"
+          >
+            Sign In
+          </viking-button>
+        } @else {
+          <viking-button
+            variant="primary"
+            icon="home"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            [href]="urls().app + '/dashboard'"
+            (pressed)="closeMobileMenu()"
+          >
+            Dashboard
+          </viking-button>
+          <viking-button
+            variant="ghost"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            (pressed)="logout.emit(); closeMobileMenu()"
+          >
+            Sign Out
+          </viking-button>
+        }
+      </nav>
+    </header>
+  `,
+})
+export class VikingSiteNavbar {
+  readonly context = input<SiteDrakkarContext>("app");
+  readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
+  readonly isAuthenticated = input<boolean>(false);
+  readonly theme = input<"light" | "dark">("dark");
+  readonly showSearch = input<boolean>(false);
+
+  readonly login = output<void>();
+  readonly logout = output<void>();
+  readonly themeToggle = output<void>();
+  readonly searchOpen = output<void>();
+
+  protected readonly mobileMenuOpen = signal(false);
+
+  protected readonly navLinks = computed(() =>
+    visibleNavLinks(SITE_NAV_LINKS, this.isAuthenticated()),
+  );
+
+  protected readonly brandHref = computed(() =>
+    resolveBrandHref(this.context(), this.urls()),
+  );
+
+  protected resolveHref = (link: (typeof SITE_NAV_LINKS)[number]): string =>
+    resolveNavHref(link, this.context(), this.urls());
+
+  protected isAppRouterPath = isAppRouterPath;
+
+  protected onBrandClick(event: MouseEvent): void {
+    event.preventDefault();
+    window.location.href = this.brandHref();
+  }
+
+  protected toggleMobileMenu(): void {
+    this.mobileMenuOpen.update((open) => !open);
+  }
+
+  protected closeMobileMenu(): void {
+    this.mobileMenuOpen.set(false);
+  }
+
+  protected openSearch(): void {
+    this.searchOpen.emit();
+    const widgets = (
+      globalThis as { DemlWidgets?: { openSearch?: () => void } }
+    ).DemlWidgets;
+    widgets?.openSearch?.();
+  }
+}

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

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { buildSuiteSearchItems } from "./suite-search-items";
+
+const urls = {
+  app: "https://deml.app",
+  marketing: "https://dataengineeringformachinelearning.com",
+  backend: "https://backend.deml.app",
+};
+
+describe("buildSuiteSearchItems", () => {
+  it("includes platform navigation and legal links for marketing", () => {
+    const items = buildSuiteSearchItems("marketing", urls);
+    const titles = items.map((item) => item.title);
+
+    expect(titles).toContain("Documentation");
+    expect(titles).toContain("Whitepaper");
+    expect(titles).toContain("Book");
+    expect(titles).toContain("Privacy Policy");
+    expect(titles).toContain("Terms of Service");
+    expect(titles).toContain("SOC2 Compliance");
+    expect(titles).toContain("Viking-UI Components");
+  });
+
+  it("resolves app routes for deml.app context", () => {
+    const items = buildSuiteSearchItems("app", urls);
+    const dashboard = items.find((item) => item.title === "Dashboard");
+
+    expect(dashboard?.href).toBe("/dashboard");
+    expect(items.some((item) => item.title === "Billing & subscription")).toBe(
+      true,
+    );
+  });
+
+  it("matches keyword search metadata", () => {
+    const items = buildSuiteSearchItems("marketing", urls);
+    const privacy = items.find((item) => item.title === "Privacy Policy");
+
+    expect(
+      privacy?.keywords?.some((keyword) => keyword.includes("privacy")),
+    ).toBe(true);
+  });
+
+  it("includes Viking-UI docs entries for docs context", () => {
+    const items = buildSuiteSearchItems("docs", urls, {
+      docsOrigin: "https://ui.dataengineeringformachinelearning.com",
+    });
+    const titles = items.map((item) => item.title);
+
+    expect(titles).toContain("Components");
+    expect(titles).toContain("Playground");
+    expect(titles).toContain("Whitepaper");
+    expect(items.find((item) => item.title === "Components")?.href).toBe(
+      "https://ui.dataengineeringformachinelearning.com/components",
+    );
+  });
+
+  it("includes Settings shortcut for app context", () => {
+    const items = buildSuiteSearchItems("app", urls);
+    expect(items.some((item) => item.title === "Settings")).toBe(true);
+  });
+});

package/src/lib/skeleton/skeleton.ts

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

@@ -0,0 +1,133 @@
+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);
+  };
+}