@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

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

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

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

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

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

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