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 | */
|
6 | import { EventEmitter, Type } from '@angular/core';
|
7 | import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode, NbCalendarSizeValues, NbCalendarViewModeValues } from '../calendar-kit/model';
|
8 | import { NbDateService } from '../calendar-kit/services/date.service';
|
9 | import { NbBooleanInput } from '../helpers';
|
10 | import * as i0 from "@angular/core";
|
11 | export 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 | * */
|
153 | export 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 | }
|