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

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

package/src/lib/fab/fab.ts

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-fab — floating action button (fixed bottom-right).
+ */
+@Component({
+  selector: "viking-fab",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      class="viking-fab"
+      [attr.aria-label]="label()"
+      [disabled]="disabled()"
+      (click)="pressed.emit($event)"
+    >
+      <viking-icon [name]="icon()" [size]="24" />
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: contents;
+      }
+      .viking-fab {
+        position: fixed;
+        bottom: var(--viking-space-3);
+        right: var(--viking-space-3);
+        width: var(--viking-space-7);
+        height: var(--viking-space-7);
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-accent);
+        color: var(--viking-accent-content);
+        border: 1px solid
+          color-mix(in srgb, var(--viking-accent) 80%, var(--viking-black));
+        box-shadow: var(--viking-shadow-md);
+        cursor: pointer;
+        z-index: var(--viking-z-overlay);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-fab:hover:not(:disabled) {
+        transform: translateY(var(--viking-state-hover-lift));
+        box-shadow: var(--viking-shadow-hover);
+        background: var(--viking-accent-hover);
+      }
+      .viking-fab:active:not(:disabled) {
+        transform: translateY(0) scale(var(--viking-state-active-scale));
+      }
+      .viking-fab:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-fab:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+    `,
+  ],
+})
+export class VikingFab {
+  readonly icon = input.required<VikingIconName>();
+  readonly label = input.required<string>();
+  readonly disabled = input<boolean>(false);
+  readonly pressed = output<MouseEvent>();
+}