@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/lib/command/command.ts

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

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

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

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