@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

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

@@ -0,0 +1,180 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface AreaChartSeries {
+  label: string;
+  data: number[];
+  color?: string;
+}
+export declare class AreaChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  series: import("@angular/core").InputSignal<AreaChartSeries[]>;
+  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>;
+  height: import("@angular/core").InputSignal<number>;
+  strokeWidth: import("@angular/core").InputSignal<number>;
+  showDots: import("@angular/core").InputSignal<boolean>;
+  showGrid: import("@angular/core").InputSignal<boolean>;
+  showXLabels: import("@angular/core").InputSignal<boolean>;
+  showYLabels: import("@angular/core").InputSignal<boolean>;
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  smooth: import("@angular/core").InputSignal<boolean>;
+  /** Opacity for the filled area (0–1). */
+  fillOpacity: import("@angular/core").InputSignal<number>;
+  /** Stack areas on top of each other. */
+  stacked: import("@angular/core").InputSignal<boolean>;
+  /** 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>;
+  protected readonly plotArea: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  }>;
+  private readonly cleanSeries;
+  protected readonly computedSeries: import("@angular/core").Signal<{
+    computedData: number[];
+    prevData: number[] | null;
+    data: number[];
+    label: string;
+    color?: string;
+  }[]>;
+  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>;
+  private valueToY;
+  protected readonly gridLines: import("@angular/core").Signal<{
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly xLabelItems: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    label: string;
+  }[]>;
+  private toPoints;
+  protected readonly renderedSeries: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+    lineD: 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;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AreaChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AreaChartComponent, "lc-area-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;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "smooth": {
+      "alias": "smooth";
+      "required": false;
+      "isSignal": true;
+    };
+    "fillOpacity": {
+      "alias": "fillOpacity";
+      "required": false;
+      "isSignal": true;
+    };
+    "stacked": {
+      "alias": "stacked";
+      "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-avatar-group.d.ts

@@ -0,0 +1,62 @@
+import { AvatarColor, AvatarSize } from "@lifecorner/angular-ui-kit/avatar";
+import * as i0 from "@angular/core";
+export interface AvatarGroupItem {
+  /** Image source URL */
+  src?: string;
+  /** Alt text */
+  alt?: string;
+  /** Full name for initials fallback */
+  name?: string;
+  /** Background of the initials: `default` or a member colour `member-1` … `member-6` (see `lc-avatar`). */
+  color?: AvatarColor;
+}
+export declare class AvatarGroupComponent {
+  /** List of avatars to show */
+  avatars: import("@angular/core").InputSignal<AvatarGroupItem[]>;
+  /** Avatar size */
+  size: import("@angular/core").InputSignal<AvatarSize>;
+  /** Maximum visible avatars before showing overflow count */
+  max: import("@angular/core").InputSignal<number>;
+  /**
+   * Separate the avatars with a ring in the page colour
+   * (`--lc-avatar-ring-color`, default `--color-background`) instead of the
+   * 2 px surface border. Later avatars sit on top.
+   */
+  ring: import("@angular/core").InputSignal<boolean>;
+  /**
+   * How far each avatar overlaps the previous one, as a CSS length (e.g.
+   * `4px`). Empty keeps the size's default (6–12 px).
+   */
+  overlap: import("@angular/core").InputSignal<string>;
+  protected visibleAvatars: import("@angular/core").Signal<AvatarGroupItem[]>;
+  protected overflowCount: import("@angular/core").Signal<number>;
+  protected groupClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupComponent, "lc-avatar-group", never, {
+    "avatars": {
+      "alias": "avatars";
+      "required": true;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "ring": {
+      "alias": "ring";
+      "required": false;
+      "isSignal": true;
+    };
+    "overlap": {
+      "alias": "overlap";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,131 @@
+import * as i0 from "@angular/core";
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+/**
+ * Background of the initials. `default` is the neutral kit avatar; `member-1`
+ * … `member-6` are the member colours (`--color-member-1` … `-6`: teal, rust,
+ * violet, sage, berry, slate) with white initials, each at least 4.5:1.
+ * Assign them per person in a stable order (e.g. join order) and always show
+ * the name or initials beside the colour — colour is never the only cue.
+ */
+export type AvatarColor = 'default' | 'member-1' | 'member-2' | 'member-3' | 'member-4' | 'member-5' | 'member-6';
+/** The six member colours in their order (`AvatarColor` without `default`). */
+export declare const AVATAR_MEMBER_COLORS: readonly AvatarColor[];
+/**
+ * Avatar component for circular user representation.
+ *
+ * Features:
+ * - Image display with fallback to initials
+ * - Auto-generated initials from user name
+ * - Status indicator (online, offline, busy, away)
+ * - Multiple size variants (xs, sm, md, lg, xl)
+ * - Member colours (`color`: `member-1` … `member-6`) with white initials
+ * - `ring`: a gap in the page colour around the avatar, for stacks and for
+ *   avatars on images or tints
+ * - Accessible with alt text support
+ *
+ * @example
+ * ```html
+ * <lc-avatar src="https://example.com/avatar.jpg" alt="John Doe" />
+ * <lc-avatar name="John Doe" status="online" size="lg" />
+ * <lc-avatar name="Tom Ek" color="member-2" [ring]="true" />
+ * ```
+ */
+export declare class AvatarComponent {
+  /** Image source URL */
+  src: import("@angular/core").InputSignal<string | undefined>;
+  /** Alt text for the image */
+  alt: import("@angular/core").InputSignal<string | undefined>;
+  /** Full name for generating initials */
+  name: import("@angular/core").InputSignal<string | undefined>;
+  /** Size of the avatar */
+  size: import("@angular/core").InputSignal<AvatarSize>;
+  /** Status indicator */
+  status: import("@angular/core").InputSignal<AvatarStatus | undefined>;
+  /**
+   * Background of the initials: `default` (neutral) or a member colour
+   * `member-1` … `member-6` with white initials (LK-7).
+   */
+  color: import("@angular/core").InputSignal<AvatarColor>;
+  /**
+   * Draw a ring in the page colour around the avatar (3 px; 2 px for `xs` and
+   * `sm`), so stacked or overlapping avatars stay apart. The ring colour is
+   * `--lc-avatar-ring-color` (default `--color-background`); set it to the
+   * surface the avatar sits on.
+   */
+  ring: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Hide the avatar from assistive technology (no `img` role, no label), for
+   * avatars inside a control that has its own accessible name — e.g. a menu
+   * button labelled "Menu for Tom Ek".
+   */
+  decorative: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Computed initials from name
+   */
+  initials: import("@angular/core").Signal<string>;
+  /**
+   * Computed CSS classes for the avatar
+   */
+  avatarClasses: import("@angular/core").Signal<string>;
+  /**
+   * Get aria-label for accessibility
+   */
+  ariaLabel: import("@angular/core").Signal<string>;
+  /**
+   * Check if image should be displayed
+   */
+  showImage: import("@angular/core").Signal<boolean | "" | undefined>;
+  /**
+   * Track if image failed to load. Resets whenever `src` changes so a new
+   * image gets a fresh attempt instead of staying stuck on the initials.
+   */
+  protected imageError: import("@angular/core").WritableSignal<boolean>;
+  /**
+   * Handle image load error
+   */
+  onImageError(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "lc-avatar", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "status": {
+      "alias": "status";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "ring": {
+      "alias": "ring";
+      "required": false;
+      "isSignal": true;
+    };
+    "decorative": {
+      "alias": "decorative";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,59 @@
+import * as i0 from "@angular/core";
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Badge component for displaying status, notifications, or counts.
+ *
+ * Features:
+ * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
+ * - Multiple size options (xs, sm, md, lg)
+ * - Pill-shaped rounded mode
+ * - Content projection for labels or count values
+ *
+ * @example
+ * ```html
+ * <lc-badge variant="primary" size="md">New</lc-badge>
+ * <lc-badge variant="error" size="sm" [rounded]="true">5</lc-badge>
+ * ```
+ */
+export declare class BadgeComponent {
+  /** Visual variant of the badge */
+  variant: import("@angular/core").InputSignal<BadgeVariant>;
+  /** Size of the badge */
+  size: import("@angular/core").InputSignal<BadgeSize>;
+  /** Whether the badge has fully rounded corners (pill shape) */
+  rounded: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Render a small leading status dot, filled in the variant's `currentColor`,
+   * before the label (the "● label" pattern). Purely additive.
+   * @default false
+   */
+  dot: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Computed CSS classes for the badge
+   */
+  badgeClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "lc-badge", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "rounded": {
+      "alias": "rounded";
+      "required": false;
+      "isSignal": true;
+    };
+    "dot": {
+      "alias": "dot";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,157 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface BarChartItem {
+  /** Bar value. Negative values draw downward (left) from the zero baseline. */
+  value: number;
+  label?: string;
+  color?: string;
+}
+export type BarChartOrientation = 'vertical' | 'horizontal';
+export declare class BarChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  /** Data items. */
+  data: import("@angular/core").InputSignal<BarChartItem[]>;
+  /**
+   * 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>;
+  /** Bar orientation. */
+  orientation: import("@angular/core").InputSignal<BarChartOrientation>;
+  /** Show value labels on bars. */
+  showValues: import("@angular/core").InputSignal<boolean>;
+  /** Show axis labels. */
+  showLabels: import("@angular/core").InputSignal<boolean>;
+  /** Show grid lines. */
+  showGrid: import("@angular/core").InputSignal<boolean>;
+  /** Gap between bars as ratio (0-1). */
+  barGap: import("@angular/core").InputSignal<number>;
+  /** Use a single color for all bars. */
+  color: import("@angular/core").InputSignal<string>;
+  /** Formats 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 that lists
+   * every bar's label and value, so assistive technology hears the data and
+   * not just "Bar chart".
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly PADDING_LEFT;
+  private readonly PADDING_RIGHT;
+  private readonly PADDING_TOP;
+  private readonly PADDING_BOTTOM;
+  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;
+  /**
+   * One scale for grid *and* bars: bounds are nice multiples of the tick step,
+   * always include zero, and extend below zero when the data does — so the top
+   * tick is the value at the plot edge and negative bars hang off the baseline.
+   */
+  protected readonly scale: import("@angular/core").Signal<import("@lifecorner/angular-ui-kit/internal/chart").NiceScale>;
+  /** Maps a data value to a pixel position along the value axis. */
+  private valueToPos;
+  protected readonly gridLines: import("@angular/core").Signal<{
+    pos: number;
+    label: string;
+  }[]>;
+  protected readonly bars: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    label: string;
+    value: number;
+    valueText: string;
+    labelX: number;
+    labelY: number;
+    valueX: number;
+    valueY: number;
+    valueAnchor: string;
+  }[]>;
+  /**
+   * Value axis along the plot edge plus the zero baseline, which sits inside
+   * the plot when the data goes negative.
+   */
+  protected readonly axisLine: import("@angular/core").Signal<{
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    bx1: number;
+    by1: number;
+    bx2: number;
+    by2: number;
+  }>;
+  /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */
+  protected readonly plotBottom: import("@angular/core").Signal<number>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "lc-bar-chart", never, {
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabels": {
+      "alias": "showLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGrid": {
+      "alias": "showGrid";
+      "required": false;
+      "isSignal": true;
+    };
+    "barGap": {
+      "alias": "barGap";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}