@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,187 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+/** Space between the boxes: `default` 12 px (8 px below 480 px), `compact` 8 px (4 px below 480 px). */
+export type VerificationCodeInputGap = 'default' | 'compact';
+/**
+ * Verification Code Input Component with one input per digit
+ *
+ * Features:
+ * - Configurable number of digit fields (`length`, default 6)
+ * - Automatic focus advancement after entering a digit
+ * - Backspace moves to the previous input, arrow keys navigate
+ * - Paste / autofill support (splits the code across the inputs); no
+ *   `maxlength`, so iOS and Android can put the whole `one-time-code` into box 1
+ * - `clear()` empties the boxes after a wrong code and focuses box 1
+ * - Phones (below 480 px): 44 × 48 px boxes, 8 px apart (6 boxes = 304 px)
+ * - Accessible ARIA attributes (labelled group, linked hint and error)
+ * - Reactive Forms ControlValueAccessor implementation
+ * - `complete` emits exactly once when all digits are entered
+ *
+ * Usage:
+ * ```html
+ * <lc-verification-code-input
+ *   [formControl]="codeControl"
+ *   label="Verification Code"
+ *   [length]="6"
+ *   (complete)="onCodeComplete($event)"
+ * ></lc-verification-code-input>
+ * ```
+ */
+export declare class VerificationCodeInputComponent implements ControlValueAccessor {
+  /** Group label rendered above the digit inputs */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Number of digits */
+  readonly length: import("@angular/core").InputSignal<number>;
+  /** Whether the inputs are disabled */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Whether the code is required */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the `*` of a `required` code; `false` keeps `required` and
+   * `aria-required` without the asterisk.
+   * @default true
+   */
+  readonly requiredIndicator: import("@angular/core").InputSignal<boolean>;
+  /** Space between the boxes: `default` (12 px, 8 px below 480 px) or `compact` (8 px, 4 px below 480 px). */
+  readonly gap: import("@angular/core").InputSignal<VerificationCodeInputGap>;
+  /** Error message displayed below the inputs (also sets aria-invalid) */
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * @deprecated `complete` always emits exactly once when the last digit is
+   * entered — bind `(complete)` to auto-submit. Kept so existing bindings
+   * keep compiling; it no longer changes behaviour.
+   */
+  readonly autoSubmit: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Hint text below the inputs. Defaults to "Enter the N-digit code";
+   * pass an empty string to hide the hint.
+   */
+  readonly hint: import("@angular/core").InputSignal<string | undefined>;
+  /** Focus the first digit input once rendered (opt-in) */
+  readonly autofocus: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of each box; `{n}` and `{total}` are replaced. */
+  readonly digitAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of box `index` (zero-based). */
+  protected digitLabel(index: number): string;
+  /** Emitted once with the full code when all digits are entered */
+  readonly complete: import("@angular/core").OutputEmitterRef<string>;
+  /** Per-instance ids for the group label, hint and error linkage */
+  readonly groupId: string;
+  readonly labelId: string;
+  readonly hintId: string;
+  readonly errorId: string;
+  private readonly digitInputs;
+  /** One entry per digit; resets when `length` changes */
+  readonly digits: import("@angular/core").WritableSignal<string[]>;
+  private readonly formDisabled;
+  /** Computed disabled state from both input and form control */
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  readonly code: import("@angular/core").Signal<string>;
+  readonly isComplete: import("@angular/core").Signal<boolean>;
+  readonly hintText: import("@angular/core").Signal<string>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  private onChange;
+  private onTouched;
+  constructor();
+  /**
+   * ControlValueAccessor: Write value from form control
+   */
+  writeValue(value: string | null | undefined): void;
+  /**
+   * ControlValueAccessor: Register onChange callback
+   */
+  registerOnChange(fn: (value: string) => void): void;
+  /**
+   * ControlValueAccessor: Register onTouched callback
+   */
+  registerOnTouched(fn: () => void): void;
+  /**
+   * ControlValueAccessor: Set disabled state
+   */
+  setDisabledState(isDisabled: boolean): void;
+  /**
+   * Empty every box (e.g. after a wrong code), report `''` to the form and
+   * focus box 1. Writing `''` through the form control empties the boxes too,
+   * without moving the focus.
+   */
+  clear(): void;
+  /**
+   * Handle digit input
+   */
+  onDigitInput(event: Event, index: number): void;
+  /**
+   * Handle keydown events (backspace, arrow keys)
+   */
+  onKeyDown(event: KeyboardEvent, index: number): void;
+  /**
+   * Handle paste event (split the pasted code across the inputs)
+   */
+  onPaste(event: ClipboardEvent): void;
+  /** Writes `chars` into consecutive slots from `start`, then advances focus and reports completion. */
+  private applyDigits;
+  private setDigit;
+  /**
+   * Focus specific input by index
+   */
+  private focusInput;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VerificationCodeInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<VerificationCodeInputComponent, "lc-verification-code-input", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "length": {
+      "alias": "length";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "requiredIndicator": {
+      "alias": "requiredIndicator";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoSubmit": {
+      "alias": "autoSubmit";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "autofocus": {
+      "alias": "autofocus";
+      "required": false;
+      "isSignal": true;
+    };
+    "digitAriaLabel": {
+      "alias": "digitAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "complete": "complete";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,163 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface WaterfallItem {
+  label: string;
+  /**
+   * The bar's amount. For an incremental step the sign gives the direction
+   * unless `type` says otherwise; for a `total` it is the absolute level.
+   */
+  value: number;
+  /**
+   * `'total'` renders from 0 to `value` instead of incrementally.
+   * `'increase'` / `'decrease'` force the direction: the step moves the running
+   * total by `|value|` up or down regardless of the sign of `value`. When
+   * omitted the sign of `value` decides.
+   */
+  type?: 'increase' | 'decrease' | 'total';
+}
+export declare class WaterfallChartComponent {
+  private readonly _el;
+  private readonly _destroyRef;
+  private readonly _containerWidth;
+  constructor();
+  data: import("@angular/core").InputSignal<WaterfallItem[]>;
+  /**
+   * 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>;
+  showValues: import("@angular/core").InputSignal<boolean>;
+  showGrid: import("@angular/core").InputSignal<boolean>;
+  showConnectors: import("@angular/core").InputSignal<boolean>;
+  increaseColor: import("@angular/core").InputSignal<string>;
+  decreaseColor: import("@angular/core").InputSignal<string>;
+  totalColor: import("@angular/core").InputSignal<string>;
+  barGap: import("@angular/core").InputSignal<number>;
+  /**
+   * Formats value labels and axis ticks. Defaults to a float-safe
+   * `String(value)`; incremental steps are additionally prefixed with their sign.
+   */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing every
+   * bar's label and signed value (totals unsigned).
+   */
+  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>;
+  /** Running totals with the explicit `type` applied. */
+  private readonly entries;
+  private valueLabel;
+  /** One nice scale for bars and grid, always including zero. */
+  private readonly scale;
+  private readonly plotH;
+  private toY;
+  protected readonly computedBars: import("@angular/core").Signal<{
+    bars: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+      label: string;
+      value: number;
+      valueText: string;
+      labelX: number;
+      labelY: number;
+      valueY: number;
+      endVal: number;
+    }[];
+    connectors: {
+      x1: number;
+      x2: number;
+      y: number;
+    }[];
+    gridLines: {
+      y: number;
+      label: string;
+    }[];
+  }>;
+  /** Value axis on the left plus the zero baseline (inside the plot when the 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 effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WaterfallChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<WaterfallChartComponent, "lc-waterfall-chart", never, {
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGrid": {
+      "alias": "showGrid";
+      "required": false;
+      "isSignal": true;
+    };
+    "showConnectors": {
+      "alias": "showConnectors";
+      "required": false;
+      "isSignal": true;
+    };
+    "increaseColor": {
+      "alias": "increaseColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "decreaseColor": {
+      "alias": "decreaseColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalColor": {
+      "alias": "totalColor";
+      "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>;
+}