@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

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

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

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

@@ -1,277 +0,0 @@
-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"
-                class="auth-btn"
-                [loading]="isBusy()"
-                (pressed)="login.emit()"
-              >
-                Sign In
-              </viking-button>
-            } @else {
-              <viking-button
-                variant="primary"
-                icon="home"
-                class="auth-btn"
-                [href]="urls().app + '/dashboard'"
-              >
-                Dashboard
-              </viking-button>
-              <viking-button
-                variant="ghost"
-                class="auth-btn auth-signout-btn"
-                [loading]="isBusy()"
-                (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 auth-btn"
-            [loading]="isBusy()"
-            [fullWidth]="true"
-            (pressed)="login.emit(); closeMobileMenu()"
-          >
-            Sign In
-          </viking-button>
-        } @else {
-          <viking-button
-            variant="primary"
-            icon="home"
-            class="mobile-auth-btn auth-btn"
-            [fullWidth]="true"
-            [href]="urls().app + '/dashboard'"
-            (pressed)="closeMobileMenu()"
-          >
-            Dashboard
-          </viking-button>
-          <viking-button
-            variant="ghost"
-            class="mobile-auth-btn auth-btn auth-signout-btn"
-            [loading]="isBusy()"
-            [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 isBusy = 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

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