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

package/src/lib/context/context.ts

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  signal,
+} from "@angular/core";
+
+/**
+ * viking-context — right-click context menu.
+ * Wrap the target content and project menu content with the `vikingMenu` attribute
+ * (typically viking-menu-item elements).
+ */
+@Component({
+  selector: "viking-context",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(contextmenu)": "onContextMenu($event)",
+    "(document:click)": "closed()",
+    "(keydown.escape)": "closed()",
+  },
+  template: `
+    <ng-content />
+    @if (open()) {
+      <div
+        class="viking-context-menu"
+        role="menu"
+        [style.left.px]="position().x"
+        [style.top.px]="position().y"
+      >
+        <ng-content select="[vikingMenu]" />
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        position: relative;
+      }
+      .viking-context-menu {
+        position: absolute;
+        min-width: 198px;
+        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);
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+    `,
+  ],
+})
+export class VikingContext {
+  protected readonly open = signal(false);
+  protected readonly position = signal({ x: 0, y: 0 });
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {}
+
+  protected onContextMenu = (event: MouseEvent): void => {
+    event.preventDefault();
+    const rect = this.host.nativeElement.getBoundingClientRect();
+    this.position.set({
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    });
+    this.open.set(true);
+  };
+
+  protected closed = (): void => {
+    this.open.set(false);
+  };
+}

package/src/lib/core/cva.ts

@@ -0,0 +1,33 @@
+import { Directive, Provider, Type, forwardRef, signal } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+/** Registers a component as a ControlValueAccessor. */
+export const provideVikingCva = (component: Type<unknown>): Provider => ({
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => component),
+  multi: true,
+});
+
+/** Shared ControlValueAccessor plumbing for Viking-Material form controls. */
+@Directive()
+export abstract class VikingControl<T> implements ControlValueAccessor {
+  protected onChange: (value: T) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  /** Disabled state driven by Angular forms (setDisabledState). */
+  readonly formDisabled = signal(false);
+
+  abstract writeValue(value: T): void;
+
+  registerOnChange(fn: (value: T) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/lib/date-picker/date-picker.ts

@@ -0,0 +1,139 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  input,
+  model,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingCalendar } from "../calendar/calendar";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-date-picker — input + calendar popover.
+ * Value is an ISO date string (YYYY-MM-DD). ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-date-picker",
+  imports: [VikingCalendar, VikingIcon],
+  providers: [provideVikingCva(VikingDatePicker)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(document:click)": "onDocumentClick($event)",
+    "(keydown.escape)": "open.set(false)",
+  },
+  template: `
+    <button
+      type="button"
+      class="viking-control viking-date-trigger"
+      [disabled]="disabled() || formDisabled()"
+      [attr.aria-expanded]="open()"
+      [attr.aria-label]="label() || placeholder()"
+      aria-haspopup="dialog"
+      (click)="open.set(!open())"
+    >
+      <viking-icon name="calendar" [size]="20" />
+      <span
+        class="viking-date-value"
+        [class.viking-date-placeholder]="!value()"
+      >
+        {{ value() || placeholder() }}
+      </span>
+      <viking-icon
+        [name]="open() ? 'chevron-up' : 'chevron-down'"
+        [size]="18"
+      />
+    </button>
+    @if (open()) {
+      <div class="viking-date-panel" role="dialog" aria-label="Choose date">
+        <viking-calendar [value]="value()" (valueChange)="pick($event)" />
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: block;
+      }
+      .viking-date-trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        width: 100%;
+        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);
+        color: var(--viking-text-muted);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        cursor: pointer;
+        transition: var(--viking-transition);
+        text-align: left;
+      }
+      .viking-date-trigger:hover:not(:disabled) {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-date-trigger:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-date-trigger:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-date-value {
+        flex: 1;
+        color: var(--viking-text);
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-date-placeholder {
+        color: var(--viking-text-muted);
+      }
+      .viking-date-panel {
+        position: absolute;
+        top: calc(100% + var(--viking-space-1));
+        left: 0;
+        z-index: var(--viking-z-overlay);
+        box-shadow: var(--viking-shadow-md);
+        border-radius: var(--viking-radius);
+      }
+    `,
+  ],
+})
+export class VikingDatePicker extends VikingControl<string | null> {
+  readonly value = model<string | null>(null);
+  readonly placeholder = input<string>("Select date");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+
+  protected readonly open = signal(false);
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  writeValue(value: string | null): void {
+    this.value.set(value);
+  }
+
+  protected pick = (iso: string | null): void => {
+    this.value.set(iso);
+    this.onChange(iso);
+    this.onTouched();
+    this.open.set(false);
+  };
+
+  protected onDocumentClick = (event: Event): void => {
+    if (
+      this.open() &&
+      !this.host.nativeElement.contains(event.target as Node)
+    ) {
+      this.open.set(false);
+    }
+  };
+}

package/src/lib/dropdown/dropdown.ts

@@ -0,0 +1,188 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Optional,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-dropdown — expandable menu.
+ * Project the trigger with `vikingTrigger`; fill the menu with viking-menu-item.
+ */
+@Component({
+  selector: "viking-dropdown",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(click)": "onHostClick($event)",
+    "(document:click)": "onDocumentClick($event)",
+    "(keydown.escape)": "open.set(false)",
+  },
+  template: `
+    <span class="viking-dropdown-trigger">
+      <ng-content select="[vikingTrigger]" />
+    </span>
+    @if (open()) {
+      <div
+        class="viking-dropdown-menu"
+        [class.viking-dropdown-end]="align() === 'end'"
+        role="menu"
+      >
+        <ng-content />
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .viking-dropdown-trigger {
+        display: inline-flex;
+      }
+      .viking-dropdown-menu {
+        position: absolute;
+        top: calc(100% + var(--viking-space-1));
+        left: 0;
+        min-width: 216px;
+        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);
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .viking-dropdown-end {
+        left: auto;
+        right: 0;
+      }
+    `,
+  ],
+})
+export class VikingDropdown {
+  readonly open = model<boolean>(false);
+  readonly align = input<"start" | "end">("start");
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {}
+
+  /** Closes the menu; called by viking-menu-item on selection. */
+  readonly close = (): void => {
+    this.open.set(false);
+  };
+
+  /** Toggles when the (focusable, projected) trigger is activated. */
+  protected onHostClick = (event: Event): void => {
+    const trigger = this.host.nativeElement.querySelector(
+      ".viking-dropdown-trigger",
+    );
+    if (trigger?.contains(event.target as Node)) {
+      this.open.update((value) => !value);
+    }
+  };
+
+  protected onDocumentClick = (event: Event): void => {
+    if (
+      this.open() &&
+      !this.host.nativeElement.contains(event.target as Node)
+    ) {
+      this.open.set(false);
+    }
+  };
+}
+
+/**
+ * viking-menu-item — action row inside viking-dropdown / viking-context menus.
+ */
+@Component({
+  selector: "viking-menu-item",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      role="menuitem"
+      class="viking-menu-item"
+      [class.viking-menu-item-danger]="danger()"
+      [disabled]="disabled()"
+      (click)="select($event)"
+    >
+      @if (icon()) {
+        <viking-icon [name]="icon()!" [size]="18" />
+      }
+      <span class="viking-menu-item-label"><ng-content /></span>
+      @if (kbd()) {
+        <kbd class="viking-menu-item-kbd">{{ kbd() }}</kbd>
+      }
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-menu-item {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        width: 100%;
+        border: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        padding: var(--viking-space-1) var(--viking-space-1);
+        border-radius: calc(var(--viking-radius) / 1.5);
+        cursor: pointer;
+        text-align: left;
+        transition: var(--viking-transition);
+      }
+      .viking-menu-item:hover:not(:disabled) {
+        background: var(--viking-accent-soft);
+      }
+      .viking-menu-item:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: -2px;
+      }
+      .viking-menu-item:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-menu-item-danger {
+        color: var(--viking-danger);
+      }
+      .viking-menu-item-label {
+        flex: 1;
+        white-space: nowrap;
+      }
+      .viking-menu-item-kbd {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingMenuItem {
+  constructor(@Optional() private readonly dropdown: VikingDropdown | null) {}
+
+  readonly icon = input<VikingIconName | null>(null);
+  readonly kbd = input<string | null>(null);
+  readonly danger = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+
+  readonly selected = output<MouseEvent>();
+
+  protected select = (event: MouseEvent): void => {
+    this.selected.emit(event);
+    this.dropdown?.close();
+  };
+}

package/src/lib/editor/editor.ts

@@ -0,0 +1,170 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  input,
+  model,
+  viewChild,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+interface EditorAction {
+  icon: VikingIconName;
+  command: string;
+  label: string;
+}
+
+const ACTIONS: EditorAction[] = [
+  { icon: "bold", command: "bold", label: "Bold" },
+  { icon: "italic", command: "italic", label: "Italic" },
+  { icon: "underline", command: "underline", label: "Underline" },
+  { icon: "list", command: "insertUnorderedList", label: "Bulleted list" },
+  {
+    icon: "list-ordered",
+    command: "insertOrderedList",
+    label: "Numbered list",
+  },
+];
+
+/**
+ * viking-editor — lightweight rich text editor.
+ * Zero-dependency contenteditable with a formatting toolbar.
+ * Value is HTML. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-editor",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingEditor)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="viking-editor">
+      <div
+        class="viking-editor-toolbar"
+        role="toolbar"
+        aria-label="Text formatting"
+      >
+        @for (action of actions; track action.command) {
+          <button
+            type="button"
+            class="viking-editor-btn"
+            [attr.aria-label]="action.label"
+            (mousedown)="$event.preventDefault()"
+            (click)="exec(action.command)"
+          >
+            <viking-icon [name]="action.icon" [size]="18" />
+          </button>
+        }
+      </div>
+      <div
+        #surface
+        class="viking-editor-surface"
+        contenteditable="true"
+        role="textbox"
+        aria-multiline="true"
+        [attr.aria-label]="label() || 'Rich text editor'"
+        [attr.data-placeholder]="placeholder()"
+        (input)="onInput()"
+        (blur)="onTouched()"
+      ></div>
+    </div>
+  `,
+  styles: [
+    `
+      .viking-editor {
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+        box-shadow: var(--viking-shadow-sm);
+        font-family: var(--viking-font-family);
+        transition: var(--viking-transition);
+      }
+      .viking-editor:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-editor-toolbar {
+        display: flex;
+        gap: 2px;
+        padding: var(--viking-space-1);
+        border-bottom: 1px solid var(--viking-border);
+      }
+      .viking-editor-btn {
+        display: inline-flex;
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: calc(var(--viking-space-1) / 1.5);
+        border-radius: calc(var(--viking-radius) / 1.5);
+        transition: var(--viking-transition);
+      }
+      .viking-editor-btn:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+      }
+      .viking-editor-btn:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+      .viking-editor-surface {
+        min-height: 126px;
+        padding: var(--viking-space-2);
+        color: var(--viking-text);
+        font-size: var(--viking-font-size);
+        line-height: 1.6;
+        outline: none;
+      }
+      .viking-editor-surface:empty::before {
+        content: attr(data-placeholder);
+        color: var(--viking-text-muted);
+        pointer-events: none;
+      }
+    `,
+  ],
+})
+export class VikingEditor extends VikingControl<string> {
+  private readonly surface =
+    viewChild.required<ElementRef<HTMLElement>>("surface");
+  private readonly document: Document;
+
+  readonly value = model<string>("");
+  readonly placeholder = input<string>("Start writing…");
+  readonly label = input<string>("");
+
+  protected readonly actions = ACTIONS;
+
+  constructor(elementRef: ElementRef<HTMLElement>) {
+    super();
+    this.document = elementRef.nativeElement.ownerDocument;
+    afterNextRender(() => {
+      if (this.value()) {
+        this.surface().nativeElement.innerHTML = this.value();
+      }
+    });
+  }
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+    const surface = this.surface?.();
+    if (surface) {
+      surface.nativeElement.innerHTML = value ?? "";
+    }
+  }
+
+  protected exec = (command: string): void => {
+    this.surface().nativeElement.focus();
+    // execCommand is deprecated but remains the only zero-dependency way to
+    // apply inline formatting to a contenteditable selection.
+    this.document.execCommand(command, false);
+    this.onInput();
+  };
+
+  protected onInput = (): void => {
+    const html = this.surface().nativeElement.innerHTML;
+    this.value.set(html);
+    this.onChange(html);
+  };
+}

package/src/lib/empty-state/empty-state.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-empty-state — reusable empty / zero-data placeholder.
+ */
+@Component({
+  selector: "viking-empty-state",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: "status" },
+  template: `
+    <div class="viking-empty-state-inner">
+      @if (icon()) {
+        <div class="viking-empty-state-icon" aria-hidden="true">
+          <viking-icon [name]="icon()!" [size]="iconSize()" />
+        </div>
+      }
+      @if (heading()) {
+        <p class="viking-empty-state-heading">{{ heading() }}</p>
+      }
+      @if (description()) {
+        <p class="viking-empty-state-description">{{ description() }}</p>
+      }
+      <div class="viking-empty-state-actions">
+        <ng-content />
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: var(--viking-space-4) var(--viking-space-3);
+        font-family: var(--viking-font-family);
+        animation: viking-fade-in var(--viking-duration)
+          var(--viking-ease-default);
+      }
+      .viking-empty-state-inner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 0;
+        max-width: 28rem;
+      }
+      .viking-empty-state-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-space-7);
+        height: var(--viking-space-7);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-accent-soft);
+        color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-sm);
+        border: 1px solid
+          color-mix(in srgb, var(--viking-accent) 18%, transparent);
+        margin-bottom: var(--viking-space-2);
+      }
+      .viking-empty-state-heading {
+        margin: 0 0 var(--viking-space-1) 0;
+        font-size: var(--viking-font-size-md);
+        font-weight: var(--viking-font-weight-semibold);
+        letter-spacing: var(--viking-letter-spacing-caps);
+        text-transform: uppercase;
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-tight);
+      }
+      .viking-empty-state-description {
+        margin: 0;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: var(--viking-line-height-relaxed);
+      }
+      .viking-empty-state-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--viking-space-2);
+        margin-top: var(--viking-space-2);
+      }
+      .viking-empty-state-actions:empty {
+        display: none;
+      }
+    `,
+  ],
+})
+export class VikingEmptyState {
+  readonly heading = input<string>("");
+  readonly description = input<string>("");
+  readonly icon = input<VikingIconName | null>("folder");
+  readonly iconSize = input<number>(28);
+}