import * as _angular_core from '@angular/core'; import { QueryList, ElementRef, WritableSignal, ViewContainerRef, ComponentRef, OnDestroy, EventEmitter, PipeTransform } from '@angular/core'; import * as ng_laydate from 'ng-laydate'; import { ControlValueAccessor } from '@angular/forms'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; /** * Represents a complete date and time object with year, month, date, hours, minutes, and seconds. */ interface DateObject { /** Year (e.g., 2026) */ year: number; /** Month index (0-11 for Jan-Dec) */ month: number; /** Day of the month (1-31) */ date: number; /** Hours (0-23) */ hours: number; /** Minutes (0-59) */ minutes: number; /** Seconds (0-59) */ seconds: number; } /** * Represents a single date cell structure on the calendar grid. */ interface CalendarDay { /** Belongs to previous month, current month, or next month */ type: 'prev' | 'current' | 'next'; /** Day number of the month (1-31) */ day: number; /** Month index (0-11) */ month: number; /** Year (e.g., 2026) */ year: number; /** Whether the date cell is disabled */ disabled: boolean; /** Custom badge or festival marker label */ mark: string; /** Holiday badge ('休' for holiday, '班' for workday) */ holiday?: '休' | '班'; /** Custom injected HTML content */ customContent?: string; } /** Supported international language codes */ type SupportedLang = 'cn' | 'en' | 'tw' | 'ja' | 'ko' | 'es' | 'de' | 'fr'; /** * Internationalization dictionary structure for datepicker labels and messages. */ interface LaydateI18n { weeks?: string[]; months?: string[]; time?: string[]; timeTips?: string; backToDate?: string; hint?: string; startTime?: string; endTime?: string; dateTips?: string; monthTips?: string; yearTips?: string; duration?: string; tools?: { confirm?: string; clear?: string; now?: string; }; formatYear?: (year: number) => string; formatMonth?: (month: number) => string; invalidRange?: string; invalidDate?: string; invalidEndEarly?: string; } /** * Fully populated internal i18n dictionary after defaults merging. */ interface FullLaydateI18n { weeks: string[]; months: string[]; time: string[]; timeTips: string; backToDate: string; hint: string; startTime: string; endTime: string; dateTips: string; monthTips: string; yearTips: string; duration: string; tools: { confirm: string; clear: string; now: string; }; formatYear: (year: number) => string; formatMonth: (month: number) => string; invalidRange: string; invalidDate: string; invalidEndEarly: string; } /** * Callback function to dynamically intercept, format, or suppress toast hint messages. */ type LaydateHintFormatter = (type: 'invalidRange' | 'invalidDate' | 'invalidEndEarly' | 'custom', meta: { min?: string; max?: string; date?: DateObject; defaultText: string; }) => string | false | void; /** * NgLaydate configuration options interface. */ interface LaydateConfig { /** Target element reference or selector string */ elem?: any; /** Custom unique ID for the picker instance */ id?: string; /** Picker selection type ('year' | 'month' | 'date' | 'time' | 'datetime'), defaults to 'date' */ type?: 'year' | 'month' | 'date' | 'time' | 'datetime'; /** Enable range selection. Can be true (default separator '-') or custom separator string (e.g., ' ~ ') */ range?: boolean | string; /** Whether to link left and right panel months continuously, defaults to false */ rangeLinked?: boolean; /** Date output formatting template (e.g., 'yyyy-MM-dd HH:mm:ss') */ format?: string; /** Initial value as formatted string or Date object */ value?: string | Date; /** Whether to automatically populate initial value into the input element, defaults to true */ isInitValue?: boolean; /** Minimum selectable date as string, Date, or relative day offset (e.g., -7) */ min?: string | Date | number; /** Maximum selectable date as string, Date, or relative day offset (e.g., 7) */ max?: string | Date | number; /** Event type that triggers the picker panel (e.g., 'click', 'focus') */ trigger?: string; /** Dark mode toggle: true, false, 'system'/'auto' (follow OS dark mode), or dynamic reactive getter function */ darkMode?: boolean | number | 'system' | 'auto' | (() => boolean | number | 'system' | 'auto'); /** Whether to display the picker panel immediately after initialization */ show?: boolean; /** Positioning strategy ('absolute' | 'fixed' | 'static') */ position?: 'absolute' | 'fixed' | 'static'; /** CSS z-index for the picker panel overlay */ zIndex?: number; /** Whether to display the bottom footer bar, defaults to true */ showBottom?: boolean; /** List and order of footer buttons to display, defaults to ['clear', 'now', 'confirm'] */ btns?: string[]; /** Language configuration. Supports built-in codes ('cn'|'en'|'tw'|'ja'|'ko'|'es'|'de'|'fr'), custom lang string, or full LaydateI18n dictionary */ lang?: SupportedLang | (string & {}) | LaydateI18n | (() => SupportedLang | string | LaydateI18n); /** Visual theme name ('default', 'molv', 'grid', 'circle', 'fullpanel', 'dark') or Hex color (e.g., '#16b777' or ['grid', '#9C27B0']) */ theme?: string | string[]; /** Whether to show solar terms and festivals on the calendar grid */ calendar?: boolean; /** Custom date markers map (e.g., {'0-0-15': 'Mid'}) or marker generator function */ mark?: Record | ((ymd: { year: number; month: number; date: number; }, render: (input: string | Record) => string) => string | void); /** Simple shorthand key-value pairs (e.g., {'yesterday': '2024-01-01'}) */ shorthand?: Record; /** Holiday and workday date badges [[holidays], [workdays]] */ holidays?: [string[], string[]]; /** Background overlay configuration, supports boolean or opacity number (0.5) */ shade?: boolean | number; /** Advanced shortcut buttons for quick date ranges and presets */ shortcuts?: { text: string; value: any | (() => any); }[]; /** Automatically confirm and close panel upon selection (single mode only), defaults to true */ autoConfirm?: boolean; /** Whether to display live selection preview text in the footer bar */ isPreview?: boolean; /** Start day of the week (0-6, 0 for Sunday, 1 for Monday), defaults to 0 */ weekStart?: number; /** Callback function to disable specific dates. Returns true to disable */ disabledDate?: (date: Date, type?: string) => boolean; /** Callback function to disable specific hours, minutes, or seconds */ disabledTime?: (date: Date, type?: string) => { hours?: () => number[]; minutes?: (h: number) => number[]; seconds?: (h: number, m: number) => number[]; }; /** Custom renderer for date cell HTML content */ cellRender?: (ymd: { year: number; month: number; date: number; }, render: (content: string) => void, info: { type: string; }) => void; /** Display formatter for input box text only without affecting model value */ formatToDisplay?: (value: string) => string; /** Custom i18n dictionary overrides */ i18n?: Partial; /** Custom hint message formatter or interceptor callback */ hintFormatter?: LaydateHintFormatter; /** Triggered when the picker panel completes rendering */ ready?: (date: DateObject) => void; /** Triggered whenever selection value changes */ change?: (value: string, date: DateObject, endDate?: DateObject) => void; /** Triggered when selection is confirmed or completed */ done?: (value: string, date: DateObject, endDate?: DateObject) => void; /** Triggered when the picker panel is closed */ close?: () => void; /** Triggered when the "Confirm" button is clicked */ onConfirm?: (value: string, date: DateObject, endDate?: DateObject) => void; /** Triggered when the "Now" button is clicked */ onNow?: (value: string, date: DateObject, endDate?: DateObject) => void; /** Triggered when the "Clear" button is clicked */ onClear?: (value: string, date: DateObject, endDate?: DateObject) => void; } declare class NgLaydateComponent { private service; private el; private platformId; private destroyRef; hoursOls: QueryList>; minutesOls: QueryList>; secondsOls: QueryList>; systemDarkMode: WritableSignal; config: _angular_core.InputSignal; select: _angular_core.OutputEmitterRef; clearOutput: _angular_core.OutputEmitterRef; currentDate: WritableSignal; isCleared: WritableSignal; startDate: WritableSignal; endDate: WritableSignal; rangeState: WritableSignal<"none" | "selecting">; hoverDate: WritableSignal; leftDate: WritableSignal; rightDate: WritableSignal; view: WritableSignal<"year" | "month" | "date" | "time">; leftView: WritableSignal<"year" | "month" | "date" | "time">; rightView: WritableSignal<"year" | "month" | "date" | "time">; yearList: WritableSignal; leftYearList: WritableSignal; rightYearList: WritableSignal; private initialized; private lastValueProp; timeList: { hours: number[]; minutes: number[]; seconds: number[]; }; calendarData: _angular_core.Signal; leftCalendar: _angular_core.Signal; rightCalendar: _angular_core.Signal; finalConfig: _angular_core.Signal<{ elem?: any; id?: string; type?: "year" | "month" | "date" | "time" | "datetime"; range?: boolean | string; rangeLinked?: boolean; format?: string; value?: string | Date; isInitValue?: boolean; min?: string | Date | number; max?: string | Date | number; trigger?: string; darkMode?: boolean | number | "system" | "auto" | (() => boolean | number | "system" | "auto"); show?: boolean; position?: "absolute" | "fixed" | "static"; zIndex?: number; showBottom: boolean; btns: string[]; lang?: ng_laydate.SupportedLang | (string & {}) | LaydateI18n | (() => ng_laydate.SupportedLang | string | LaydateI18n); theme?: string | string[]; calendar?: boolean; mark?: Record | ((ymd: { year: number; month: number; date: number; }, render: (input: string | Record) => string) => string | void); shorthand?: Record; holidays?: [string[], string[]]; shade?: boolean | number; shortcuts?: { text: string; value: any | (() => any); }[]; autoConfirm: boolean; isPreview?: boolean; weekStart?: number; disabledDate?: (date: Date, type?: string) => boolean; disabledTime?: (date: Date, type?: string) => { hours?: () => number[]; minutes?: (h: number) => number[]; seconds?: (h: number, m: number) => number[]; }; cellRender?: (ymd: { year: number; month: number; date: number; }, render: (content: string) => void, info: { type: string; }) => void; formatToDisplay?: (value: string) => string; i18n?: Partial; hintFormatter?: ng_laydate.LaydateHintFormatter; ready?: (date: DateObject) => void; change?: (value: string, date: DateObject, endDate?: DateObject) => void; done?: (value: string, date: DateObject, endDate?: DateObject) => void; close?: () => void; onConfirm?: (value: string, date: DateObject, endDate?: DateObject) => void; onNow?: (value: string, date: DateObject, endDate?: DateObject) => void; onClear?: (value: string, date: DateObject, endDate?: DateObject) => void; }>; isLinked: _angular_core.Signal; isConfirmDisabled: _angular_core.Signal; parsedTheme: _angular_core.Signal<{ base: string; color: string | null; }>; themeColorLight: _angular_core.Signal; themeColorBorder: _angular_core.Signal<"#444444" | "#e2e2e2">; isDarkMode: _angular_core.Signal; i18n: _angular_core.Signal; footerBtns: _angular_core.Signal<{ type: string; label: string; }[]>; weekHeaders: _angular_core.Signal; timeColumnVisibility: _angular_core.Signal<{ h: boolean; m: boolean; s: boolean; }>; showPreview: _angular_core.Signal; isDisabledTime(type: 'hours' | 'minutes' | 'seconds', value: number, isRight?: boolean): boolean; hintState: WritableSignal<{ content: string; visible: boolean; }>; private hintTimer; constructor(); showHint(content: string, ms?: number, type?: 'invalidRange' | 'invalidDate' | 'invalidEndEarly' | 'custom', meta?: { min?: string; max?: string; date?: DateObject; }): void; generateYearList(centerYear: number): number[]; initYearList(centerYear: number, panel?: 'left' | 'right' | 'single'): void; private clampDay; prevYear(isRight?: boolean): void; nextYear(isRight?: boolean): void; prevMonth(isRight?: boolean): void; nextMonth(isRight?: boolean): void; private syncRightDateFromLeft; switchView(view: 'date' | 'month' | 'year' | 'time', isRight?: boolean): void; getYearRangeLabel(isRight: boolean): string; selectDay(day: CalendarDay, isRight?: boolean): void; confirmRange(): void; getPreview(): string; digit(num: number): string; getRows(data: any[]): any[][]; isSameDay(d1: DateObject, year: number, month: number, day: number): boolean; isToday(year: number, month: number, day: number): boolean; isThisDay(year: number, month: number, day: number, isRight?: boolean): boolean; isThisYear(y: number, isRight?: boolean): boolean; isThisMonth(m: number, y: number, isRight?: boolean): boolean; hoverValue(val: Partial): void; isInRange(year: number, month: number, day: number, hours?: number, minutes?: number, seconds?: number): boolean; selectYear(y: number, isRight?: boolean): void; selectMonth(m: number, isRight?: boolean): void; private handleRangeSelection; selectTime(type: 'hours' | 'minutes' | 'seconds', val: number, isRight?: boolean): void; toggleTime(): void; clear(): void; now(): void; handleShortcut(item: any): void; checkValidity(date: DateObject): boolean; handleBtnClick(type: string): void; confirm(): void; private getDateFormat; private scrollTimer; private scrollRaf; private clearScrollTimers; private autoScrollTime; handleKeydown(e: KeyboardEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * NgLaydate Service * * Provides programmatic rendering of date/time pickers, dynamic hint notifications, and date math utility functions. */ declare class NgLaydateService { private envInjector; private appRef; private platformId; private defaultVcr?; private instances; private activePanels; private panelElements; private elementConfigs; private elementListeners; private documentClickListeners; private documentClickTimers; private shadeClickTimers; private subscriptionsMap; private repositionListeners; /** * Converts a Hex color code string into an RGBA string with the given opacity. * @param hex Hex color code string (e.g., '#16b777' or '#fff') * @param opacity Opacity value between 0 and 1 */ hexToRgba(hex: string, opacity: number): string; /** * Registers a component instance handle by custom ID. */ register(id: string, component: NgLaydateComponent): void; /** * Unregisters a component instance handle by custom ID. */ unregister(id: string): void; /** * Static hint API that displays a temporary toast/hint message on a registered picker instance. * @param id Registered picker instance ID * @param opts Hint configuration with content string and display duration in ms */ hint(id: string, opts: { content: string; ms?: number; }): void; /** * Sets the default ViewContainerRef container for dynamic component rendering. */ setContainer(vcr: ViewContainerRef): void; /** * Dynamically updates the LaydateConfig configuration bound to a target element. * @param elem Target HTML element * @param config Updated LaydateConfig object */ updateConfig(elem: HTMLElement, config: LaydateConfig): void; /** * Retrieves the active picker panel ComponentRef for the given HTML element, if any. */ getActivePanel(elem: HTMLElement): ComponentRef | null; /** * Programmatically opens and attaches a date/time picker panel to the given HTML element. */ open(elem: HTMLElement, config?: LaydateConfig): ComponentRef | null; /** * Unbinds event listeners and cleans up associated picker instances for the given element. */ unbind(elem: HTMLElement): void; /** * Programmatically renders and attaches a Laydate picker panel onto the specified target element. * @param config Full LaydateConfig object (must include target elem or selector string) * @returns Created ComponentRef handle, or null in SSR environments */ render(config: LaydateConfig): ComponentRef | null; private openPanel; private setAbsolutePosition; private destroy; /** * Checks if a given year is a leap year. */ isLeap(year: number): boolean; /** * Pads numbers with leading zeros to the specified target length (defaults to 2). */ digit(num: number | string, length?: number): string; /** * Formats a DateObject into a date string according to the format template. * Uses a single-pass tokenizer to avoid token replacement collisions. * Supports bracket escaping like `[yyyy]` for literal text. * @param date Source DateObject * @param formatStr Format template string (defaults to 'yyyy-MM-dd') */ format(date: DateObject, formatStr?: string): string; /** * Converts a DateObject into a epoch millisecond timestamp for date comparison. */ getTime(date: DateObject): number; /** * Returns total number of days in a specific month for a given year. */ totalDay(year: number, month: number): number; /** * Converts a Date object or current date to a standard DateObject structure. */ systemDate(newDate?: Date): DateObject; /** * Parses string, Date, or numeric relative day offsets into a standard DateObject structure. */ parse(value: any): DateObject; /** * Generates a 42-cell CalendarDay array for rendering the month grid. */ getCalendarData(year: number, month: number, config?: LaydateConfig): CalendarDay[]; /** * Validates and clamps DateObject values to ensure year, month, and time numbers stay within valid boundaries. */ checkDate(date: DateObject): DateObject; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * NgLaydate Directive * * Attaches an elegant date/time picker to any HTML input element with Angular Forms integration. * * @example * ```html * * * * * * * * * ``` */ declare class NgLaydateDirective implements OnDestroy, ControlValueAccessor { /** * Laydate configuration input signal (directive alias `laydate`). */ configInput: _angular_core.InputSignal<"" | LaydateConfig | null | undefined>; /** Emitted whenever a new value is selected */ change: EventEmitter; /** Emitted when the picker panel completes rendering */ ready: EventEmitter; /** Emitted when selection is confirmed or completed */ done: EventEmitter; /** Emitted when the "Confirm" button is clicked */ onConfirm: EventEmitter; /** Emitted when the "Now" button is clicked */ onNow: EventEmitter; /** Emitted when the "Clear" button is clicked */ onClear: EventEmitter; /** Emitted when the picker panel is closed */ closeEvent: EventEmitter; private componentRef; private el; private laydateService; private onChange; private onTouched; private _value; private prevConfigVal; constructor(); /** * ControlValueAccessor interface: writes initial or updated value to the element. */ writeValue(obj: any): void; /** * ControlValueAccessor interface: registers onChange callback. */ registerOnChange(fn: any): void; /** * ControlValueAccessor interface: registers onTouched callback. */ registerOnTouched(fn: any): void; /** * ControlValueAccessor interface: sets disabled state. */ setDisabledState?(isDisabled: boolean): void; /** * Native input event handler for manual typing. */ onInput(event: Event): void; /** * Programmatically opens the date/time picker panel. */ open(): void; /** * Programmatically closes the date/time picker panel. */ close(): void; ngOnDestroy(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class SafeHtmlPipe implements PipeTransform { private sanitizer; constructor(sanitizer: DomSanitizer); transform(value: string | SafeHtml | null | undefined): SafeHtml; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵpipe: _angular_core.ɵɵPipeDeclaration; } export { NgLaydateComponent, NgLaydateDirective, NgLaydateService, SafeHtmlPipe }; export type { CalendarDay, DateObject, FullLaydateI18n, LaydateConfig, LaydateHintFormatter, LaydateI18n, SupportedLang }; //# sourceMappingURL=ng-laydate.d.ts.map