UNPKG

9.54 kBTypeScriptView Raw
1/**
2 * @license
3 * Copyright Akveo. All Rights Reserved.
4 * Licensed under the MIT License. See License.txt in the project root for license information.
5 */
6import { EventEmitter, Type } from '@angular/core';
7import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode, NbCalendarSizeValues, NbCalendarViewModeValues } from '../calendar-kit/model';
8import { NbDateService } from '../calendar-kit/services/date.service';
9import { NbBooleanInput } from '../helpers';
10import * as i0 from "@angular/core";
11export interface NbCalendarRange<D> {
12 start: D;
13 end?: D;
14}
15/**
16 * CalendarRange component provides a capability to choose a date range.
17 *
18 * ```html
19 * <nb-calendar [(date)]="date"></nb-calendar>
20 * <nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>
21 * ```
22 *
23 * Basic usage example
24 * @stacked-example(Range, calendar/calendar-range-showcase.component)
25 *
26 * ### Installation
27 *
28 * Import `NbCalendarRangeModule` to your feature module.
29 * ```ts
30 * @NgModule({
31 * imports: [
32 * // ...
33 * NbCalendarRangeModule,
34 * ],
35 * })
36 * export class PageModule { }
37 * ```
38 *
39 * ### Usage
40 *
41 * CalendarRange component supports all of the Calendar component customization properties. More defails can be found
42 * in the [Calendar component docs](docs/components/calendar).
43 *
44 * @styles
45 *
46 * calendar-width:
47 * calendar-background-color:
48 * calendar-border-color:
49 * calendar-border-style:
50 * calendar-border-width:
51 * calendar-border-radius:
52 * calendar-text-color:
53 * calendar-text-font-family:
54 * calendar-text-font-size:
55 * calendar-text-font-weight:
56 * calendar-text-line-height:
57 * calendar-picker-padding-top:
58 * calendar-picker-padding-bottom:
59 * calendar-picker-padding-start:
60 * calendar-picker-padding-end:
61 * calendar-navigation-text-color:
62 * calendar-navigation-text-font-family:
63 * calendar-navigation-title-text-font-size:
64 * calendar-navigation-title-text-font-weight:
65 * calendar-navigation-title-text-line-height:
66 * calendar-navigation-padding:
67 * calendar-cell-inactive-text-color:
68 * calendar-cell-disabled-text-color:
69 * calendar-cell-hover-background-color:
70 * calendar-cell-hover-border-color:
71 * calendar-cell-hover-text-color:
72 * calendar-cell-hover-text-font-size:
73 * calendar-cell-hover-text-font-weight:
74 * calendar-cell-hover-text-line-height:
75 * calendar-cell-active-background-color:
76 * calendar-cell-active-border-color:
77 * calendar-cell-active-text-color:
78 * calendar-cell-active-text-font-size:
79 * calendar-cell-active-text-font-weight:
80 * calendar-cell-active-text-line-height:
81 * calendar-cell-today-background-color:
82 * calendar-cell-today-border-color:
83 * calendar-cell-today-text-color:
84 * calendar-cell-today-text-font-size:
85 * calendar-cell-today-text-font-weight:
86 * calendar-cell-today-text-line-height:
87 * calendar-cell-today-hover-background-color:
88 * calendar-cell-today-hover-border-color:
89 * calendar-cell-today-active-background-color:
90 * calendar-cell-today-active-border-color:
91 * calendar-cell-today-disabled-border-color:
92 * calendar-cell-today-selected-background-color:
93 * calendar-cell-today-selected-border-color:
94 * calendar-cell-today-selected-text-color:
95 * calendar-cell-today-selected-hover-background-color:
96 * calendar-cell-today-selected-hover-border-color:
97 * calendar-cell-today-selected-active-background-color:
98 * calendar-cell-today-selected-active-border-color:
99 * calendar-cell-today-in-range-background-color:
100 * calendar-cell-today-in-range-border-color:
101 * calendar-cell-today-in-range-text-color:
102 * calendar-cell-today-in-range-hover-background-color:
103 * calendar-cell-today-in-range-hover-border-color:
104 * calendar-cell-today-in-range-active-background-color:
105 * calendar-cell-today-in-range-active-border-color:
106 * calendar-cell-selected-background-color:
107 * calendar-cell-selected-border-color:
108 * calendar-cell-selected-text-color:
109 * calendar-cell-selected-text-font-size:
110 * calendar-cell-selected-text-font-weight:
111 * calendar-cell-selected-text-line-height:
112 * calendar-cell-selected-hover-background-color:
113 * calendar-cell-selected-hover-border-color:
114 * calendar-cell-selected-active-background-color:
115 * calendar-cell-selected-active-border-color:
116 * calendar-day-cell-width:
117 * calendar-day-cell-height:
118 * calendar-month-cell-width:
119 * calendar-month-cell-height:
120 * calendar-year-cell-width:
121 * calendar-year-cell-height:
122 * calendar-weekday-background:
123 * calendar-weekday-divider-color:
124 * calendar-weekday-divider-width:
125 * calendar-weekday-text-color:
126 * calendar-weekday-text-font-size:
127 * calendar-weekday-text-font-weight:
128 * calendar-weekday-text-line-height:
129 * calendar-weekday-holiday-text-color:
130 * calendar-weekday-height:
131 * calendar-weekday-width:
132 * calendar-weeknumber-background:
133 * calendar-weeknumber-divider-color:
134 * calendar-weeknumber-divider-width:
135 * calendar-weeknumber-text-color:
136 * calendar-weeknumber-text-font-size:
137 * calendar-weeknumber-text-font-weight:
138 * calendar-weeknumber-text-line-height:
139 * calendar-weeknumber-height:
140 * calendar-weeknumber-width:
141 * calendar-large-width:
142 * calendar-day-cell-large-width:
143 * calendar-day-cell-large-height:
144 * calendar-weekday-large-height:
145 * calendar-weekday-large-width:
146 * calendar-weeknumber-large-height:
147 * calendar-weeknumber-large-width:
148 * calendar-month-cell-large-width:
149 * calendar-month-cell-large-height:
150 * calendar-year-cell-large-width:
151 * calendar-year-cell-large-height:
152 * */
153export declare class NbCalendarRangeComponent<D> {
154 protected dateService: NbDateService<D>;
155 /**
156 * Defines if we should render previous and next months
157 * in the current month view.
158 * */
159 boundingMonth: boolean;
160 /**
161 * Defines starting view for the calendar.
162 * */
163 startView: NbCalendarViewMode;
164 static ngAcceptInputType_startView: NbCalendarViewModeValues;
165 /**
166 * A minimum available date for selection.
167 * */
168 min: D;
169 /**
170 * A maximum available date for selection.
171 * */
172 max: D;
173 /**
174 * A predicate that decides which cells will be disabled.
175 * */
176 filter: (D: any) => boolean;
177 /**
178 * Custom day cell component. Have to implement `NbCalendarCell` interface.
179 * */
180 set _cellComponent(cellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>);
181 dayCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
182 /**
183 * Custom month cell component. Have to implement `NbCalendarCell` interface.
184 * */
185 set _monthCellComponent(cellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>);
186 monthCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
187 /**
188 * Custom year cell component. Have to implement `NbCalendarCell` interface.
189 * */
190 set _yearCellComponent(cellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>);
191 yearCellComponent: Type<NbCalendarCell<D, NbCalendarRange<D>>>;
192 /**
193 * Size of the calendar and entire components.
194 * Can be 'medium' which is default or 'large'.
195 * */
196 size: NbCalendarSize;
197 static ngAcceptInputType_size: NbCalendarSizeValues;
198 visibleDate: D;
199 /**
200 * Determines should we show calendars navigation or not.
201 * */
202 showNavigation: boolean;
203 /**
204 * Range which will be rendered as selected.
205 * */
206 range: NbCalendarRange<D>;
207 /**
208 * Determines should we show week numbers column.
209 * False by default.
210 * */
211 get showWeekNumber(): boolean;
212 set showWeekNumber(value: boolean);
213 protected _showWeekNumber: boolean;
214 static ngAcceptInputType_showWeekNumber: NbBooleanInput;
215 /**
216 * Sets symbol used as a header for week numbers column
217 * */
218 weekNumberSymbol: string;
219 /**
220 * Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on.
221 * `undefined` means that default locale setting will be used.
222 * */
223 firstDayOfWeek: number | undefined;
224 /**
225 * Emits range when start selected and emits again when end selected.
226 * */
227 rangeChange: EventEmitter<NbCalendarRange<D>>;
228 constructor(dateService: NbDateService<D>);
229 onChange(date: D): void;
230 private initDateIfNull;
231 private handleSelected;
232 private selectionStarted;
233 private selectStart;
234 private selectEnd;
235 private selectRange;
236 static ɵfac: i0.ɵɵFactoryDeclaration<NbCalendarRangeComponent<any>, never>;
237 static ɵcmp: i0.ɵɵComponentDeclaration<NbCalendarRangeComponent<any>, "nb-calendar-range", never, { "boundingMonth": { "alias": "boundingMonth"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "_cellComponent": { "alias": "dayCellComponent"; "required": false; }; "_monthCellComponent": { "alias": "monthCellComponent"; "required": false; }; "monthCellComponent": { "alias": "monthCellComponent"; "required": false; }; "_yearCellComponent": { "alias": "yearCellComponent"; "required": false; }; "size": { "alias": "size"; "required": false; }; "visibleDate": { "alias": "visibleDate"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "range": { "alias": "range"; "required": false; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; }; "weekNumberSymbol": { "alias": "weekNumberSymbol"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; }, { "rangeChange": "rangeChange"; }, never, never, false, never>;
238}