@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

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

@@ -1,228 +0,0 @@
-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: 520px;
-        margin-inline: auto;
-        font-family: var(--viking-font-family);
-      }
-      .viking-auth-panel {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-4);
-        width: 100%;
-        padding: var(--viking-card-padding);
-        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-2);
-        margin-bottom: var(--viking-space-2);
-      }
-      .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-3);
-        width: 100%;
-      }
-      :host ::ng-deep .viking-auth-stack {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-3);
-        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-3);
-        width: 100%;
-      }
-      .viking-auth-social {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-3);
-        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

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

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