@ipi-soft/ng-components
Version:
Custom Angular Components
155 lines (154 loc) • 8 kB
TypeScript
import { ElementRef, SimpleChanges, EventEmitter, NgZone } from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { DateSelectionEvent } from './../../datepicker.component';
import * as i0 from "@angular/core";
export declare class CalendarCell<D = any> {
value: number;
displayValue: string;
ariaLabel: string;
enabled: boolean;
compareValue: number;
rawValue?: D | undefined;
constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, compareValue?: number, rawValue?: D | undefined);
}
export declare class CalendarBody {
private ngZone;
private platform;
private elementRef;
constructor(ngZone: NgZone, platform: Platform, elementRef: ElementRef);
/** The label for the table. (e.g. "Jan 2017"). */
label: string;
/** The cells to display in the table. */
rows: CalendarCell[][];
/** The value in the table that corresponds to today. */
todayValue: number;
/** Start value of the selected date range. */
startValue: number;
/** End value of the selected date range. */
endValue: number;
/** The minimum number of free cells needed to fit the label in the first row. */
labelMinRequiredCells: number;
/** The number of columns in the table. */
numCols: number;
/** The cell number of the active cell in the table. */
activeCell: number;
/** Whether a range is being selected. */
isRange: boolean;
/**
* The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
* maintained even as the table resizes.
*/
cellAspectRatio: number;
/** Start of the comparison range. */
comparisonStart: number | null;
/** End of the comparison range. */
comparisonEnd: number | null;
/** Start of the preview range. */
previewStart: number | null;
/** End of the preview range. */
previewEnd: number | null;
/** ARIA Accessible name of the StartDate */
startDateAccessibleName: string | null;
/** ARIA Accessible name of the EndDate */
endDateAccessibleName: string | null;
/** Emits when a new value is selected. */
selectedValueChange: EventEmitter<DateSelectionEvent<number>>;
/** Emits when the preview has changed as a result of a user action. */
previewChange: EventEmitter<DateSelectionEvent<CalendarCell<any> | null>>;
activeDateChange: EventEmitter<DateSelectionEvent<number>>;
/** Emits the date at the possible start of a drag event. */
dragStarted: EventEmitter<DateSelectionEvent<Date>>;
/** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */
dragEnded: EventEmitter<DateSelectionEvent<Date | null>>;
/** The number of blank cells to put at the beginning for the first row. */
firstRowOffset: number;
/** Padding for the individual date cells. */
cellPadding: string;
private id;
startDateLabelId: string;
endDateLabelId: string;
/** Width of an individual cell. */
cellWidth: string;
/**
* Used to skip the next focus event when rendering the preview range.
* We need a flag like this, because some browsers fire focus events asynchronously.
*/
private skipNextFocus;
/**
* Used to focus the active cell after change detection has run.
*/
private focusActiveCellAfterViewChecked;
private didDragSinceMouseDown;
private activeCapturingEventOptions;
private passiveCapturingEventOptions;
private passiveEventOptions;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewChecked(): void;
ngOnDestroy(): void;
trackRow: (row: CalendarCell[]) => CalendarCell<any>[];
/** Called when a cell is clicked. */
cellClicked(cell: CalendarCell, event: MouseEvent): void;
emitActiveDateChange(cell: CalendarCell, event: FocusEvent): void;
/** Returns whether a cell should be marked as selected. */
isSelected(value: number): boolean;
/** Returns whether a cell is active. */
isActiveCell(rowIndex: number, colIndex: number): boolean;
focusActiveCell(movePreview?: boolean): void;
/** Focuses the active cell after change detection has run and the microtask queue is empty. */
scheduleFocusActiveCellAfterViewChecked(): void;
/** Gets whether a value is the start of the main range. */
isRangeStart(value: number): boolean;
/** Gets whether a value is the end of the main range. */
isRangeEnd(value: number): boolean;
/** Gets whether a value is within the currently-selected range. */
isCellInRange(value: number): boolean;
/** Gets whether a value is the start of the preview range. */
isPreviewStart(value: number): boolean;
/** Gets whether a value is the end of the preview range. */
isPreviewEnd(value: number): boolean;
/** Gets whether a value is inside the preview range. */
isInPreview(value: number): boolean;
/** Gets ids of aria descriptions for the start and end of a date range. */
getDescribedby(value: number): string | null;
/**
* Event handler for when the user enters an element
* inside the calendar body (e.g. by hovering in or focus).
*/
private enterHandler;
private touchmoveHandler;
/**
* Event handler for when the user's pointer leaves an element
* inside the calendar body (e.g. by hovering out or blurring).
*/
private leaveHandler;
/**
* Triggered on mousedown or touchstart on a date cell.
* Respsonsible for starting a drag sequence.
*/
private mousedownHandler;
/** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */
private mouseupHandler;
/** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */
private touchendHandler;
/** Finds the CalendarCell that corresponds to a DOM node. */
private getCellFromElement;
/**
* Gets the date table cell element that is or contains the specified element.
* Or returns null if element is not part of a date cell.
*/
private getCellElement;
/** Checks whether a node is a table cell element. */
private isTableCell;
/** Checks whether a value is the start of a range. */
private isStart;
/** Checks whether a value is the end of a range. */
private isEnd;
private isInRange;
/**
* Extracts the element that actually corresponds to a touch event's location
* (rather than the element that initiated the sequence of touch events).
*/
private getActualTouchTarget;
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarBody, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CalendarBody, "[calendar-body]", never, { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "startValue": { "alias": "startValue"; "required": false; }; "endValue": { "alias": "endValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "isRange": { "alias": "isRange"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "previewStart": { "alias": "previewStart"; "required": false; }; "previewEnd": { "alias": "previewEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, true, never>;
}