@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,361 @@
+import { ControlValueAccessor } from "@angular/forms";
+import { InputAutocapitalize, InputEnterKeyHint } from "@lifecorner/angular-ui-kit/input";
+import * as i0 from "@angular/core";
+/**
+ * Password strength information
+ */
+export interface PasswordStrength {
+  score: number;
+  level: 'Weak' | 'Fair' | 'Good' | 'Strong';
+  percentage: number;
+}
+/**
+ * Individual password requirement
+ */
+export interface PasswordRequirement {
+  label: string;
+  met: boolean;
+  icon: string;
+}
+/**
+ * How the strength meter scores a password:
+ * - `composition` (default, 3.2): share of five rules met — length and four character classes.
+ * - `length`: the length only, as NIST SP 800-63B asks (no composition rules):
+ *   below `minLength` Weak, from it Fair, from 1.5 × Good, from 2 × Strong.
+ */
+export type PasswordStrengthMode = 'composition' | 'length';
+/**
+ * Password Input Component with Show/Hide Toggle and Strength Meter
+ *
+ * Features:
+ * - Show/Hide password toggle (eye icon)
+ * - Real-time password strength indicator (Weak/Fair/Good/Strong)
+ * - Visual strength meter bar with color coding
+ * - Validation feedback (length, uppercase, lowercase, digit, symbol)
+ * - Accessible ARIA attributes
+ * - Reactive Forms ControlValueAccessor implementation
+ *
+ * Strength levels (share of the 5 requirements met):
+ * - Weak: < 40%
+ * - Fair: 40–59%
+ * - Good: 60–79%
+ * - Strong: >= 80%
+ *
+ * Requirements:
+ * - Minimum 8 characters
+ * - At least one uppercase letter (A-Z)
+ * - At least one lowercase letter (a-z)
+ * - At least one digit (0-9)
+ * - At least one symbol (!@#$%^&*()_+-=[]{}|;:,.<>?)
+ *
+ * NIST-style use (3.3): `strengthMode="length"`, `minLength`, `helperText` for
+ * the rule, or no meter and no checklist at all.
+ *
+ * Usage:
+ * ```html
+ * <lc-password-input
+ *   [formControl]="passwordControl"
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   [showStrengthMeter]="true"
+ * ></lc-password-input>
+ * ```
+ */
+export declare class PasswordInputComponent implements ControlValueAccessor {
+  /** Label text (displayed above the input) */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Placeholder text */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Whether to show the strength meter bar + level text */
+  readonly showStrengthMeter: import("@angular/core").InputSignal<boolean>;
+  /** Whether to show the requirements checklist */
+  readonly showRequirements: import("@angular/core").InputSignal<boolean>;
+  /** Whether the input is disabled */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Whether the input is required */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the `*` of a `required` field; `false` keeps `required` and
+   * `aria-required` without the asterisk.
+   * @default true
+   */
+  readonly requiredIndicator: import("@angular/core").InputSignal<boolean>;
+  /** Error message to display (also sets aria-invalid) */
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /** Help below the field, e.g. the password rule; linked by `aria-describedby`. The error replaces it. */
+  readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Minimum length: the native `minlength` and the length rule of the
+   * requirement list and the meter. Unset = no attribute, rule of 8 (3.2).
+   */
+  readonly minLength: import("@angular/core").InputSignal<number | undefined>;
+  /** How the strength meter scores: `composition` (3.2) or `length` (NIST, no character-class rules). */
+  readonly strengthMode: import("@angular/core").InputSignal<PasswordStrengthMode>;
+  /**
+   * Native `autocomplete`: `current-password` (sign-in), `new-password`
+   * (registration, change), so password managers fill and save the right
+   * password. Unset = no attribute.
+   */
+  readonly autocomplete: import("@angular/core").InputSignal<string | undefined>;
+  /** Native `name` of the inner input. Unset = no attribute. */
+  readonly name: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Native `autocapitalize`. Default `off`: a shown password must not be
+   * capitalised by the on-screen keyboard.
+   * @default 'off'
+   */
+  readonly autocapitalize: import("@angular/core").InputSignal<InputAutocapitalize>;
+  /**
+   * Native `spellcheck`. Default `false`: a shown password must never go to a
+   * spell checker (some send text to a server).
+   * @default false
+   */
+  readonly spellcheck: import("@angular/core").InputSignal<boolean>;
+  /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */
+  readonly enterkeyhint: import("@angular/core").InputSignal<InputEnterKeyHint | undefined>;
+  /** Accessible name of the visibility toggle while the password is hidden. */
+  readonly showPasswordAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the visibility toggle while the password is shown. */
+  readonly hidePasswordAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader prefix of the strength level (`showStrengthMeter`). */
+  readonly strengthLabel: import("@angular/core").InputSignal<string>;
+  /** Shown for strength level `Weak`. */
+  readonly weakLabel: import("@angular/core").InputSignal<string>;
+  /** Shown for strength level `Fair`. */
+  readonly fairLabel: import("@angular/core").InputSignal<string>;
+  /** Shown for strength level `Good`. */
+  readonly goodLabel: import("@angular/core").InputSignal<string>;
+  /** Shown for strength level `Strong`. */
+  readonly strongLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the requirement list (`showRequirements`). */
+  readonly requirementsAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Requirement: at least 8 characters. */
+  readonly minLengthRequirementLabel: import("@angular/core").InputSignal<string>;
+  /** Requirement: one uppercase letter. */
+  readonly uppercaseRequirementLabel: import("@angular/core").InputSignal<string>;
+  /** Requirement: one lowercase letter. */
+  readonly lowercaseRequirementLabel: import("@angular/core").InputSignal<string>;
+  /** Requirement: one digit. */
+  readonly digitRequirementLabel: import("@angular/core").InputSignal<string>;
+  /** Requirement: one symbol. */
+  readonly symbolRequirementLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader suffix of a met requirement. */
+  readonly requirementMetLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader suffix of an unmet requirement. */
+  readonly requirementNotMetLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted whenever the value (and thus the strength) is recalculated */
+  readonly strengthChange: import("@angular/core").OutputEmitterRef<PasswordStrength>;
+  /** Per-instance ids so label/error linkage survives several inputs on one page */
+  readonly inputId: string;
+  readonly errorId: string;
+  readonly helperId: string;
+  readonly strengthId: string;
+  readonly value: import("@angular/core").WritableSignal<string>;
+  readonly isPasswordVisible: import("@angular/core").WritableSignal<boolean>;
+  private readonly formDisabled;
+  /** Computed disabled state from both input and form control */
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /** The length rule: `minLength`, else 8. */
+  readonly requiredLength: import("@angular/core").Signal<number>;
+  readonly requirements: import("@angular/core").Signal<PasswordRequirement[]>;
+  readonly strength: import("@angular/core").Signal<PasswordStrength>;
+  /** The strength level as shown to the user (the level itself stays English: it is API and class name). */
+  readonly strengthText: import("@angular/core").Signal<string>;
+  /** Lower-cased level for the modifier classes (lc-strength-weak …) */
+  readonly strengthLevelClass: import("@angular/core").Signal<string>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  private onChange;
+  private onTouched;
+  /**
+   * 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;
+  /**
+   * Toggle password visibility
+   */
+  togglePasswordVisibility(): void;
+  /**
+   * Handle input changes
+   */
+  onInput(event: Event): void;
+  /**
+   * Handle blur event
+   */
+  onBlur(): void;
+  /** 3.2 scoring: the share of the five rules met. */
+  private compositionStrength;
+  /** NIST scoring: the length against `minLength` (score 0–4 like the four levels). */
+  private lengthStrength;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PasswordInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PasswordInputComponent, "lc-password-input", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "showStrengthMeter": {
+      "alias": "showStrengthMeter";
+      "required": false;
+      "isSignal": true;
+    };
+    "showRequirements": {
+      "alias": "showRequirements";
+      "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;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "minLength": {
+      "alias": "minLength";
+      "required": false;
+      "isSignal": true;
+    };
+    "strengthMode": {
+      "alias": "strengthMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocapitalize": {
+      "alias": "autocapitalize";
+      "required": false;
+      "isSignal": true;
+    };
+    "spellcheck": {
+      "alias": "spellcheck";
+      "required": false;
+      "isSignal": true;
+    };
+    "enterkeyhint": {
+      "alias": "enterkeyhint";
+      "required": false;
+      "isSignal": true;
+    };
+    "showPasswordAriaLabel": {
+      "alias": "showPasswordAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "hidePasswordAriaLabel": {
+      "alias": "hidePasswordAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "strengthLabel": {
+      "alias": "strengthLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "weakLabel": {
+      "alias": "weakLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fairLabel": {
+      "alias": "fairLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "goodLabel": {
+      "alias": "goodLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "strongLabel": {
+      "alias": "strongLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "requirementsAriaLabel": {
+      "alias": "requirementsAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "minLengthRequirementLabel": {
+      "alias": "minLengthRequirementLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "uppercaseRequirementLabel": {
+      "alias": "uppercaseRequirementLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "lowercaseRequirementLabel": {
+      "alias": "lowercaseRequirementLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "digitRequirementLabel": {
+      "alias": "digitRequirementLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "symbolRequirementLabel": {
+      "alias": "symbolRequirementLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "requirementMetLabel": {
+      "alias": "requirementMetLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "requirementNotMetLabel": {
+      "alias": "requirementNotMetLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "strengthChange": "strengthChange";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,58 @@
+import * as i0 from "@angular/core";
+export interface PieSegment {
+  /** Share of the whole. Non-finite and negative values count as 0. */
+  value: number;
+  label?: string;
+  color?: string;
+}
+export type PieChartSize = 'sm' | 'md' | 'lg';
+export declare class PieChartComponent {
+  segments: import("@angular/core").InputSignal<PieSegment[]>;
+  size: import("@angular/core").InputSignal<PieChartSize>;
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing
+   * every segment's label and share, e.g. "Pie chart: A 40%, B 60%".
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly SIZE_MAP;
+  protected readonly svgSize: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  protected readonly arcs: import("@angular/core").Signal<{
+    d: string;
+    color: string;
+    label: string;
+    percentage: number;
+  }[]>;
+  protected readonly legendItems: import("@angular/core").Signal<{
+    color: string;
+    label: string;
+    percentage: number;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PieChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PieChartComponent, "lc-pie-chart", never, {
+    "segments": {
+      "alias": "segments";
+      "required": true;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,89 @@
+import * as i0 from "@angular/core";
+/**
+ * Status of a single pipeline node.
+ * - complete: finished (teal check)
+ * - current:  in progress / active (teal, subtle pulse)
+ * - pending:  not started yet (muted, hollow)
+ * - warning:  needs attention (amber)
+ * - error:    failed (red)
+ */
+export type PipelineStatus = 'complete' | 'current' | 'pending' | 'warning' | 'error';
+export interface PipelineStep {
+  /** Node label. */
+  label: string;
+  /** Optional secondary line under the label. */
+  caption?: string;
+  /** Status that drives the node color and default icon. */
+  status: PipelineStatus;
+  /** Optional icon (Tabler name) overriding the status default. */
+  icon?: string;
+  /** Optional opaque payload echoed back in `stepClick`. */
+  id?: string;
+}
+export type PipelineOrientation = 'horizontal' | 'vertical';
+export type PipelineSize = 'sm' | 'md';
+/**
+ * Pipeline — a status timeline of connected process nodes.
+ *
+ * Unlike {@link StepperComponent} (a navigation stepper whose states derive
+ * from the active index), each pipeline node carries its own explicit status,
+ * so it can show completed, current, pending, warning and error nodes in the
+ * same chain — with an optional caption under each label.
+ *
+ * @example
+ * ```html
+ * <lc-pipeline
+ *   [steps]="[
+ *     { label: 'Connect', caption: 'Token valid', status: 'complete' },
+ *     { label: 'Checkout', caption: '2 hours ago', status: 'complete' },
+ *     { label: 'Analyze', caption: 'Running…', status: 'current' },
+ *     { label: 'Graph', caption: 'Out of date', status: 'warning' }
+ *   ]" />
+ * ```
+ */
+export declare class PipelineComponent {
+  /** Ordered pipeline nodes. */
+  readonly steps: import("@angular/core").InputSignal<readonly PipelineStep[]>;
+  /** Layout direction. @default 'horizontal' */
+  readonly orientation: import("@angular/core").InputSignal<PipelineOrientation>;
+  /**
+   * Node/connector scale.
+   * - md: default nodes (1.75rem)
+   * - sm: compact spine — smaller nodes, thinner connectors, tighter grid
+   * @default 'md'
+   */
+  readonly size: import("@angular/core").InputSignal<PipelineSize>;
+  /** Whether nodes are clickable (emits `stepClick`). @default false */
+  readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /** Emitted when a node is activated (only when `clickable`). */
+  readonly stepClick: import("@angular/core").OutputEmitterRef<PipelineStep>;
+  protected readonly hostClass: import("@angular/core").Signal<string>;
+  protected iconFor(step: PipelineStep): string;
+  protected stepClass(step: PipelineStep): string;
+  protected onActivate(step: PipelineStep): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PipelineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PipelineComponent, "lc-pipeline", never, {
+    "steps": {
+      "alias": "steps";
+      "required": true;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "stepClick": "stepClick";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,104 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverTrigger = 'click' | 'hover';
+/**
+ * Popover component for displaying rich floating content.
+ *
+ * Features:
+ * - Position options (top, bottom, left, right)
+ * - Click or hover trigger modes
+ * - Optional arrow indicator
+ * - Click-outside and Escape to close (top-most overlay only)
+ * - Open state change event
+ * - Content projection for trigger and body
+ *
+ * @example
+ * ```html
+ * <lc-popover position="bottom" trigger="click">
+ *   <button popover-trigger>Open</button>
+ *   <div popover-content>Rich content here</div>
+ * </lc-popover>
+ * ```
+ */
+export declare class PopoverComponent implements OnDestroy {
+  private static nextId;
+  /** Identifies this instance in the overlay stack. */
+  private readonly overlayId;
+  /**
+   * Position relative to the trigger element.
+   * @default 'bottom'
+   */
+  position: import("@angular/core").InputSignal<PopoverPosition>;
+  /**
+   * How the popover is triggered.
+   * @default 'click'
+   */
+  trigger: import("@angular/core").InputSignal<PopoverTrigger>;
+  /**
+   * Whether to show an arrow pointing at the trigger.
+   * @default true
+   */
+  showArrow: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Emitted when the popover opens or closes.
+   */
+  readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected isOpen: import("@angular/core").WritableSignal<boolean>;
+  /** Id of the panel, referenced by the trigger's `aria-controls`. */
+  protected readonly panelId: string;
+  protected panelClasses: import("@angular/core").Signal<string>;
+  private readonly elementRef;
+  private readonly renderer;
+  private readonly overlayStack;
+  constructor();
+  /**
+   * Click outside closes the popover — only while it is the top-most overlay,
+   * so a click inside a layer above it (a modal opened from the popover) is
+   * left alone.
+   */
+  onDocumentClick(event: MouseEvent): void;
+  /**
+   * Escape closes the popover only while it is the top-most overlay; the event
+   * is consumed so overlays underneath stay open.
+   */
+  onEscape(event: Event): void;
+  ngOnDestroy(): void;
+  protected toggle(): void;
+  protected open(): void;
+  protected close(): void;
+  protected onMouseEnter(): void;
+  protected onMouseLeave(): void;
+  /**
+   * The element that carries the popup ARIA attributes and receives focus back:
+   * the projected `[popover-trigger]` node itself when it is natively
+   * interactive, otherwise the first interactive element inside it (e.g. the
+   * `<button>` inside an `<lc-button popover-trigger>`).
+   */
+  private triggerElement;
+  /**
+   * Closing removes the panel from the DOM; if focus is inside it (Escape after
+   * tabbing in) it would silently drop to `<body>`, so send it back to the trigger.
+   */
+  private restoreFocus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "lc-popover", never, {
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "trigger": {
+      "alias": "trigger";
+      "required": false;
+      "isSignal": true;
+    };
+    "showArrow": {
+      "alias": "showArrow";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "openChange": "openChange";
+  }, never, ["[popover-trigger]", "[popover-content]"], true, never>;
+}