ngx-bootstrap
Version:
Native Angular Bootstrap Components
1,321 lines (1,310 loc) • 411 kB
JavaScript
import { formatDate, getFullYear, getMonth, getDay, isFirstDayOfWeek, isAfter, isBefore, shiftDate, endOf, startOf, getFirstDayOfMonth, getLocale, isSameDay, isSameMonth, isSameYear, setFullDate, isArray, isDateValid, parseDate, isDate } from 'ngx-bootstrap/chronos';
import { Component, EventEmitter, Input, Output, Injectable, forwardRef, ViewChild, NgModule, Directive, ElementRef, Renderer2, ViewContainerRef, ChangeDetectorRef, Host, ChangeDetectionStrategy } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
import { isBs3, warnOnce } from 'ngx-bootstrap/utils';
import { CommonModule } from '@angular/common';
import { BehaviorSubject } from 'rxjs';
import { __values, __extends, __spread } from 'tslib';
import { filter, map } from 'rxjs/operators';
import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { PositioningService } from 'ngx-bootstrap/positioning';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DateFormatter = /** @class */ (function () {
function DateFormatter() {
}
/**
* @param {?} date
* @param {?} format
* @param {?} locale
* @return {?}
*/
DateFormatter.prototype.format = /**
* @param {?} date
* @param {?} format
* @param {?} locale
* @return {?}
*/
function (date, format, locale) {
return formatDate(date, format, locale);
};
return DateFormatter;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatePickerInnerComponent = /** @class */ (function () {
function DatePickerInnerComponent() {
this.selectionDone = new EventEmitter(undefined);
this.update = new EventEmitter(false);
this.activeDateChange = new EventEmitter(undefined);
/* tslint:disable-next-line: no-any*/
this.stepDay = {};
/* tslint:disable-next-line: no-any*/
this.stepMonth = {};
/* tslint:disable-next-line: no-any*/
this.stepYear = {};
this.modes = ['day', 'month', 'year'];
this.dateFormatter = new DateFormatter();
}
Object.defineProperty(DatePickerInnerComponent.prototype, "activeDate", {
get: /**
* @return {?}
*/
function () {
return this._activeDate;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._activeDate = value;
},
enumerable: true,
configurable: true
});
// todo: add formatter value to Date object
/**
* @return {?}
*/
DatePickerInnerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// todo: use date for unique value
this.uniqueId = "datepicker--" + Math.floor(Math.random() * 10000);
if (this.initDate) {
this.activeDate = this.initDate;
this.selectedDate = new Date(this.activeDate.valueOf());
this.update.emit(this.activeDate);
}
else if (this.activeDate === undefined) {
this.activeDate = new Date();
}
};
// this.refreshView should be called here to reflect the changes on the fly
// tslint:disable-next-line:no-unused-variable
/**
* @param {?} changes
* @return {?}
*/
DatePickerInnerComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
this.refreshView();
this.checkIfActiveDateGotUpdated(changes["activeDate"]);
};
// Check if activeDate has been update and then emit the activeDateChange with the new date
/* tslint:disable-next-line: no-any */
/**
* @param {?} activeDate
* @return {?}
*/
DatePickerInnerComponent.prototype.checkIfActiveDateGotUpdated = /**
* @param {?} activeDate
* @return {?}
*/
function (activeDate) {
if (activeDate && !activeDate.firstChange) {
var /** @type {?} */ previousValue = activeDate.previousValue;
if (previousValue &&
previousValue instanceof Date &&
previousValue.getTime() !== activeDate.currentValue.getTime()) {
this.activeDateChange.emit(this.activeDate);
}
}
};
/**
* @param {?} handler
* @param {?} type
* @return {?}
*/
DatePickerInnerComponent.prototype.setCompareHandler = /**
* @param {?} handler
* @param {?} type
* @return {?}
*/
function (handler, type) {
if (type === 'day') {
this.compareHandlerDay = handler;
}
if (type === 'month') {
this.compareHandlerMonth = handler;
}
if (type === 'year') {
this.compareHandlerYear = handler;
}
};
/**
* @param {?} date1
* @param {?} date2
* @return {?}
*/
DatePickerInnerComponent.prototype.compare = /**
* @param {?} date1
* @param {?} date2
* @return {?}
*/
function (date1, date2) {
if (date1 === undefined || date2 === undefined) {
return undefined;
}
if (this.datepickerMode === 'day' && this.compareHandlerDay) {
return this.compareHandlerDay(date1, date2);
}
if (this.datepickerMode === 'month' && this.compareHandlerMonth) {
return this.compareHandlerMonth(date1, date2);
}
if (this.datepickerMode === 'year' && this.compareHandlerYear) {
return this.compareHandlerYear(date1, date2);
}
return void 0;
};
/**
* @param {?} handler
* @param {?} type
* @return {?}
*/
DatePickerInnerComponent.prototype.setRefreshViewHandler = /**
* @param {?} handler
* @param {?} type
* @return {?}
*/
function (handler, type) {
if (type === 'day') {
this.refreshViewHandlerDay = handler;
}
if (type === 'month') {
this.refreshViewHandlerMonth = handler;
}
if (type === 'year') {
this.refreshViewHandlerYear = handler;
}
};
/**
* @return {?}
*/
DatePickerInnerComponent.prototype.refreshView = /**
* @return {?}
*/
function () {
if (this.datepickerMode === 'day' && this.refreshViewHandlerDay) {
this.refreshViewHandlerDay();
}
if (this.datepickerMode === 'month' && this.refreshViewHandlerMonth) {
this.refreshViewHandlerMonth();
}
if (this.datepickerMode === 'year' && this.refreshViewHandlerYear) {
this.refreshViewHandlerYear();
}
};
/**
* @param {?} date
* @param {?} format
* @return {?}
*/
DatePickerInnerComponent.prototype.dateFilter = /**
* @param {?} date
* @param {?} format
* @return {?}
*/
function (date, format) {
return this.dateFormatter.format(date, format, this.locale);
};
/* tslint:disable-next-line: no-any*/
/**
* @param {?} dateObject
* @return {?}
*/
DatePickerInnerComponent.prototype.isActive = /**
* @param {?} dateObject
* @return {?}
*/
function (dateObject) {
if (this.compare(dateObject.date, this.activeDate) === 0) {
this.activeDateId = dateObject.uid;
return true;
}
return false;
};
/* tslint:disable-next-line: no-any*/
/**
* @param {?} date
* @param {?} format
* @return {?}
*/
DatePickerInnerComponent.prototype.createDateObject = /**
* @param {?} date
* @param {?} format
* @return {?}
*/
function (date, format) {
/* tslint:disable-next-line: no-any*/
var /** @type {?} */ dateObject = {};
dateObject.date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
dateObject.date = this.fixTimeZone(dateObject.date);
dateObject.label = this.dateFilter(date, format);
dateObject.selected = this.compare(date, this.selectedDate) === 0;
dateObject.disabled = this.isDisabled(date);
dateObject.current = this.compare(date, new Date()) === 0;
dateObject.customClass = this.getCustomClassForDate(dateObject.date);
return dateObject;
};
/* tslint:disable-next-line: no-any*/
/**
* @param {?} arr
* @param {?} size
* @return {?}
*/
DatePickerInnerComponent.prototype.split = /**
* @param {?} arr
* @param {?} size
* @return {?}
*/
function (arr, size) {
/* tslint:disable-next-line: no-any*/
var /** @type {?} */ arrays = [];
while (arr.length > 0) {
arrays.push(arr.splice(0, size));
}
return arrays;
};
// Fix a hard-reproducible bug with timezones
// The bug depends on OS, browser, current timezone and current date
// i.e.
// var date = new Date(2014, 0, 1);
// console.log(date.getFullYear(), date.getMonth(), date.getDate(),
// date.getHours()); can result in "2013 11 31 23" because of the bug.
/**
* @param {?} date
* @return {?}
*/
DatePickerInnerComponent.prototype.fixTimeZone = /**
* @param {?} date
* @return {?}
*/
function (date) {
var /** @type {?} */ hours = date.getHours();
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours === 23 ? hours + 2 : 0);
};
/**
* @param {?} date
* @param {?=} isManual
* @return {?}
*/
DatePickerInnerComponent.prototype.select = /**
* @param {?} date
* @param {?=} isManual
* @return {?}
*/
function (date, isManual) {
if (isManual === void 0) { isManual = true; }
if (this.datepickerMode === this.minMode) {
if (!this.activeDate) {
this.activeDate = new Date(0, 0, 0, 0, 0, 0, 0);
}
this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
this.activeDate = this.fixTimeZone(this.activeDate);
if (isManual) {
this.selectionDone.emit(this.activeDate);
}
}
else {
this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
this.activeDate = this.fixTimeZone(this.activeDate);
if (isManual) {
this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) - 1];
}
}
this.selectedDate = new Date(this.activeDate.valueOf());
this.update.emit(this.activeDate);
this.refreshView();
};
/**
* @param {?} direction
* @return {?}
*/
DatePickerInnerComponent.prototype.move = /**
* @param {?} direction
* @return {?}
*/
function (direction) {
/* tslint:disable-next-line: no-any*/
var /** @type {?} */ expectedStep;
if (this.datepickerMode === 'day') {
expectedStep = this.stepDay;
}
if (this.datepickerMode === 'month') {
expectedStep = this.stepMonth;
}
if (this.datepickerMode === 'year') {
expectedStep = this.stepYear;
}
if (expectedStep) {
var /** @type {?} */ year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
var /** @type {?} */ month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
this.activeDate = new Date(year, month, 1);
this.refreshView();
this.activeDateChange.emit(this.activeDate);
}
};
/**
* @param {?} _direction
* @return {?}
*/
DatePickerInnerComponent.prototype.toggleMode = /**
* @param {?} _direction
* @return {?}
*/
function (_direction) {
var /** @type {?} */ direction = _direction || 1;
if ((this.datepickerMode === this.maxMode && direction === 1) ||
(this.datepickerMode === this.minMode && direction === -1)) {
return;
}
this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) + direction];
this.refreshView();
};
/**
* @param {?} date
* @return {?}
*/
DatePickerInnerComponent.prototype.getCustomClassForDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
var _this = this;
if (!this.customClass) {
return '';
}
// todo: build a hash of custom classes, it will work faster
var /** @type {?} */ customClassObject = this.customClass.find(function (customClass) {
return (customClass.date.valueOf() === date.valueOf() &&
customClass.mode === _this.datepickerMode);
}, this);
return customClassObject === undefined ? '' : customClassObject.clazz;
};
/**
* @param {?} date1Disabled
* @param {?} date2
* @return {?}
*/
DatePickerInnerComponent.prototype.compareDateDisabled = /**
* @param {?} date1Disabled
* @param {?} date2
* @return {?}
*/
function (date1Disabled, date2) {
if (date1Disabled === undefined || date2 === undefined) {
return undefined;
}
if (date1Disabled.mode === 'day' && this.compareHandlerDay) {
return this.compareHandlerDay(date1Disabled.date, date2);
}
if (date1Disabled.mode === 'month' && this.compareHandlerMonth) {
return this.compareHandlerMonth(date1Disabled.date, date2);
}
if (date1Disabled.mode === 'year' && this.compareHandlerYear) {
return this.compareHandlerYear(date1Disabled.date, date2);
}
return undefined;
};
/**
* @param {?} date
* @return {?}
*/
DatePickerInnerComponent.prototype.isDisabled = /**
* @param {?} date
* @return {?}
*/
function (date) {
var _this = this;
var /** @type {?} */ isDateDisabled = false;
if (this.dateDisabled) {
this.dateDisabled.forEach(function (disabledDate) {
if (_this.compareDateDisabled(disabledDate, date) === 0) {
isDateDisabled = true;
}
});
}
if (this.dayDisabled) {
isDateDisabled =
isDateDisabled ||
this.dayDisabled.indexOf(date.getDay()) > -1;
}
return (isDateDisabled ||
(this.minDate && this.compare(date, this.minDate) < 0) ||
(this.maxDate && this.compare(date, this.maxDate) > 0));
};
DatePickerInnerComponent.decorators = [
{ type: Component, args: [{
selector: 'datepicker-inner',
template: "\n <!--<!–ng-keydown=\"keydown($event)\"–>-->\n <div *ngIf=\"datepickerMode\" class=\"well well-sm bg-faded p-a card\" role=\"application\" >\n <ng-content></ng-content>\n </div>\n "
}] }
];
/** @nocollapse */
DatePickerInnerComponent.propDecorators = {
"locale": [{ type: Input },],
"datepickerMode": [{ type: Input },],
"startingDay": [{ type: Input },],
"yearRange": [{ type: Input },],
"minDate": [{ type: Input },],
"maxDate": [{ type: Input },],
"minMode": [{ type: Input },],
"maxMode": [{ type: Input },],
"showWeeks": [{ type: Input },],
"formatDay": [{ type: Input },],
"formatMonth": [{ type: Input },],
"formatYear": [{ type: Input },],
"formatDayHeader": [{ type: Input },],
"formatDayTitle": [{ type: Input },],
"formatMonthTitle": [{ type: Input },],
"onlyCurrentMonth": [{ type: Input },],
"shortcutPropagation": [{ type: Input },],
"customClass": [{ type: Input },],
"monthColLimit": [{ type: Input },],
"yearColLimit": [{ type: Input },],
"dateDisabled": [{ type: Input },],
"dayDisabled": [{ type: Input },],
"initDate": [{ type: Input },],
"selectionDone": [{ type: Output },],
"update": [{ type: Output },],
"activeDateChange": [{ type: Output },],
"activeDate": [{ type: Input },],
};
return DatePickerInnerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatepickerConfig = /** @class */ (function () {
function DatepickerConfig() {
this.locale = 'en';
this.datepickerMode = 'day';
this.startingDay = 0;
this.yearRange = 20;
this.minMode = 'day';
this.maxMode = 'year';
this.showWeeks = true;
this.formatDay = 'DD';
this.formatMonth = 'MMMM';
this.formatYear = 'YYYY';
this.formatDayHeader = 'dd';
this.formatDayTitle = 'MMMM YYYY';
this.formatMonthTitle = 'YYYY';
this.onlyCurrentMonth = false;
this.monthColLimit = 3;
this.yearColLimit = 5;
this.shortcutPropagation = false;
}
DatepickerConfig.decorators = [
{ type: Injectable }
];
return DatepickerConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ DATEPICKER_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
/* tslint:disable-next-line: no-use-before-declare */
useExisting: forwardRef(function () { return DatePickerComponent; }),
multi: true
};
var DatePickerComponent = /** @class */ (function () {
function DatePickerComponent(config) {
/**
* sets datepicker mode, supports: `day`, `month`, `year`
*/
this.datepickerMode = 'day';
/**
* if false week numbers will be hidden
*/
this.showWeeks = true;
this.selectionDone = new EventEmitter(undefined);
/**
* callback to invoke when the activeDate is changed.
*/
this.activeDateChange = new EventEmitter(undefined);
/* tslint:disable-next-line: no-any*/
this.onChange = Function.prototype;
/* tslint:disable-next-line: no-any*/
this.onTouched = Function.prototype;
this._now = new Date();
this.config = config;
this.configureOptions();
}
Object.defineProperty(DatePickerComponent.prototype, "activeDate", {
get: /**
* currently active date
* @return {?}
*/
function () {
return this._activeDate || this._now;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._activeDate = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
DatePickerComponent.prototype.configureOptions = /**
* @return {?}
*/
function () {
Object.assign(this, this.config);
};
/**
* @param {?} event
* @return {?}
*/
DatePickerComponent.prototype.onUpdate = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.activeDate = event;
this.onChange(event);
};
/**
* @param {?} event
* @return {?}
*/
DatePickerComponent.prototype.onSelectionDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.selectionDone.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
DatePickerComponent.prototype.onActiveDateChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.activeDateChange.emit(event);
};
// todo: support null value
/* tslint:disable-next-line: no-any*/
/**
* @param {?} value
* @return {?}
*/
DatePickerComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._datePicker.compare(value, this._activeDate) === 0) {
return;
}
if (value && value instanceof Date) {
this.activeDate = value;
this._datePicker.select(value, false);
return;
}
this.activeDate = value ? new Date(value) : void 0;
};
/**
* @param {?} fn
* @return {?}
*/
DatePickerComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
DatePickerComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
DatePickerComponent.decorators = [
{ type: Component, args: [{
selector: 'datepicker',
template: "\n <datepicker-inner [activeDate]=\"activeDate\"\n (update)=\"onUpdate($event)\"\n [locale]=\"config.locale\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n [dayDisabled]=\"dayDisabled\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [monthColLimit]=\"monthColLimit\"\n [yearColLimit]=\"yearColLimit\"\n (selectionDone)=\"onSelectionDone($event)\"\n (activeDateChange)=\"onActiveDateChange($event)\">\n <daypicker tabindex=\"0\"></daypicker>\n <monthpicker tabindex=\"0\"></monthpicker>\n <yearpicker tabindex=\"0\"></yearpicker>\n </datepicker-inner>\n ",
providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR]
}] }
];
/** @nocollapse */
DatePickerComponent.ctorParameters = function () { return [
{ type: DatepickerConfig, },
]; };
DatePickerComponent.propDecorators = {
"datepickerMode": [{ type: Input },],
"initDate": [{ type: Input },],
"minDate": [{ type: Input },],
"maxDate": [{ type: Input },],
"minMode": [{ type: Input },],
"maxMode": [{ type: Input },],
"showWeeks": [{ type: Input },],
"formatDay": [{ type: Input },],
"formatMonth": [{ type: Input },],
"formatYear": [{ type: Input },],
"formatDayHeader": [{ type: Input },],
"formatDayTitle": [{ type: Input },],
"formatMonthTitle": [{ type: Input },],
"startingDay": [{ type: Input },],
"yearRange": [{ type: Input },],
"onlyCurrentMonth": [{ type: Input },],
"shortcutPropagation": [{ type: Input },],
"monthColLimit": [{ type: Input },],
"yearColLimit": [{ type: Input },],
"customClass": [{ type: Input },],
"dateDisabled": [{ type: Input },],
"dayDisabled": [{ type: Input },],
"activeDate": [{ type: Input },],
"selectionDone": [{ type: Output },],
"activeDateChange": [{ type: Output },],
"_datePicker": [{ type: ViewChild, args: [DatePickerInnerComponent,] },],
};
return DatePickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DayPickerComponent = /** @class */ (function () {
function DayPickerComponent(datePicker) {
this.labels = [];
this.rows = [];
this.weekNumbers = [];
this.datePicker = datePicker;
}
Object.defineProperty(DayPickerComponent.prototype, "isBs4", {
get: /**
* @return {?}
*/
function () {
return !isBs3();
},
enumerable: true,
configurable: true
});
/*protected getDaysInMonth(year:number, month:number) {
return ((month === 1) && (year % 4 === 0) &&
((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
}*/
/**
* @return {?}
*/
DayPickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ self = this;
this.datePicker.stepDay = { months: 1 };
this.datePicker.setRefreshViewHandler(function () {
var /** @type {?} */ year = this.activeDate.getFullYear();
var /** @type {?} */ month = this.activeDate.getMonth();
var /** @type {?} */ firstDayOfMonth = new Date(year, month, 1);
var /** @type {?} */ difference = this.startingDay - firstDayOfMonth.getDay();
var /** @type {?} */ numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
var /** @type {?} */ firstDate = new Date(firstDayOfMonth.getTime());
if (numDisplayedFromPreviousMonth > 0) {
firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
// 42 is the number of days on a six-week calendar
var /** @type {?} */ _days = self.getDates(firstDate, 42);
var /** @type {?} */ days = [];
for (var /** @type {?} */ i = 0; i < 42; i++) {
var /** @type {?} */ _dateObject = this.createDateObject(_days[i], this.formatDay);
_dateObject.secondary = _days[i].getMonth() !== month;
_dateObject.uid = this.uniqueId + '-' + i;
days[i] = _dateObject;
}
self.labels = [];
for (var /** @type {?} */ j = 0; j < 7; j++) {
self.labels[j] = {};
self.labels[j].abbr = this.dateFilter(days[j].date, this.formatDayHeader);
self.labels[j].full = this.dateFilter(days[j].date, 'EEEE');
}
self.title = this.dateFilter(this.activeDate, this.formatDayTitle);
self.rows = this.split(days, 7);
if (this.showWeeks) {
self.weekNumbers = [];
var /** @type {?} */ thursdayIndex = (4 + 7 - this.startingDay) % 7;
var /** @type {?} */ numWeeks = self.rows.length;
for (var /** @type {?} */ curWeek = 0; curWeek < numWeeks; curWeek++) {
self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
}
}
}, 'day');
this.datePicker.setCompareHandler(function (date1, date2) {
var /** @type {?} */ d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
var /** @type {?} */ d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
return d1.getTime() - d2.getTime();
}, 'day');
this.datePicker.refreshView();
};
/**
* @param {?} startDate
* @param {?} n
* @return {?}
*/
DayPickerComponent.prototype.getDates = /**
* @param {?} startDate
* @param {?} n
* @return {?}
*/
function (startDate, n) {
var /** @type {?} */ dates = new Array(n);
var /** @type {?} */ current = new Date(startDate.getTime());
var /** @type {?} */ i = 0;
var /** @type {?} */ date;
while (i < n) {
date = new Date(current.getTime());
date = this.datePicker.fixTimeZone(date);
dates[i++] = date;
current = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
return dates;
};
/**
* @param {?} date
* @return {?}
*/
DayPickerComponent.prototype.getISO8601WeekNumber = /**
* @param {?} date
* @return {?}
*/
function (date) {
var /** @type {?} */ checkDate = new Date(date.getTime());
// Thursday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var /** @type {?} */ time = checkDate.getTime();
// Compare with Jan 1
checkDate.setMonth(0);
checkDate.setDate(1);
return (Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1);
};
DayPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'daypicker',
template: "\n<table *ngIf=\"datePicker.datepickerMode === 'day'\" role=\"grid\" [attr.aria-labelledby]=\"datePicker.uniqueId + '-title'\" aria-activedescendant=\"activeDateId\">\n <thead>\n <tr>\n <th>\n <button *ngIf=\"!isBs4\"\n type=\"button\"\n class=\"btn btn-default btn-secondary btn-sm pull-left float-left\"\n (click)=\"datePicker.move(-1)\"\n tabindex=\"-1\">\u2039</button>\n <button *ngIf=\"isBs4\"\n type=\"button\"\n class=\"btn btn-default btn-secondary btn-sm pull-left float-left\"\n (click)=\"datePicker.move(-1)\"\n tabindex=\"-1\"><</button>\n </th>\n <th [attr.colspan]=\"5 + (datePicker.showWeeks ? 1 : 0)\">\n <button [id]=\"datePicker.uniqueId + '-title'\"\n type=\"button\" class=\"btn btn-default btn-secondary btn-sm\"\n (click)=\"datePicker.toggleMode(0)\"\n [disabled]=\"datePicker.datepickerMode === datePicker.maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === datePicker.maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th>\n <button *ngIf=\"!isBs4\"\n type=\"button\"\n class=\"btn btn-default btn-secondary btn-sm pull-right float-right\"\n (click)=\"datePicker.move(1)\"\n tabindex=\"-1\">\u203A</button>\n <button *ngIf=\"isBs4\"\n type=\"button\"\n class=\"btn btn-default btn-secondary btn-sm pull-right float-right\"\n (click)=\"datePicker.move(1)\"\n tabindex=\"-1\">>\n </button>\n </th>\n </tr>\n <tr>\n <th *ngIf=\"datePicker.showWeeks\"></th>\n <th *ngFor=\"let labelz of labels\" class=\"text-center\">\n <small aria-label=\"labelz.full\"><b>{{ labelz.abbr }}</b></small>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-template ngFor [ngForOf]=\"rows\" let-rowz=\"$implicit\" let-index=\"index\">\n <tr *ngIf=\"!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)\">\n <td *ngIf=\"datePicker.showWeeks\" class=\"h6\" class=\"text-center\">\n <em>{{ weekNumbers[index] }}</em>\n </td>\n <td *ngFor=\"let dtz of rowz\" class=\"text-center\" role=\"gridcell\" [id]=\"dtz.uid\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-sm {{dtz.customClass}}\"\n *ngIf=\"!(datePicker.onlyCurrentMonth && dtz.secondary)\"\n [ngClass]=\"{'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz), 'btn-default': !isBs4}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-muted': dtz.secondary || dtz.current, 'text-info': !isBs4 && dtz.current}\">{{ dtz.label }}</span>\n </button>\n </td>\n </tr>\n </ng-template>\n </tbody>\n</table>\n ",
styles: ["\n :host .btn-secondary {\n color: #292b2c;\n background-color: #fff;\n border-color: #ccc;\n }\n :host .btn-info .text-muted {\n color: #292b2c !important;\n }\n "]
}] }
];
// todo: key events implementation
/** @nocollapse */
DayPickerComponent.ctorParameters = function () { return [
{ type: DatePickerInnerComponent, },
]; };
return DayPickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MonthPickerComponent = /** @class */ (function () {
function MonthPickerComponent(datePicker) {
this.rows = [];
this.datePicker = datePicker;
}
Object.defineProperty(MonthPickerComponent.prototype, "isBs4", {
get: /**
* @return {?}
*/
function () {
return !isBs3();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MonthPickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ self = this;
this.datePicker.stepMonth = { years: 1 };
this.datePicker.setRefreshViewHandler(function () {
var /** @type {?} */ months = new Array(12);
var /** @type {?} */ year = this.activeDate.getFullYear();
var /** @type {?} */ date;
for (var /** @type {?} */ i = 0; i < 12; i++) {
date = new Date(year, i, 1);
date = this.fixTimeZone(date);
months[i] = this.createDateObject(date, this.formatMonth);
months[i].uid = this.uniqueId + '-' + i;
}
self.title = this.dateFilter(this.activeDate, this.formatMonthTitle);
self.rows = this.split(months, self.datePicker.monthColLimit);
}, 'month');
this.datePicker.setCompareHandler(function (date1, date2) {
var /** @type {?} */ d1 = new Date(date1.getFullYear(), date1.getMonth());
var /** @type {?} */ d2 = new Date(date2.getFullYear(), date2.getMonth());
return d1.getTime() - d2.getTime();
}, 'month');
this.datePicker.refreshView();
};
MonthPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'monthpicker',
template: "\n<table *ngIf=\"datePicker.datepickerMode==='month'\" role=\"grid\">\n <thead>\n <tr>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-left float-left\"\n (click)=\"datePicker.move(-1)\" tabindex=\"-1\">\u2039</button></th>\n <th [attr.colspan]=\"((datePicker.monthColLimit - 2) <= 0) ? 1 : datePicker.monthColLimit - 2\">\n <button [id]=\"datePicker.uniqueId + '-title'\"\n type=\"button\" class=\"btn btn-default btn-sm\"\n (click)=\"datePicker.toggleMode(0)\"\n [disabled]=\"datePicker.datepickerMode === maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{ title }}</strong> \n </button>\n </th>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-right float-right\"\n (click)=\"datePicker.move(1)\" tabindex=\"-1\">\u203A</button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let rowz of rows\">\n <td *ngFor=\"let dtz of rowz\" class=\"text-center\" role=\"gridcell\" [attr.id]=\"dtz.uid\" [ngClass]=\"dtz.customClass\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\"\n [ngClass]=\"{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current}\">{{ dtz.label }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n ",
styles: ["\n :host .btn-info .text-success {\n color: #fff !important;\n }\n "]
}] }
];
// todo: key events implementation
/** @nocollapse */
MonthPickerComponent.ctorParameters = function () { return [
{ type: DatePickerInnerComponent, },
]; };
return MonthPickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var YearPickerComponent = /** @class */ (function () {
function YearPickerComponent(datePicker) {
this.rows = [];
this.datePicker = datePicker;
}
Object.defineProperty(YearPickerComponent.prototype, "isBs4", {
get: /**
* @return {?}
*/
function () {
return !isBs3();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
YearPickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ self = this;
this.datePicker.stepYear = { years: this.datePicker.yearRange };
this.datePicker.setRefreshViewHandler(function () {
var /** @type {?} */ years = new Array(this.yearRange);
var /** @type {?} */ date;
var /** @type {?} */ start = self.getStartingYear(this.activeDate.getFullYear());
for (var /** @type {?} */ i = 0; i < this.yearRange; i++) {
date = new Date(start + i, 0, 1);
date = this.fixTimeZone(date);
years[i] = this.createDateObject(date, this.formatYear);
years[i].uid = this.uniqueId + '-' + i;
}
self.title = [years[0].label, years[this.yearRange - 1].label].join(' - ');
self.rows = this.split(years, self.datePicker.yearColLimit);
}, 'year');
this.datePicker.setCompareHandler(function (date1, date2) {
return date1.getFullYear() - date2.getFullYear();
}, 'year');
this.datePicker.refreshView();
};
/**
* @param {?} year
* @return {?}
*/
YearPickerComponent.prototype.getStartingYear = /**
* @param {?} year
* @return {?}
*/
function (year) {
// todo: parseInt
return ((year - 1) / this.datePicker.yearRange * this.datePicker.yearRange + 1);
};
YearPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'yearpicker',
template: "\n<table *ngIf=\"datePicker.datepickerMode==='year'\" role=\"grid\">\n <thead>\n <tr>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-left float-left\"\n (click)=\"datePicker.move(-1)\" tabindex=\"-1\">\u2039</button>\n </th>\n <th [attr.colspan]=\"((datePicker.yearColLimit - 2) <= 0) ? 1 : datePicker.yearColLimit - 2\">\n <button [id]=\"datePicker.uniqueId + '-title'\" role=\"heading\"\n type=\"button\" class=\"btn btn-default btn-sm\"\n (click)=\"datePicker.toggleMode(0)\"\n [disabled]=\"datePicker.datepickerMode === datePicker.maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === datePicker.maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-right float-right\"\n (click)=\"datePicker.move(1)\" tabindex=\"-1\">\u203A</button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let rowz of rows\">\n <td *ngFor=\"let dtz of rowz\" class=\"text-center\" role=\"gridcell\" [attr.id]=\"dtz.uid\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\"\n [ngClass]=\"{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current}\">{{ dtz.label }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n ",
styles: ["\n :host .btn-info .text-success {\n color: #fff !important;\n }\n "]
}] }
];
/** @nocollapse */
YearPickerComponent.ctorParameters = function () { return [
{ type: DatePickerInnerComponent, },
]; };
return YearPickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatepickerModule = /** @class */ (function () {
function DatepickerModule() {
}
/**
* @return {?}
*/
DatepickerModule.forRoot = /**
* @return {?}
*/
function () {
return { ngModule: DatepickerModule, providers: [DatepickerConfig] };
};
DatepickerModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
declarations: [
DatePickerComponent,
DatePickerInnerComponent,
DayPickerComponent,
MonthPickerComponent,
YearPickerComponent
],
exports: [
DatePickerComponent,
DatePickerInnerComponent,
DayPickerComponent,
MonthPickerComponent,
YearPickerComponent
],
entryComponents: [DatePickerComponent]
},] }
];
return DatepickerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
var /**
* @abstract
*/
BsDatepickerAbstractComponent = /** @class */ (function () {
function BsDatepickerAbstractComponent() {
this._customRangesFish = [];
}
Object.defineProperty(BsDatepickerAbstractComponent.prototype, "minDate", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._effects.setMinDate(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDatepickerAbstractComponent.prototype, "maxDate", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._effects.setMaxDate(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDatepickerAbstractComponent.prototype, "isDisabled", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._effects.setDisabled(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.setViewMode = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.navigateTo = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.dayHoverHandler = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.monthHoverHandler = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.yearHoverHandler = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} day
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.daySelectHandler = /**
* @param {?} day
* @return {?}
*/
function (day) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.monthSelectHandler = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype.yearSelectHandler = /**
* @param {?} event
* @return {?}
*/
function (event) { };
/* tslint:disable-next-line: no-any */
/**
* @param {?} event
* @return {?}
*/
BsDatepickerAbstractComponent.prototype._stopPropagation = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
};
return BsDatepickerAbstractComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* For date range picker there are `BsDaterangepickerConfig` which inherits all properties,
* except `displayMonths`, for range picker it default to `2`
*/
var BsDatepickerConfig = /** @class */ (function () {
function BsDatepickerConfig() {
/**
* CSS class which will be applied to datepicker container,
* usually used to set color theme
*/
this.containerClass = 'theme-green';
// DatepickerRenderOptions
this.displayMonths = 1;
/**
* Allows to hide week numbers in datepicker
*/
this.showWeekNumbers = true;
this.dateInputFormat = 'L';
// range picker
this.rangeSeparator = ' - ';
/**
* Date format for date range input field
*/
this.rangeInputFormat = 'L';
// DatepickerFormatOptions
this.monthTitle = 'MMMM';
this.yearTitle = 'YYYY';
this.dayLabel = 'D';
this.monthLabel = 'MMMM';
this.yearLabel = 'YYYY';
this.weekNumbers = 'w';
}
BsDatepickerConfig.decorators = [
{ type: Injectable }
];
return BsDatepickerConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var BsDatepickerActions = /** @class */ (function () {
function BsDatepickerActions() {
}
/**
* @return {?}
*/
BsDatepickerActions.prototype.calculate = /**
* @return {?}
*/
function () {
return { type: BsDatepickerActions.CALCULATE };
};
/**
* @return {?}
*/
BsDatepickerActions.prototype.format = /**
* @return {?}
*/
function () {
return { type: BsDatepickerActions.FORMAT };
};
/**
* @return {?}
*/
BsDatepickerActions.prototype.flag = /**
* @return {?}
*/
function () {
return { type: BsDatepickerActions.FLAG };
};
/**
* @param {?} date
* @return {?}
*/
BsDatepickerActions.prototype.select = /**
* @param {?} date
* @return {?}
*/
function (date) {
return {
type: BsDatepickerActions.SELECT,
payload: date
};
};
/**
* @param {?} event
* @return {?}
*/
BsDatepickerActions.prototype.changeViewMode = /**
* @param {?} event
* @return {?}
*/
function (event) {
return {
type: BsDatepickerActions.CHANGE_VIEWMODE,
payload: event
};
};
/**
* @param {?} event
* @return {?}
*/
BsDatepickerActions.prototype.navigateTo = /**
* @param {?} event
* @return {?}
*/
function (event) {
return {
type: BsDatepickerActions.NAVIGATE_TO,
payload: event
};
};
/**
* @param {?} step
* @return {?}
*/
BsDatepickerActions.prototype.navigateStep = /**
* @param {?} step
* @return {?}
*/
function (step) {
return {
type: BsDatepickerActions.NAVIGATE_OFFSET,
payload: step
};
};
/**
* @param {?} options
* @return {?}
*/
BsDatepickerActions.prototype.setOptions = /**
* @param {?} options
* @return {?}
*/
function (options) {
return {
type: BsDatepickerActions.SET_OPTIONS,
payload: options
};
};
// date range picker
/**
* @param {?} value
* @return {?}
*/
BsDatepickerActions.prototype.selectRange = /**
* @param {?} value
* @return {?}
*/
function (value) {
return {
type: BsDatepickerActions.SELECT_RANGE,
payload: value
};
};
/**
* @param {?} event
* @return {?}
*/
BsDatepickerActions.prototype.hoverDay = /**
* @param {?} event
* @return {?}
*/
function (event) {
return {
type: BsDatepickerActions.HOVER,
payload: event.isHovered ? event.cell.date : null
};
};
/**
* @param {?} date
* @return {?}
*/
BsDatepickerActions.prototype.minDate = /**
* @param {?} date
* @return {?}
*/
function (dat