@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/types/lifecorner-angular-ui-kit-spinner.d.ts

@@ -0,0 +1,50 @@
+import * as i0 from "@angular/core";
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * Spinner component for loading state indication.
+ *
+ * Features:
+ * - Animated spinning indicator
+ * - Size variants (sm, md, lg)
+ * - Optional message text below spinner
+ * - Design system color token integration
+ * - Accessible with ARIA status role
+ *
+ * @example
+ * ```html
+ * <lc-spinner />
+ * <lc-spinner size="lg" message="Loading data..." />
+ * ```
+ */
+export declare class SpinnerComponent {
+  /**
+   * Size of the spinner
+   * @default 'md'
+   */
+  readonly size: import("@angular/core").InputSignal<SpinnerSize>;
+  /**
+   * Optional loading message displayed below the spinner
+   */
+  readonly message: import("@angular/core").InputSignal<string | undefined>;
+  /** Screen-reader text while no visible `message` is set. */
+  readonly loadingLabel: import("@angular/core").InputSignal<string>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SpinnerComponent, "lc-spinner", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingLabel": {
+      "alias": "loadingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-split-pane.d.ts

@@ -0,0 +1,131 @@
+import * as i0 from "@angular/core";
+import { OnInit } from "@angular/core";
+/**
+ * Resizable two-pane layout container.
+ *
+ * Projects two panes (`slot="start"`, `slot="end"`) side by side with a
+ * draggable separator in between. The start pane has a fixed, user-adjustable
+ * width; the end pane fills the remaining space.
+ *
+ * Features:
+ * - Drag the separator with mouse / touch (pointer capture), bounded by
+ *   `minSize` / `maxSize` (px or percentage of the container)
+ * - Double-click the separator to restore `initialSize`
+ * - Keyboard resizing: focusable separator, ←/→ adjust by `step`,
+ *   Home/End jump to min/max (`role="separator"`, `aria-valuenow`)
+ * - Optional persistence: with `storageKey`, the width survives a reload
+ * - Below the `stackBelow` viewport breakpoint the panes stack vertically
+ *   and the resizer is disabled
+ *
+ * @example
+ * ```html
+ * <lc-split-pane
+ *   [initialSize]="360"
+ *   [minSize]="280"
+ *   [maxSize]="'55%'"
+ *   storageKey="sidebar-width"
+ *   (sizeChange)="onWidthChange($event)"
+ * >
+ *   <div slot="start">…</div>
+ *   <div slot="end">…</div>
+ * </lc-split-pane>
+ * ```
+ */
+export declare class SplitPaneComponent implements OnInit {
+  /** Initial width of the start pane in px. Restored on separator double-click. */
+  readonly initialSize: import("@angular/core").InputSignal<number>;
+  /** Minimum width of the start pane in px. */
+  readonly minSize: import("@angular/core").InputSignal<number>;
+  /**
+   * Maximum width of the start pane: a number (px) or a percentage string
+   * such as `'55%'` (relative to the container width). `null` = no limit
+   * beyond the container itself.
+   */
+  readonly maxSize: import("@angular/core").InputSignal<string | number | null>;
+  /**
+   * When set, the current width is persisted to localStorage under this key
+   * and restored on the next init.
+   */
+  readonly storageKey: import("@angular/core").InputSignal<string | undefined>;
+  /** Step in px for keyboard resizing (←/→ on the focused separator). */
+  readonly step: import("@angular/core").InputSignal<number>;
+  /**
+   * Viewport width in px below which the panes stack vertically and the
+   * resizer is disabled. `0` disables stacking.
+   */
+  readonly stackBelow: import("@angular/core").InputSignal<number>;
+  /** Accessible label for the separator. */
+  readonly separatorLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted whenever the start-pane width changes (drag, keyboard, reset). */
+  readonly sizeChange: import("@angular/core").OutputEmitterRef<number>;
+  private readonly host;
+  private readonly destroyRef;
+  /** Requested start-pane width; clamped to min/max for rendering. */
+  private readonly size;
+  /** Container width, tracked so percentage `maxSize` stays responsive. */
+  private readonly containerWidth;
+  /** Whether the panes are stacked (viewport below `stackBelow`). */
+  protected readonly stacked: import("@angular/core").WritableSignal<boolean>;
+  private dragPointerId;
+  private dragStartX;
+  private dragStartSize;
+  /** Clamped width actually applied to the start pane. */
+  protected readonly effectiveSize: import("@angular/core").Signal<number>;
+  /** Resolved max in px for aria-valuemax; null when unbounded. */
+  protected readonly ariaMax: import("@angular/core").Signal<number | null>;
+  constructor();
+  ngOnInit(): void;
+  /** Restore the initial width (also wired to separator double-click). */
+  reset(): void;
+  protected onPointerDown(event: PointerEvent): void;
+  protected onPointerMove(event: PointerEvent): void;
+  protected onPointerUp(event: PointerEvent): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  private applySize;
+  private clamp;
+  private resolveMaxPx;
+  private observeContainer;
+  private storageId;
+  private restoreSize;
+  private persist;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SplitPaneComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SplitPaneComponent, "lc-split-pane", never, {
+    "initialSize": {
+      "alias": "initialSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "minSize": {
+      "alias": "minSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "storageKey": {
+      "alias": "storageKey";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "stackBelow": {
+      "alias": "stackBelow";
+      "required": false;
+      "isSignal": true;
+    };
+    "separatorLabel": {
+      "alias": "separatorLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "sizeChange": "sizeChange";
+  }, never, ["[slot=start]", "[slot=end]"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-stack.d.ts

@@ -0,0 +1,49 @@
+import * as i0 from "@angular/core";
+export type StackDirection = 'vertical' | 'horizontal';
+export type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export declare class StackComponent {
+  direction: import("@angular/core").InputSignal<StackDirection>;
+  /** Spacing between children. Maps to `--lc-density-gap-*` when an ancestor sets `data-density`. */
+  gap: import("@angular/core").InputSignal<StackGap>;
+  align: import("@angular/core").InputSignal<StackAlign>;
+  justify: import("@angular/core").InputSignal<StackJustify>;
+  wrap: import("@angular/core").InputSignal<boolean>;
+  fullWidth: import("@angular/core").InputSignal<boolean>;
+  get hostClasses(): string;
+  classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StackComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StackComponent, "lc-stack", never, {
+    "direction": {
+      "alias": "direction";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "justify": {
+      "alias": "justify";
+      "required": false;
+      "isSignal": true;
+    };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-stacked-bar-chart.d.ts

@@ -0,0 +1,171 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface StackedBarCategory {
+  label: string;
+  /** One value per series. Negative values stack downward (left) from the zero baseline. */
+  values: number[];
+}
+export interface StackedBarLegend {
+  label: string;
+  color?: string;
+}
+export type StackedBarOrientation = 'vertical' | 'horizontal';
+export declare class StackedBarChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  /** Categories with stacked values. */
+  categories: import("@angular/core").InputSignal<StackedBarCategory[]>;
+  /** Legend items mapping to each value index. */
+  legends: import("@angular/core").InputSignal<StackedBarLegend[]>;
+  /**
+   * Intrinsic chart width in pixels. The chart fills its container (the SVG is
+   * `width="100%"` and its viewBox follows the measured container width);
+   * `width` is the viewBox width until the container has been measured and,
+   * when set, the host's `max-width`, so the chart never grows past it. Leave
+   * unset for a fully fluid chart.
+   */
+  width: import("@angular/core").InputSignal<number | undefined>;
+  height: import("@angular/core").InputSignal<number>;
+  orientation: import("@angular/core").InputSignal<StackedBarOrientation>;
+  showLabels: import("@angular/core").InputSignal<boolean>;
+  /** Show the value inside each segment (when it fits) and the total at the end of each stack. */
+  showValues: import("@angular/core").InputSignal<boolean>;
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  showGrid: import("@angular/core").InputSignal<boolean>;
+  barGap: import("@angular/core").InputSignal<number>;
+  /** Formats segment/total value labels and axis ticks. Defaults to a float-safe `String(value)`. */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing the
+   * series names and every category's total.
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly PL;
+  private readonly PR;
+  private readonly PT;
+  private readonly PB;
+  protected readonly effectiveWidth: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly isVertical: import("@angular/core").Signal<boolean>;
+  private readonly plot;
+  /** Positive and negative stack extents per category (positives and negatives stack separately). */
+  private readonly extents;
+  /**
+   * One scale for grid *and* segments: nice tick bounds that always include
+   * zero and extend below it when a stack goes negative.
+   */
+  protected readonly scale: import("@angular/core").Signal<import("@lifecorner/angular-ui-kit/internal/chart").NiceScale>;
+  private valueToPos;
+  protected readonly gridLines: import("@angular/core").Signal<{
+    pos: number;
+    label: string;
+  }[]>;
+  protected readonly stacks: import("@angular/core").Signal<{
+    label: string;
+    segments: {
+      color: string;
+      value: number;
+      valueText: string;
+      showValue: boolean;
+      valueX: number;
+      valueY: number;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    }[];
+    labelPos: {
+      x: number;
+      y: number;
+    };
+    total: number;
+    totalText: string;
+    totalPos: {
+      x: number;
+      y: number;
+      anchor: string;
+    };
+  }[]>;
+  protected readonly legendItems: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+  }[]>;
+  /** Value axis along the plot edge plus the zero baseline (inside the plot when data goes negative). */
+  protected readonly axisLine: import("@angular/core").Signal<{
+    vx1: number;
+    vy1: number;
+    vx2: number;
+    vy2: number;
+    hx1: number;
+    hy1: number;
+    hx2: number;
+    hy2: number;
+  }>;
+  protected readonly plotBottom: import("@angular/core").Signal<number>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StackedBarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StackedBarChartComponent, "lc-stacked-bar-chart", never, {
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "legends": {
+      "alias": "legends";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabels": {
+      "alias": "showLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGrid": {
+      "alias": "showGrid";
+      "required": false;
+      "isSignal": true;
+    };
+    "barGap": {
+      "alias": "barGap";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-stage-list.d.ts

@@ -0,0 +1,69 @@
+import * as i0 from "@angular/core";
+export interface StageItem {
+  /** Stage name shown as the row label. */
+  label: string;
+  /** Numeric value; drives the bar width and the right-aligned count. */
+  value: number;
+  /** Optional bar/dot color (any CSS color). Falls back to the primary token. */
+  color?: string;
+  /** Optional secondary text shown under the label (e.g. a hint). */
+  hint?: string;
+  /** Optional opaque payload echoed back in `stageClick`. */
+  id?: string;
+}
+export type StageListSize = 'sm' | 'md';
+export declare class StageListComponent {
+  readonly stages: import("@angular/core").InputSignal<StageItem[]>;
+  readonly max: import("@angular/core").InputSignal<number | null>;
+  readonly showValue: import("@angular/core").InputSignal<boolean>;
+  readonly showBar: import("@angular/core").InputSignal<boolean>;
+  readonly size: import("@angular/core").InputSignal<StageListSize>;
+  readonly clickable: import("@angular/core").InputSignal<boolean>;
+  readonly emptyText: import("@angular/core").InputSignal<string>;
+  readonly stageClick: import("@angular/core").OutputEmitterRef<StageItem>;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  protected readonly resolvedMax: import("@angular/core").Signal<number>;
+  protected resolveColor(stage: StageItem): string;
+  protected fillWidth(stage: StageItem): string;
+  protected onStageClick(stage: StageItem): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StageListComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StageListComponent, "lc-stage-list", never, {
+    "stages": {
+      "alias": "stages";
+      "required": true;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValue": {
+      "alias": "showValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "showBar": {
+      "alias": "showBar";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "stageClick": "stageClick";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-stat-trend.d.ts

@@ -0,0 +1,62 @@
+import { SparklineColor } from "@lifecorner/angular-ui-kit/sparkline";
+import * as i0 from "@angular/core";
+export type StatTrendDirection = 'up' | 'down' | 'neutral';
+export declare class StatTrendComponent {
+  /** Main KPI label. */
+  label: import("@angular/core").InputSignal<string>;
+  /** Main KPI value to display. */
+  value: import("@angular/core").InputSignal<string>;
+  /** Change value text, e.g. "+12%" or "-3.5%". */
+  change: import("@angular/core").InputSignal<string>;
+  /** Trend direction for color coding. Auto-detected from change if not set. */
+  direction: import("@angular/core").InputSignal<StatTrendDirection | undefined>;
+  /** Sparkline data points. If empty, no sparkline is shown. */
+  sparklineData: import("@angular/core").InputSignal<number[]>;
+  /** Color of the sparkline. Auto-matched to trend direction if not set. */
+  sparklineColor: import("@angular/core").InputSignal<SparklineColor | undefined>;
+  /** Optional icon name (Tabler icon). */
+  icon: import("@angular/core").InputSignal<string>;
+  protected readonly resolvedDirection: import("@angular/core").Signal<StatTrendDirection>;
+  protected readonly trendColorClass: import("@angular/core").Signal<string>;
+  protected readonly resolvedSparklineColor: import("@angular/core").Signal<SparklineColor>;
+  protected readonly trendIcon: import("@angular/core").Signal<string>;
+  protected readonly hasSparkline: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StatTrendComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StatTrendComponent, "lc-stat-trend", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "change": {
+      "alias": "change";
+      "required": false;
+      "isSignal": true;
+    };
+    "direction": {
+      "alias": "direction";
+      "required": false;
+      "isSignal": true;
+    };
+    "sparklineData": {
+      "alias": "sparklineData";
+      "required": false;
+      "isSignal": true;
+    };
+    "sparklineColor": {
+      "alias": "sparklineColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-status-dot.d.ts

@@ -0,0 +1,62 @@
+import * as i0 from "@angular/core";
+export type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';
+export type StatusDotSize = 'sm' | 'md';
+/**
+ * Status dot — the small traffic-light atom used in list rows, rails and
+ * boards to signal an item's state at a glance.
+ *
+ * Features:
+ * - Five semantic tones: done (success), run (brand teal), wait (warning),
+ *   blocked (error), open (neutral)
+ * - Optional pulse animation for "in progress" states (static under
+ *   prefers-reduced-motion)
+ * - Decorative by default (aria-hidden); pass `label` to expose the state
+ *   to assistive technology
+ *
+ * @example
+ * ```html
+ * <lc-status-dot tone="run" [pulse]="true" label="In Arbeit" />
+ * <lc-status-dot tone="blocked" />
+ * ```
+ */
+export declare class StatusDotComponent {
+  /** Semantic tone of the dot */
+  readonly tone: import("@angular/core").InputSignal<StatusDotTone>;
+  /** Size of the dot (sm = 6px for dense list rows, md = 8px) */
+  readonly size: import("@angular/core").InputSignal<StatusDotSize>;
+  /**
+   * Pulse animation for "in progress" states. Renders static under
+   * prefers-reduced-motion.
+   * @default false
+   */
+  readonly pulse: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible label for the state (e.g. "In Arbeit"). Without it the dot is
+   * treated as decorative and hidden from assistive technology.
+   */
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly dotClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StatusDotComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StatusDotComponent, "lc-status-dot", never, {
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "pulse": {
+      "alias": "pulse";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}