@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
149 lines (148 loc) • 6.82 kB
TypeScript
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ChangeDetectorRef, DoCheck, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
import { AbstractControl, ControlValueAccessor, FormGroupDirective, Validator } from '@angular/forms';
import { TextInputDirective } from '../text-input/text-input.directive';
import { DatepickerConfig } from './datepicker.config';
import { DatePickerInterval } from './datepicker.model';
import * as i0 from "@angular/core";
export declare class DatepickerFormComponent implements OnInit, ControlValueAccessor, Validator, OnDestroy, DoCheck {
private _viewContainerRef;
overlay: Overlay;
private _config;
private _cd;
/** for controlling input label positioning */
datePickerFormInput: TextInputDirective;
/** for managing form input state */
datePickerForm: FormGroupDirective;
private _menuRef;
private _originRef;
_overlayRef: OverlayRef | null;
private _portal;
private readonly _destroyed;
isOpen: boolean;
isInputFocus: boolean;
/** The timeout ID of any current timer set to show the calendar */
private _showTimeoutId;
/** The timeout ID of any current timer set to hide the calendar */
private _hideTimeoutId;
activeTabIndex: number;
selectedInterval: DatePickerInterval;
date: Date;
presentDate: Date;
isValid: boolean;
dateValidators: ((date: Date) => boolean)[];
private onChanged;
private onTouched;
private validateDateRange;
/** Adds the disabled html attribute to the components input element */
disabled: boolean;
/** Adds the readonly html attribute to the components input element. */
readonly: boolean;
/**
* Adds the required html attribute to the components input element
* and a required asterisk on the input label.
*/
required: boolean;
/** Initializes the component with a value of the present date. */
defaultToPresentDate: boolean;
/**
* Setting to false will disallow the user from selecting dates
* before the present date
*/
allowPreviousDates: boolean;
/**
* Setting to false will disallow the user from selecting dates
* after the present date.
*/
allowFutureDates: boolean;
/**
* A JavaScript Date object formatting string, formats the display
* of components current value.
*/
dateFormat: string;
/**
* This attribute specifies the placeholder value of the components
* input element.
*/
placeholder: string;
/** This attribute specifies the text value of input helper. */
helpText: string;
/** Specifies visibility of input help text */
helpTextVisible: boolean;
/** Warning state of input */
isWarning: boolean;
/** Danger state of input */
isDanger: boolean;
/** This attribute specifies the font icon name. */
icon: string;
/** This attribute specifies the icon placement. */
iconPlacement: string;
/** Specifies the position the datepicker opens against the input element */
placement: 'top' | 'bottom' | 'left' | 'right';
/** delay in ms before showing the calendar after show is called */
showDelay: number;
/** delay in ms before hiding the calendar after hide is called */
hideDelay: number;
/** Specifies the inclusive beginning date for allowed date values */
from: string;
/** Specifies the inclusive end date for allowed date values */
to: string;
/** Enables interval selection */
interval: boolean;
dueDateInterval: string;
/** Mask pattern for date picker text input */
maskPattern: string;
/** Emits a Date is selected from the Datepicker or a valid date string is entered into input field */
dateChange: EventEmitter<Date>;
/** Emits a boolean if date picker input field is in focus */
inputFocus: EventEmitter<void>;
constructor(_viewContainerRef: ViewContainerRef, overlay: Overlay, _config: DatepickerConfig, _cd: ChangeDetectorRef);
ngOnInit(): void;
ngDoCheck(): void;
ngOnDestroy(): void;
/** Listen to keyboard events to trigger changes to overlay state */
onKeydown($event: KeyboardEvent): void;
setDate(date: Date): void;
onDateSelection($event: Date): void;
onIntervalSelection($event: DatePickerInterval & {
date: Date;
}): void;
onChange($event: Event): void;
onFocused($event: FocusEvent): void;
onBlur($event: FocusEvent): void;
onButtonClick($event: Event): void;
onIntervalCancel($event: Event): void;
onKeydownTab($event: Event): void;
onKeydownSpace($event: Event): void;
onTabSelect(index: number): void;
parseDate(inputDate: string | Date): Date;
validateIsNotBeforeDate(date: Date): boolean;
validateIsNotAfterDate(date: Date): boolean;
createDateRangeValidator(from: Date, to: Date): (date: Date) => boolean;
writeValue(value: Date): void;
registerOnChange(fn: (value: Date) => void): void;
registerOnTouched(fn: () => void): void;
propogateTouched(): void;
propogateChange: (value: any) => void;
validate(control: AbstractControl): {
[key: string]: any;
};
/** open overlay */
private _show;
/** close overlay */
private _hide;
private _createOverlay;
private _updatePosition;
/**
* Returns the origin position and a fallback position based on the user's position preference.
* The fallback position is the inverse of the origin (e.g. `'bottom' -> 'top'`).
*/
private _getOrigin;
/** Returns the overlay position and a fallback position based on the user's preference */
private _getOverlayPosition;
private _invertPosition;
private _detach;
private _updateLabelStyle;
static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerFormComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerFormComponent, "hxa-datepicker-input", never, { "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "defaultToPresentDate": "defaultToPresentDate"; "allowPreviousDates": "allowPreviousDates"; "allowFutureDates": "allowFutureDates"; "dateFormat": "dateFormat"; "placeholder": "placeholder"; "helpText": "helpText"; "helpTextVisible": "helpTextVisible"; "isWarning": "isWarning"; "isDanger": "isDanger"; "icon": "icon"; "iconPlacement": "iconPlacement"; "placement": "placement"; "showDelay": "showDelay"; "hideDelay": "hideDelay"; "from": "from"; "to": "to"; "interval": "interval"; "dueDateInterval": "dueDateInterval"; "maskPattern": "maskPattern"; }, { "dateChange": "dateChange"; "inputFocus": "inputFocus"; }, never, never>;
}