igniteui-angular

import { AfterContentChecked, AfterViewInit, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core'; import { Subject } from 'rxjs'; import { EditorProvider } from '../core/edit-provider'; import { IToggleView } from '../core/navigation'; import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings } from '../services/overlay/utilities'; import { IgxPickerToggleComponent } from './picker-icons.common'; import { PickerInteractionMode } from './types'; import { WEEKDAYS } from '../calendar/calendar'; import { DateRange } from '../date-range-picker/date-range-picker-inputs.common'; import { IgxInputGroupType } from '../input-group/inputGroupType'; import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { IgxSuffixDirective } from '../directives/suffix/suffix.directive'; import { IgxInputGroupComponent } from '../input-group/input-group.component'; import * as i0 from "@angular/core"; export declare abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy { element: ElementRef; protected _localeId: string; protected _inputGroupType?: IgxInputGroupType; /** * The editor's input mask. * * @remarks * Also used as a placeholder when none is provided. * * @example * ```html * <igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker> * ``` */ inputFormat: string; /** * The format used to display the picker's value when it's not being edited. * * @remarks * Uses Angular's DatePipe. * * @example * ```html * <igx-date-picker displayFormat="EE/M/yy"></igx-date-picker> * ``` * */ displayFormat: string; /** * Sets the `placeholder` of the picker's input. * * @example * ```html * <igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker> * ``` */ placeholder: string; /** * Can be `dropdown` with editable input field or `dialog` with readonly input field. * * @remarks * Default mode is `dropdown` * * @example * ```html * <igx-date-picker mode="dialog"></igx-date-picker> * ``` */ mode: PickerInteractionMode; /** * Overlay settings used to display the pop-up element. * * @example * ```html * <igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker> * ``` */ overlaySettings: OverlaySettings; /** * Enables or disables the picker. * * @example * ```html * <igx-date-picker [disabled]="'true'"></igx-date-picker> * ``` */ disabled: boolean; /** * @example * ```html * <igx-date-picker locale="jp"></igx-date-picker> * ``` */ /** * Gets the `locale` of the date-picker. * If not set, defaults to applciation's locale.. */ get locale(): string; /** * Sets the `locale` of the date-picker. * Expects a valid BCP 47 language tag. */ set locale(value: string); /** * Gets the start day of the week. * Can return a numeric or an enum representation of the week day. * If not set, defaults to the first day of the week for the application locale. */ get weekStart(): WEEKDAYS | number; /** * Sets the start day of the week. * Can be assigned to a numeric value or to `WEEKDAYS` enum value. */ set weekStart(value: WEEKDAYS | number); /** * The container used for the pop-up element. * * @example * ```html * <div igxOverlayOutlet #outlet="overlay-outlet"></div> *  * <igx-date-picker [outlet]="outlet"></igx-date-picker> *  * ``` */ outlet: IgxOverlayOutletDirective | ElementRef; /** * Determines how the picker's input will be styled. * * @remarks * Default is `box`. * * @example * ```html * <igx-date-picker [type]="'line'"></igx-date-picker> * ``` */ set type(val: IgxInputGroupType); get type(): IgxInputGroupType; /** * Gets/Sets the default template editor's tabindex. * * @example * ```html * <igx-date-picker [tabIndex]="1"></igx-date-picker> * ``` */ tabIndex: number | string; /** * Emitted when the calendar has started opening, cancelable. * * @example * ```html * <igx-date-picker (opening)="handleOpening($event)"></igx-date-picker> * ``` */ opening: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the calendar has opened. * * @example * ```html * <igx-date-picker (opened)="handleOpened($event)"></igx-date-picker> * ``` */ opened: EventEmitter<IBaseEventArgs>; /** * Emitted when the calendar has started closing, cancelable. * * @example * ```html * <igx-date-picker (closing)="handleClosing($event)"></igx-date-picker> * ``` */ closing: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the calendar has closed. * * @example * ```html * <igx-date-picker (closed)="handleClosed($event)"></igx-date-picker> * ``` */ closed: EventEmitter<IBaseEventArgs>; /** @hidden @internal */ toggleComponents: QueryList<IgxPickerToggleComponent>; protected prefixes: QueryList<IgxPrefixDirective>; protected suffixes: QueryList<IgxSuffixDirective>; protected inputGroup: IgxInputGroupComponent; protected _locale: string; protected _collapsed: boolean; protected _type: IgxInputGroupType; protected _minValue: Date | string; protected _maxValue: Date | string; protected _weekStart: WEEKDAYS | number; protected abstract get toggleContainer(): HTMLElement | undefined; /** * Gets the picker's pop-up state. * * @example * ```typescript * const state = this.picker.collapsed; * ``` */ get collapsed(): boolean; /** @hidden @internal */ get isDropdown(): boolean; /** * Returns if there's focus within the picker's element OR popup container * @hidden @internal */ get isFocused(): boolean; protected _destroy$: Subject<void>; abstract valueChange: EventEmitter<any>; constructor(element: ElementRef, _localeId: string, _inputGroupType?: IgxInputGroupType); /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ ngOnDestroy(): void; /** Subscribes to the click events of toggle/clear icons in a query */ protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any): void; abstract select(value: Date | DateRange | string): void; abstract open(settings?: OverlaySettings): void; abstract toggle(settings?: OverlaySettings): void; abstract close(): void; abstract getEditElement(): HTMLInputElement; static ɵfac: i0.ɵɵFactoryDeclaration<PickerBaseDirective, [null, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<PickerBaseDirective, never, never, { "inputFormat": { "alias": "inputFormat"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "weekStart": { "alias": "weekStart"; "required": false; }; "outlet": { "alias": "outlet"; "required": false; }; "type": { "alias": "type"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["toggleComponents", "prefixes", "suffixes"], never, true, never>; static ngAcceptInputType_disabled: unknown; }