ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,402 lines (1,391 loc) • 128 kB
JavaScript
import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule, ChangeDetectorRef, forwardRef, Renderer2, ElementRef, Host, Optional } from '@angular/core';
import { isTemplateRef, isNonEmptyString, CandyDate, sortRangeValue, slideMotion, InputBoolean, toBoolean, valueFunctionProp, NzNoAnimationDirective, NzOverlayModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DateHelperService, NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
import { NzCalendarModule } from 'ng-zorro-antd/calendar';
import { __decorate, __metadata } from 'tslib';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CalendarFooterComponent {
constructor() {
this.showToday = false;
this.hasTimePicker = false;
this.isRange = false;
this.showTimePicker = false;
this.showTimePickerChange = new EventEmitter();
this.timePickerDisabled = false;
this.okDisabled = false;
this.clickOk = new EventEmitter();
this.clickToday = new EventEmitter();
this.prefixCls = 'ant-calendar';
this.isTemplateRef = isTemplateRef;
this.isNonEmptyString = isNonEmptyString;
}
}
CalendarFooterComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'calendar-footer',
exportAs: 'calendarFooter',
template: "<div class=\"{{ prefixCls }}-footer {{ isRange ? prefixCls + '-range-bottom' : '' }} {{ hasTimePicker ? prefixCls + '-footer-show-ok' : '' }}\">\n <div *ngIf=\"rangeQuickSelector\" class=\"{{ prefixCls }}-footer-extra {{ prefixCls }}-range-quick-selector\">\n <ng-container *ngTemplateOutlet=\"rangeQuickSelector\"></ng-container>\n </div>\n <div *ngIf=\"extraFooter\" class=\"{{ prefixCls }}-footer-extra {{ isRange ? prefixCls + '-range-quick-selector' : '' }}\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(extraFooter)\">\n <ng-container *ngTemplateOutlet=\"extraFooter\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(extraFooter)\">\n <span [innerHTML]=\"extraFooter\"></span>\n </ng-container>\n </ng-container>\n </div>\n <span *ngIf=\"showToday || hasTimePicker\" class=\"{{ prefixCls }}-footer-btn\">\n <today-button\n *ngIf=\"showToday\"\n [locale]=\"locale\"\n [disabledDate]=\"disabledDate\"\n [hasTimePicker]=\"hasTimePicker\"\n (clickToday)=\"clickToday.emit($event)\"\n ></today-button>\n <time-picker-button\n *ngIf=\"hasTimePicker\"\n [locale]=\"locale\"\n [timePickerDisabled]=\"timePickerDisabled\"\n [showTimePicker]=\"showTimePicker\"\n (showTimePickerChange)=\"showTimePickerChange.emit($event)\"\n ></time-picker-button>\n <ok-button\n *ngIf=\"hasTimePicker\"\n [okDisabled]=\"okDisabled\"\n [locale]=\"locale\"\n (clickOk)=\"clickOk.emit()\"\n ></ok-button>\n </span>\n</div>"
}] }
];
CalendarFooterComponent.propDecorators = {
locale: [{ type: Input }],
showToday: [{ type: Input }],
hasTimePicker: [{ type: Input }],
isRange: [{ type: Input }],
showTimePicker: [{ type: Input }],
showTimePickerChange: [{ type: Output }],
timePickerDisabled: [{ type: Input }],
okDisabled: [{ type: Input }],
disabledDate: [{ type: Input }],
extraFooter: [{ type: Input }],
rangeQuickSelector: [{ type: Input }],
clickOk: [{ type: Output }],
clickToday: [{ type: Output }]
};
if (false) {
/** @type {?} */
CalendarFooterComponent.prototype.locale;
/** @type {?} */
CalendarFooterComponent.prototype.showToday;
/** @type {?} */
CalendarFooterComponent.prototype.hasTimePicker;
/** @type {?} */
CalendarFooterComponent.prototype.isRange;
/** @type {?} */
CalendarFooterComponent.prototype.showTimePicker;
/** @type {?} */
CalendarFooterComponent.prototype.showTimePickerChange;
/** @type {?} */
CalendarFooterComponent.prototype.timePickerDisabled;
/** @type {?} */
CalendarFooterComponent.prototype.okDisabled;
/** @type {?} */
CalendarFooterComponent.prototype.disabledDate;
/** @type {?} */
CalendarFooterComponent.prototype.extraFooter;
/** @type {?} */
CalendarFooterComponent.prototype.rangeQuickSelector;
/** @type {?} */
CalendarFooterComponent.prototype.clickOk;
/** @type {?} */
CalendarFooterComponent.prototype.clickToday;
/** @type {?} */
CalendarFooterComponent.prototype.prefixCls;
/** @type {?} */
CalendarFooterComponent.prototype.isTemplateRef;
/** @type {?} */
CalendarFooterComponent.prototype.isNonEmptyString;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CalendarHeaderComponent {
// Indicate whether should change to month panel when current is year panel (if referer=month, it should show month panel when choosed a year)
/**
* @param {?} dateHelper
*/
constructor(dateHelper) {
this.dateHelper = dateHelper;
this.enablePrev = true;
this.enableNext = true;
this.showTimePicker = false;
this.valueChange = new EventEmitter();
this.panelModeChange = new EventEmitter();
this.chooseDecade = new EventEmitter();
this.chooseYear = new EventEmitter();
this.chooseMonth = new EventEmitter();
this.prefixCls = 'ant-calendar';
this.yearToMonth = false; // Indicate whether should change to month panel when current is year panel (if referer=month, it should show month panel when choosed a year)
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.value) {
this.value = new CandyDate(); // Show today by default
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.value || changes.showTimePicker || changes.panelMode) {
this.render();
}
}
/**
* @return {?}
*/
previousYear() {
this.gotoYear(-1);
}
/**
* @return {?}
*/
nextYear() {
this.gotoYear(1);
}
/**
* @return {?}
*/
previousMonth() {
this.gotoMonth(-1);
}
/**
* @return {?}
*/
nextMonth() {
this.gotoMonth(1);
}
/**
* @param {?} mode
* @param {?=} value
* @return {?}
*/
changePanel(mode, value) {
this.panelModeChange.emit(mode);
if (value) {
this.changeValueFromInside(value);
}
}
/**
* @param {?} value
* @return {?}
*/
onChooseDecade(value) {
this.changePanel('year', value);
this.chooseDecade.emit(value);
}
/**
* @param {?} value
* @return {?}
*/
onChooseYear(value) {
this.changePanel(this.yearToMonth ? 'month' : 'date', value);
this.yearToMonth = false; // Clear
this.chooseYear.emit(value);
}
/**
* @param {?} value
* @return {?}
*/
onChooseMonth(value) {
this.changePanel('date', value);
this.yearToMonth = false; // Clear
this.chooseMonth.emit(value);
}
/**
* @return {?}
*/
changeToMonthPanel() {
this.changePanel('month');
this.yearToMonth = true;
}
/**
* @private
* @return {?}
*/
render() {
if (this.value) {
this.yearMonthDaySelectors = this.createYearMonthDaySelectors();
}
}
/**
* @private
* @param {?} amount
* @return {?}
*/
gotoMonth(amount) {
this.changeValueFromInside(this.value.addMonths(amount));
}
/**
* @private
* @param {?} amount
* @return {?}
*/
gotoYear(amount) {
this.changeValueFromInside(this.value.addYears(amount));
}
/**
* @private
* @param {?} value
* @return {?}
*/
changeValueFromInside(value) {
if (this.value !== value) {
this.value = value;
this.valueChange.emit(this.value);
this.render();
}
}
/**
* @private
* @param {?} localeFormat
* @return {?}
*/
formatDateTime(localeFormat) {
return this.dateHelper.format(this.value.nativeDate, localeFormat);
}
/**
* @private
* @return {?}
*/
createYearMonthDaySelectors() {
/** @type {?} */
let year;
/** @type {?} */
let month;
/** @type {?} */
let day;
// NOTE: Compat for DatePipe formatting rules
/** @type {?} */
let yearFormat = this.locale.yearFormat;
if (this.dateHelper.relyOnDatePipe) {
yearFormat = ((/** @type {?} */ (this.dateHelper))).transCompatFormat(yearFormat);
}
year = {
className: `${this.prefixCls}-year-select`,
title: this.locale.yearSelect,
onClick: (/**
* @return {?}
*/
() => (this.showTimePicker ? null : this.changePanel('year'))),
label: this.formatDateTime(yearFormat)
};
month = {
className: `${this.prefixCls}-month-select`,
title: this.locale.monthSelect,
onClick: (/**
* @return {?}
*/
() => (this.showTimePicker ? null : this.changeToMonthPanel())),
label: this.formatDateTime(this.locale.monthFormat || 'MMM')
};
// NOTE: Compat for DatePipe formatting rules
/** @type {?} */
let dayFormat = this.locale.dayFormat;
if (this.dateHelper.relyOnDatePipe) {
dayFormat = ((/** @type {?} */ (this.dateHelper))).transCompatFormat(dayFormat);
}
if (this.showTimePicker) {
day = {
className: `${this.prefixCls}-day-select`,
label: this.formatDateTime(dayFormat)
};
}
/** @type {?} */
let result;
if (this.locale.monthBeforeYear) {
result = [month, (/** @type {?} */ (day)), year];
}
else {
result = [year, month, (/** @type {?} */ (day))];
}
return result.filter((/**
* @param {?} selector
* @return {?}
*/
selector => !!selector));
}
}
CalendarHeaderComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'calendar-header',
exportAs: 'calendarHeader',
template: "<div class=\"{{ prefixCls }}-header\">\n <div style=\"position: relative;\">\n <a *ngIf=\"enablePrev && !showTimePicker\"\n class=\"{{ prefixCls }}-prev-year-btn\"\n role=\"button\"\n (click)=\"previousYear()\"\n title=\"{{ locale.previousYear }}\"\n ></a>\n <a *ngIf=\"enablePrev && !showTimePicker\"\n class=\"{{ prefixCls }}-prev-month-btn\"\n role=\"button\"\n (click)=\"previousMonth()\"\n title=\"{{ locale.previousMonth }}\"\n ></a>\n\n <span class=\"{{ prefixCls }}-{{ locale.monthBeforeYear ? 'my-select' : 'ym-select' }}\">\n <ng-container *ngFor=\"let selector of yearMonthDaySelectors\">\n <a class=\"{{ selector.className }}\"\n role=\"button\"\n (click)=\"selector.onClick ? selector.onClick() : null\"\n title=\"{{ selector.title || null }}\"\n >\n {{ selector.label }}\n </a>\n </ng-container>\n </span>\n\n <a *ngIf=\"enableNext && !showTimePicker\"\n class=\"{{ prefixCls }}-next-month-btn\"\n role=\"button\"\n (click)=\"nextMonth()\"\n title=\"{{ locale.nextMonth }}\"\n ></a>\n <a *ngIf=\"enableNext && !showTimePicker\"\n class=\"{{ prefixCls }}-next-year-btn\"\n role=\"button\"\n (click)=\"nextYear()\"\n title=\"{{ locale.nextYear }}\"\n ></a>\n </div>\n\n <ng-container [ngSwitch]=\"panelMode\">\n <ng-container *ngSwitchCase=\"'decade'\">\n <decade-panel\n [locale]=\"locale\"\n [value]=\"value\"\n (valueChange)=\"onChooseDecade($event)\"\n ></decade-panel>\n </ng-container>\n <ng-container *ngSwitchCase=\"'year'\">\n <year-panel\n [locale]=\"locale\"\n [value]=\"value\"\n [disabledDate]=\"disabledYear\"\n (valueChange)=\"onChooseYear($event)\"\n (decadePanelShow)=\"changePanel('decade')\"\n ></year-panel>\n </ng-container>\n <ng-container *ngSwitchCase=\"'month'\">\n <month-panel\n [locale]=\"locale\"\n [value]=\"value\"\n [disabledDate]=\"disabledMonth\"\n (valueChange)=\"onChooseMonth($event)\"\n (yearPanelShow)=\"changePanel('year')\"\n ></month-panel>\n </ng-container>\n </ng-container>\n</div>"
}] }
];
/** @nocollapse */
CalendarHeaderComponent.ctorParameters = () => [
{ type: DateHelperService }
];
CalendarHeaderComponent.propDecorators = {
locale: [{ type: Input }],
enablePrev: [{ type: Input }],
enableNext: [{ type: Input }],
disabledMonth: [{ type: Input }],
disabledYear: [{ type: Input }],
showTimePicker: [{ type: Input }],
value: [{ type: Input }],
valueChange: [{ type: Output }],
panelMode: [{ type: Input }],
panelModeChange: [{ type: Output }],
chooseDecade: [{ type: Output }],
chooseYear: [{ type: Output }],
chooseMonth: [{ type: Output }]
};
if (false) {
/** @type {?} */
CalendarHeaderComponent.prototype.locale;
/** @type {?} */
CalendarHeaderComponent.prototype.enablePrev;
/** @type {?} */
CalendarHeaderComponent.prototype.enableNext;
/** @type {?} */
CalendarHeaderComponent.prototype.disabledMonth;
/** @type {?} */
CalendarHeaderComponent.prototype.disabledYear;
/** @type {?} */
CalendarHeaderComponent.prototype.showTimePicker;
/** @type {?} */
CalendarHeaderComponent.prototype.value;
/** @type {?} */
CalendarHeaderComponent.prototype.valueChange;
/** @type {?} */
CalendarHeaderComponent.prototype.panelMode;
/** @type {?} */
CalendarHeaderComponent.prototype.panelModeChange;
/** @type {?} */
CalendarHeaderComponent.prototype.chooseDecade;
/** @type {?} */
CalendarHeaderComponent.prototype.chooseYear;
/** @type {?} */
CalendarHeaderComponent.prototype.chooseMonth;
/** @type {?} */
CalendarHeaderComponent.prototype.prefixCls;
/** @type {?} */
CalendarHeaderComponent.prototype.yearMonthDaySelectors;
/**
* @type {?}
* @private
*/
CalendarHeaderComponent.prototype.yearToMonth;
/**
* @type {?}
* @private
*/
CalendarHeaderComponent.prototype.dateHelper;
}
/**
* @record
*/
function YearMonthDaySelector() { }
if (false) {
/** @type {?} */
YearMonthDaySelector.prototype.className;
/** @type {?|undefined} */
YearMonthDaySelector.prototype.title;
/** @type {?} */
YearMonthDaySelector.prototype.label;
/**
* @return {?}
*/
YearMonthDaySelector.prototype.onClick = function () { };
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CalendarInputComponent {
/**
* @param {?} dateHelper
*/
constructor(dateHelper) {
this.dateHelper = dateHelper;
this.valueChange = new EventEmitter();
this.prefixCls = 'ant-calendar';
this.invalidInputClass = '';
}
/**
* @return {?}
*/
ngOnInit() {
if (this.autoFocus) {
this.inputRef.nativeElement.focus();
}
}
/**
* @param {?} event
* @param {?=} isEnter
* @return {?}
*/
onInputKeyup(event, isEnter = false) {
/** @type {?} */
const date = this.checkValidInputDate(event);
if (!date || (this.disabledDate && this.disabledDate(date.nativeDate))) {
return;
}
this.value = date;
this.valueChange.emit({ date, isEnter });
}
/**
* @param {?} value
* @return {?}
*/
toReadableInput(value) {
return value ? this.dateHelper.format(value.nativeDate, this.format) : '';
}
/**
* @private
* @param {?} event
* @return {?}
*/
checkValidInputDate(event) {
/** @type {?} */
const input = ((/** @type {?} */ (event.target))).value;
/** @type {?} */
const date = new CandyDate(input);
this.invalidInputClass = '';
if (!date.isValid() || input !== this.toReadableInput(date)) {
// Should also match the input format exactly
this.invalidInputClass = `${this.prefixCls}-input-invalid`;
return null;
}
return date;
}
}
CalendarInputComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'calendar-input',
exportAs: 'calendarInput',
template: "<div class=\"{{ prefixCls }}-input-wrap\">\n <div class=\"{{ prefixCls }}-date-input-wrap\">\n <input\n class=\"{{ prefixCls }}-input {{ invalidInputClass }}\"\n placeholder=\"{{ placeholder || locale.dateSelect }}\"\n value=\"{{ toReadableInput(value) }}\"\n (input)=\"onInputKeyup($event)\"\n (keyup.enter)=\"onInputKeyup($event, true)\"\n #inputElement\n />\n </div>\n <a class=\"{{ prefixCls }}-clear-btn\" role=\"button\" title=\"{{ locale.clear }}\"></a>\n</div>\n"
}] }
];
/** @nocollapse */
CalendarInputComponent.ctorParameters = () => [
{ type: DateHelperService }
];
CalendarInputComponent.propDecorators = {
locale: [{ type: Input }],
format: [{ type: Input }],
placeholder: [{ type: Input }],
disabledDate: [{ type: Input }],
value: [{ type: Input }],
autoFocus: [{ type: Input }],
inputRef: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
valueChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
CalendarInputComponent.prototype.locale;
/** @type {?} */
CalendarInputComponent.prototype.format;
/** @type {?} */
CalendarInputComponent.prototype.placeholder;
/** @type {?} */
CalendarInputComponent.prototype.disabledDate;
/** @type {?} */
CalendarInputComponent.prototype.value;
/** @type {?} */
CalendarInputComponent.prototype.autoFocus;
/** @type {?} */
CalendarInputComponent.prototype.inputRef;
/** @type {?} */
CalendarInputComponent.prototype.valueChange;
/** @type {?} */
CalendarInputComponent.prototype.prefixCls;
/** @type {?} */
CalendarInputComponent.prototype.invalidInputClass;
/**
* @type {?}
* @private
*/
CalendarInputComponent.prototype.dateHelper;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class OkButtonComponent {
constructor() {
this.okDisabled = false;
this.clickOk = new EventEmitter();
this.prefixCls = 'ant-calendar';
}
}
OkButtonComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'ok-button',
exportAs: 'okButton',
template: "<a\n class=\"{{ prefixCls }}-ok-btn {{ okDisabled ? prefixCls + '-ok-btn-disabled' : '' }}\"\n role=\"button\"\n (click)=\"okDisabled ? null : clickOk.emit()\"\n >\n {{ locale.ok }}\n </a>"
}] }
];
OkButtonComponent.propDecorators = {
locale: [{ type: Input }],
okDisabled: [{ type: Input }],
clickOk: [{ type: Output }]
};
if (false) {
/** @type {?} */
OkButtonComponent.prototype.locale;
/** @type {?} */
OkButtonComponent.prototype.okDisabled;
/** @type {?} */
OkButtonComponent.prototype.clickOk;
/** @type {?} */
OkButtonComponent.prototype.prefixCls;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TimePickerButtonComponent {
constructor() {
this.timePickerDisabled = false;
this.showTimePicker = false;
this.showTimePickerChange = new EventEmitter();
this.prefixCls = 'ant-calendar';
}
/**
* @return {?}
*/
onClick() {
this.showTimePicker = !this.showTimePicker;
this.showTimePickerChange.emit(this.showTimePicker);
}
}
TimePickerButtonComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'time-picker-button',
exportAs: 'timePickerButton',
template: "<a\n class=\"{{ prefixCls }}-time-picker-btn {{ timePickerDisabled ? prefixCls + '-time-picker-btn-disabled' : '' }}\"\n role=\"button\"\n (click)=\"timePickerDisabled ? null : onClick()\"\n>\n {{ showTimePicker ? locale.dateSelect : locale.timeSelect }}\n</a>"
}] }
];
TimePickerButtonComponent.propDecorators = {
locale: [{ type: Input }],
timePickerDisabled: [{ type: Input }],
showTimePicker: [{ type: Input }],
showTimePickerChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
TimePickerButtonComponent.prototype.locale;
/** @type {?} */
TimePickerButtonComponent.prototype.timePickerDisabled;
/** @type {?} */
TimePickerButtonComponent.prototype.showTimePicker;
/** @type {?} */
TimePickerButtonComponent.prototype.showTimePickerChange;
/** @type {?} */
TimePickerButtonComponent.prototype.prefixCls;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TodayButtonComponent {
/**
* @param {?} dateHelper
*/
constructor(dateHelper) {
this.dateHelper = dateHelper;
this.hasTimePicker = false;
this.clickToday = new EventEmitter();
this.prefixCls = 'ant-calendar';
this.isDisabled = false;
this.now = new CandyDate();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.disabledDate) {
this.isDisabled = this.disabledDate && this.disabledDate(this.now.nativeDate);
}
if (changes.locale) {
// NOTE: Compat for DatePipe formatting rules
/** @type {?} */
let dateFormat = this.locale.dateFormat;
if (this.dateHelper.relyOnDatePipe) {
dateFormat = ((/** @type {?} */ (this.dateHelper))).transCompatFormat(dateFormat);
}
this.title = this.dateHelper.format(this.now.nativeDate, dateFormat);
}
}
/**
* @return {?}
*/
onClickToday() {
this.clickToday.emit(this.now.clone()); // To prevent the "now" being modified from outside, we use clone
}
}
TodayButtonComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'today-button',
exportAs: 'todayButton',
template: "<a\n class=\"{{ prefixCls }}-today-btn {{ isDisabled ? prefixCls + '-today-btn-disabled' : '' }}\"\n role=\"button\"\n (click)=\"isDisabled ? null : onClickToday()\"\n title=\"{{ title }}\"\n>\n {{ hasTimePicker ? locale.now : locale.today }}\n</a>"
}] }
];
/** @nocollapse */
TodayButtonComponent.ctorParameters = () => [
{ type: DateHelperService }
];
TodayButtonComponent.propDecorators = {
locale: [{ type: Input }],
hasTimePicker: [{ type: Input }],
disabledDate: [{ type: Input }],
clickToday: [{ type: Output }]
};
if (false) {
/** @type {?} */
TodayButtonComponent.prototype.locale;
/** @type {?} */
TodayButtonComponent.prototype.hasTimePicker;
/** @type {?} */
TodayButtonComponent.prototype.disabledDate;
/** @type {?} */
TodayButtonComponent.prototype.clickToday;
/** @type {?} */
TodayButtonComponent.prototype.prefixCls;
/** @type {?} */
TodayButtonComponent.prototype.isDisabled;
/** @type {?} */
TodayButtonComponent.prototype.title;
/**
* @type {?}
* @private
*/
TodayButtonComponent.prototype.now;
/**
* @type {?}
* @private
*/
TodayButtonComponent.prototype.dateHelper;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const MAX_ROW = 4;
/** @type {?} */
const MAX_COL = 3;
class DecadePanelComponent {
constructor() {
this.valueChange = new EventEmitter();
this.prefixCls = 'ant-calendar-decade-panel';
}
/**
* @return {?}
*/
get startYear() {
return parseInt(`${this.value.getYear() / 100}`, 10) * 100;
}
/**
* @return {?}
*/
get endYear() {
return this.startYear + 99;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.value) {
this.render();
}
}
/**
* @return {?}
*/
previousCentury() {
this.gotoYear(-100);
}
/**
* @return {?}
*/
nextCentury() {
this.gotoYear(100);
}
/**
* @param {?} _index
* @param {?} decadeData
* @return {?}
*/
trackPanelDecade(_index, decadeData) {
return decadeData.content;
}
/**
* @private
* @return {?}
*/
render() {
if (this.value) {
this.panelDecades = this.makePanelDecades();
}
}
// Re-render panel content by the header's buttons (NOTE: Do not try to trigger final value change)
/**
* @private
* @param {?} amount
* @return {?}
*/
gotoYear(amount) {
this.value = this.value.addYears(amount);
// this.valueChange.emit(this.value); // Do not try to trigger final value change
this.render();
}
/**
* @private
* @param {?} startYear
* @return {?}
*/
chooseDecade(startYear) {
this.value = this.value.setYear(startYear);
this.valueChange.emit(this.value);
}
/**
* @private
* @return {?}
*/
makePanelDecades() {
/** @type {?} */
const decades = [];
/** @type {?} */
const currentYear = this.value.getYear();
/** @type {?} */
const startYear = this.startYear;
/** @type {?} */
const endYear = this.endYear;
/** @type {?} */
const previousYear = startYear - 10;
/** @type {?} */
let index = 0;
for (let rowIndex = 0; rowIndex < MAX_ROW; rowIndex++) {
decades[rowIndex] = [];
for (let colIndex = 0; colIndex < MAX_COL; colIndex++) {
/** @type {?} */
const start = previousYear + index * 10;
/** @type {?} */
const end = previousYear + index * 10 + 9;
/** @type {?} */
const content = `${start}-${end}`;
/** @type {?} */
const cell = (decades[rowIndex][colIndex] = {
content,
title: content,
isCurrent: currentYear >= start && currentYear <= end,
isLowerThanStart: end < startYear,
isBiggerThanEnd: start > endYear,
classMap: null,
onClick: null
});
cell.classMap = {
[`${this.prefixCls}-cell`]: true,
[`${this.prefixCls}-selected-cell`]: cell.isCurrent,
[`${this.prefixCls}-last-century-cell`]: cell.isLowerThanStart,
[`${this.prefixCls}-next-century-cell`]: cell.isBiggerThanEnd
};
if (cell.isLowerThanStart) {
cell.onClick = (/**
* @return {?}
*/
() => this.previousCentury());
}
else if (cell.isBiggerThanEnd) {
cell.onClick = (/**
* @return {?}
*/
() => this.nextCentury());
}
else {
cell.onClick = (/**
* @return {?}
*/
() => this.chooseDecade(start));
}
index++;
}
}
return decades;
}
}
DecadePanelComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'decade-panel',
exportAs: 'decadePanel',
template: "<div class=\"{{ prefixCls }}\">\n <div class=\"{{ prefixCls }}-header\">\n <a\n class=\"{{ prefixCls }}-prev-century-btn\"\n role=\"button\"\n (click)=\"previousCentury()\"\n title=\"{{ locale.previousCentury }}\"\n ></a>\n\n <div class=\"{{ prefixCls }}-century\">\n {{ startYear }}-{{ endYear }}\n </div>\n <a\n class=\"{{ prefixCls }}-next-century-btn\"\n role=\"button\"\n (click)=\"nextCentury()\"\n title=\"{{ locale.nextCentury }}\"\n ></a>\n </div>\n <div class=\"{{ prefixCls }}-body\">\n <table class=\"{{ prefixCls }}-table\" cellSpacing=\"0\" role=\"grid\">\n <tbody class=\"{{ prefixCls }}-tbody\">\n <tr *ngFor=\"let row of panelDecades\" role=\"row\">\n <td *ngFor=\"let cell of row; trackBy: trackPanelDecade\"\n role=\"gridcell\"\n title=\"{{ cell.title }}\"\n (click)=\"cell.onClick()\"\n [ngClass]=\"cell.classMap\"\n >\n <a class=\"{{ prefixCls }}-decade\">{{ cell.content }}</a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>"
}] }
];
/** @nocollapse */
DecadePanelComponent.ctorParameters = () => [];
DecadePanelComponent.propDecorators = {
locale: [{ type: Input }],
value: [{ type: Input }],
valueChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
DecadePanelComponent.prototype.locale;
/** @type {?} */
DecadePanelComponent.prototype.value;
/** @type {?} */
DecadePanelComponent.prototype.valueChange;
/** @type {?} */
DecadePanelComponent.prototype.prefixCls;
/** @type {?} */
DecadePanelComponent.prototype.panelDecades;
}
/**
* @record
*/
function PanelDecadeData() { }
if (false) {
/** @type {?} */
PanelDecadeData.prototype.content;
/** @type {?} */
PanelDecadeData.prototype.title;
/** @type {?} */
PanelDecadeData.prototype.isCurrent;
/** @type {?} */
PanelDecadeData.prototype.isLowerThanStart;
/** @type {?} */
PanelDecadeData.prototype.isBiggerThanEnd;
/** @type {?|undefined} */
PanelDecadeData.prototype.classMap;
/** @type {?} */
PanelDecadeData.prototype.onClick;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MonthPanelComponent {
constructor() {
this.valueChange = new EventEmitter();
this.yearPanelShow = new EventEmitter();
this.prefixCls = 'ant-calendar-month-panel';
}
/**
* @return {?}
*/
previousYear() {
this.gotoYear(-1);
}
/**
* @return {?}
*/
nextYear() {
this.gotoYear(1);
}
// Re-render panel content by the header's buttons (NOTE: Do not try to trigger final value change)
/**
* @private
* @param {?} amount
* @return {?}
*/
gotoYear(amount) {
this.value = this.value.addYears(amount);
// this.valueChange.emit(this.value); // Do not try to trigger final value change
}
}
MonthPanelComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'month-panel',
// tslint:disable-line:component-selector
exportAs: 'monthPanel',
template: "<div class=\"{{ prefixCls }}\">\n <div>\n <div class=\"{{ prefixCls }}-header\">\n <a\n class=\"{{ prefixCls }}-prev-year-btn\"\n role=\"button\"\n (click)=\"previousYear()\"\n title=\"{{ locale.previousYear }}\"\n ></a>\n\n <a\n class=\"{{ prefixCls }}-year-select\"\n role=\"button\"\n (click)=\"yearPanelShow.emit()\"\n title=\"{{ locale.yearSelect }}\"\n >\n <span class=\"{{ prefixCls }}-year-select-content\">{{ value.getYear() }}</span>\n <span class=\"{{ prefixCls }}-year-select-arrow\">x</span>\n </a>\n\n <a\n class=\"{{ prefixCls }}-next-year-btn\"\n role=\"button\"\n (click)=\"nextYear()\"\n title=\"{{ locale.nextYear }}\"\n ></a>\n </div>\n <div class=\"{{ prefixCls }}-body\">\n <month-table [prefixCls]=\"'ant-calendar'\" [disabledDate]=\"disabledDate\" [value]=\"value\" (valueChange)=\"valueChange.emit($event)\"></month-table>\n </div>\n </div>\n</div>"
}] }
];
MonthPanelComponent.propDecorators = {
locale: [{ type: Input }],
value: [{ type: Input }],
disabledDate: [{ type: Input }],
valueChange: [{ type: Output }],
yearPanelShow: [{ type: Output }]
};
if (false) {
/** @type {?} */
MonthPanelComponent.prototype.locale;
/** @type {?} */
MonthPanelComponent.prototype.value;
/** @type {?} */
MonthPanelComponent.prototype.disabledDate;
/** @type {?} */
MonthPanelComponent.prototype.valueChange;
/** @type {?} */
MonthPanelComponent.prototype.yearPanelShow;
/** @type {?} */
MonthPanelComponent.prototype.prefixCls;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/** @type {?} */
const defaultDisabledTime = {
/**
* @return {?}
*/
nzDisabledHours() {
return [];
},
/**
* @return {?}
*/
nzDisabledMinutes() {
return [];
},
/**
* @return {?}
*/
nzDisabledSeconds() {
return [];
}
};
/**
* @param {?} value
* @param {?} disabledTime
* @return {?}
*/
function getTimeConfig(value, disabledTime) {
/** @type {?} */
let disabledTimeConfig = disabledTime ? disabledTime(value && value.nativeDate) : ((/** @type {?} */ ({})));
disabledTimeConfig = Object.assign({}, defaultDisabledTime, disabledTimeConfig);
return disabledTimeConfig;
}
/**
* @param {?} value
* @param {?} disabledTimeConfig
* @return {?}
*/
function isTimeValidByConfig(value, disabledTimeConfig) {
/** @type {?} */
let invalidTime = false;
if (value) {
/** @type {?} */
const hour = value.getHours();
/** @type {?} */
const minutes = value.getMinutes();
/** @type {?} */
const seconds = value.getSeconds();
/** @type {?} */
const disabledHours = disabledTimeConfig.nzDisabledHours();
if (disabledHours.indexOf(hour) === -1) {
/** @type {?} */
const disabledMinutes = disabledTimeConfig.nzDisabledMinutes(hour);
if (disabledMinutes.indexOf(minutes) === -1) {
/** @type {?} */
const disabledSeconds = disabledTimeConfig.nzDisabledSeconds(hour, minutes);
invalidTime = disabledSeconds.indexOf(seconds) !== -1;
}
else {
invalidTime = true;
}
}
else {
invalidTime = true;
}
}
return !invalidTime;
}
/**
* @param {?} value
* @param {?} disabledTime
* @return {?}
*/
function isTimeValid(value, disabledTime) {
/** @type {?} */
const disabledTimeConfig = getTimeConfig(value, disabledTime);
return isTimeValidByConfig(value, disabledTimeConfig);
}
/**
* @param {?} value
* @param {?=} disabledDate
* @param {?=} disabledTime
* @return {?}
*/
function isAllowedDate(value, disabledDate, disabledTime) {
if (disabledDate) {
if (disabledDate(value.nativeDate)) {
return false;
}
}
if (disabledTime) {
if (!isTimeValid(value, disabledTime)) {
return false;
}
}
return true;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DateRangePopupComponent {
constructor() {
this.panelModeChange = new EventEmitter();
this.calendarChange = new EventEmitter();
this.valueChange = new EventEmitter();
this.inputChange = new EventEmitter();
this.resultOk = new EventEmitter(); // Emitted when done with date selecting
// Emitted when done with date selecting
this.closePicker = new EventEmitter(); // Notify outside to close the picker panel
// Notify outside to close the picker panel
this.prefixCls = 'ant-calendar';
this.showTimePicker = false;
this.partTypeMap = { left: 0, right: 1 };
this.disabledStartTime = (/**
* @param {?} value
* @return {?}
*/
(value) => {
return this.disabledTime && this.disabledTime(value, 'start');
});
this.disabledEndTime = (/**
* @param {?} value
* @return {?}
*/
(value) => {
return this.disabledTime && this.disabledTime(value, 'end');
});
}
// Range ONLY
/**
* @return {?}
*/
get hasTimePicker() {
return !!this.showTime;
}
/**
* @return {?}
*/
get hasFooter() {
return this.showToday || this.hasTimePicker || !!this.extraFooter || !!this.ranges;
}
// tslint:disable-line:no-any
/**
* @return {?}
*/
ngOnInit() {
// Initialization for range properties to prevent errors while later assignment
if (this.isRange) {
['placeholder', 'panelMode', 'selectedValue', 'hoverValue'].forEach((/**
* @param {?} prop
* @return {?}
*/
prop => this.initialArray(prop)));
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.isRange) {
if (changes.value) {
// Re-initialize all related values
this.clearHoverValue();
this.selectedValue = (/** @type {?} */ (this.value));
this.valueForRangeShow = this.normalizeRangeValue((/** @type {?} */ (this.value)));
}
}
// Parse showTime options
if (changes.showTime || changes.disabledTime) {
if (this.showTime) {
this.buildTimeOptions();
}
}
// Show time picker when assigned panel mode as "time"
if (changes.panelMode && this.hasTimePicker) {
this.showTimePicker = this.panelMode === 'time';
}
}
/**
* @param {?} show
* @return {?}
*/
onShowTimePickerChange(show) {
// this.panelMode = show ? 'time' : 'date';
// this.panelModeChange.emit(this.panelMode);
this.panelModeChange.emit(show ? 'time' : 'date');
}
/**
* @return {?}
*/
onClickOk() {
this.setValue(this.value);
this.resultOk.emit();
}
/**
* @param {?} value
* @return {?}
*/
onClickToday(value) {
// if (this.isRange) { // Show today is not support by range
// throw new Error('"nzShowToday" is not support for "RangePicker"!');
// } else {
if (!this.isRange) {
// tslint:disable-next-line: no-any
this.value = (/** @type {?} */ (null)); // Clear current value to not sync time by next step
this.changeValueFromSelect(value);
}
this.closePickerPanel();
}
/**
* @param {?} value
* @return {?}
*/
onDayHover(value) {
if (this.isRange && this.selectedValue[0] && !this.selectedValue[1]) {
// When right value is selected, don't do hover
/** @type {?} */
const base = this.selectedValue[0];
if (base.isBeforeDay(value)) {
this.hoverValue = [base, value];
}
else {
this.hoverValue = [value, base];
}
}
}
/**
* @param {?} mode
* @param {?=} partType
* @return {?}
*/
onPanelModeChange(mode, partType) {
if (this.isRange) {
((/** @type {?} */ (this.panelMode)))[this.getPartTypeIndex(partType)] = mode;
}
else {
this.panelMode = mode;
}
this.panelModeChange.emit(this.panelMode);
}
/**
* @param {?} value
* @param {?=} partType
* @return {?}
*/
onHeaderChange(value, partType) {
if (this.isRange) {
this.valueForRangeShow[this.getPartTypeIndex(partType)] = value;
this.valueForRangeShow = this.normalizeRangeValue(this.valueForRangeShow); // Should always take care of start/end
}
}
/**
* @param {?} value
* @param {?=} partType
* @return {?}
*/
onSelectTime(value, partType) {
if (this.isRange) {
/** @type {?} */
const newValue = this.cloneRangeDate((/** @type {?} */ (this.value)));
/** @type {?} */
const index = this.getPartTypeIndex(partType);
newValue[index] = (/** @type {?} */ (this.overrideHms(value, newValue[index])));
this.setValue(newValue);
}
else {
this.setValue((/** @type {?} */ (this.overrideHms(value, ((/** @type {?} */ (this.value))) || new CandyDate())))); // If not select a date currently, use today
}
}
/**
* @param {?} value
* @param {?=} partType
* @return {?}
*/
changeValueFromInput(value, partType) {
const { date, isEnter } = value;
if (this.isRange) {
/** @type {?} */
let newRangeValue = partType === 'left' ? [date, this.selectedValue[1]] : [this.selectedValue[0], date];
/** @type {?} */
const isValidRange = this.isValidRange(newRangeValue);
if (isValidRange) {
newRangeValue = sortRangeValue(newRangeValue);
this.valueForRangeShow = this.normalizeRangeValue(newRangeValue);
}
// ? Why Can not use follow code
// this.selectedValue[index] = date;
this.selectedValue = this.cloneRangeDate(newRangeValue);
this.setValueFromInput(this.cloneRangeDate(newRangeValue), isEnter && isValidRange);
}
else {
this.setValueFromInput(date, isEnter);
}
}
/**
* @param {?} value
* @return {?}
*/
changeValueFromSelect(value) {
if (this.isRange) {
const [left, right] = (/** @type {?} */ (this.selectedValue));
if ((!left && !right) || (left && right)) {
// If totally full or empty, clean up && re-assign left first
this.hoverValue = this.selectedValue = [value];
this.calendarChange.emit([value.clone()]);
}
else if (left && !right) {
// If one of them is empty, assign the other one and sort, then set the final values
this.clearHoverValue(); // Clean up
this.setRangeValue('right', value);
this.selectedValue = sortRangeValue(this.selectedValue); // Sort
this.valueForRangeShow = this.normalizeRangeValue(this.selectedValue);
this.setValue(this.cloneRangeDate(this.selectedValue));
this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
}
}
else {
this.setValue(value);
}
// this.selectDate.emit(value);
}
/**
* @param {?} direction
* @param {?=} partType
* @return {?}
*/
enablePrevNext(direction, partType) {
if (this.isRange) {
const [start, end] = this.valueForRangeShow;
/** @type {?} */
const showMiddle = !start.addMonths(1).isSame(end, 'month');
if ((partType === 'left' && direction === 'next') || (partType === 'right' && direction === 'prev')) {
return showMiddle;
}
return true;
}
else {
return true;
}
}
/**
* @param {?=} partType
* @return {?}
*/
getPanelMode(partType) {
if (this.isRange) {
return (/** @type {?} */ (this.panelMode[this.getPartTypeIndex(partType)]));
}
else {
return (/** @type {?} */ (this.panelMode));
}
}
// Get single value or part value of a range
/**
* @param {?=} partType
* @return {?}
*/
getValue(partType) {
if (this.isRange) {
return ((/** @type {?} */ (this.value)))[this.getPartTypeIndex(partType)];
}
else {
return (/** @type {?} */ (this.value));
}
}
/**
* @param {?=} partType
* @return {?}
*/
getValueBySelector(partType) {
if (this.isRange) {
/** @type {?} */
const valueShow = this.showTimePicker ? this.value : this.valueForRangeShow;
return ((/** @type {?} */ (valueShow)))[this.getPartTypeIndex(partType)];
}
else {
return (/** @type {?} */ (this.value));
}
}
/**
* @param {?=} partType
* @return {?}
*/
getPartTypeIndex(partType) {
return this.partTypeMap[(/** @type {?} */ (partType))];
}
/**
* @param {?=} partType
* @return {?}
*/
getPlaceholder(partType) {
return this.isRange ? this.placeholder[this.getPartTypeIndex(partType)] : ((/** @type {?} */ (this.placeholder)));
}
/**
* @return {?}
*/
hasSelectedValue() {
return this.selectedValue && !!this.selectedValue[1] && !!this.selectedValue[0];
}
/**
* @return {?}
*/
isAllowedSelectedValue() {
/** @type {?} */
const selectedValue = this.selectedValue;
if (selectedValue && selectedValue[0] && selectedValue[1]) {
return (isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) &&
isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime));
}
return false;
}
/**
* @return {?}
*/
timePickerDisabled() {
if (!this.hasTimePicker) {
return true;
}
if (this.isRange) {
return !this.hasSelectedValue() || !!this.hoverValue.length;
}
else {
return false;
}
}
/**
* @return {?}
*/
okDisabled() {
if (!this.hasTimePicker) {
return true;
}
if (this.isRange) {
return !this.isAllowedSelectedValue() || !this.hasSelectedValue() || !!this.hoverValue.length;
}
else {
return this.value ? !isAllowedDate((/** @type {?} */ (this.value)), this.disabledDate, this.disabledTime) : false;
}
}
/**
* @param {?=} partType
* @return {?}