@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/switch/switch.ts

@@ -1,131 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  model,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-
-/**
- * viking-switch — toggle switch.
- * ControlValueAccessor-compatible.
- */
-@Component({
-  selector: "viking-switch",
-  providers: [provideVikingCva(VikingSwitch)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <label
-      class="viking-switch"
-      [class.viking-disabled]="disabled() || formDisabled()"
-    >
-      <span class="viking-switch-track" [class.viking-checked]="checked()">
-        <input
-          type="checkbox"
-          role="switch"
-          [checked]="checked()"
-          [disabled]="disabled() || formDisabled()"
-          (change)="toggle($event)"
-          (blur)="onTouched()"
-        />
-        <span class="viking-switch-thumb"></span>
-      </span>
-      <span class="viking-switch-content">
-        <span class="viking-switch-label"><ng-content /></span>
-        @if (description()) {
-          <span class="viking-switch-description">{{ description() }}</span>
-        }
-      </span>
-    </label>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-      }
-      .viking-switch {
-        display: inline-flex;
-        align-items: flex-start;
-        gap: var(--viking-space-1);
-        cursor: pointer;
-      }
-      .viking-disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      .viking-switch-track {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        width: var(--viking-space-4);
-        height: calc(var(--viking-space-2) + 2px);
-        padding: 2px;
-        margin-top: 3px;
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-surface-alt);
-        border: 1px solid var(--viking-border-strong);
-        transition: var(--viking-transition-interactive);
-        flex-shrink: 0;
-        box-sizing: border-box;
-      }
-      /* The native input fills the visual track so clicks and focus land on it. */
-      .viking-switch-track input {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        opacity: 0;
-        cursor: pointer;
-      }
-      .viking-switch-thumb {
-        width: 14px;
-        height: 14px;
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-text-muted);
-        transition: var(--viking-transition-transform);
-      }
-      .viking-switch-track.viking-checked {
-        background: var(--viking-accent);
-        border-color: var(--viking-accent);
-      }
-      .viking-switch-track.viking-checked .viking-switch-thumb {
-        background: var(--viking-accent-content);
-        transform: translateX(calc(var(--viking-space-4) - 22px));
-      }
-      .viking-switch-track:has(input:focus-visible) {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-switch-content {
-        display: flex;
-        flex-direction: column;
-      }
-      .viking-switch-label {
-        font-size: var(--viking-font-size);
-        color: var(--viking-text);
-        line-height: 1.45;
-      }
-      .viking-switch-description {
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-      }
-    `,
-  ],
-})
-export class VikingSwitch extends VikingControl<boolean> {
-  readonly checked = model<boolean>(false);
-  readonly disabled = input<boolean>(false);
-  readonly description = input<string>("");
-
-  writeValue(value: boolean): void {
-    this.checked.set(!!value);
-  }
-
-  protected toggle = (event: Event): void => {
-    const next = (event.target as HTMLInputElement).checked;
-    this.checked.set(next);
-    this.onChange(next);
-  };
-}

package/src/lib/table/table.ts

@@ -1,137 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { VikingEmptyState } from "../empty-state/empty-state";
-import { VikingSkeleton } from "../skeleton/skeleton";
-
-/**
- * viking-table — clinical data table wrapper.
- */
-@Component({
-  selector: "viking-table",
-  imports: [VikingEmptyState, VikingSkeleton],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: "viking-table-wrap",
-    "[class.viking-table-compact]": "compact()",
-    "[class.viking-table-striped]": "striped()",
-    "[class.viking-table-loading]": "loading()",
-    "[attr.aria-busy]": "loading() ? 'true' : null",
-  },
-  template: `
-    @if (loading()) {
-      <div class="viking-table-loading-state" aria-hidden="true">
-        @for (row of [1, 2, 3, 4]; track row) {
-          <viking-skeleton height="44px" />
-        }
-      </div>
-    } @else if (emptyMessage()) {
-      <viking-empty-state
-        [heading]="emptyMessage()"
-        [description]="emptyDescription()"
-        icon="search-off"
-      />
-    } @else {
-      <table class="viking-table">
-        <ng-content />
-      </table>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-lg);
-        background: var(--viking-surface);
-        box-shadow: var(--viking-shadow-sm);
-        transition: var(--viking-transition-colors);
-        position: relative;
-      }
-      :host::before {
-        content: "";
-        position: absolute;
-        inset: 0 0 auto;
-        height: 1px;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          color-mix(in srgb, var(--viking-metallic-200) 18%, transparent),
-          transparent
-        );
-        pointer-events: none;
-        z-index: 1;
-      }
-      .viking-table-loading-state {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-2);
-      }
-      .viking-table {
-        width: 100%;
-        border-collapse: collapse;
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-sm);
-        color: var(--viking-text);
-      }
-      :host ::ng-deep thead th {
-        font-size: var(--viking-font-size-xs);
-        font-weight: var(--viking-font-weight-bold);
-        text-align: left;
-        letter-spacing: var(--viking-letter-spacing-caps);
-        text-transform: uppercase;
-        color: var(--viking-text-muted);
-        background: color-mix(
-          in srgb,
-          var(--viking-bg) 40%,
-          var(--viking-surface)
-        );
-        padding: var(--viking-space-1-5) var(--viking-space-2);
-        border-bottom: 1px solid var(--viking-border-strong);
-        white-space: nowrap;
-      }
-      :host ::ng-deep tbody td {
-        padding: var(--viking-space-1-5) var(--viking-space-2);
-        border-bottom: 1px solid var(--viking-border-subtle);
-        vertical-align: middle;
-        transition: background-color var(--viking-duration-fast)
-          var(--viking-ease-default);
-      }
-      :host ::ng-deep tbody tr:last-child td {
-        border-bottom: none;
-      }
-      :host ::ng-deep tbody tr:hover td {
-        background: var(--viking-accent-soft);
-      }
-      :host(.viking-table-striped) ::ng-deep tbody tr:nth-child(even) td {
-        background: color-mix(
-          in srgb,
-          var(--viking-surface-alt) 50%,
-          transparent
-        );
-      }
-      :host(.viking-table-striped) ::ng-deep tbody tr:nth-child(even):hover td {
-        background: var(--viking-accent-soft);
-      }
-      :host(.viking-table-compact) ::ng-deep thead th,
-      :host(.viking-table-compact) ::ng-deep tbody td {
-        padding: var(--viking-space-1) var(--viking-space-2);
-      }
-      @media (max-width: 640px) {
-        :host ::ng-deep thead th,
-        :host ::ng-deep tbody td {
-          padding: var(--viking-space-1);
-          font-size: var(--viking-font-size-xs);
-        }
-      }
-    `,
-  ],
-})
-export class VikingTable {
-  readonly compact = input(false);
-  readonly striped = input(false);
-  readonly loading = input(false);
-  readonly emptyMessage = input<string>("");
-  readonly emptyDescription = input<string>("");
-}

package/src/lib/tabs/tab-panel.ts

@@ -1,61 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Optional,
-  computed,
-  input,
-} from "@angular/core";
-import { VIKING_TABS, VikingTabs } from "./tabs";
-
-/**
- * viking-tab-panel — tabpanel region inside viking-tabs.
- */
-@Component({
-  selector: "viking-tab-panel",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: "tabpanel",
-    "[attr.id]": "panelId()",
-    "[attr.aria-labelledby]": "tabId()",
-    "[attr.hidden]": 'hidden() ? "" : null',
-    "[class.viking-hidden]": "hidden()",
-  },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: block;
-        padding: var(--viking-space-2);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        color: var(--viking-text);
-        line-height: var(--viking-line-height-relaxed);
-        animation: viking-fade-in var(--viking-duration-fast)
-          var(--viking-ease-out);
-      }
-      :host(.viking-hidden) {
-        display: none;
-      }
-      @media (prefers-reduced-motion: reduce) {
-        :host {
-          animation: none;
-        }
-      }
-    `,
-  ],
-})
-export class VikingTabPanel {
-  constructor(@Optional() private readonly tabs: VikingTabs | null) {}
-
-  readonly value = input.required<string>();
-
-  protected readonly panelId = computed(
-    () => `viking-tab-panel-${this.value()}`,
-  );
-  protected readonly tabId = computed(() => `viking-tab-${this.value()}`);
-
-  protected hidden = () => (this.tabs?.value() ?? "") !== this.value();
-}

package/src/lib/tabs/tab.ts

@@ -1,107 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Optional,
-  computed,
-  input,
-} from "@angular/core";
-import { VIKING_TABS, VikingTabs } from "./tabs";
-
-/**
- * viking-tab — tab trigger button inside viking-tabs.
- */
-@Component({
-  selector: "viking-tab",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <button
-      type="button"
-      role="tab"
-      class="viking-tab"
-      [class.viking-active]="active()"
-      [id]="tabId()"
-      [attr.aria-selected]="active()"
-      [attr.aria-controls]="panelId()"
-      [attr.tabindex]="active() ? 0 : -1"
-      [disabled]="disabled()"
-      (click)="select()"
-    >
-      <ng-content />
-    </button>
-  `,
-  styles: [
-    `
-      .viking-tab {
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-sm);
-        font-weight: var(--viking-font-weight-semibold);
-        letter-spacing: var(--viking-letter-spacing-wide);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: var(--viking-control-height-sm);
-        min-width: var(--viking-btn-min-width, 120px);
-        padding: 0 var(--viking-space-2);
-        border: 1px solid transparent;
-        border-radius: var(--viking-radius);
-        background: transparent;
-        color: var(--viking-text-muted);
-        cursor: pointer;
-        transition: var(--viking-transition-interactive);
-        position: relative;
-        -webkit-tap-highlight-color: transparent;
-      }
-      @media (max-width: 767px) {
-        .viking-tab {
-          min-height: var(--viking-control-height);
-          flex: 1 1 auto;
-        }
-      }
-      .viking-tab:hover:not(:disabled):not(.viking-active) {
-        color: var(--viking-text);
-        background: var(--viking-accent-soft);
-      }
-      .viking-tab:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-tab:active:not(:disabled) {
-        transform: scale(var(--viking-state-active-scale));
-      }
-      .viking-tab.viking-active {
-        color: var(--viking-accent-content);
-        background: var(--viking-accent);
-        border-color: color-mix(
-          in srgb,
-          var(--viking-accent) 80%,
-          var(--viking-black)
-        );
-        box-shadow: var(--viking-shadow-sm);
-      }
-      .viking-tab:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-    `,
-  ],
-})
-export class VikingTab {
-  constructor(@Optional() private readonly tabs: VikingTabs | null) {}
-
-  readonly value = input.required<string>();
-  readonly disabled = input(false);
-
-  protected readonly tabId = computed(() => `viking-tab-${this.value()}`);
-  protected readonly panelId = computed(
-    () => `viking-tab-panel-${this.value()}`,
-  );
-
-  protected active = () => (this.tabs?.value() ?? "") === this.value();
-
-  protected select = (): void => {
-    if (this.disabled() || !this.tabs) {
-      return;
-    }
-    this.tabs.value.set(this.value());
-  };
-}

package/src/lib/tabs/tabs.ts

@@ -1,109 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  contentChildren,
-  InjectionToken,
-  model,
-} from "@angular/core";
-import { VikingTab } from "./tab";
-
-export const VIKING_TABS = new InjectionToken<VikingTabs>("VIKING_TABS");
-
-/**
- * viking-tabs — tablist container with roving keyboard navigation.
- */
-@Component({
-  selector: "viking-tabs",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: VIKING_TABS, useExisting: VikingTabs }],
-  host: { class: "viking-tabs" },
-  template: `
-    <div
-      class="viking-tabs-list"
-      role="tablist"
-      (keydown)="onTabKeydown($event)"
-    >
-      <ng-content select="viking-tab" />
-    </div>
-    <ng-content select="viking-tab-panel" />
-  `,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-2);
-        font-family: var(--viking-font-family);
-      }
-      .viking-tabs-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--viking-space-half);
-        padding: var(--viking-space-half);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius-lg);
-        background: color-mix(
-          in srgb,
-          var(--viking-surface-alt) 80%,
-          var(--viking-surface)
-        );
-        box-shadow: var(--viking-shadow-sm);
-      }
-      @media (max-width: 767px) {
-        .viking-tabs-list {
-          flex-wrap: nowrap;
-          overflow-x: auto;
-          scroll-snap-type: x proximity;
-          -webkit-overflow-scrolling: touch;
-          scrollbar-width: none;
-        }
-        .viking-tabs-list::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    `,
-  ],
-})
-export class VikingTabs {
-  private readonly tabComponents = contentChildren(VikingTab);
-
-  readonly value = model<string>("");
-
-  protected onTabKeydown = (event: KeyboardEvent): void => {
-    const tabs = this.tabComponents().filter((tab) => !tab.disabled());
-    if (tabs.length === 0) {
-      return;
-    }
-
-    const currentIndex = tabs.findIndex((tab) => tab.value() === this.value());
-    let nextIndex = currentIndex;
-
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        event.preventDefault();
-        nextIndex = (currentIndex + 1) % tabs.length;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        event.preventDefault();
-        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
-        break;
-      case "Home":
-        event.preventDefault();
-        nextIndex = 0;
-        break;
-      case "End":
-        event.preventDefault();
-        nextIndex = tabs.length - 1;
-        break;
-      default:
-        return;
-    }
-
-    const next = tabs[nextIndex];
-    this.value.set(next.value());
-    const button = document.getElementById(`viking-tab-${next.value()}`);
-    button?.focus();
-  };
-}

package/src/lib/textarea/textarea.ts

@@ -1,103 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  model,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-
-/**
- * viking-textarea — auto-growing textarea.
- * ControlValueAccessor-compatible.
- */
-@Component({
-  selector: "viking-textarea",
-  providers: [provideVikingCva(VikingTextarea)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div
-      class="viking-control viking-textarea-shell"
-      [class.viking-disabled]="isDisabled()"
-    >
-      <textarea
-        [rows]="rows()"
-        [placeholder]="placeholder()"
-        [value]="value()"
-        [disabled]="isDisabled()"
-        [attr.aria-label]="label() || placeholder() || 'Text area'"
-        [style.resize]="autoGrow() ? 'none' : 'vertical'"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-      ></textarea>
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .viking-textarea-shell {
-        display: flex;
-        width: 100%;
-        padding: var(--viking-space-1-5) 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);
-        transition: var(--viking-transition-interactive);
-      }
-      .viking-textarea-shell:hover:not(.viking-disabled) {
-        border-color: var(--viking-accent-strong);
-        box-shadow: var(--viking-shadow-md);
-      }
-      .viking-textarea-shell:focus-within {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-        border-color: var(--viking-accent);
-      }
-      .viking-disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      textarea {
-        width: 100%;
-        box-sizing: border-box;
-        border: none;
-        outline: none !important;
-        background: transparent;
-        color: var(--viking-text);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        line-height: 1.55;
-        padding: 0;
-      }
-      textarea::placeholder {
-        color: var(--viking-text-muted);
-      }
-    `,
-  ],
-})
-export class VikingTextarea extends VikingControl<string> {
-  readonly value = model<string>("");
-  readonly placeholder = input<string>("");
-  readonly label = input<string>("");
-  readonly rows = input<number>(3);
-  readonly autoGrow = input<boolean>(true);
-  readonly disabled = input<boolean>(false);
-
-  protected isDisabled = (): boolean => this.disabled() || this.formDisabled();
-
-  writeValue(value: string): void {
-    this.value.set(value ?? "");
-  }
-
-  protected onInput = (event: Event): void => {
-    const el = event.target as HTMLTextAreaElement;
-    this.value.set(el.value);
-    this.onChange(el.value);
-    if (this.autoGrow()) {
-      el.style.height = "auto";
-      el.style.height = `${el.scrollHeight}px`;
-    }
-  };
-}

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

@@ -1,40 +0,0 @@
-import { Component } from "@angular/core";
-import { TestBed } from "@angular/core/testing";
-import { VikingThemeToggle } from "./theme-toggle";
-
-@Component({
-  imports: [VikingThemeToggle],
-  template: `<viking-theme-toggle [theme]="theme" (toggle)="toggled = true" />`,
-})
-class HostComponent {
-  theme: "light" | "dark" = "dark";
-  toggled = false;
-}
-
-describe("VikingThemeToggle", () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [HostComponent],
-    }).compileComponents();
-  });
-
-  it("shows sun icon in dark mode", () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector(
-      ".theme-toggle-btn",
-    ) as HTMLButtonElement;
-    expect(btn.getAttribute("aria-label")).toBe("Toggle light and dark theme");
-    expect(btn.querySelector("viking-icon")).toBeTruthy();
-  });
-
-  it("emits toggle on click", () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector(
-      ".theme-toggle-btn",
-    ) as HTMLButtonElement;
-    btn.click();
-    expect(fixture.componentInstance.toggled).toBe(true);
-  });
-});