@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/types/lifecorner-angular-ui-kit-date-range-picker.d.ts

@@ -0,0 +1,126 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+export interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+export declare class DateRangePickerComponent implements ControlValueAccessor {
+  private static nextId;
+  /** Per-instance ids for label ↔ trigger ↔ panel ARIA wiring */
+  readonly triggerId: string;
+  readonly labelId: string;
+  readonly valueId: string;
+  readonly panelId: string;
+  private readonly elRef;
+  private readonly triggerEl;
+  private readonly panelEl;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  readonly minDate: import("@angular/core").InputSignal<Date | null>;
+  readonly maxDate: import("@angular/core").InputSignal<Date | null>;
+  /** BCP 47 locale for the displayed dates, month title and weekday headers */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the previous-month button. */
+  readonly previousMonthAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the next-month button. */
+  readonly nextMonthAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly rangeChange: import("@angular/core").OutputEmitterRef<DateRange>;
+  protected isOpen: import("@angular/core").WritableSignal<boolean>;
+  protected range: import("@angular/core").WritableSignal<DateRange>;
+  protected selecting: import("@angular/core").WritableSignal<"start" | "end">;
+  protected hoveredDate: import("@angular/core").WritableSignal<Date | null>;
+  protected viewingMonth: import("@angular/core").WritableSignal<Date>;
+  /** Disabled via `setDisabledState` (reactive forms) */
+  private readonly formDisabled;
+  /** Effective disabled state: `disabled` input OR form control disabled */
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  private onChange;
+  private onTouched;
+  protected readonly displayValue: import("@angular/core").Signal<string>;
+  protected readonly monthLabel: import("@angular/core").Signal<string>;
+  /** Monday-first weekday headers in the configured locale (e.g. Mo…So / Mon…Sun) */
+  protected readonly weekdays: import("@angular/core").Signal<string[]>;
+  protected readonly calendarDays: import("@angular/core").Signal<{
+    date: Date;
+    inMonth: boolean;
+    disabled: boolean;
+    ariaLabel: string;
+  }[]>;
+  constructor();
+  writeValue(value: DateRange | null): void;
+  registerOnChange(fn: (val: DateRange) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  protected toggle(): void;
+  protected close(): void;
+  /** Escape (from the trigger or anywhere in the panel) closes the picker */
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onDocumentClick(event: MouseEvent): void;
+  protected prevMonth(): void;
+  protected nextMonth(): void;
+  protected selectDate(date: Date): void;
+  protected onDayHover(date: Date): void;
+  protected isStart(date: Date): boolean;
+  protected isEnd(date: Date): boolean;
+  protected isInRange(date: Date): boolean;
+  protected isToday(date: Date): boolean;
+  protected clearRange(event: Event): void;
+  /** min/max are compared by calendar day — `minDate = new Date()` keeps today selectable */
+  private isDateDisabled;
+  private dayStamp;
+  private sameDay;
+  private emitRange;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "lc-date-range-picker", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "minDate": {
+      "alias": "minDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxDate": {
+      "alias": "maxDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousMonthAriaLabel": {
+      "alias": "previousMonthAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextMonthAriaLabel": {
+      "alias": "nextMonthAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "rangeChange": "rangeChange";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,363 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+export type DateValue = Date | string | null;
+/**
+ * Datepicker component for date selection with calendar overlay.
+ *
+ * Features:
+ * - Calendar popup with month and year navigation
+ * - Manual date entry in the configured format
+ * - Min/max date constraints
+ * - Disabled specific dates and weekends
+ * - Configurable date format string
+ * - Variant styles (outline, filled)
+ * - Size presets (xs, sm, md, lg)
+ * - Disabled and readonly states
+ * - ControlValueAccessor integration for reactive forms
+ *
+ * @example
+ * ```html
+ * <lc-datepicker placeholder="Select date" [(ngModel)]="selectedDate" />
+ * ```
+ */
+export declare class DatepickerComponent implements ControlValueAccessor {
+  private static nextId;
+  /** Per-instance id for the input; helper/error text ids derive from it. */
+  readonly inputId: string;
+  private readonly datepickerInput;
+  private readonly calendarPanel;
+  /**
+   * Visual variant of the datepicker
+   */
+  readonly variant: import("@angular/core").InputSignal<"outline" | "filled">;
+  /**
+   * Size of the datepicker
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  /**
+   * Whether the datepicker is disabled
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the datepicker is in error state
+   */
+  readonly error: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the datepicker is required
+   */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the datepicker is readonly
+   */
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Placeholder text
+   */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Helper text displayed below the datepicker
+   */
+  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>;
+  /**
+   * Date format string (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY')
+   */
+  readonly format: import("@angular/core").InputSignal<string>;
+  /**
+   * Minimum selectable date (compared by calendar day, time of day is ignored)
+   */
+  readonly minDate: import("@angular/core").InputSignal<Date | undefined>;
+  /**
+   * Maximum selectable date (compared by calendar day, time of day is ignored)
+   */
+  readonly maxDate: import("@angular/core").InputSignal<Date | undefined>;
+  /**
+   * Array of disabled dates
+   */
+  readonly disabledDates: import("@angular/core").InputSignal<Date[]>;
+  /**
+   * Whether to disable weekends
+   */
+  readonly disableWeekends: import("@angular/core").InputSignal<boolean>;
+  /** BCP 47 locale for month and weekday names and the day buttons' accessible names (e.g. `'de-DE'`). Empty keeps the built-in English names. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** First column of the grid: 0 Sunday (default) … 6 Saturday — 1 for Monday. */
+  readonly firstDayOfWeek: import("@angular/core").InputSignal<number>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the calendar dialog. */
+  readonly dialogAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the previous-month button. */
+  readonly previousMonthAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the next-month button. */
+  readonly nextMonthAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the "go to today" button. */
+  readonly todayLabel: import("@angular/core").InputSignal<string>;
+  /** Appended to the selected day's accessible name (`…, selected`). */
+  readonly selectedAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when date selection changes
+   */
+  readonly dateChange: import("@angular/core").OutputEmitterRef<Date | null>;
+  /**
+   * Emitted when calendar opens
+   */
+  readonly opened: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when calendar closes
+   */
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  readonly selectedDate: import("@angular/core").WritableSignal<Date | null>;
+  readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+  readonly currentMonth: import("@angular/core").WritableSignal<number>;
+  readonly currentYear: import("@angular/core").WritableSignal<number>;
+  /** 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 formattedDate: import("@angular/core").Signal<string>;
+  /**
+   * Text currently shown in the input. Follows the selected date, but the user
+   * can type freely; only a complete, valid date is committed to the model.
+   */
+  readonly inputValue: import("@angular/core").WritableSignal<string>;
+  weekDays: string[];
+  monthNames: string[];
+  /** Month name in the header: `locale` when set, the English names otherwise. */
+  readonly currentMonthName: import("@angular/core").Signal<string>;
+  /** Weekday headers in grid order, starting at `firstDayOfWeek`. */
+  readonly weekdayLabels: import("@angular/core").Signal<string[]>;
+  /** `firstDayOfWeek` clamped to 0–6. */
+  private readonly gridStart;
+  /** id of the helper/error text the input is described by (aria-describedby) */
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /**
+   * Computed classes for the datepicker input element
+   */
+  readonly datepickerClasses: import("@angular/core").Signal<string>;
+  private readonly document;
+  private onChange;
+  private onTouched;
+  /**
+   * Toggle calendar open/closed
+   */
+  toggle(): void;
+  /**
+   * Open calendar
+   */
+  open(): void;
+  /**
+   * Close calendar. Idempotent: the overlay's `detach` re-enters here after
+   * `isOpen` flips, and that second call must not emit `closed` again.
+   */
+  close(): void;
+  /**
+   * Select a date
+   */
+  selectDate(date: Date): void;
+  /**
+   * Clear selected date
+   */
+  clear(): void;
+  /**
+   * Check if a date is disabled
+   */
+  isDateDisabled(date: Date): boolean;
+  /**
+   * Check if date is today
+   */
+  isToday(date: Date): boolean;
+  /** Accessible name of a day button: the full date, plus `selectedAriaLabel` when selected. */
+  protected dayAriaLabel(date: Date): string;
+  /**
+   * Check if date is selected
+   */
+  isSelectedDate(date: Date): boolean;
+  /**
+   * Generate calendar days for current month
+   */
+  generateCalendarDays(): Date[];
+  /**
+   * Navigate to next month
+   */
+  nextMonth(): void;
+  /**
+   * Navigate to previous month
+   */
+  previousMonth(): void;
+  /**
+   * Navigate to today
+   */
+  goToToday(): void;
+  /**
+   * Handle input change (manual date entry). Partial input is kept as text
+   * only; the model changes once the text is a complete, valid, selectable date.
+   */
+  onInputChange(value: string): void;
+  /**
+   * Handle keyboard navigation
+   */
+  onKeyDown(event: KeyboardEvent): void;
+  /**
+   * Handle blur event: mark touched and drop any partial text that never became a date.
+   */
+  onBlur(): void;
+  /**
+   * Handle click outside
+   */
+  onClickOutside(): void;
+  writeValue(value: DateValue): void;
+  registerOnChange(fn: (value: Date | null) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  /**
+   * Check if date is in current month
+   */
+  isCurrentMonth(date: Date): boolean;
+  private commitDate;
+  private showMonthOf;
+  private restoreFocusFromPanel;
+  private startOfDay;
+  /**
+   * Check if two dates are the same day
+   */
+  private isSameDate;
+  private formatDate;
+  /**
+   * Strict parse: the text must match the format's length, carry digits at the
+   * YYYY/MM/DD positions and round-trip through formatDate (which rejects
+   * things like month 13 or Feb 31 that `new Date` would silently roll over).
+   * Returns null for partial or invalid input.
+   */
+  private parseDate;
+  protected getInputValue(event: Event): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "lc-datepicker", 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;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "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;
+    };
+    "format": {
+      "alias": "format";
+      "required": false;
+      "isSignal": true;
+    };
+    "minDate": {
+      "alias": "minDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxDate": {
+      "alias": "maxDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDates": {
+      "alias": "disabledDates";
+      "required": false;
+      "isSignal": true;
+    };
+    "disableWeekends": {
+      "alias": "disableWeekends";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "firstDayOfWeek": {
+      "alias": "firstDayOfWeek";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "dialogAriaLabel": {
+      "alias": "dialogAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousMonthAriaLabel": {
+      "alias": "previousMonthAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextMonthAriaLabel": {
+      "alias": "nextMonthAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "todayLabel": {
+      "alias": "todayLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedAriaLabel": {
+      "alias": "selectedAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dateChange": "dateChange";
+    "opened": "opened";
+    "closed": "closed";
+  }, never, never, true, never>;
+}