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

package/src/lib/chart-card-header/chart-card-header.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-chart-card-header — shared label / value / trend header for analytics chart cards.
+ */
+@Component({
+  selector: "viking-chart-card-header",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "chart-custom-header" },
+  template: `
+    <div class="chart-custom-title">{{ title() }}</div>
+    @if (hasData()) {
+      <div class="chart-custom-value">{{ value() }}</div>
+      @if (trend()) {
+        <div class="chart-custom-trend">{{ trend() }}</div>
+      }
+    } @else {
+      <div class="chart-custom-value chart-value-muted">{{ emptyLabel() }}</div>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--viking-space-half, 4px);
+        padding: var(--viking-space-2, 16px) var(--viking-space-3, 24px)
+          var(--viking-space-1, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        border-bottom: 1px solid var(--viking-border-subtle);
+        margin-bottom: 0;
+      }
+
+      .chart-custom-title {
+        color: var(--viking-text-muted, var(--text-muted));
+        font-size: var(--viking-font-size-ui, 14px);
+        font-family: var(--viking-font-family);
+        letter-spacing: var(--viking-letter-spacing-wide, 0.025em);
+        font-weight: var(--viking-font-weight-semibold, 600);
+        margin: 0;
+      }
+
+      .chart-custom-value {
+        color: var(--viking-text, var(--text-color));
+        font-size: var(--viking-font-size-lg, 20px);
+        font-family: var(--viking-font-family);
+        font-weight: var(--viking-font-weight-bold, 700);
+        line-height: var(--viking-line-height-tight, 1.25);
+        margin: 0;
+      }
+
+      .chart-custom-trend {
+        color: var(--color-primary);
+        font-size: var(--viking-font-size-sm, 14px);
+        font-family: var(--viking-font-family);
+        font-weight: var(--viking-font-weight-semibold, 600);
+        letter-spacing: 0.02em;
+        margin: 0;
+      }
+
+      .chart-value-muted {
+        font-size: 1.125rem !important;
+        font-weight: var(--viking-font-weight-semibold, 600) !important;
+        color: var(--text-muted) !important;
+        letter-spacing: var(--viking-letter-spacing-caps, 0.05em);
+        text-transform: uppercase;
+      }
+    `,
+  ],
+})
+export class VikingChartCardHeader {
+  readonly title = input.required<string>();
+  readonly value = input<string>("");
+  readonly emptyLabel = input<string>("Awaiting signal");
+  readonly trend = input<string>("");
+  readonly hasData = input<boolean>(false);
+}

package/src/lib/chart-empty-state/chart-empty-state.ts

@@ -0,0 +1,146 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIconBadge } from "../icon-badge/icon-badge";
+import { VikingIconName } from "../../core/icons";
+
+export type VikingChartEmptyTone = "default" | "secure";
+export type VikingChartEmptyLayout = "fill" | "overlay" | "compact" | "inline";
+
+/**
+ * viking-chart-empty-state — standardized dashed “waiting for data” overlay for chart panels.
+ * Fills its parent chart body by default; use layout="overlay" for map/canvas stacks.
+ */
+@Component({
+  selector: "viking-chart-empty-state",
+  imports: [VikingIconBadge],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "status",
+    class: "viking-chart-empty-state empty-chart-state",
+    "[class.is-secure]": "tone() === 'secure'",
+    "[class.compact]": "layout() === 'compact'",
+    "[class.viking-chart-empty-overlay]": "layout() === 'overlay'",
+    "[class.viking-chart-empty-fill]": "layout() === 'fill'",
+    "[class.viking-chart-empty-inline]": "layout() === 'inline'",
+  },
+  template: `
+    <viking-icon-badge
+      [icon]="icon()"
+      [tone]="tone() === 'secure' ? 'success' : 'default'"
+    />
+    <h3 class="empty-title">{{ title() }}</h3>
+    <p class="empty-subtitle">{{ description() }}</p>
+    <div class="viking-chart-empty-actions">
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--viking-space-4) var(--viking-space-3);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-surface-alt);
+        border: 1px dashed var(--viking-border-strong);
+        box-shadow: var(--viking-shadow-inner);
+        gap: var(--viking-space-2);
+        animation: viking-fade-in var(--viking-duration)
+          var(--viking-ease-default);
+      }
+
+      :host(.viking-chart-empty-fill) {
+        flex: 1 1 auto;
+        min-height: var(
+          --viking-chart-empty-min-height,
+          var(--viking-chart-fill-min-height, clamp(16rem, 32vw, 17.5rem))
+        );
+      }
+
+      viking-icon-badge {
+        margin-bottom: var(--viking-space-2);
+      }
+
+      .empty-title {
+        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);
+      }
+
+      :host(.viking-chart-empty-overlay) {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        min-height: 100%;
+        margin: 0;
+        background: color-mix(
+          in srgb,
+          var(--viking-surface-alt) 94%,
+          transparent
+        );
+      }
+
+      :host(.compact) {
+        min-height: 160px;
+        padding: var(--viking-space-3);
+      }
+
+      :host(.viking-chart-empty-inline) {
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        min-height: auto;
+        flex: 1 1 auto;
+        justify-content: center;
+        padding: var(--viking-space-4) var(--viking-space-2);
+      }
+
+      :host(.is-secure) .viking-icon-badge {
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+        color: var(--viking-success);
+      }
+
+      .empty-subtitle {
+        margin: 0;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: var(--viking-line-height-relaxed);
+        max-width: 28rem;
+      }
+
+      .viking-chart-empty-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--viking-space-2);
+        margin-top: var(--viking-space-2);
+      }
+
+      .viking-chart-empty-actions:empty {
+        display: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingChartEmptyState {
+  readonly title = input.required<string>();
+  readonly description = input.required<string>();
+  readonly icon = input<VikingIconName>("globe");
+  readonly tone = input<VikingChartEmptyTone>("default");
+  readonly layout = input<VikingChartEmptyLayout>("fill");
+}

package/src/lib/chart-panel/chart-panel.ts

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+export type VikingChartPanelSize = "large" | "medium";
+export type VikingChartPanelBody = "default" | "origin-map";
+
+/**
+ * viking-chart-panel — outlined analytics card shell with consistent header/body rhythm.
+ */
+@Component({
+  selector: "viking-chart-panel",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "status-card-outlined viking-chart-panel",
+    "[class.viking-chart-panel-large]": "size() === 'large'",
+    "[class.viking-chart-panel-medium]": "size() === 'medium'",
+    "[class.viking-chart-panel-origin-map]": "body() === 'origin-map'",
+  },
+  template: `
+    <ng-content select="viking-chart-card-header" />
+    <div [class]="bodyClasses()">
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        min-width: 0;
+      }
+
+      :host(.viking-chart-panel-large) {
+        min-height: var(--viking-chart-panel-min-height-lg, 30rem);
+      }
+
+      :host(.viking-chart-panel-medium) {
+        min-height: var(--viking-chart-panel-min-height-md, 26rem);
+      }
+
+      .viking-chart-panel-body {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        padding: 0 var(--viking-panel-padding, var(--viking-space-3))
+          var(--viking-panel-padding, var(--viking-space-3));
+        box-sizing: border-box;
+      }
+
+      :host(.viking-chart-panel-large) .viking-chart-panel-body {
+        --viking-chart-empty-min-height: var(
+          --viking-chart-empty-min-height-lg,
+          20rem
+        );
+        --viking-chart-fill-min-height: var(
+          --viking-chart-fill-min-height-lg,
+          clamp(20rem, 40vw, 22rem)
+        );
+        min-height: var(--viking-chart-panel-body-min-height-lg, 25rem);
+      }
+
+      :host(.viking-chart-panel-medium) .viking-chart-panel-body {
+        --viking-chart-empty-min-height: var(
+          --viking-chart-empty-min-height,
+          clamp(18rem, 36vw, 20rem)
+        );
+        --viking-chart-fill-min-height: var(
+          --viking-chart-fill-min-height,
+          clamp(18rem, 36vw, 20rem)
+        );
+        min-height: var(--viking-chart-panel-body-min-height-md, 22rem);
+      }
+
+      :host(.viking-chart-panel-medium.viking-chart-panel-origin-map)
+        .viking-chart-panel-body,
+      :host(.viking-chart-panel-medium)
+        .viking-chart-panel-body.origin-map-container {
+        --viking-chart-empty-min-height: var(
+          --viking-chart-map-min-height,
+          22.5rem
+        );
+        min-height: var(--viking-chart-map-min-height, 22.5rem);
+      }
+
+      :host(.viking-chart-panel-origin-map) ::ng-deep .origin-map-canvas {
+        flex: 1 1 auto;
+        height: var(--viking-chart-map-min-height, 22.5rem);
+        min-height: var(--viking-chart-map-min-height, 22.5rem);
+        width: 100%;
+        display: block;
+        border-radius: var(--viking-radius-md, 8px);
+        z-index: 0;
+      }
+
+      :host(.viking-chart-panel-origin-map)
+        ::ng-deep
+        .origin-map-canvas:not(.viking-map-ready) {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      :host(.viking-chart-panel-origin-map)
+        ::ng-deep
+        .origin-map-canvas.viking-map-ready {
+        position: relative;
+        visibility: visible;
+      }
+    `,
+  ],
+})
+export class VikingChartPanel {
+  readonly size = input<VikingChartPanelSize>("medium");
+  readonly body = input<VikingChartPanelBody>("default");
+
+  protected readonly bodyClasses = computed(() => {
+    const sizeClass =
+      this.size() === "large"
+        ? "chart-container-large"
+        : "chart-container-medium";
+    const bodyVariant =
+      this.body() === "origin-map" ? " origin-map-container" : "";
+    return `card-body-clean viking-chart-panel-body ${sizeClass}${bodyVariant}`;
+  });
+}

package/src/lib/checkbox/checkbox.ts

@@ -0,0 +1,139 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-checkbox — custom checkbox.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-checkbox",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingCheckbox)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label
+      class="viking-checkbox"
+      [class.viking-disabled]="disabled() || formDisabled()"
+    >
+      <span
+        class="viking-checkbox-box"
+        [class.viking-checked]="checked() || indeterminate()"
+      >
+        <input
+          type="checkbox"
+          [checked]="checked()"
+          [indeterminate]="indeterminate()"
+          [disabled]="disabled() || formDisabled()"
+          (change)="toggle($event)"
+          (blur)="onTouched()"
+        />
+        @if (indeterminate()) {
+          <viking-icon name="minus" [size]="14" />
+        } @else if (checked()) {
+          <viking-icon name="check" [size]="14" />
+        }
+      </span>
+      <span class="viking-checkbox-content">
+        <span class="viking-checkbox-label"><ng-content /></span>
+        @if (description()) {
+          <span class="viking-checkbox-description">{{ description() }}</span>
+        }
+      </span>
+    </label>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+      }
+      .viking-checkbox {
+        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-checkbox-box {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-space-2);
+        height: var(--viking-space-2);
+        margin-top: 2px;
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius-xs);
+        background: var(--viking-surface);
+        color: var(--viking-accent-content);
+        transition: var(--viking-transition-interactive);
+        flex-shrink: 0;
+        box-shadow: var(--viking-shadow-xs);
+      }
+      /* The native input fills the visual box so clicks and focus land on it. */
+      .viking-checkbox-box input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .viking-checkbox:hover:not(.viking-disabled) .viking-checkbox-box {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-checkbox-box.viking-checked {
+        background: var(--viking-accent);
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent) 80%,
+          var(--viking-black)
+        );
+        box-shadow: var(--viking-shadow-sm);
+      }
+      .viking-checkbox-box:has(input:focus-visible) {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-checkbox-content {
+        display: flex;
+        flex-direction: column;
+      }
+      .viking-checkbox-label {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        line-height: 1.45;
+      }
+      .viking-checkbox-description {
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+      }
+    `,
+  ],
+})
+export class VikingCheckbox extends VikingControl<boolean> {
+  readonly checked = model<boolean>(false);
+  readonly indeterminate = input<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/color-picker/color-picker.ts

@@ -0,0 +1,148 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+import {
+  VIKING_SERIES_DEFAULT,
+  VIKING_SERIES_PRESETS,
+} from "../../tokens/series-presets";
+
+/**
+ * viking-color-picker — swatch presets + custom color input
+ *. ControlValueAccessor-compatible.
+ * Default presets are the THEME.md palette.
+ */
+@Component({
+  selector: "viking-color-picker",
+  imports: [VikingIcon],
+  providers: [provideVikingCva(VikingColorPicker)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-color-picker"
+      role="group"
+      [attr.aria-label]="label() || 'Color picker'"
+    >
+      @for (preset of presets(); track preset) {
+        <button
+          type="button"
+          class="viking-color-swatch"
+          [class.viking-selected]="preset === value()"
+          [style.background]="preset"
+          [attr.aria-label]="'Color ' + preset"
+          [attr.aria-pressed]="preset === value()"
+          (click)="pick(preset)"
+        >
+          @if (preset === value()) {
+            <viking-icon name="check" [size]="16" />
+          }
+        </button>
+      }
+      <label class="viking-color-custom" [style.background]="value()">
+        <input
+          type="color"
+          [value]="value()"
+          [disabled]="disabled() || formDisabled()"
+          aria-label="Custom color"
+          (input)="onInput($event)"
+        />
+        <viking-icon name="pencil" [size]="16" />
+      </label>
+      <code class="viking-color-value">{{ value() }}</code>
+    </div>
+  `,
+  styles: [
+    `
+      .viking-color-picker {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--viking-space-1);
+        font-family: var(--viking-font-family);
+      }
+      .viking-color-swatch,
+      .viking-color-custom {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-space-4);
+        height: var(--viking-space-4);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius-sm);
+        cursor: pointer;
+        color: var(--viking-accent-content);
+        transition: var(--viking-transition-interactive);
+        padding: 0;
+        box-shadow: var(--viking-shadow-xs);
+      }
+      .viking-color-swatch:hover,
+      .viking-color-custom:hover {
+        transform: scale(1.08);
+        border-color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-sm);
+        z-index: 1;
+      }
+      .viking-selected {
+        border-color: var(--viking-text);
+        box-shadow:
+          var(--viking-shadow-sm),
+          0 0 0 2px color-mix(in srgb, var(--viking-accent) 35%, transparent),
+          inset 0 1px 0 rgba(255, 255, 255, 0.12);
+        transform: scale(1.04);
+      }
+      .viking-color-swatch:focus-visible,
+      .viking-color-custom:focus-within {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      /* The native input fills the swatch so clicks and focus land on it. */
+      .viking-color-custom input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .viking-color-value {
+        font-family: var(--viking-font-family-mono);
+        font-size: var(--viking-font-size-sm);
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border-subtle);
+        border-radius: var(--viking-radius-xs);
+        padding: var(--viking-space-half) var(--viking-space-1);
+        font-variant-numeric: tabular-nums;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+    `,
+  ],
+})
+export class VikingColorPicker extends VikingControl<string> {
+  readonly value = model<string>(VIKING_SERIES_DEFAULT);
+  readonly label = input<string>("");
+  readonly disabled = input<boolean>(false);
+  /** Preset swatches — THEME.md Series color palette (premium charcoal / teal / crimson). */
+  readonly presets = input<string[]>([...VIKING_SERIES_PRESETS]);
+
+  writeValue(value: string): void {
+    this.value.set(value || VIKING_SERIES_DEFAULT);
+  }
+
+  protected pick = (color: string): void => {
+    this.value.set(color);
+    this.onChange(color);
+    this.onTouched();
+  };
+
+  protected onInput = (event: Event): void => {
+    this.pick((event.target as HTMLInputElement).value);
+  };
+}