@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/types/lifecorner-angular-ui-kit-field-group.d.ts

@@ -0,0 +1,69 @@
+import * as i0 from "@angular/core";
+/**
+ * Field group component for displaying label-value pairs.
+ *
+ * Features:
+ * - Consistent label-value layout for read-only data
+ * - Optional leading icon from Tabler Icons
+ * - Compact mode for dense layouts
+ * - Content projection for custom value rendering
+ * - Configurable icon size (xs, sm, md)
+ *
+ * @example
+ * ```html
+ * <lc-field-group label="Email" value="user@example.com" />
+ * <lc-field-group label="Language" value="English" icon="globe-alt" />
+ * ```
+ */
+export declare class FieldGroupComponent {
+  /**
+   * Label text displayed above the value
+   */
+  label: import("@angular/core").InputSignal<string>;
+  /**
+   * Value text to display (optional if using content projection)
+   */
+  value: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Optional icon name from Tabler Icons
+   */
+  icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Icon size
+   * @default 'sm'
+   */
+  iconSize: import("@angular/core").InputSignal<"xs" | "sm" | "md">;
+  /**
+   * Use compact styling with less padding
+   * @default false
+   */
+  compact: import("@angular/core").InputSignal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FieldGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FieldGroupComponent, "lc-field-group", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconSize": {
+      "alias": "iconSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-file-upload.d.ts

@@ -0,0 +1,122 @@
+import * as i0 from "@angular/core";
+import { ElementRef } from "@angular/core";
+export interface FileUploadFile {
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+}
+/**
+ * File upload / dropzone component with drag & drop support.
+ *
+ * @example
+ * ```html
+ * <lc-file-upload
+ *   accept=".pdf,.png,.jpg"
+ *   [multiple]="true"
+ *   [maxSizeBytes]="5242880"
+ *   (filesSelected)="onFiles($event)"
+ * ></lc-file-upload>
+ * ```
+ */
+export declare class FileUploadComponent {
+  /**
+   * Accepted file types (e.g. ".pdf,.jpg,image/*").
+   */
+  accept: import("@angular/core").InputSignal<string>;
+  /**
+   * Allow multiple files.
+   * @default false
+   */
+  multiple: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Maximum file size in bytes. 0 for unlimited.
+   * @default 0
+   */
+  maxSizeBytes: import("@angular/core").InputSignal<number>;
+  /**
+   * Whether the dropzone is disabled.
+   * @default false
+   */
+  disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Hint text shown in the dropzone.
+   * @default 'Drag & drop files here, or click to browse'
+   */
+  hint: import("@angular/core").InputSignal<string>;
+  /** Prefix of the accepted file types line (`accept`). */
+  acceptedLabel: import("@angular/core").InputSignal<string>;
+  /** Prefix of the maximum file size line (`maxSizeBytes`). */
+  maxSizeLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of a selected file's remove button. */
+  removeFileAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted with selected files after validation.
+   */
+  readonly filesSelected: import("@angular/core").OutputEmitterRef<FileUploadFile[]>;
+  /**
+   * Emitted when a file is rejected (too large or wrong type).
+   */
+  readonly fileRejected: import("@angular/core").OutputEmitterRef<{
+    file: File;
+    reason: string;
+  }>;
+  protected isDragOver: import("@angular/core").WritableSignal<boolean>;
+  protected selectedFiles: import("@angular/core").WritableSignal<FileUploadFile[]>;
+  protected readonly fileInputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  protected dropzoneClasses: import("@angular/core").Signal<string>;
+  protected onDragOver(event: DragEvent): void;
+  protected onDragLeave(event: DragEvent): void;
+  protected onDrop(event: DragEvent): void;
+  protected onFileChange(event: Event): void;
+  protected openFilePicker(): void;
+  protected removeFile(index: number): void;
+  protected formatSize(bytes: number): string;
+  private processFiles;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "lc-file-upload", never, {
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSizeBytes": {
+      "alias": "maxSizeBytes";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "acceptedLabel": {
+      "alias": "acceptedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSizeLabel": {
+      "alias": "maxSizeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeFileAriaLabel": {
+      "alias": "removeFileAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "filesSelected": "filesSelected";
+    "fileRejected": "fileRejected";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,116 @@
+import { SelectOption } from "@lifecorner/angular-ui-kit/select";
+import * as i0 from "@angular/core";
+/**
+ * Configuration for a single filter in the FilterBar.
+ */
+export interface FilterConfig {
+  /** Unique key for this filter */
+  readonly key: string;
+  /** Display label */
+  readonly label: string;
+  /** Filter type */
+  readonly type: 'select' | 'toggle' | 'search';
+  /** Available options for select/toggle types */
+  readonly options?: readonly FilterOption[];
+  /** Placeholder text (for search type) */
+  readonly placeholder?: string;
+}
+export interface FilterOption {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+}
+export interface FilterValues {
+  [key: string]: string;
+}
+/**
+ * Filter bar component for composable data filtering.
+ *
+ * Features:
+ * - Select dropdowns, toggle groups, and search inputs
+ * - Declarative filter configuration via FilterConfig array
+ * - Two-way filter values binding
+ * - Responsive horizontal flex layout
+ * - Size variants (sm, md)
+ * - Dark mode support
+ *
+ * @example
+ * ```html
+ * <lc-filter-bar
+ *   [filters]="filterConfig"
+ *   [values]="currentFilters"
+ *   (valuesChange)="onFilterChange($event)"
+ * />
+ * ```
+ */
+export declare class FilterBarComponent {
+  private static nextId;
+  /** Per-instance id prefix for label/control linking */
+  readonly barId: string;
+  /** Filter configurations */
+  filters: import("@angular/core").InputSignal<readonly FilterConfig[]>;
+  /** Current filter values (two-way bindable) */
+  values: import("@angular/core").InputSignal<FilterValues>;
+  /** Size variant */
+  size: import("@angular/core").InputSignal<"sm" | "md">;
+  /** Placeholder of select filters without their own `placeholder`. */
+  selectPlaceholder: import("@angular/core").InputSignal<string>;
+  /** Placeholder of search filters without their own `placeholder`. */
+  searchPlaceholder: import("@angular/core").InputSignal<string>;
+  /** Emitted when any filter value changes */
+  valuesChange: import("@angular/core").OutputEmitterRef<FilterValues>;
+  /** Computed size class */
+  sizeClass: import("@angular/core").Signal<string>;
+  /**
+   * Select options per filter key, built once per `filters` change so the
+   * lc-select `options` input keeps a stable reference across change detection.
+   */
+  private readonly selectOptionsByKey;
+  /** Get the current value for a filter key */
+  getValue(key: string): string;
+  /** Memoised select options for a filter key */
+  selectOptions(key: string): SelectOption[];
+  /** id of the control rendered for a filter (used by `<label for>`) */
+  fieldId(key: string): string;
+  /** id of the label rendered for a filter (used by `aria-labelledby`) */
+  labelId(key: string): string;
+  /** Handle select / toggle change */
+  onFilterChange(key: string, value: string): void;
+  /** Handle search input */
+  onSearchInput(key: string, value: string): void;
+  normalizeSelectValue(value: string | number | null): string;
+  /** Check if a toggle option is active */
+  isToggleActive(key: string, optionValue: string): boolean;
+  /** Get toggle button classes */
+  getToggleClasses(key: string, option: FilterOption): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FilterBarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FilterBarComponent, "lc-filter-bar", never, {
+    "filters": {
+      "alias": "filters";
+      "required": true;
+      "isSignal": true;
+    };
+    "values": {
+      "alias": "values";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectPlaceholder": {
+      "alias": "selectPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchPlaceholder": {
+      "alias": "searchPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "valuesChange": "valuesChange";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,97 @@
+import * as i0 from "@angular/core";
+export interface FooterLink {
+  /** Display label */
+  label: string;
+  /** URL or route */
+  href: string;
+  /**
+   * Opens in a new tab (`target="_blank"`). Screen readers hear the
+   * `externalLinkHint` after the label; `rel` defaults to
+   * `noopener noreferrer`.
+   */
+  external?: boolean;
+  /** Marks the page the visitor is on (`aria-current="page"`). */
+  current?: boolean;
+  /**
+   * `rel` attribute, e.g. `me` for your own social profiles. Replaces the
+   * `noopener noreferrer` default of external links.
+   */
+  rel?: string;
+}
+export interface FooterSection {
+  /** Section heading */
+  title: string;
+  /** Links in this section */
+  links: FooterLink[];
+}
+export type FooterVariant = 'default' | 'primary' | 'dark' | 'neutral';
+/** Heading level of the section titles (`headingLevel`). */
+export type FooterHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export declare class FooterComponent {
+  /** Footer navigation sections */
+  sections: import("@angular/core").InputSignal<FooterSection[]>;
+  /** Copyright text */
+  copyright: import("@angular/core").InputSignal<string | undefined>;
+  /** Whether to show a top border */
+  showBorder: import("@angular/core").InputSignal<boolean>;
+  /** Compact layout (single row) */
+  compact: import("@angular/core").InputSignal<boolean>;
+  /** Color variant */
+  variant: import("@angular/core").InputSignal<FooterVariant>;
+  /**
+   * Heading level of the section titles. Pick the level that continues the
+   * page's outline (a page with `h1` + `h2` sections usually wants `2`).
+   */
+  headingLevel: import("@angular/core").InputSignal<FooterHeadingLevel>;
+  /** Accessible name of the `<nav>` around the sections. */
+  navAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Visually hidden text read after the label of an `external` link. */
+  externalLinkHint: import("@angular/core").InputSignal<string>;
+  protected footerClasses: import("@angular/core").Signal<string>;
+  /** `rel` of a link: its own value, else `noopener noreferrer` for external links. */
+  protected linkRel(link: FooterLink): string | null;
+  protected currentYear: number;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "lc-footer", never, {
+    "sections": {
+      "alias": "sections";
+      "required": false;
+      "isSignal": true;
+    };
+    "copyright": {
+      "alias": "copyright";
+      "required": false;
+      "isSignal": true;
+    };
+    "showBorder": {
+      "alias": "showBorder";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "navAriaLabel": {
+      "alias": "navAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "externalLinkHint": {
+      "alias": "externalLinkHint";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,97 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface FunnelStep {
+  label: string;
+  value: number;
+  color?: string;
+}
+export declare class FunnelChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  readonly steps: import("@angular/core").InputSignal<FunnelStep[]>;
+  /**
+   * 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.
+   */
+  readonly width: import("@angular/core").InputSignal<number | undefined>;
+  readonly height: import("@angular/core").InputSignal<number>;
+  readonly showLabels: import("@angular/core").InputSignal<boolean>;
+  readonly showValues: import("@angular/core").InputSignal<boolean>;
+  readonly showPercentage: import("@angular/core").InputSignal<boolean>;
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  /** Formats step values. Defaults to a float-safe `String(value)`. */
+  readonly formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing
+   * every step's label, value and share of the first step.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly effectiveWidth: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly renderedSteps: import("@angular/core").Signal<{
+    path: string;
+    color: string;
+    ink: string;
+    halo: boolean;
+    label: string;
+    value: number;
+    valueText: string;
+    pct: number;
+    labelX: number;
+    labelY: number;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FunnelChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FunnelChartComponent, "lc-funnel-chart", never, {
+    "steps": {
+      "alias": "steps";
+      "required": true;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabels": {
+      "alias": "showLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "showPercentage": {
+      "alias": "showPercentage";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}