@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,124 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type DrawerPosition = 'left' | 'right';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Drawer component for slide-out overlay panels.
+ *
+ * Features:
+ * - Slide-in from left or right
+ * - Size presets (sm, md, lg, xl)
+ * - Optional backdrop overlay with click-to-close
+ * - Close on Escape key support
+ * - Heading text display
+ * - Content projection for arbitrary body content
+ * - Accessible with ARIA dialog role, focus trap and focus restore
+ *
+ * @example
+ * ```html
+ * <lc-drawer [open]="showPanel" position="right" size="md"
+ *            heading="Settings" (closed)="showPanel = false">
+ *   <p>Any content goes here</p>
+ * </lc-drawer>
+ * ```
+ */
+export declare class DrawerComponent implements OnDestroy {
+  private static nextId;
+  /** Whether the drawer is open. */
+  readonly open: import("@angular/core").InputSignal<boolean>;
+  /** Slide-in direction. */
+  readonly position: import("@angular/core").InputSignal<DrawerPosition>;
+  /** Predefined width (sm=320, md=400, lg=520, xl=640). */
+  readonly size: import("@angular/core").InputSignal<DrawerSize>;
+  /** Optional heading shown in the drawer header. */
+  readonly heading: import("@angular/core").InputSignal<string>;
+  /** Whether the overlay backdrop is shown. */
+  readonly hasOverlay: import("@angular/core").InputSignal<boolean>;
+  /** Whether clicking the overlay closes the drawer. */
+  readonly closeOnOverlayClick: import("@angular/core").InputSignal<boolean>;
+  /** Whether pressing Escape closes the drawer. */
+  readonly closeOnEscape: import("@angular/core").InputSignal<boolean>;
+  /** ARIA label for assistive technology. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the close button. */
+  readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted when the drawer should close. */
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  /** Internal visibility — stays true during the slide-out animation. */
+  protected _visible: import("@angular/core").WritableSignal<boolean>;
+  /** Width token → CSS. */
+  protected readonly widthValue: import("@angular/core").Signal<string>;
+  protected readonly panelClasses: import("@angular/core").Signal<string>;
+  private readonly overlayStack;
+  /** Identifies this instance in the overlay stack. */
+  private readonly drawerId;
+  private closeTimer?;
+  private originalOverflow?;
+  constructor();
+  ngOnDestroy(): void;
+  /**
+   * Handle backdrop click. Ignored while another overlay (menu, popover, …)
+   * sits above this drawer — the click belongs to that layer.
+   */
+  protected onOverlayClick(event: MouseEvent): void;
+  /** Handle close action. */
+  protected close(): void;
+  /**
+   * Escape closes the drawer only while it is the top-most overlay; the event
+   * is consumed either way so overlays underneath stay open.
+   */
+  protected onKeydown(event: KeyboardEvent): void;
+  private lockScroll;
+  private unlockScroll;
+  private clearCloseTimer;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "lc-drawer", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
+    "hasOverlay": {
+      "alias": "hasOverlay";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnOverlayClick": {
+      "alias": "closeOnOverlayClick";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnEscape": {
+      "alias": "closeOnEscape";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "closed": "closed";
+  }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,292 @@
+import { ControlValueAccessor } from "@angular/forms";
+import { InputAutocapitalize, InputEnterKeyHint } from "@lifecorner/angular-ui-kit/input";
+import * as i0 from "@angular/core";
+/**
+ * Email input component with built-in RFC 5322 validation.
+ *
+ * Features:
+ * - RFC 5322 regex email format validation
+ * - Real-time validation feedback on input
+ * - Valid/invalid visual indicators
+ * - Size presets (xs, sm, md, lg)
+ * - Helper text and error message display
+ * - Disabled and readonly states (read-only addresses can wrap: `readonlyWrap`)
+ * - Optional leading mail icon (`showIcon`)
+ * - Autofill and keyboard hints: `autocomplete`, `name`, `autocapitalize`, `spellcheck`, `enterkeyhint`
+ * - ControlValueAccessor integration for reactive forms
+ *
+ * @example
+ * ```html
+ * <lc-email-input label="Email" placeholder="you@example.com" [(ngModel)]="email" />
+ * ```
+ */
+export declare class EmailInputComponent implements ControlValueAccessor {
+  /**
+   * Input label (displayed above input)
+   * @default 'Email'
+   */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Placeholder text
+   * @default 'you@example.com'
+   */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Size of the input
+   * @default 'md'
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  /**
+   * Whether the input is disabled
+   * @default false
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the input is read-only
+   * @default false
+   */
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the input is required
+   * @default false
+   */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Custom error message (overrides validation error)
+   */
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Helper text to display below input
+   */
+  readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Whether to show validation feedback immediately
+   * @default false (validates on blur)
+   */
+  readonly validateOnInput: import("@angular/core").InputSignal<boolean>;
+  /**
+   * ARIA label for accessibility
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Native `autocomplete` (input purpose, WCAG 1.3.5): `email` (registration),
+   * `username` (the address as the sign-in name), `username webauthn` (sign-in:
+   * the browser offers passkeys in this field). 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` (`off` keeps keyboards from capitalising the address). Unset = no attribute. */
+  readonly autocapitalize: import("@angular/core").InputSignal<InputAutocapitalize | undefined>;
+  /** Native `spellcheck`. Unset = no attribute. */
+  readonly spellcheck: import("@angular/core").InputSignal<boolean | undefined>;
+  /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */
+  readonly enterkeyhint: import("@angular/core").InputSignal<InputEnterKeyHint | undefined>;
+  /**
+   * Show the leading mail icon. `false` gives the address the icon's width
+   * (about 36 px) — long addresses fit on a phone.
+   * @default true
+   */
+  readonly showIcon: import("@angular/core").InputSignal<boolean>;
+  /**
+   * While `readonly`: the address wraps onto more lines instead of being
+   * clipped. A hidden native input keeps value, `name` and `autocomplete`
+   * (e.g. `username` for password managers on a password page).
+   * @default false
+   */
+  readonly readonlyWrap: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the `*` of a `required` field; `false` keeps the required semantics without it.
+   * @default true
+   */
+  readonly requiredIndicator: import("@angular/core").InputSignal<boolean>;
+  /** Error shown for an empty `required` field. */
+  readonly requiredMessage: import("@angular/core").InputSignal<string>;
+  /** Error shown for a malformed address. */
+  readonly invalidMessage: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when email value changes
+   */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+  /**
+   * Emitted when validation state changes
+   */
+  readonly validationChange: import("@angular/core").OutputEmitterRef<{
+    valid: boolean;
+    error?: string;
+  }>;
+  /**
+   * Emitted when input receives focus
+   */
+  readonly focused: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when input loses focus
+   */
+  readonly blurred: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when Enter key is pressed
+   */
+  readonly enterPressed: import("@angular/core").OutputEmitterRef<void>;
+  readonly value: import("@angular/core").WritableSignal<string>;
+  private readonly touched;
+  private readonly _formDisabled;
+  /**
+   * RFC 5322 compliant email regex (simplified but robust)
+   * Validates: local-part@domain
+   * - Local part: alphanumeric, dots, hyphens, underscores, plus signs
+   * - Domain: alphanumeric, dots, hyphens with valid TLD
+   */
+  private readonly EMAIL_REGEX;
+  private onChange;
+  private onTouched;
+  /**
+   * Computed validation state
+   */
+  protected readonly isValid: import("@angular/core").Signal<boolean>;
+  /**
+   * Computed error message
+   */
+  protected readonly validationError: import("@angular/core").Signal<string | undefined>;
+  /**
+   * Computed disabled state
+   */
+  protected get isDisabled(): boolean;
+  constructor();
+  writeValue(value: string): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  /**
+   * Public method to trigger validation
+   */
+  validate(): boolean;
+  /**
+   * Public method to reset validation state
+   */
+  resetValidation(): void;
+  /**
+   * Handles value changes from base input
+   */
+  protected onValueChange(newValue: string): void;
+  /**
+   * Handles focus events
+   */
+  protected onFocus(): void;
+  /**
+   * Handles blur events
+   */
+  protected onBlur(): void;
+  /**
+   * Handles Enter key press
+   */
+  protected onEnterPressed(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<EmailInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<EmailInputComponent, "lc-email-input", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "validateOnInput": {
+      "alias": "validateOnInput";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "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;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonlyWrap": {
+      "alias": "readonlyWrap";
+      "required": false;
+      "isSignal": true;
+    };
+    "requiredIndicator": {
+      "alias": "requiredIndicator";
+      "required": false;
+      "isSignal": true;
+    };
+    "requiredMessage": {
+      "alias": "requiredMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalidMessage": {
+      "alias": "invalidMessage";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "valueChange": "valueChange";
+    "validationChange": "validationChange";
+    "focused": "focused";
+    "blurred": "blurred";
+    "enterPressed": "enterPressed";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-empty-state.d.ts

@@ -0,0 +1,81 @@
+import * as i0 from "@angular/core";
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+/** Heading level of `lc-empty-state`'s heading (3.3, G-9). */
+export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Empty state component for "no data" placeholder displays.
+ *
+ * Features:
+ * - Compact (sm) and page-level (md, lg) size modes
+ * - Optional icon from Tabler Icons library
+ * - Heading and description text
+ * - Action slot for projected CTA buttons
+ * - Centered layout with visual hierarchy
+ *
+ * @example
+ * ```html
+ * <lc-empty-state
+ *   icon="chart-bar"
+ *   heading="No Data"
+ *   message="No items found.">
+ *   <lc-button variant="primary">Get Started</lc-button>
+ * </lc-empty-state>
+ * ```
+ */
+export declare class EmptyStateComponent {
+  /**
+   * Size variant
+   * - `sm`: compact inline (inside cards), no padding
+   * - `md`: standard centered block (default)
+   * - `lg`: large page-level with extra padding
+   * @default 'md'
+   */
+  readonly size: import("@angular/core").InputSignal<EmptyStateSize>;
+  /**
+   * Tabler icon name to display above the heading
+   */
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Bold heading text
+   */
+  readonly heading: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Heading level of `heading` (`h2`–`h6`), so the empty state fits the
+   * page's outline. Semantics only, the look stays the same.
+   * @default 3
+   */
+  readonly headingLevel: import("@angular/core").InputSignal<EmptyStateHeadingLevel>;
+  /**
+   * Description text
+   */
+  readonly message: import("@angular/core").InputSignal<string | undefined>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "lc-empty-state", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-error-display.d.ts

@@ -0,0 +1,157 @@
+import { AlertVariant } from "@lifecorner/angular-ui-kit/alert";
+import * as i0 from "@angular/core";
+/**
+ * Error severity levels
+ */
+export type ErrorSeverity = 'error' | 'warning' | 'info';
+/**
+ * Error display component for authentication and application error messages.
+ *
+ * Features:
+ * - Automatic Cognito error code mapping to user-friendly messages
+ * - Severity levels (error, warning, info)
+ * - Custom error message override
+ * - Dismissible with close button
+ * - Accepts Error objects or custom error shapes
+ *
+ * @example
+ * ```html
+ * <lc-error-display [error]="cognitoError" [dismissible]="true" />
+ * <lc-error-display message="Invalid credentials" severity="error" />
+ * ```
+ */
+export declare class ErrorDisplayComponent {
+  /**
+   * Error object (Cognito or generic Error)
+   */
+  readonly error: import("@angular/core").InputSignal<Error | {
+    code?: string;
+    message?: string;
+  } | null | undefined>;
+  /**
+   * Custom error message (overrides error.message)
+   */
+  readonly message: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Error severity level
+   * @default 'error'
+   */
+  readonly severity: import("@angular/core").InputSignal<ErrorSeverity>;
+  /**
+   * Title for the error display
+   */
+  readonly title: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Whether the error can be dismissed
+   * @default true
+   */
+  readonly dismissible: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether to show icon
+   * @default true
+   */
+  readonly showIcon: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether to automatically hide after a delay
+   * @default false
+   */
+  readonly autoDismiss: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Auto-dismiss delay in milliseconds
+   * @default 5000
+   */
+  readonly autoDismissDelay: import("@angular/core").InputSignal<number>;
+  /** Default title for severity `error` (when no `title` is set). */
+  readonly errorTitleLabel: import("@angular/core").InputSignal<string>;
+  /** Default title for severity `warning`. */
+  readonly warningTitleLabel: import("@angular/core").InputSignal<string>;
+  /** Default title for severity `info`. */
+  readonly infoTitleLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Internal visibility state
+   */
+  protected readonly visible: import("@angular/core").WritableSignal<boolean>;
+  /**
+   * Computed error message
+   */
+  protected readonly errorMessage: import("@angular/core").Signal<string | undefined>;
+  /**
+   * Computed alert variant based on severity
+   */
+  protected readonly alertVariant: import("@angular/core").Signal<AlertVariant>;
+  /**
+   * Computed title for the error
+   */
+  protected readonly errorTitle: import("@angular/core").Signal<string | undefined>;
+  /**
+   * Auto-dismiss timer
+   */
+  private autoDismissTimer?;
+  constructor();
+  /**
+   * Handle alert dismissed
+   */
+  protected onDismissed(): void;
+  /**
+   * Clear auto-dismiss timer
+   */
+  private clearAutoDismissTimer;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ErrorDisplayComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ErrorDisplayComponent, "lc-error-display", never, {
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+    "severity": {
+      "alias": "severity";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoDismiss": {
+      "alias": "autoDismiss";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoDismissDelay": {
+      "alias": "autoDismissDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorTitleLabel": {
+      "alias": "errorTitleLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "warningTitleLabel": {
+      "alias": "warningTitleLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "infoTitleLabel": {
+      "alias": "infoTitleLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}