@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

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

@@ -0,0 +1,186 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface LineChartSeries {
+  label: string;
+  data: number[];
+  color?: string;
+}
+export declare class LineChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  /** One or more data series. */
+  series: import("@angular/core").InputSignal<LineChartSeries[]>;
+  /** X-axis labels. */
+  labels: import("@angular/core").InputSignal<string[]>;
+  /**
+   * 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>;
+  /** Chart height in pixels. */
+  height: import("@angular/core").InputSignal<number>;
+  /** Stroke width for lines. */
+  strokeWidth: import("@angular/core").InputSignal<number>;
+  /** Show dots at data points. */
+  showDots: import("@angular/core").InputSignal<boolean>;
+  /** Show grid lines. */
+  showGrid: import("@angular/core").InputSignal<boolean>;
+  /** Show X-axis labels. */
+  showXLabels: import("@angular/core").InputSignal<boolean>;
+  /** Show Y-axis labels. */
+  showYLabels: import("@angular/core").InputSignal<boolean>;
+  /** Show area fill under lines. */
+  filled: import("@angular/core").InputSignal<boolean>;
+  /** Show legend. */
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  /** Use smooth curves. */
+  smooth: import("@angular/core").InputSignal<boolean>;
+  /** Force a minimum Y value (e.g. 0 for cost charts to avoid negative baseline). */
+  yMin: import("@angular/core").InputSignal<number | null>;
+  /** Formats Y-axis tick labels. Defaults to a float-safe `String(value)`. */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary naming each
+   * series with its point count and value range.
+   */
+  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>;
+  private readonly cleanSeries;
+  protected readonly allValues: import("@angular/core").Signal<number[]>;
+  protected readonly minValue: import("@angular/core").Signal<number>;
+  protected readonly maxValue: import("@angular/core").Signal<number>;
+  /** Y scale with nice tick bounds; the plot edges sit on the outermost ticks. */
+  protected readonly scale: import("@angular/core").Signal<import("@lifecorner/angular-ui-kit/internal/chart").NiceScale>;
+  protected readonly maxDataLength: import("@angular/core").Signal<number>;
+  protected readonly plotArea: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  }>;
+  private valueToY;
+  protected readonly gridLines: import("@angular/core").Signal<{
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly xLabels: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly renderedSeries: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+    pathD: string;
+    areaD: string;
+    points: {
+      x: number;
+      y: number;
+    }[];
+  }[]>;
+  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 legendItems: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+  }[]>;
+  private readonly _clipId;
+  protected readonly clipId: () => string;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LineChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LineChartComponent, "lc-line-chart", never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDots": {
+      "alias": "showDots";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGrid": {
+      "alias": "showGrid";
+      "required": false;
+      "isSignal": true;
+    };
+    "showXLabels": {
+      "alias": "showXLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "showYLabels": {
+      "alias": "showYLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "filled": {
+      "alias": "filled";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "smooth": {
+      "alias": "smooth";
+      "required": false;
+      "isSignal": true;
+    };
+    "yMin": {
+      "alias": "yMin";
+      "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-list.d.ts

@@ -0,0 +1,215 @@
+import { ButtonSize, ButtonVariant } from "@lifecorner/angular-ui-kit/button";
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+import { AvatarColor } from "@lifecorner/angular-ui-kit/avatar";
+/**
+ * Directive for providing a custom template to render each list item.
+ *
+ * @example
+ * ```html
+ * <lc-list [items]="runs()" (itemClick)="onRunClick($event)">
+ *   <ng-template lcListItem let-item>
+ *     <lc-badge [variant]="getStatusVariant(item.status)">{{ item.status }}</lc-badge>
+ *     <span>{{ item.symbol }}</span>
+ *     <span class="text-sm text-neutral-500">{{ item.date }}</span>
+ *   </ng-template>
+ * </lc-list>
+ * ```
+ */
+export declare class ListItemTemplateDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ListItemTemplateDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<ListItemTemplateDirective, "[lcListItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * List orientation type
+ */
+export type ListOrientation = 'vertical' | 'horizontal';
+/**
+ * List visual variant
+ *  - default: flat rows (original)
+ *  - card: each item rendered as a mini-card with border, radius and shadow on hover
+ */
+export type ListVariant = 'default' | 'card';
+/**
+ * List item interface
+ */
+export interface ListItem {
+  /** Item label text (primary line) */
+  label: string;
+  /** Secondary text shown below the label */
+  subtitle?: string;
+  /** Description text shown below subtitle (third line) */
+  description?: string;
+  /** Optional icon identifier */
+  icon?: string;
+  /** Avatar URL or initials (renders a circular avatar instead of icon) */
+  avatar?: string;
+  /**
+   * Background of avatar initials: `default` or a member colour `member-1` …
+   * `member-6` with white initials (as `lc-avatar`'s `color`).
+   */
+  avatarColor?: AvatarColor;
+  /** Badge text (e.g. count, status label) shown on the trailing side */
+  badge?: string;
+  /** Badge color variant */
+  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  /** Metadata text shown on the trailing side (e.g. date, size) */
+  metadata?: string;
+  /** Optional action label */
+  action?: string;
+  /**
+   * Accessible name of this row's action when the visible label repeats on
+   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible
+   * label must be part of it (WCAG 2.5.3).
+   */
+  actionAriaLabel?: string;
+  /** Item identifier */
+  id?: string;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  /** Whether the item is selected / highlighted */
+  selected?: boolean;
+  /** Any additional data */
+  [key: string]: any;
+}
+/**
+ * List item size
+ */
+export type ListSize = 'sm' | 'md' | 'lg';
+/**
+ * List component for displaying structured item collections.
+ *
+ * Features:
+ * - Vertical and horizontal layout orientations
+ * - Variant styles (default, bordered, card)
+ * - Optional dividers between items
+ * - Icon and avatar support per item
+ * - Action buttons with click events
+ * - Accessible with ARIA list role; `clickable` rows are keyboard-operable
+ *
+ * @example
+ * ```html
+ * <lc-list
+ *   [items]="listItems"
+ *   orientation="vertical"
+ *   [showDividers]="true"
+ *   (itemClick)="handleItemClick($event)"
+ * />
+ * ```
+ */
+export declare class ListComponent {
+  /** Custom item template provided via lcListItem directive */
+  readonly itemTemplate: import("@angular/core").Signal<ListItemTemplateDirective | undefined>;
+  /** Array of list items to display */
+  items: import("@angular/core").InputSignal<ListItem[]>;
+  /** Orientation of the list */
+  orientation: import("@angular/core").InputSignal<ListOrientation>;
+  /** Visual variant */
+  variant: import("@angular/core").InputSignal<ListVariant>;
+  /** Size of list items */
+  size: import("@angular/core").InputSignal<ListSize>;
+  /** Whether to show dividers between items */
+  showDividers: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether rows are interactive. When set, each row is rendered as a
+   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is
+   * reachable from the keyboard. Set this whenever you handle `itemClick`.
+   */
+  clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Clamp each item's `description` to two lines (3.2). Set `false` for
+   * reading text that must show in full (3.3, G-11).
+   * @default true
+   */
+  clampDescription: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Variant of the built-in row action (`ListItem.action`).
+   * @default 'ghost'
+   */
+  actionVariant: import("@angular/core").InputSignal<ButtonVariant>;
+  /**
+   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,
+   * the 44 px touch target).
+   * @default 'xs'
+   */
+  actionSize: import("@angular/core").InputSignal<ButtonSize>;
+  /** Event emitted when an item is clicked */
+  readonly itemClick: import("@angular/core").OutputEmitterRef<ListItem>;
+  /** Event emitted when an action button is clicked */
+  readonly actionClick: import("@angular/core").OutputEmitterRef<ListItem>;
+  /**
+   * Computed CSS classes for the list
+   */
+  listClasses: import("@angular/core").Signal<string>;
+  /**
+   * Get CSS classes for a list item
+   */
+  getItemClasses(item: ListItem): string;
+  /** CSS classes of an item's avatar (member colour, LK-7). */
+  protected avatarClasses(item: ListItem): string;
+  /**
+   * Handle item click
+   */
+  onItemClick(item: ListItem): void;
+  /**
+   * Keyboard activation of a clickable row. Only reacts to keys on the row
+   * itself: a nested control (e.g. the action button) handles its own Enter.
+   */
+  onItemKeydown(event: KeyboardEvent, item: ListItem): void;
+  /**
+   * Handle action button click
+   */
+  onActionClick(item: ListItem): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "lc-list", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDividers": {
+      "alias": "showDividers";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "clampDescription": {
+      "alias": "clampDescription";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionVariant": {
+      "alias": "actionVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionSize": {
+      "alias": "actionSize";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "itemClick": "itemClick";
+    "actionClick": "actionClick";
+  }, ["itemTemplate"], never, true, never>;
+}