@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/lib/popover/popover.ts

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

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

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

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

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

@@ -1,57 +0,0 @@
-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%");
-}