@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/types/lifecorner-angular-ui-kit-scatter-plot.d.ts

@@ -0,0 +1,190 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface ScatterPoint {
+  x: number;
+  y: number;
+  label?: string;
+  size?: number;
+}
+export interface ScatterSeries {
+  label: string;
+  data: ScatterPoint[];
+  color?: string;
+}
+export declare class ScatterPlotComponent {
+  readonly series: import("@angular/core").InputSignal<ScatterSeries[]>;
+  /** Chart width in pixels (fixed; the SVG is not fluid). */
+  readonly width: import("@angular/core").InputSignal<number>;
+  /** Chart height in pixels. */
+  readonly height: import("@angular/core").InputSignal<number>;
+  readonly showGrid: import("@angular/core").InputSignal<boolean>;
+  readonly showXLabels: import("@angular/core").InputSignal<boolean>;
+  readonly showYLabels: import("@angular/core").InputSignal<boolean>;
+  readonly showLegend: import("@angular/core").InputSignal<boolean>;
+  readonly showTooltip: import("@angular/core").InputSignal<boolean>;
+  readonly dotRadius: import("@angular/core").InputSignal<number>;
+  readonly xAxisLabel: import("@angular/core").InputSignal<string>;
+  readonly yAxisLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Whether the dots are interactive: keyboard-focusable buttons that show
+   * the tooltip on focus and emit `pointClick` on click / Enter / Space. When
+   * false the chart is a static image (`role="img"`).
+   */
+  readonly interactive: import("@angular/core").InputSignal<boolean>;
+  /** Formats axis ticks and the default point label. Defaults to a float-safe `String(value)`. */
+  readonly formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary naming the
+   * axes and each series with its point count.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly pointClick: import("@angular/core").OutputEmitterRef<{
+    series: string;
+    point: ScatterPoint;
+  }>;
+  /** Tooltip: label, backplate centre x / top y and width (SVG units). */
+  protected hoveredPoint: import("@angular/core").WritableSignal<{
+    label: string;
+    sx: number;
+    ty: number;
+    w: number;
+  } | null>;
+  private readonly PL;
+  private readonly PR;
+  private readonly PT;
+  private readonly PB;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  private readonly cleanSeries;
+  private readonly allPoints;
+  /** Nice tick scale over the data extent, padded 5% so edge points don't sit on the axis. */
+  private extent;
+  private readonly xScale;
+  private readonly yScale;
+  protected readonly plotArea: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  }>;
+  private toSx;
+  private toSy;
+  protected readonly gridLinesX: import("@angular/core").Signal<{
+    x: number;
+    label: string;
+  }[]>;
+  protected readonly gridLinesY: import("@angular/core").Signal<{
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly renderedSeries: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+    points: {
+      cx: number;
+      cy: number;
+      r: number;
+      label: string;
+      ariaLabel: string;
+      orig: {
+        x: number;
+        y: number;
+        label?: string;
+        size?: number;
+      };
+    }[];
+  }[]>;
+  protected readonly legendItems: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+  }[]>;
+  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 effectiveAriaLabel: import("@angular/core").Signal<string>;
+  protected onDotEnter(cx: number, cy: number, label: string): void;
+  protected onDotLeave(): void;
+  protected onDotClick(seriesLabel: string, point: ScatterPoint): void;
+  protected readonly tooltipH = 18;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ScatterPlotComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ScatterPlotComponent, "lc-scatter-plot", never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "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;
+    };
+    "showTooltip": {
+      "alias": "showTooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "dotRadius": {
+      "alias": "dotRadius";
+      "required": false;
+      "isSignal": true;
+    };
+    "xAxisLabel": {
+      "alias": "xAxisLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "yAxisLabel": {
+      "alias": "yAxisLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "interactive": {
+      "alias": "interactive";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "pointClick": "pointClick";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-search-input.d.ts

@@ -0,0 +1,137 @@
+import * as i0 from "@angular/core";
+import { ElementRef } from "@angular/core";
+export type SearchInputSize = 'sm' | 'md' | 'lg';
+/**
+ * Search input component with integrated search functionality.
+ *
+ * Features:
+ * - Built-in search icon
+ * - Clear button for resetting input
+ * - RxJS-based configurable debounce
+ * - Multiple size variants (sm, md, lg)
+ * - Disabled state support
+ * - Submit event on Enter key
+ * - Two-way bindable `value` so a parent can preset or reset the query
+ *
+ * @example
+ * ```html
+ * <lc-search-input
+ *   placeholder="Search..."
+ *   [debounceMs]="300"
+ *   [(value)]="query"
+ *   (searchChange)="onSearch($event)"
+ * ></lc-search-input>
+ * ```
+ */
+export declare class SearchInputComponent {
+  /**
+   * id of the native input (lets a parent `<label for>` point at it).
+   * @default generated
+   */
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  /**
+   * Placeholder text.
+   * @default 'Search…'
+   */
+  placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Size variant.
+   * @default 'md'
+   */
+  size: import("@angular/core").InputSignal<SearchInputSize>;
+  /**
+   * Debounce delay in milliseconds. 0 means no debounce.
+   * @default 300
+   */
+  debounceMs: import("@angular/core").InputSignal<number>;
+  /**
+   * Whether the search input is disabled.
+   * @default false
+   */
+  disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the input.
+   * @default 'Search'
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Current query (two-way bindable). Writing it from outside updates the
+   * field without emitting `searchChange`; `valueChange` emits on every
+   * keystroke (undebounced) and on clear.
+   */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /**
+   * Emitted when the search value changes (debounced).
+   */
+  readonly searchChange: import("@angular/core").OutputEmitterRef<string>;
+  /**
+   * Emitted when the user presses Enter.
+   */
+  readonly searchSubmit: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly inputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  protected wrapperClasses: import("@angular/core").Signal<string>;
+  private readonly input$;
+  /** Last value pushed into the pipe (by typing, clear or an external write). */
+  private lastPushed;
+  constructor();
+  protected onInput(event: Event): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected clear(): void;
+  private push;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SearchInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SearchInputComponent, "lc-search-input", never, {
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "debounceMs": {
+      "alias": "debounceMs";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "searchChange": "searchChange";
+    "searchSubmit": "searchSubmit";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,34 @@
+import * as i0 from "@angular/core";
+export type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionBackground = 'none' | 'gray' | 'primary' | 'secondary';
+export declare class SectionComponent {
+  spacing: import("@angular/core").InputSignal<SectionSpacing>;
+  background: import("@angular/core").InputSignal<SectionBackground>;
+  noPaddingX: import("@angular/core").InputSignal<boolean>;
+  noPaddingY: import("@angular/core").InputSignal<boolean>;
+  get hostClasses(): string;
+  classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "lc-section", never, {
+    "spacing": {
+      "alias": "spacing";
+      "required": false;
+      "isSignal": true;
+    };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPaddingX": {
+      "alias": "noPaddingX";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPaddingY": {
+      "alias": "noPaddingY";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,274 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+export type SelectValue = string | number | string[] | number[] | null;
+/**
+ * Select component for dropdown option selection.
+ *
+ * Features:
+ * - Single and multiple selection modes
+ * - Searchable/filterable option list
+ * - Option groups with headers
+ * - Loading state indicator
+ * - Variant styles (outline, filled)
+ * - Size presets (xs, sm, md, lg)
+ * - Keyboard navigation support
+ * - CDK overlay positioning
+ * - ControlValueAccessor integration for reactive forms
+ *
+ * @example
+ * ```html
+ * <lc-select [options]="options" placeholder="Choose" [(ngModel)]="selected" />
+ * ```
+ */
+export declare class SelectComponent implements ControlValueAccessor {
+  private static nextId;
+  /** Per-instance id base; the listbox and its options derive their ids from it. */
+  readonly selectId: string;
+  readonly listboxId: string;
+  private readonly selectTrigger;
+  private readonly dropdownPanel;
+  /**
+   * Visual variant of the select
+   */
+  readonly variant: import("@angular/core").InputSignal<"outline" | "filled">;
+  /**
+   * Size of the select
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  /**
+   * Whether the select is disabled
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the select is in error state
+   */
+  readonly error: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the select is required
+   */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the select is in loading state
+   */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the select allows searching
+   */
+  readonly searchable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether multiple options can be selected
+   */
+  readonly multiple: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Placeholder text when no option is selected
+   */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Helper text displayed below the select
+   */
+  readonly helperText: import("@angular/core").InputSignal<string>;
+  /**
+   * Error message displayed when error is true
+   */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /**
+   * ARIA label for accessibility
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Select options (flat list or groups)
+   */
+  readonly options: import("@angular/core").InputSignal<SelectOption[] | SelectOptionGroup[]>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Placeholder of the search field (`searchable`). */
+  readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the search field. Empty: "Search " + `ariaLabel`, or "Search options". */
+  readonly searchAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Shown when the search matches no option. */
+  readonly noOptionsLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when selection changes
+   */
+  readonly selectionChange: import("@angular/core").OutputEmitterRef<SelectValue>;
+  /**
+   * Emitted when dropdown opens
+   */
+  readonly opened: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when dropdown closes
+   */
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  readonly value: import("@angular/core").WritableSignal<SelectValue>;
+  readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+  readonly searchQuery: import("@angular/core").WritableSignal<string>;
+  /** Disabled state pushed in by the forms API (setDisabledState). */
+  private readonly formDisabled;
+  /** Effective disabled state: the `disabled` input OR the form control's disabled state. */
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  readonly filteredOptions: import("@angular/core").Signal<SelectOption[]>;
+  /** Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. */
+  readonly highlightedIndex: import("@angular/core").WritableSignal<number>;
+  readonly activeDescendantId: import("@angular/core").Signal<string | null>;
+  readonly selectedLabel: import("@angular/core").Signal<string>;
+  readonly displayValue: import("@angular/core").Signal<string>;
+  /** id of the helper/error text the trigger is described by (aria-describedby) */
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /**
+   * Computed classes for the select trigger element
+   */
+  readonly selectClasses: import("@angular/core").Signal<string>;
+  private readonly document;
+  private onChange;
+  private onTouched;
+  /**
+   * Id of the option at `index` in the filtered list (used for aria-activedescendant)
+   */
+  optionId(index: number): string;
+  /**
+   * Toggle dropdown open/closed
+   */
+  toggle(): void;
+  /**
+   * Open dropdown
+   */
+  open(): void;
+  /**
+   * Close dropdown. Idempotent: the overlay's `detach` re-enters here after
+   * `isOpen` flips, and that second call must not emit `closed` again.
+   */
+  close(): void;
+  /**
+   * Select an option
+   */
+  selectOption(option: SelectOption): void;
+  /**
+   * Check if an option is selected
+   */
+  isSelected(option: SelectOption): boolean;
+  /**
+   * Clear selection
+   */
+  clear(): void;
+  /**
+   * Handle keyboard navigation (trigger and search input share this handler)
+   */
+  onKeyDown(event: KeyboardEvent): void;
+  /**
+   * Handle blur event
+   */
+  onBlur(): void;
+  /**
+   * Handle click outside
+   */
+  onClickOutside(): void;
+  writeValue(value: SelectValue): void;
+  registerOnChange(fn: (value: SelectValue) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  private isSearchInput;
+  private restoreFocusFromPanel;
+  private findOptionByValue;
+  private flattenOptions;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "lc-select", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchable": {
+      "alias": "searchable";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchPlaceholder": {
+      "alias": "searchPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchAriaLabel": {
+      "alias": "searchAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "noOptionsLabel": {
+      "alias": "noOptionsLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selectionChange": "selectionChange";
+    "opened": "opened";
+    "closed": "closed";
+  }, never, never, true, never>;
+}