@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/lib/theme-toggle/theme-toggle.ts

@@ -1,39 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  computed,
-  input,
-  output,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-
-/**
- * viking-theme-toggle — navbar utility control for light/dark theme switching.
- * Uses `.theme-toggle-btn` styles from viking-ui.css (static-navbar.scss).
- */
-@Component({
-  selector: "viking-theme-toggle",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [VikingIcon],
-  host: { class: "viking-theme-toggle-host" },
-  template: `
-    <button
-      type="button"
-      class="theme-toggle-btn"
-      aria-label="Toggle light and dark theme"
-      (click)="toggle.emit()"
-    >
-      <viking-icon [name]="icon()" [size]="20" />
-    </button>
-  `,
-})
-export class VikingThemeToggle {
-  readonly theme = input<"light" | "dark">("dark");
-  readonly toggle = output<void>();
-
-  protected readonly icon = computed(() =>
-    this.theme() === "dark" ? "sun" : "moon",
-  );
-}

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

@@ -1,197 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  computed,
-  input,
-  model,
-  signal,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-import { VikingIcon } from "../icon/icon";
-
-/**
- * viking-time-picker — dropdown time selection.
- * Value is a 24h HH:MM string. ControlValueAccessor-compatible.
- */
-@Component({
-  selector: "viking-time-picker",
-  imports: [VikingIcon],
-  providers: [provideVikingCva(VikingTimePicker)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "(document:click)": "onDocumentClick($event)",
-    "(keydown.escape)": "open.set(false)",
-  },
-  template: `
-    <button
-      type="button"
-      class="viking-control viking-time-trigger"
-      [disabled]="disabled() || formDisabled()"
-      [attr.aria-expanded]="open()"
-      [attr.aria-label]="label() || placeholder()"
-      aria-haspopup="listbox"
-      (click)="open.set(!open())"
-    >
-      <viking-icon name="clock" [size]="20" />
-      <span
-        class="viking-time-value"
-        [class.viking-time-placeholder]="!value()"
-      >
-        {{ value() || placeholder() }}
-      </span>
-      <viking-icon
-        [name]="open() ? 'chevron-up' : 'chevron-down'"
-        [size]="18"
-      />
-    </button>
-    @if (open()) {
-      <div class="viking-time-panel" role="listbox" aria-label="Choose time">
-        @for (slot of slots(); track slot) {
-          <button
-            type="button"
-            role="option"
-            class="viking-time-option"
-            [class.viking-selected]="slot === value()"
-            [attr.aria-selected]="slot === value()"
-            (click)="pick(slot)"
-          >
-            {{ slot }}
-          </button>
-        }
-      </div>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        position: relative;
-        display: block;
-      }
-      .viking-time-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-time-trigger:hover:not(:disabled) {
-        border-color: var(--viking-accent-strong);
-      }
-      .viking-time-trigger:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-time-trigger:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      .viking-time-value {
-        flex: 1;
-        color: var(--viking-text);
-        font-variant-numeric: tabular-nums;
-      }
-      .viking-time-placeholder {
-        color: var(--viking-text-muted);
-      }
-      .viking-time-panel {
-        position: absolute;
-        top: calc(100% + var(--viking-space-1));
-        left: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        margin: 0;
-        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);
-        max-height: 279px;
-        overflow: auto;
-      }
-      .viking-time-option {
-        padding: var(--viking-space-1);
-        border: none;
-        background: transparent;
-        text-align: left;
-        width: 100%;
-        border-radius: calc(var(--viking-radius) / 1.5);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        color: var(--viking-text);
-        cursor: pointer;
-        font-variant-numeric: tabular-nums;
-      }
-      .viking-time-option:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: -2px;
-      }
-      .viking-time-option:hover {
-        background: var(--viking-accent-soft);
-      }
-      .viking-selected {
-        color: var(--viking-accent);
-        font-weight: 600;
-      }
-    `,
-  ],
-})
-export class VikingTimePicker extends VikingControl<string | null> {
-  readonly value = model<string | null>(null);
-  readonly placeholder = input<string>("Select time");
-  readonly label = input<string>("");
-  readonly disabled = input<boolean>(false);
-  /** Minute granularity for generated slots. */
-  readonly stepMinutes = input<number>(30);
-
-  constructor(private readonly host: ElementRef<HTMLElement>) {
-    super();
-  }
-
-  protected readonly open = signal(false);
-
-  protected readonly slots = computed<string[]>(() => {
-    const step = Math.max(5, this.stepMinutes());
-    const result: string[] = [];
-    for (let minutes = 0; minutes < 24 * 60; minutes += step) {
-      const hours = String(Math.floor(minutes / 60)).padStart(2, "0");
-      const mins = String(minutes % 60).padStart(2, "0");
-      result.push(`${hours}:${mins}`);
-    }
-    return result;
-  });
-
-  writeValue(value: string | null): void {
-    this.value.set(value);
-  }
-
-  protected pick = (slot: string): void => {
-    this.value.set(slot);
-    this.onChange(slot);
-    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/timeline/timeline.ts

@@ -1,152 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-import { VikingTone } from "../../core/types";
-
-/**
- * viking-timeline — vertical event feed.
- * Compose with viking-timeline-item.
- */
-@Component({
-  selector: "viking-timeline",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { role: "list" },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-    `,
-  ],
-})
-export class VikingTimeline {}
-
-/** A single event on viking-timeline. */
-@Component({
-  selector: "viking-timeline-item",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { role: "listitem" },
-  template: `
-    <div class="viking-timeline-item">
-      <div class="viking-timeline-rail" aria-hidden="true">
-        <span
-          class="viking-timeline-marker"
-          [class]="'viking-marker-' + tone()"
-        >
-          @if (icon()) {
-            <viking-icon [name]="icon()!" [size]="14" />
-          }
-        </span>
-        <span class="viking-timeline-line"></span>
-      </div>
-      <div class="viking-timeline-content">
-        <div class="viking-timeline-header">
-          <span class="viking-timeline-heading">{{ heading() }}</span>
-          @if (timestamp()) {
-            <time class="viking-timeline-time">{{ timestamp() }}</time>
-          }
-        </div>
-        <div class="viking-timeline-body"><ng-content /></div>
-      </div>
-    </div>
-  `,
-  styles: [
-    `
-      :host:last-child .viking-timeline-line {
-        display: none;
-      }
-      .viking-timeline-item {
-        display: flex;
-        gap: var(--viking-space-2);
-        font-family: var(--viking-font-family);
-      }
-      .viking-timeline-rail {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      .viking-timeline-marker {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--viking-space-3);
-        height: var(--viking-space-3);
-        border-radius: var(--viking-radius-pill);
-        border: 2px solid var(--viking-border-strong);
-        background: var(--viking-surface);
-        color: var(--viking-text-muted);
-        flex-shrink: 0;
-      }
-      .viking-marker-accent {
-        border-color: var(--viking-accent);
-        color: var(--viking-accent);
-      }
-      .viking-marker-secondary {
-        border-color: var(--viking-accent-secondary);
-        color: var(--viking-accent-secondary);
-      }
-      .viking-marker-info {
-        border-color: var(--viking-info);
-        color: var(--viking-info);
-      }
-      .viking-marker-success {
-        border-color: var(--viking-success);
-        color: var(--viking-success);
-      }
-      .viking-marker-warning {
-        border-color: var(--viking-warning);
-        color: var(--viking-text);
-      }
-      .viking-marker-danger {
-        border-color: var(--viking-danger);
-        color: var(--viking-danger);
-      }
-      .viking-timeline-line {
-        flex: 1;
-        width: 2px;
-        min-height: var(--viking-space-2);
-        background: var(--viking-border);
-      }
-      .viking-timeline-content {
-        flex: 1;
-        padding-bottom: var(--viking-space-3);
-        min-width: 0;
-      }
-      .viking-timeline-header {
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-        gap: var(--viking-space-2);
-        flex-wrap: wrap;
-      }
-      .viking-timeline-heading {
-        font-size: var(--viking-font-size);
-        font-weight: 600;
-        color: var(--viking-text);
-      }
-      .viking-timeline-time {
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-        font-variant-numeric: tabular-nums;
-      }
-      .viking-timeline-body {
-        margin-top: 3px;
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-        line-height: 1.55;
-      }
-      .viking-timeline-body:empty {
-        display: none;
-      }
-    `,
-  ],
-})
-export class VikingTimelineItem {
-  readonly heading = input.required<string>();
-  readonly timestamp = input<string>("");
-  readonly icon = input<VikingIconName | null>(null);
-  readonly tone = input<VikingTone>("muted");
-}

package/src/lib/toast/toast.ts

@@ -1,196 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Injectable,
-  input,
-  signal,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-import { VikingToastInstance, VikingToastOptions } from "../../core/types";
-
-const TONE_ICONS: Record<string, VikingIconName> = {
-  accent: "info",
-  success: "check-circle",
-  warning: "alert-triangle",
-  danger: "alert-circle",
-  muted: "info",
-};
-
-/**
- * VikingToastService — imperative toast API.
- * Render a single <viking-toaster> outlet near the app root.
- */
-@Injectable({ providedIn: "root" })
-export class VikingToastService {
-  private nextId = 1;
-  readonly toasts = signal<VikingToastInstance[]>([]);
-
-  readonly show = (options: VikingToastOptions): number => {
-    const toast: VikingToastInstance = {
-      id: this.nextId++,
-      heading: options.heading ?? "",
-      text: options.text,
-      tone: options.tone ?? "accent",
-      duration: options.duration ?? 4500,
-    };
-    this.toasts.update((list) => [...list, toast]);
-    if (toast.duration > 0) {
-      setTimeout(() => this.dismiss(toast.id), toast.duration);
-    }
-    return toast.id;
-  };
-
-  readonly dismiss = (id: number): void => {
-    this.toasts.update((list) => list.filter((toast) => toast.id !== id));
-  };
-}
-
-/**
- * viking-toaster — fixed-position outlet that renders active toasts.
- */
-@Component({
-  selector: "viking-toaster",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { "[class.viking-toaster-top]": "position() === 'top-end'" },
-  template: `
-    @for (toast of service.toasts(); track toast.id) {
-      <div
-        class="viking-toast"
-        [class]="'viking-toast-' + toast.tone"
-        role="status"
-      >
-        <viking-icon
-          class="viking-toast-icon"
-          [name]="toneIcon(toast.tone)"
-          [size]="20"
-        />
-        <div class="viking-toast-body">
-          @if (toast.heading) {
-            <p class="viking-toast-heading">{{ toast.heading }}</p>
-          }
-          <p class="viking-toast-text">{{ toast.text }}</p>
-        </div>
-        <button
-          type="button"
-          class="viking-toast-close"
-          aria-label="Dismiss notification"
-          (click)="service.dismiss(toast.id)"
-        >
-          <viking-icon name="x" [size]="16" />
-        </button>
-      </div>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        position: fixed;
-        bottom: var(--viking-space-3);
-        right: var(--viking-space-3);
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1);
-        z-index: var(--viking-z-toast);
-        max-width: min(414px, calc(100vw - var(--viking-space-4)));
-      }
-      @media (max-width: 767px) {
-        :host {
-          bottom: var(--viking-space-2);
-          right: var(--viking-space-2);
-          left: var(--viking-space-2);
-          max-width: none;
-        }
-      }
-      :host(.viking-toaster-top) {
-        bottom: auto;
-        top: var(--viking-space-3);
-      }
-      .viking-toast {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--viking-space-1);
-        padding: 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-md);
-        font-family: var(--viking-font-family);
-        animation: viking-toast-in var(--viking-duration) var(--viking-ease-out);
-      }
-      @keyframes viking-toast-in {
-        from {
-          transform: translateY(var(--viking-space-1));
-          opacity: 0;
-        }
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .viking-toast {
-          animation: none;
-        }
-      }
-      .viking-toast-icon {
-        margin-top: 2px;
-      }
-      .viking-toast-accent .viking-toast-icon {
-        color: var(--viking-accent);
-      }
-      .viking-toast-success .viking-toast-icon {
-        color: var(--viking-success);
-      }
-      .viking-toast-warning .viking-toast-icon {
-        color: var(--viking-warning);
-      }
-      .viking-toast-danger .viking-toast-icon {
-        color: var(--viking-danger);
-      }
-      .viking-toast-body {
-        flex: 1;
-        min-width: 0;
-      }
-      .viking-toast-heading {
-        margin: 0;
-        font-size: var(--viking-font-size);
-        font-weight: 600;
-        color: var(--viking-text);
-      }
-      .viking-toast-text {
-        margin: 0;
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-        line-height: 1.45;
-      }
-      .viking-toast-close {
-        display: inline-flex;
-        border: none;
-        background: transparent;
-        color: var(--viking-text-muted);
-        cursor: pointer;
-        padding: var(--viking-space-half);
-        border-radius: var(--viking-radius-pill);
-        transition: var(--viking-transition-interactive);
-      }
-      .viking-toast-close:hover {
-        color: var(--viking-text);
-        background: var(--viking-accent-soft);
-      }
-      .viking-toast-close:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: 1px;
-      }
-    `,
-  ],
-})
-export class VikingToaster {
-  readonly position = input<"bottom-end" | "top-end">("bottom-end");
-
-  constructor(protected readonly service: VikingToastService) {}
-
-  protected toneIcon = (tone: string): VikingIconName =>
-    TONE_ICONS[tone] ?? "info";
-}

package/src/lib/toggle/toggle-group.ts

@@ -1,60 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  InjectionToken,
-  model,
-} from "@angular/core";
-
-export const VIKING_TOGGLE_GROUP = new InjectionToken<VikingToggleGroup>(
-  "VIKING_TOGGLE_GROUP",
-);
-
-/**
- * viking-toggle-group — exclusive or multi toggle cluster.
- */
-@Component({
-  selector: "viking-toggle-group",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: VIKING_TOGGLE_GROUP, useExisting: VikingToggleGroup }],
-  host: {
-    role: "group",
-    class: "viking-toggle-group",
-    "[class.viking-exclusive]": "exclusive()",
-  },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-        flex-wrap: wrap;
-        gap: 0;
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        overflow: hidden;
-        box-shadow: var(--viking-shadow-sm);
-      }
-      :host ::ng-deep viking-toggle:not(:first-child) .viking-toggle {
-        border-left: none;
-        margin-left: -1px;
-        border-radius: 0;
-      }
-      :host ::ng-deep viking-toggle:first-child .viking-toggle {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-      :host ::ng-deep viking-toggle:last-child .viking-toggle {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-      :host ::ng-deep viking-toggle .viking-toggle {
-        min-width: var(--viking-btn-min-width, 120px);
-        border-radius: 0;
-        box-shadow: none;
-      }
-    `,
-  ],
-})
-export class VikingToggleGroup {
-  readonly value = model<string>("");
-  readonly exclusive = model(true);
-}