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

package/src/lib/pillbox/pillbox.ts

@@ -0,0 +1,157 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-pillbox — multi-value tag input.
+ * Type and press Enter (or comma) to add pills. ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-pillbox",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingPillbox)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-control viking-pillbox"
+      [class.viking-disabled]="disabled() || formDisabled()"
+      role="group"
+      [attr.aria-label]="label() || 'Tags'"
+    >
+      @for (pill of values(); track pill) {
+        <span class="viking-pill">
+          {{ pill }}
+          <button
+            type="button"
+            class="viking-pill-remove"
+            [attr.aria-label]="'Remove ' + pill"
+            [disabled]="disabled() || formDisabled()"
+            (click)="remove(pill)"
+          >
+            <viking-icon name="x" [size]="13" />
+          </button>
+        </span>
+      }
+      <input
+        type="text"
+        [placeholder]="values().length === 0 ? placeholder() : ''"
+        [value]="draft()"
+        [disabled]="disabled() || formDisabled()"
+        [attr.aria-label]="label() || placeholder() || 'Add tag'"
+        (input)="draft.set($any($event.target).value)"
+        (keydown)="onKeydown($event)"
+        (blur)="onTouched()"
+      />
+    </div>
+  `,
+  styles: [
+    `
+      .viking-pillbox {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: calc(var(--viking-space-1) / 1.5);
+        min-height: var(--viking-control-height);
+        padding: calc(var(--viking-space-1) / 1.5) 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-sm);
+        transition: var(--viking-transition);
+        cursor: text;
+      }
+      .viking-pillbox:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-disabled {
+        opacity: var(--viking-state-disabled-opacity);
+      }
+      .viking-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        font-weight: 500;
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+        border: 1px solid var(--viking-accent-strong);
+        border-radius: var(--viking-radius-pill);
+        padding: 2px var(--viking-space-1);
+        line-height: 1.35;
+      }
+      .viking-pill-remove {
+        display: inline-flex;
+        border: none;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: 2px;
+        border-radius: var(--viking-radius-pill);
+      }
+      .viking-pill-remove:hover {
+        color: var(--viking-danger);
+      }
+      .viking-pill-remove:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: 1px;
+      }
+      input {
+        flex: 1;
+        min-width: 108px;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--viking-text);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        padding: calc(var(--viking-space-1) / 2);
+      }
+      input::placeholder {
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingPillbox extends VikingControl<string[]> {
+  readonly values = model<string[]>([]);
+  readonly placeholder = input<string>("Add a tag…");
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+
+  protected readonly draft = signal("");
+
+  writeValue(value: string[]): void {
+    this.values.set(value ?? []);
+  }
+
+  protected onKeydown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      const next = this.draft().trim().replace(/,$/, "");
+      if (next && !this.values().includes(next)) {
+        this.values.update((list) => [...list, next]);
+        this.onChange(this.values());
+      }
+      this.draft.set("");
+    } else if (
+      event.key === "Backspace" &&
+      !this.draft() &&
+      this.values().length > 0
+    ) {
+      this.remove(this.values()[this.values().length - 1]);
+    }
+  };
+
+  protected remove = (pill: string): void => {
+    this.values.update((list) => list.filter((item) => item !== pill));
+    this.onChange(this.values());
+  };
+}

package/src/lib/popover/popover.ts

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  input,
+  model,
+} from "@angular/core";
+
+/**
+ * viking-popover — anchored floating panel.
+ * Project the trigger with the `vikingTrigger` attribute; everything else becomes
+ * the panel content. Closes on Escape or outside interaction.
+ */
+@Component({
+  selector: "viking-popover",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(click)": "onHostClick($event)",
+    "(document:click)": "onDocumentClick($event)",
+    "(keydown.escape)": "open.set(false)",
+  },
+  template: `
+    <span class="viking-popover-trigger">
+      <ng-content select="[vikingTrigger]" />
+    </span>
+    @if (open()) {
+      <div
+        class="viking-popover-panel"
+        [class.viking-popover-end]="align() === 'end'"
+        role="dialog"
+      >
+        <ng-content />
+      </div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .viking-popover-trigger {
+        display: inline-flex;
+      }
+      .viking-popover-panel {
+        position: absolute;
+        top: calc(100% + var(--viking-space-1));
+        left: 0;
+        min-width: 234px;
+        max-width: 90vw;
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-md);
+        padding: var(--viking-space-2);
+        z-index: var(--viking-z-overlay);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        color: var(--viking-text);
+      }
+      .viking-popover-end {
+        left: auto;
+        right: 0;
+      }
+    `,
+  ],
+})
+export class VikingPopover {
+  readonly open = model<boolean>(false);
+  readonly align = input<"start" | "end">("start");
+
+  constructor(private readonly host: ElementRef<HTMLElement>) {}
+
+  /** Toggles when the (focusable, projected) trigger is activated. */
+  protected onHostClick = (event: Event): void => {
+    const trigger = this.host.nativeElement.querySelector(
+      ".viking-popover-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);
+    }
+  };
+}

package/src/lib/profile/profile.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingAvatar } from "../avatar/avatar";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-profile — user identity block.
+ * Project actions (e.g. viking-button) as content.
+ */
+@Component({
+  selector: "viking-profile",
+  imports: [VikingAvatar],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <viking-avatar
+      [src]="avatarSrc()"
+      [name]="name()"
+      [size]="45"
+      [status]="status()"
+    />
+    <div class="viking-profile-identity">
+      <span class="viking-profile-name">{{ name() }}</span>
+      @if (detail()) {
+        <span class="viking-profile-detail">{{ detail() }}</span>
+      }
+    </div>
+    <div class="viking-profile-actions"><ng-content /></div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+      }
+      .viking-profile-identity {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        flex: 1;
+      }
+      .viking-profile-name {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .viking-profile-detail {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .viking-profile-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+      }
+      .viking-profile-actions:empty {
+        display: none;
+      }
+    `,
+  ],
+})
+export class VikingProfile {
+  readonly name = input.required<string>();
+  readonly detail = input<string>("");
+  readonly avatarSrc = input<string | null>(null);
+  readonly status = input<VikingTone | null>(null);
+}

package/src/lib/progress/progress.ts

@@ -0,0 +1,123 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-progress — determinate/indeterminate progress bar
+ *.
+ */
+@Component({
+  selector: "viking-progress",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (label()) {
+      <div class="viking-progress-header">
+        <span class="viking-progress-label">{{ label() }}</span>
+        @if (!indeterminate()) {
+          <span class="viking-progress-value">{{ clamped() }}%</span>
+        }
+      </div>
+    }
+    <div
+      class="viking-progress-track"
+      role="progressbar"
+      [attr.aria-label]="label() || 'Progress'"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="100"
+      [attr.aria-valuenow]="indeterminate() ? null : clamped()"
+    >
+      <div
+        class="viking-progress-bar"
+        [class.viking-indeterminate]="indeterminate()"
+        [class]="'viking-bar-' + tone()"
+        [style.width.%]="indeterminate() ? 40 : clamped()"
+      ></div>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+      }
+      .viking-progress-header {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        margin-bottom: calc(var(--viking-space-1) / 2);
+        font-size: var(--viking-font-size);
+      }
+      .viking-progress-label {
+        color: var(--viking-text);
+        font-weight: 500;
+      }
+      .viking-progress-value {
+        color: var(--viking-text-muted);
+        font-variant-numeric: tabular-nums;
+      }
+      .viking-progress-track {
+        position: relative;
+        height: var(--viking-space-1);
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        overflow: hidden;
+      }
+      .viking-progress-bar {
+        height: 100%;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-accent);
+        transition: width 0.3s ease;
+      }
+      .viking-bar-secondary {
+        background: var(--viking-accent-secondary);
+      }
+      .viking-bar-success {
+        background: var(--viking-success);
+      }
+      .viking-bar-info {
+        background: var(--viking-info);
+      }
+      .viking-bar-warning {
+        background: var(--viking-warning);
+      }
+      .viking-bar-danger {
+        background: var(--viking-danger);
+      }
+      .viking-bar-muted {
+        background: var(--viking-text-muted);
+      }
+      .viking-indeterminate {
+        position: absolute;
+        animation: viking-progress-slide 1.2s ease-in-out infinite;
+      }
+      @keyframes viking-progress-slide {
+        from {
+          left: -40%;
+        }
+        to {
+          left: 100%;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .viking-indeterminate {
+          animation-duration: 2.4s;
+        }
+      }
+    `,
+  ],
+})
+export class VikingProgress {
+  readonly value = input<number>(0);
+  readonly label = input<string>("");
+  readonly tone = input<VikingTone>("accent");
+  readonly indeterminate = input<boolean>(false);
+
+  protected readonly clamped = computed(() =>
+    Math.min(100, Math.max(0, Math.round(this.value()))),
+  );
+}

package/src/lib/radio/radio.ts

@@ -0,0 +1,132 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingSelectOption } from "../../core/types";
+import { vikingUid } from "../../core/uid";
+
+/**
+ * viking-radio-group — radio group.
+ * ControlValueAccessor-compatible; options-driven for symmetry with viking-select.
+ */
+@Component({
+  selector: "viking-radio-group",
+  providers: [provideVikingCva(VikingRadioGroup)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "radiogroup",
+    "[attr.aria-label]": "label() || null",
+    "[class.viking-radio-row]": "orientation() === 'horizontal'",
+  },
+  template: `
+    @for (option of options(); track option.label) {
+      <label
+        class="viking-radio"
+        [class.viking-disabled]="
+          option.disabled || disabled() || formDisabled()
+        "
+      >
+        <span
+          class="viking-radio-dot"
+          [class.viking-checked]="option.value === value()"
+        >
+          <input
+            type="radio"
+            [name]="groupName"
+            [checked]="option.value === value()"
+            [disabled]="option.disabled || disabled() || formDisabled()"
+            (change)="select(option)"
+            (blur)="onTouched()"
+          />
+        </span>
+        <span class="viking-radio-label">{{ option.label }}</span>
+      </label>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        font-family: var(--viking-font-family);
+      }
+      :host(.viking-radio-row) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--viking-space-2);
+      }
+      .viking-radio {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        cursor: pointer;
+      }
+      .viking-disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      .viking-radio-dot {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-space-2);
+        height: var(--viking-space-2);
+        border-radius: var(--viking-radius-pill);
+        border: 1px solid var(--viking-border-strong);
+        background: var(--viking-surface);
+        transition: var(--viking-transition);
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+      /* The native input fills the visual dot so clicks and focus land on it. */
+      .viking-radio-dot input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .viking-radio:hover:not(.viking-disabled) .viking-radio-dot {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-radio-dot.viking-checked {
+        border-color: var(--viking-accent);
+        border-width: 5px;
+        background: var(--viking-accent-content);
+      }
+      .viking-radio-dot:has(input:focus-visible) {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-radio-label {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+      }
+    `,
+  ],
+})
+export class VikingRadioGroup extends VikingControl<unknown> {
+  readonly options = input.required<VikingSelectOption[]>();
+  readonly value = model<unknown>(null);
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+  readonly orientation = input<"vertical" | "horizontal">("vertical");
+
+  protected readonly groupName = vikingUid("viking-radio");
+
+  writeValue(value: unknown): void {
+    this.value.set(value);
+  }
+
+  protected select = (option: VikingSelectOption): void => {
+    this.value.set(option.value);
+    this.onChange(option.value);
+  };
+}

package/src/lib/ring-gauge/ring-gauge.ts

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+/** viking-ring-gauge — circular progress ring for health/score displays. */
+@Component({
+  selector: "viking-ring-gauge",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-ring-gauge",
+    "aria-hidden": "true",
+    "[attr.data-status]": "status()",
+  },
+  template: `
+    <svg class="viking-ring-gauge-svg" viewBox="0 0 120 120" fill="none">
+      <circle class="viking-ring-bg" cx="60" cy="60" r="52" />
+      <circle
+        class="viking-ring-fill"
+        cx="60"
+        cy="60"
+        r="52"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="strokeDasharray()"
+      />
+    </svg>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        color: var(--viking-accent);
+      }
+
+      .viking-ring-gauge-svg {
+        width: 100%;
+        height: 100%;
+        shape-rendering: geometricPrecision;
+      }
+
+      .viking-ring-bg,
+      .viking-ring-fill {
+        fill: none;
+        stroke-width: 10;
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+      }
+
+      .viking-ring-bg {
+        stroke: color-mix(in srgb, var(--viking-text-muted) 20%, transparent);
+      }
+
+      .viking-ring-fill {
+        stroke: currentColor;
+        transition: stroke-dasharray 0.4s var(--viking-ease-default);
+      }
+    `,
+  ],
+})
+export class VikingRingGauge {
+  readonly value = input.required<number>();
+  readonly max = input<number>(100);
+  readonly circumference = input<number>(327);
+  readonly status = input<string>("");
+
+  protected readonly strokeDasharray = computed(() => {
+    const pct = Math.max(0, Math.min(1, this.value() / this.max()));
+    const filled = pct * this.circumference();
+    return `${filled} ${this.circumference()}`;
+  });
+}

package/src/lib/scroll-area/scroll-area.ts

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-scroll-area — constrained scroll region with clinical scrollbar styling.
+ */
+@Component({
+  selector: "viking-scroll-area",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-scroll-area",
+    "[style.max-height]": "maxHeight()",
+    "[style.max-width]": "maxWidth()",
+  },
+  template: `<div class="viking-scroll-area-viewport" tabindex="0">
+    <ng-content />
+  </div>`,
+  styles: [
+    `
+      :host {
+        display: block;
+        overflow: hidden;
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+      }
+      .viking-scroll-area-viewport {
+        max-height: inherit;
+        overflow: auto;
+        padding: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        scrollbar-width: thin;
+        scrollbar-color: var(--viking-accent-strong) var(--viking-surface-alt);
+      }
+      .viking-scroll-area-viewport:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: calc(-1 * var(--viking-ring-offset));
+      }
+      .viking-scroll-area-viewport::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      .viking-scroll-area-viewport::-webkit-scrollbar-thumb {
+        background: var(--viking-accent-strong);
+        border-radius: var(--viking-radius-pill);
+      }
+      .viking-scroll-area-viewport::-webkit-scrollbar-track {
+        background: var(--viking-surface-alt);
+      }
+    `,
+  ],
+})
+export class VikingScrollArea {
+  readonly maxHeight = input<string>("240px");
+  readonly maxWidth = input<string>("100%");
+}