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

package/src/lib/command/command.ts

@@ -0,0 +1,260 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingCommandItem } from "../../core/types";
+
+/**
+ * viking-command — command palette.
+ * Toggle with the `open` model; emits `executed` when an item is chosen.
+ */
+@Component({
+  selector: "viking-command",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "(keydown.escape)": "open.set(false)" },
+  template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="viking-command-backdrop"
+        aria-label="Close command palette"
+        (click)="open.set(false)"
+      ></button>
+      <div class="viking-command" role="dialog" aria-label="Command palette">
+        <div class="viking-command-search">
+          <viking-icon name="search" [size]="20" />
+          <input
+            #queryInput
+            type="text"
+            [placeholder]="placeholder()"
+            [value]="query()"
+            aria-label="Search commands"
+            (input)="onQuery($event)"
+            (keydown)="onKeydown($event)"
+          />
+          <kbd>esc</kbd>
+        </div>
+        <div class="viking-command-list" role="listbox">
+          @for (group of groups(); track group.name) {
+            <p class="viking-command-group">{{ group.name }}</p>
+            @for (item of group.items; track item.id) {
+              <button
+                type="button"
+                role="option"
+                class="viking-command-item"
+                [class.viking-active]="item.id === activeId()"
+                [attr.aria-selected]="item.id === activeId()"
+                (click)="run(item)"
+                (mouseenter)="activeId.set(item.id)"
+              >
+                @if (item.icon) {
+                  <viking-icon [name]="item.icon" [size]="18" />
+                }
+                <span class="viking-command-label">{{ item.label }}</span>
+                @if (item.kbd) {
+                  <kbd>{{ item.kbd }}</kbd>
+                }
+              </button>
+            }
+          }
+          @if (filtered().length === 0) {
+            <p class="viking-command-empty">No results for “{{ query() }}”</p>
+          }
+        </div>
+      </div>
+    }
+  `,
+  styles: [
+    `
+      .viking-command-backdrop {
+        position: fixed;
+        inset: 0;
+        border: none;
+        background: var(--viking-overlay-backdrop, rgba(49, 57, 60, 0.55));
+        backdrop-filter: blur(4px);
+        z-index: var(--viking-z-overlay);
+        cursor: default;
+      }
+      .viking-command {
+        position: fixed;
+        top: 12vh;
+        left: 50%;
+        transform: translateX(-50%);
+        width: min(576px, calc(100vw - var(--viking-space-4)));
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-md);
+        z-index: calc(var(--viking-z-overlay) + 1);
+        font-family: var(--viking-font-family);
+        overflow: hidden;
+      }
+      .viking-command-search {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-2);
+        border-bottom: 1px solid var(--viking-border);
+        color: var(--viking-text-muted);
+        transition: var(--viking-transition-colors);
+      }
+      .viking-command-search:focus-within {
+        border-bottom-color: var(--viking-accent);
+        box-shadow: inset 0 -2px 0 var(--viking-accent-soft);
+      }
+      .viking-command-search 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);
+      }
+      kbd {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: calc(var(--viking-radius) / 2);
+        padding: 0 var(--viking-space-1);
+        line-height: 1.4;
+      }
+      .viking-command-list {
+        max-height: 342px;
+        overflow: auto;
+        padding: var(--viking-space-1);
+      }
+      .viking-command-group {
+        margin: var(--viking-space-1) var(--viking-space-1) 3px;
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--viking-text-muted);
+      }
+      .viking-command-item {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        width: 100%;
+        min-height: var(--viking-control-height-sm);
+        border: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        padding: var(--viking-space-1) var(--viking-space-1-5);
+        border-radius: var(--viking-radius-sm);
+        cursor: pointer;
+        text-align: left;
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-command-item:hover:not(.viking-active),
+      .viking-command-item.viking-active {
+        background: var(--viking-accent-soft);
+      }
+      .viking-command-item:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-command-item:active {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-command-label {
+        flex: 1;
+      }
+      .viking-command-empty {
+        margin: 0;
+        padding: var(--viking-space-2);
+        color: var(--viking-text-muted);
+        font-size: var(--viking-font-size);
+        text-align: center;
+      }
+    `,
+  ],
+})
+export class VikingCommand {
+  readonly items = input.required<VikingCommandItem[]>();
+  readonly open = model<boolean>(false);
+  readonly placeholder = input<string>("Type a command or search…");
+
+  readonly executed = output<VikingCommandItem>();
+
+  private readonly queryInput =
+    viewChild<ElementRef<HTMLInputElement>>("queryInput");
+
+  protected readonly query = signal("");
+  protected readonly activeId = signal<string>("");
+
+  constructor() {
+    effect(() => {
+      if (this.open()) {
+        this.query.set("");
+        this.activeId.set(this.items()[0]?.id ?? "");
+        queueMicrotask(() => this.queryInput()?.nativeElement.focus());
+      }
+    });
+  }
+
+  protected readonly filtered = computed(() => {
+    const query = this.query().toLowerCase().trim();
+    if (!query) {
+      return this.items();
+    }
+    return this.items().filter((item) =>
+      item.label.toLowerCase().includes(query),
+    );
+  });
+
+  protected readonly groups = computed(() => {
+    const map = new Map<string, VikingCommandItem[]>();
+    for (const item of this.filtered()) {
+      const group = item.group ?? "Commands";
+      map.set(group, [...(map.get(group) ?? []), item]);
+    }
+    return [...map.entries()].map(([name, items]) => ({ name, items }));
+  });
+
+  protected onQuery = (event: Event): void => {
+    this.query.set((event.target as HTMLInputElement).value);
+    this.activeId.set(this.filtered()[0]?.id ?? "");
+  };
+
+  protected run = (item: VikingCommandItem): void => {
+    this.executed.emit(item);
+    this.open.set(false);
+    this.query.set("");
+  };
+
+  protected onKeydown = (event: KeyboardEvent): void => {
+    const items = this.filtered();
+    const index = items.findIndex((item) => item.id === this.activeId());
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.activeId.set(items[Math.min(items.length - 1, index + 1)]?.id ?? "");
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.activeId.set(items[Math.max(0, index - 1)]?.id ?? "");
+    } else if (event.key === "Enter") {
+      const active =
+        items.find((item) => item.id === this.activeId()) ?? items[0];
+      if (active) {
+        event.preventDefault();
+        this.run(active);
+      }
+    }
+  };
+}

package/src/lib/composer/composer.ts

@@ -0,0 +1,180 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-composer — message composer with attachments and send action
+ *.
+ */
+@Component({
+  selector: "viking-composer",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="viking-composer">
+      <textarea
+        rows="1"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="disabled()"
+        [attr.aria-label]="placeholder() || 'Message'"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      ></textarea>
+      <div class="viking-composer-actions">
+        <div class="viking-composer-tools">
+          @if (allowAttachments()) {
+            <button
+              type="button"
+              class="viking-composer-tool"
+              aria-label="Attach file"
+              (click)="attach.emit()"
+            >
+              <viking-icon name="paperclip" [size]="20" />
+            </button>
+          }
+          <ng-content />
+        </div>
+        <button
+          type="button"
+          class="viking-composer-send"
+          aria-label="Send message"
+          [disabled]="disabled() || !value().trim()"
+          (click)="send()"
+        >
+          <viking-icon name="send" [size]="18" />
+          <span>Send</span>
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .viking-composer {
+        display: flex;
+        flex-direction: column;
+        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);
+        font-family: var(--viking-font-family);
+      }
+      .viking-composer:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      textarea {
+        border: none;
+        outline: none;
+        resize: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        line-height: 1.55;
+        padding: var(--viking-space-2);
+        min-height: var(--viking-space-5);
+      }
+      textarea::placeholder {
+        color: var(--viking-text-muted);
+      }
+      .viking-composer-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-1) var(--viking-space-2)
+          var(--viking-space-1) var(--viking-space-1);
+        border-top: 1px solid var(--viking-border);
+      }
+      .viking-composer-tools {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--viking-space-1) / 2);
+      }
+      .viking-composer-tool {
+        display: inline-flex;
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: var(--viking-space-1);
+        border-radius: calc(var(--viking-radius) / 1.5);
+        transition: var(--viking-transition);
+      }
+      .viking-composer-tool:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+      }
+      .viking-composer-tool:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+      .viking-composer-send {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--viking-space-1) / 1.5);
+        border: 1px solid var(--viking-accent);
+        background: var(--viking-accent);
+        color: var(--viking-accent-content);
+        font-family: var(--viking-font-family);
+        /* >= 18.67px bold qualifies as WCAG large text (3:1 on accent fill). */
+        font-size: calc(var(--viking-font-size) * 1.05);
+        font-weight: 700;
+        padding: calc(var(--viking-space-1) / 1.5) var(--viking-space-2);
+        border-radius: var(--viking-radius);
+        cursor: pointer;
+        transition: var(--viking-transition);
+      }
+      .viking-composer-send:hover:not(:disabled) {
+        background: var(--viking-accent-strong);
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-composer-send:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-composer-send:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+    `,
+  ],
+})
+export class VikingComposer {
+  readonly value = model<string>("");
+  readonly placeholder = input<string>("Write a message…");
+  readonly disabled = input<boolean>(false);
+  readonly allowAttachments = input<boolean>(true);
+
+  readonly sent = output<string>();
+  readonly attach = output<void>();
+
+  protected onInput = (event: Event): void => {
+    const el = event.target as HTMLTextAreaElement;
+    this.value.set(el.value);
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  };
+
+  protected onKeydown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      this.send();
+    }
+  };
+
+  protected send = (): void => {
+    const message = this.value().trim();
+    if (message) {
+      this.sent.emit(message);
+      this.value.set("");
+    }
+  };
+}

package/src/lib/confirm-dialog/confirm-dialog.ts

@@ -0,0 +1,163 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+} from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { VikingButton } from "../button/button";
+import { VikingField } from "../field/field";
+import { VikingIcon } from "../icon/icon";
+import { VikingInput } from "../input/input";
+import { VikingModal } from "../modal/modal";
+import { VikingText } from "../typography/text";
+import type { VikingIconName } from "../../core/icons";
+import { VikingConfirmDialogData, VikingDialogService } from "./dialog.service";
+
+/**
+ * viking-confirm-dialog — alert / confirm / prompt modal wired to VikingDialogService.
+ */
+@Component({
+  selector: "viking-confirm-dialog",
+  imports: [
+    FormsModule,
+    VikingModal,
+    VikingButton,
+    VikingField,
+    VikingInput,
+    VikingText,
+    VikingIcon,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (data(); as dialogData) {
+      <viking-modal
+        [open]="open()"
+        [heading]="heading()"
+        (openChange)="onOpenChange($event)"
+      >
+        <div class="viking-confirm-body">
+          <div class="viking-confirm-title-row">
+            <viking-icon [name]="iconName()" [size]="24" />
+            <viking-text>{{ dialogData.message }}</viking-text>
+          </div>
+          @if (dialogData.type === "prompt" && dialogData.confirmText) {
+            <viking-field
+              label="Verification text"
+              [description]="'Type ' + dialogData.confirmText + ' to proceed'"
+            >
+              <viking-input
+                [ngModel]="inputValue()"
+                (ngModelChange)="inputValue.set($event)"
+                autocomplete="off"
+                (keyup.enter)="onConfirm()"
+              />
+            </viking-field>
+          }
+        </div>
+        <div vikingModalActions>
+          @if (dialogData.type !== "alert") {
+            <viking-button variant="outline" (pressed)="onCancel()"
+              >Cancel</viking-button
+            >
+          }
+          <viking-button
+            [variant]="
+              dialogData.confirmBtnColor === 'warn' ? 'danger' : 'primary'
+            "
+            [disabled]="!isValid()"
+            [icon]="
+              dialogData.type === 'alert'
+                ? 'check-circle'
+                : dialogData.confirmBtnColor === 'warn'
+                  ? 'trash'
+                  : 'check'
+            "
+            (pressed)="onConfirm()"
+          >
+            {{
+              dialogData.confirmBtnText ||
+                (dialogData.type === "alert" ? "OK" : "Confirm")
+            }}
+          </viking-button>
+        </div>
+      </viking-modal>
+    }
+  `,
+  styles: [
+    `
+      .viking-confirm-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+      }
+      .viking-confirm-title-row {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-2);
+      }
+    `,
+  ],
+})
+export class VikingConfirmDialog {
+  constructor(private readonly vikingDialog: VikingDialogService) {}
+
+  protected readonly inputValue = signal<string>("");
+
+  protected readonly data = computed(() => {
+    const active = this.vikingDialog.active();
+    return active?.kind === "confirm"
+      ? (active.data as VikingConfirmDialogData)
+      : null;
+  });
+
+  protected readonly open = computed(() => this.data() !== null);
+
+  protected readonly heading = computed(() => {
+    const data = this.data();
+    if (!data) return "";
+    return (
+      data.title ??
+      (data.type === "alert"
+        ? "Notice"
+        : data.type === "prompt"
+          ? "Verification Required"
+          : "Confirm Action")
+    );
+  });
+
+  protected readonly iconName = computed((): VikingIconName => {
+    const data = this.data();
+    if (!data) return "info";
+    if (data.type === "alert") return "info";
+    if (data.confirmBtnColor === "warn") return "alert-triangle";
+    return "info";
+  });
+
+  protected readonly isValid = computed(() => {
+    const data = this.data();
+    if (!data || data.type !== "prompt" || !data.confirmText) {
+      return true;
+    }
+    return this.inputValue() === data.confirmText;
+  });
+
+  protected onCancel = (): void => {
+    this.inputValue.set("");
+    this.vikingDialog.resolveConfirm(false);
+  };
+
+  protected onConfirm = (): void => {
+    if (!this.isValid()) return;
+    this.inputValue.set("");
+    this.vikingDialog.resolveConfirm(true);
+  };
+
+  protected onOpenChange = (next: boolean): void => {
+    if (!next) {
+      this.onCancel();
+    }
+  };
+}
+
+export type { VikingConfirmDialogData };

package/src/lib/confirm-dialog/dialog.service.ts

@@ -0,0 +1,79 @@
+import { Injectable, signal } from "@angular/core";
+
+export type VikingDialogKind = "confirm" | "search" | "onboarding";
+
+export interface VikingConfirmDialogData {
+  title?: string;
+  message: string;
+  type?: "alert" | "confirm" | "prompt";
+  confirmText?: string;
+  confirmBtnText?: string;
+  confirmBtnColor?: "primary" | "warn" | "accent";
+}
+
+export interface VikingDialogState {
+  kind: VikingDialogKind;
+  data?: VikingConfirmDialogData & { force?: boolean };
+}
+
+/** Programmatic confirm / prompt / overlay orchestration for Viking-UI modals. */
+@Injectable({ providedIn: "root" })
+export class VikingDialogService {
+  readonly active = signal<VikingDialogState | null>(null);
+
+  private confirmResolver: ((value: boolean) => void) | null = null;
+  private onboardingResolver: ((value: boolean | undefined) => void) | null =
+    null;
+
+  openConfirm(data: VikingConfirmDialogData): Promise<boolean> {
+    this.closeActive(false);
+    return new Promise<boolean>((resolve) => {
+      this.confirmResolver = resolve;
+      this.active.set({ kind: "confirm", data });
+    });
+  }
+
+  resolveConfirm(result: boolean): void {
+    this.confirmResolver?.(result);
+    this.confirmResolver = null;
+    this.active.set(null);
+  }
+
+  openSearch(): void {
+    if (this.active()?.kind === "search") {
+      return;
+    }
+    this.closeActive(false);
+    this.active.set({ kind: "search" });
+  }
+
+  closeSearch(): void {
+    if (this.active()?.kind === "search") {
+      this.active.set(null);
+    }
+  }
+
+  openOnboarding(force = false): Promise<boolean | undefined> {
+    this.closeActive(false);
+    return new Promise<boolean | undefined>((resolve) => {
+      this.onboardingResolver = resolve;
+      this.active.set({ kind: "onboarding", data: { message: "", force } });
+    });
+  }
+
+  resolveOnboarding(result?: boolean): void {
+    this.onboardingResolver?.(result);
+    this.onboardingResolver = null;
+    this.active.set(null);
+  }
+
+  closeActive(cancelPending = true): void {
+    if (cancelPending) {
+      this.confirmResolver?.(false);
+      this.onboardingResolver?.(undefined);
+    }
+    this.confirmResolver = null;
+    this.onboardingResolver = null;
+    this.active.set(null);
+  }
+}