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

package/src/lib/app-sidebar/app-sidebar.ts

@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+  output,
+} from "@angular/core";
+
+/**
+ * viking-app-sidebar — dashboard sidebar shell styles (project nav markup inside).
+ * Width is driven by the `--viking-sidebar-width` CSS variable on the host.
+ */
+@Component({
+  selector: "viking-app-sidebar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: "viking-app-sidebar-host",
+    "[style.--viking-sidebar-width.px]": "collapsed() ? null : width()",
+  },
+  template: `<ng-content />`,
+  styleUrl: "./app-sidebar.scss",
+})
+export class VikingAppSidebar {
+  readonly collapsed = input<boolean>(false);
+  readonly dragging = input<boolean>(false);
+  readonly width = input<number>(260);
+  readonly resizeStart = output<MouseEvent>();
+}

package/src/lib/auth-panel/auth-panel.spec.ts

@@ -0,0 +1,132 @@
+import { Component } from "@angular/core";
+import { TestBed, ComponentFixture } from "@angular/core/testing";
+import { describe, it, expect } from "vitest";
+import { VikingAuthPanel } from "./auth-panel";
+import { VikingField } from "../field/field";
+import { VikingInput } from "../input/input";
+
+@Component({
+  imports: [VikingAuthPanel, VikingField, VikingInput],
+  template: `
+    <viking-auth-panel
+      title="Sign In"
+      subtitle="Enter credentials"
+      [showSocial]="true"
+      [socialLoading]="loading"
+      (googleSignIn)="onGoogle()"
+      (appleSignIn)="onApple()"
+    >
+      <viking-field label="Email">
+        <viking-input placeholder="Email" />
+      </viking-field>
+      <a vikingAuthLinks href="/forgot">Forgot password?</a>
+      <p vikingAuthFooter>Need help?</p>
+    </viking-auth-panel>
+  `,
+})
+class AuthPanelHost {
+  loading = false;
+  googleCalled = false;
+  appleCalled = false;
+  onGoogle = (): void => {
+    this.googleCalled = true;
+  };
+  onApple = (): void => {
+    this.appleCalled = true;
+  };
+}
+
+describe("viking-auth-panel", () => {
+  const render = async (): Promise<ComponentFixture<AuthPanelHost>> => {
+    const fixture = TestBed.createComponent(AuthPanelHost);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    return fixture;
+  };
+
+  it("renders accessible sign-in structure with title and subtitle", async () => {
+    const fixture = await render();
+    const panel = fixture.nativeElement.querySelector(
+      ".viking-auth-panel",
+    ) as HTMLElement;
+    expect(panel.getAttribute("aria-labelledby")).toBe("viking-auth-title");
+    expect(
+      fixture.nativeElement.querySelector("#viking-auth-title")?.textContent,
+    ).toContain("Sign In");
+    expect(
+      fixture.nativeElement.querySelector(".viking-auth-subtitle")?.textContent,
+    ).toContain("Enter credentials");
+  });
+
+  it("projects form body, links, and footer slots", async () => {
+    const fixture = await render();
+    expect(fixture.nativeElement.querySelector("viking-field")).toBeTruthy();
+    expect(
+      fixture.nativeElement.querySelector("[vikingAuthLinks]")?.textContent,
+    ).toContain("Forgot password?");
+    expect(
+      fixture.nativeElement.querySelector("[vikingAuthFooter]")?.textContent,
+    ).toContain("Need help?");
+  });
+
+  it("emits googleSignIn and appleSignIn from social buttons", async () => {
+    const fixture = await render();
+    const buttons = fixture.nativeElement.querySelectorAll(
+      ".viking-auth-social viking-button viking-button-wc",
+    ) as NodeListOf<HTMLElement>;
+    expect(buttons.length).toBe(2);
+    buttons[0].dispatchEvent(
+      new CustomEvent("viking-press", {
+        bubbles: true,
+        composed: true,
+        detail: new MouseEvent("click"),
+      }),
+    );
+    buttons[1].dispatchEvent(
+      new CustomEvent("viking-press", {
+        bubbles: true,
+        composed: true,
+        detail: new MouseEvent("click"),
+      }),
+    );
+    fixture.detectChanges();
+    expect(fixture.componentInstance.googleCalled).toBe(true);
+    expect(fixture.componentInstance.appleCalled).toBe(true);
+  });
+
+  it("hides social row when showSocial is false", async () => {
+    @Component({
+      imports: [VikingAuthPanel],
+      template: `<viking-auth-panel title="Sign In" [showSocial]="false" />`,
+    })
+    class NoSocialHost {}
+
+    const fixture = TestBed.createComponent(NoSocialHost);
+    fixture.detectChanges();
+    expect(
+      fixture.nativeElement.querySelector(".viking-auth-social"),
+    ).toBeNull();
+  });
+
+  it("disables social buttons while socialLoading is true", async () => {
+    @Component({
+      imports: [VikingAuthPanel],
+      template: `<viking-auth-panel
+        title="Sign In"
+        [socialLoading]="true"
+        [showSocial]="true"
+      />`,
+    })
+    class LoadingHost {}
+
+    const fixture = TestBed.createComponent(LoadingHost);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const buttons = fixture.nativeElement.querySelectorAll(
+      ".viking-auth-social viking-button viking-button-wc",
+    ) as NodeListOf<HTMLElement>;
+    expect(buttons[0].shadowRoot?.querySelector("button")?.disabled).toBe(true);
+    expect(buttons[1].shadowRoot?.querySelector("button")?.disabled).toBe(true);
+    expect(buttons[0].getAttribute("aria-busy")).toBe("true");
+  });
+});

package/src/lib/auth-panel/auth-panel.ts

@@ -0,0 +1,228 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from "@angular/core";
+import { VikingButton } from "../button/button";
+import { VikingSeparator } from "../separator/separator";
+
+/**
+ * viking-auth-panel — access portal / sign-in layout template.
+ * Full-width stacked actions, Google + Apple OAuth row, WCAG-friendly structure.
+ */
+@Component({
+  selector: "viking-auth-panel",
+  imports: [VikingButton, VikingSeparator],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "viking-auth-panel-host" },
+  template: `
+    <section class="viking-auth-panel" aria-labelledby="viking-auth-title">
+      <header class="viking-auth-header">
+        @if (tag()) {
+          <div class="viking-auth-tag-row">
+            <span class="viking-auth-tag">{{ tag() }}</span>
+          </div>
+        }
+        <h1 id="viking-auth-title" class="viking-auth-title">{{ title() }}</h1>
+        @if (subtitle()) {
+          <p class="viking-auth-subtitle">{{ subtitle() }}</p>
+        }
+      </header>
+
+      <div class="viking-auth-body">
+        <ng-content />
+      </div>
+
+      <ng-content select="[vikingAuthLinks]" />
+
+      @if (showSocial()) {
+        <viking-separator text="or" />
+        <div
+          class="viking-auth-social"
+          role="group"
+          aria-label="Social sign-in"
+        >
+          <viking-button
+            variant="outline"
+            type="button"
+            icon="google"
+            [fullWidth]="true"
+            [loading]="socialLoading()"
+            [disabled]="socialLoading()"
+            (pressed)="googleSignIn.emit()"
+          >
+            Sign In with Google
+          </viking-button>
+          <viking-button
+            variant="outline"
+            type="button"
+            icon="apple"
+            [fullWidth]="true"
+            [loading]="socialLoading()"
+            [disabled]="socialLoading()"
+            (pressed)="appleSignIn.emit()"
+          >
+            Sign In with Apple
+          </viking-button>
+        </div>
+      }
+
+      <footer class="viking-auth-footer">
+        <ng-content select="[vikingAuthFooter]" />
+      </footer>
+    </section>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 480px;
+        margin-inline: auto;
+        font-family: var(--viking-font-family);
+      }
+      .viking-auth-panel {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-3);
+        width: 100%;
+        padding: var(--viking-space-3);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        box-shadow: var(--viking-shadow-md);
+        position: relative;
+        overflow: hidden;
+      }
+      .viking-auth-panel::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
+          transparent
+        );
+        pointer-events: none;
+      }
+      .viking-auth-header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        margin-bottom: var(--viking-space-1);
+      }
+      .viking-auth-tag-row {
+        display: flex;
+        align-items: center;
+      }
+      .viking-auth-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--viking-text-muted);
+        padding: var(--viking-space-1) var(--viking-space-2);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface);
+        box-shadow: var(--viking-shadow-sm);
+      }
+      .viking-auth-tag::before {
+        content: "";
+        width: var(--viking-space-1);
+        height: var(--viking-space-1);
+        border-radius: 50%;
+        background: var(--viking-accent);
+        flex-shrink: 0;
+      }
+      .viking-auth-title {
+        margin: 0;
+        font-size: var(--viking-font-size-xl);
+        font-weight: 700;
+        letter-spacing: var(--header-letter-spacing, -0.02em);
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-tight);
+      }
+      .viking-auth-subtitle {
+        margin: 0;
+        font-size: var(--viking-font-size);
+        line-height: 1.6;
+        color: var(--viking-text-muted);
+      }
+      .viking-auth-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      :host ::ng-deep .viking-auth-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      :host ::ng-deep .viking-auth-stack viking-callout {
+        width: 100%;
+      }
+      :host ::ng-deep .viking-auth-stack .login-form,
+      :host ::ng-deep .login-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      .viking-auth-social {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      .viking-auth-footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-3);
+        width: 100%;
+        margin-top: var(--viking-space-4);
+        padding-top: var(--viking-space-4);
+        border-top: 1px solid var(--viking-border);
+      }
+      :host ::ng-deep [vikingAuthFooter] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-3);
+        width: 100%;
+      }
+      :host ::ng-deep [vikingAuthFooter] viking-button .viking-btn {
+        min-width: 0;
+      }
+      :host ::ng-deep [vikingAuthLinks].viking-auth-links,
+      :host ::ng-deep .viking-auth-links {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      :host ::ng-deep viking-field {
+        width: 100%;
+      }
+    `,
+  ],
+})
+export class VikingAuthPanel {
+  readonly tag = input("Access Portal");
+  readonly title = input.required<string>();
+  readonly subtitle = input(
+    "Secure entry to the DEML (DATA ENGINEERING FOR MACHINE LEARNING).",
+  );
+  readonly showSocial = input(true);
+  readonly socialLoading = input(false);
+
+  readonly googleSignIn = output<void>();
+  readonly appleSignIn = output<void>();
+}

package/src/lib/autocomplete/autocomplete.ts

@@ -0,0 +1,223 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  input,
+  model,
+  output,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+import { vikingUid } from "../../core/uid";
+
+/**
+ * viking-autocomplete — text input with filtered suggestions
+ *. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-autocomplete",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingAutocomplete)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "(document:click)": "onDocumentClick($event)" },
+  template: `
+    <div class="viking-control viking-autocomplete-shell">
+      <viking-icon class="viking-autocomplete-icon" name="search" [size]="20" />
+      <input
+        type="text"
+        role="combobox"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="disabled() || formDisabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="panelId"
+        [attr.aria-label]="label() || placeholder() || 'Autocomplete'"
+        aria-autocomplete="list"
+        (input)="onInput($event)"
+        (focus)="open.set(true)"
+        (keydown)="onKeydown($event)"
+        (blur)="onTouched()"
+      />
+    </div>
+    @if (open() && filtered().length > 0) {
+      <div class="viking-autocomplete-panel" role="listbox" [id]="panelId">
+        @for (item of filtered(); track item; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            class="viking-autocomplete-option"
+            [class.viking-active]="index === activeIndex()"
+            [attr.aria-selected]="index === activeIndex()"
+            (mousedown)="$event.preventDefault()"
+            (click)="pick(item)"
+            (mouseenter)="activeIndex.set(index)"
+          >
+            {{ item }}
+          </button>
+        }
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: block;
+      }
+      .viking-autocomplete-shell {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        min-height: var(--viking-control-height);
+        padding: 0 var(--viking-space-2);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-sm);
+        transition: var(--viking-transition);
+      }
+      .viking-autocomplete-shell:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-autocomplete-icon {
+        color: var(--viking-text-muted);
+      }
+      input {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+      }
+      input::placeholder {
+        color: var(--viking-text-muted);
+      }
+      .viking-autocomplete-panel {
+        position: absolute;
+        top: calc(100% + var(--viking-space-1));
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+        padding: var(--viking-space-1);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-md);
+        z-index: var(--viking-z-overlay);
+        max-height: 288px;
+        overflow: auto;
+      }
+      .viking-autocomplete-option {
+        padding: var(--viking-space-1);
+        border: none;
+        background: transparent;
+        text-align: left;
+        width: 100%;
+        border-radius: calc(var(--viking-radius) / 1.5);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        cursor: pointer;
+      }
+      .viking-autocomplete-option:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: -2px;
+      }
+      .viking-active {
+        background: var(--viking-accent-soft);
+      }
+    `,
+  ],
+})
+export class VikingAutocomplete extends VikingControl<string> {
+  readonly suggestions = input.required<string[]>();
+  readonly value = model<string>("");
+  readonly placeholder = input<string>("");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+
+  readonly selected = output<string>();
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  protected readonly open = signal(false);
+  protected readonly activeIndex = signal(0);
+  protected readonly panelId = vikingUid("viking-autocomplete-panel");
+
+  protected readonly filtered = computed(() => {
+    const query = this.value().toLowerCase().trim();
+    if (!query) {
+      return this.suggestions();
+    }
+    return this.suggestions().filter((item) =>
+      item.toLowerCase().includes(query),
+    );
+  });
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  protected onInput = (event: Event): void => {
+    const next = (event.target as HTMLInputElement).value;
+    this.value.set(next);
+    this.onChange(next);
+    this.open.set(true);
+    this.activeIndex.set(0);
+  };
+
+  protected pick = (item: string): void => {
+    this.value.set(item);
+    this.onChange(item);
+    this.selected.emit(item);
+    this.open.set(false);
+  };
+
+  protected onKeydown = (event: KeyboardEvent): void => {
+    if (!this.open()) {
+      return;
+    }
+    const items = this.filtered();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.activeIndex.update((index) =>
+          Math.min(items.length - 1, index + 1),
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.activeIndex.update((index) => Math.max(0, index - 1));
+        break;
+      case "Enter":
+        if (items[this.activeIndex()]) {
+          event.preventDefault();
+          this.pick(items[this.activeIndex()]);
+        }
+        break;
+      case "Escape":
+        this.open.set(false);
+        break;
+    }
+  };
+
+  protected onDocumentClick = (event: Event): void => {
+    if (
+      this.open() &&
+      !this.host.nativeElement.contains(event.target as Node)
+    ) {
+      this.open.set(false);
+    }
+  };
+}