@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

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

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

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

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

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

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