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

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

package/src/lib/avatar/avatar.ts

@@ -0,0 +1,126 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal,
+} from "@angular/core";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-avatar — image or initials avatar with optional status indicator
+ *.
+ */
+@Component({
+  selector: "viking-avatar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[style.width.px]": "size()",
+    "[style.height.px]": "size()",
+    "[class.viking-avatar-square]": "square()",
+  },
+  template: `
+    @if (src() && !imageFailed()) {
+      <img [src]="src()" [alt]="name()" (error)="imageFailed.set(true)" />
+    } @else {
+      <span class="viking-avatar-initials">
+        {{ initials() }}
+      </span>
+    }
+    @if (status()) {
+      <span
+        class="viking-avatar-status"
+        [class]="'viking-status-' + status()"
+        role="status"
+      >
+        <span class="viking-visually-hidden">{{ status() }}</span>
+      </span>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        overflow: visible;
+        flex-shrink: 0;
+      }
+      :host(.viking-avatar-square) {
+        border-radius: var(--viking-radius);
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: inherit;
+      }
+      .viking-avatar-initials {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        color: var(--viking-text);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        user-select: none;
+      }
+      .viking-avatar-status {
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        width: 27%;
+        height: 27%;
+        min-width: 9px;
+        min-height: 9px;
+        border-radius: var(--viking-radius-pill);
+        border: 2px solid var(--viking-surface);
+      }
+      .viking-status-success {
+        background: var(--viking-success);
+      }
+      .viking-status-warning {
+        background: var(--viking-warning);
+      }
+      .viking-status-danger {
+        background: var(--viking-danger);
+      }
+      .viking-status-accent {
+        background: var(--viking-accent);
+      }
+      .viking-status-muted {
+        background: var(--viking-text-muted);
+      }
+      .viking-visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+    `,
+  ],
+})
+export class VikingAvatar {
+  readonly src = input<string | null>(null);
+  readonly name = input<string>("");
+  readonly size = input<number>(45);
+  readonly square = input<boolean>(false);
+  readonly status = input<VikingTone | null>(null);
+
+  protected readonly imageFailed = signal(false);
+
+  protected readonly initials = computed(() => {
+    const parts = this.name().trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+      return "?";
+    }
+    const first = parts[0].charAt(0);
+    const last = parts.length > 1 ? parts[parts.length - 1].charAt(0) : "";
+    return `${first}${last}`;
+  });
+}