ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,109 lines (1,098 loc) • 40.5 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, Directive, forwardRef, ChangeDetectorRef, ContentChild, TemplateRef, HostBinding, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { NzI18nService, DateHelperService, NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { isTemplateRef, isNonEmptyString, CandyDate, valueFunctionProp, warnDeprecation, toBoolean, InputBoolean } from 'ng-zorro-antd/core';
import { __decorate, __metadata } from 'tslib';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DateTableCellComponent {
constructor() {
this.isTemplateRef = isTemplateRef;
this.isNonEmptyString = isNonEmptyString;
}
}
DateTableCellComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
selector: '[date-table-cell]',
exportAs: 'dateTableCell',
template: "<ng-container [ngSwitch]=\"prefixCls\">\n <ng-container *ngSwitchCase=\"'ant-calendar'\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(cell.dateCellRender)\">\n <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: { $implicit: cell.value }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(cell.dateCellRender)\">\n <span [innerHTML]=\"cell.dateCellRender\"></span>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"{{ prefixCls }}-date\" [attr.aria-selected]=\"cell.isSelected\" [attr.aria-disabled]=\"cell.isDisabled\">\n {{ cell.content }}\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'ant-fullcalendar'\">\n <div class=\"ant-fullcalendar-date\">\n <ng-container *ngIf=\"cell.dateFullCellRender else defaultCell\">\n <ng-container *ngTemplateOutlet=\"cell.dateFullCellRender; context: {$implicit: cell.value}\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <div class=\"{{ prefixCls }}-value\">{{ cell.content }}</div>\n <div *ngIf=\"cell.dateCellRender\" class=\"{{ prefixCls }}-content\">\n <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: {$implicit: cell.value}\"></ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n</ng-container>"
}] }
];
DateTableCellComponent.propDecorators = {
prefixCls: [{ type: Input }],
cell: [{ type: Input }]
};
if (false) {
/** @type {?} */
DateTableCellComponent.prototype.isTemplateRef;
/** @type {?} */
DateTableCellComponent.prototype.isNonEmptyString;
/** @type {?} */
DateTableCellComponent.prototype.prefixCls;
/** @type {?} */
DateTableCellComponent.prototype.cell;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DATE_ROW_NUM = 6;
/** @type {?} */
const DATE_COL_NUM = 7;
class DateTableComponent {
/**
* @param {?} i18n
* @param {?} dateHelper
*/
constructor(i18n, dateHelper) {
this.i18n = i18n;
this.dateHelper = dateHelper;
this.prefixCls = 'ant-calendar';
this.showWeek = false;
this.dayHover = new EventEmitter(); // Emitted when hover on a day by mouse enter
// Emitted when hover on a day by mouse enter
this.valueChange = new EventEmitter();
}
// Range ONLY
/**
* @param {?} date
* @return {?}
*/
set value(date) {
this._value = this.activeDate = date;
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.isDateRealChange(changes.activeDate) ||
this.isDateRealChange(changes.value) ||
this.isDateRealChange(changes.selectedValue) ||
this.isDateRealChange(changes.hoverValue)) {
this.render();
}
}
/**
* @private
* @param {?} change
* @return {?}
*/
isDateRealChange(change) {
if (change) {
/** @type {?} */
const previousValue = change.previousValue;
/** @type {?} */
const currentValue = change.currentValue;
if (Array.isArray(currentValue)) {
return (!Array.isArray(previousValue) ||
currentValue.length !== previousValue.length ||
currentValue.some((/**
* @param {?} value
* @param {?} index
* @return {?}
*/
(value, index) => {
/** @type {?} */
const previousCandyDate = previousValue[index];
return previousCandyDate instanceof CandyDate
? previousCandyDate.isSameDay(value)
: previousCandyDate !== value;
})));
}
else {
return !this.isSameDate((/** @type {?} */ (previousValue)), currentValue);
}
}
return false;
}
/**
* @private
* @param {?} left
* @param {?} right
* @return {?}
*/
isSameDate(left, right) {
return (!left && !right) || (left && right && right.isSameDay(left));
}
/**
* @private
* @return {?}
*/
render() {
if (this.value) {
this.headWeekDays = this.makeHeadWeekDays();
this.weekRows = this.makeWeekRows();
}
}
/**
* @private
* @param {?} value
* @return {?}
*/
changeValueFromInside(value) {
// Only change date not change time
/** @type {?} */
const newValue = this.value
.setYear(value.getYear())
.setMonth(value.getMonth())
.setDate(value.getDate());
this.valueChange.emit(newValue);
}
/**
* @private
* @return {?}
*/
makeHeadWeekDays() {
/** @type {?} */
const weekDays = [];
/** @type {?} */
const start = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });
for (let colIndex = 0; colIndex < DATE_COL_NUM; colIndex++) {
/** @type {?} */
const day = start.addDays(colIndex);
weekDays[colIndex] = {
short: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
// eg. Tue
veryShort: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()) // eg. Tu
};
}
return weekDays;
}
/**
* @private
* @return {?}
*/
getVeryShortWeekFormat() {
if (this.dateHelper.relyOnDatePipe) {
return this.i18n
.getLocaleId()
.toLowerCase()
.indexOf('zh') === 0
? 'EEEEE'
: 'EEEEEE'; // Use extreme short for chinese
}
return 'dd';
}
/**
* @private
* @return {?}
*/
makeWeekRows() {
/** @type {?} */
const weekRows = [];
/** @type {?} */
const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });
for (let week = 0; week < DATE_ROW_NUM; week++) {
/** @type {?} */
const weekStart = firstDayOfMonth.addDays(week * 7);
/** @type {?} */
const row = {
isActive: false,
isCurrent: false,
dateCells: [],
year: weekStart.getYear()
};
for (let day = 0; day < 7; day++) {
/** @type {?} */
const date = weekStart.addDays(day);
/** @type {?} */
const dateFormat = this.dateHelper.relyOnDatePipe
? 'longDate'
: this.i18n.getLocaleData('DatePicker.lang.dateFormat', 'YYYY-MM-DD');
/** @type {?} */
const title = this.dateHelper.format(date.nativeDate, dateFormat);
/** @type {?} */
const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');
/** @type {?} */
const cell = {
value: date.nativeDate,
label: label,
isSelected: false,
isDisabled: false,
isToday: false,
title: title,
dateCellRender: valueFunctionProp(this.dateCellRender, date),
// Customized content
dateFullCellRender: valueFunctionProp(this.dateFullCellRender, date),
content: `${date.getDate()}`,
onClick: (/**
* @return {?}
*/
() => this.changeValueFromInside(date)),
onMouseEnter: (/**
* @return {?}
*/
() => this.dayHover.emit(date))
};
if (this.showWeek && !row.weekNum) {
row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
}
if (date.isToday()) {
cell.isToday = true;
row.isCurrent = true;
}
if (Array.isArray(this.selectedValue) && date.isSameMonth(this.activeDate)) {
// Range selections
/** @type {?} */
const rangeValue = this.hoverValue && this.hoverValue.length ? this.hoverValue : this.selectedValue;
/** @type {?} */
const start = rangeValue[0];
/** @type {?} */
const end = rangeValue[1];
if (start) {
if (start.isSameDay(date)) {
cell.isSelectedStartDate = true;
cell.isSelected = true;
row.isActive = true;
}
if (end) {
if (end.isSameDay(date)) {
cell.isSelectedEndDate = true;
cell.isSelected = true;
row.isActive = true;
}
else if (date.isAfterDay(start) && date.isBeforeDay(end)) {
cell.isInRange = true;
}
}
}
}
else if (date.isSameDay(this.value)) {
cell.isSelected = true;
row.isActive = true;
}
if (this.disabledDate && this.disabledDate(date.nativeDate)) {
cell.isDisabled = true;
}
cell.classMap = {
[`${this.prefixCls}-cell`]: true,
[`${this.prefixCls}-today`]: cell.isToday,
[`${this.prefixCls}-last-month-cell`]: date.isBeforeMonth(this.activeDate),
[`${this.prefixCls}-next-month-btn-day`]: date.isAfterMonth(this.activeDate),
[`${this.prefixCls}-selected-day`]: cell.isSelected,
[`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
[`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
[`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
[`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
};
row.dateCells.push(cell);
}
row.classMap = {
[`${this.prefixCls}-current-week`]: row.isCurrent,
[`${this.prefixCls}-active-week`]: row.isActive
};
weekRows.push(row);
}
return weekRows;
}
/**
* @param {?} _index
* @param {?} item
* @return {?}
*/
trackByDateFn(_index, item) {
return `${item.title}`;
}
/**
* @param {?} _index
* @param {?} item
* @return {?}
*/
trackByWeekFn(_index, item) {
return `${item.year}-${item.weekNum}`;
}
}
DateTableComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'date-table',
exportAs: 'dateTable',
template: "<table class=\"{{ prefixCls }}-table\" cellSpacing=\"0\" role=\"grid\">\n <thead>\n <tr role=\"row\">\n <th *ngIf=\"showWeek\" role=\"columnheader\" class=\"{{ prefixCls }}-column-header {{ prefixCls }}-week-number-header\">\n <span class=\"{{ prefixCls }}-column-header-inner\">x</span>\n </th>\n <th *ngFor=\"let cell of headWeekDays\" role=\"columnheader\" title=\"{{ cell.short }}\"\n class=\"{{ prefixCls }}-column-header\">\n <span class=\"{{ prefixCls }}-column-header-inner\">{{ cell.veryShort }}</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"{{ prefixCls }}-tbody\">\n <tr *ngFor=\"let row of weekRows;trackBy:trackByWeekFn\" [ngClass]=\"row.classMap\" role=\"row\">\n <td *ngIf=\"row.weekNum\" role=\"gridcell\" class=\"{{ prefixCls }}-week-number-cell\">\n {{ row.weekNum }}\n </td>\n <td *ngFor=\"let cell of row.dateCells;trackBy:trackByDateFn\" title=\"{{ cell.title }}\" role=\"gridcell\" [ngClass]=\"cell.classMap\"\n (click)=\"cell.isDisabled ? null : cell.onClick()\" (mouseenter)=\"cell.isDisabled ? null : cell.onMouseEnter()\"\n date-table-cell [prefixCls]=\"prefixCls\" [cell]=\"cell\">\n </td>\n </tr>\n </tbody>\n</table>"
}] }
];
/** @nocollapse */
DateTableComponent.ctorParameters = () => [
{ type: NzI18nService },
{ type: DateHelperService }
];
DateTableComponent.propDecorators = {
prefixCls: [{ type: Input }],
locale: [{ type: Input }],
selectedValue: [{ type: Input }],
hoverValue: [{ type: Input }],
value: [{ type: Input }],
activeDate: [{ type: Input }],
showWeek: [{ type: Input }],
disabledDate: [{ type: Input }],
dateCellRender: [{ type: Input }],
dateFullCellRender: [{ type: Input }],
dayHover: [{ type: Output }],
valueChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
DateTableComponent.prototype._value;
/** @type {?} */
DateTableComponent.prototype.headWeekDays;
/** @type {?} */
DateTableComponent.prototype.weekRows;
/** @type {?} */
DateTableComponent.prototype.prefixCls;
/** @type {?} */
DateTableComponent.prototype.locale;
/** @type {?} */
DateTableComponent.prototype.selectedValue;
/** @type {?} */
DateTableComponent.prototype.hoverValue;
/** @type {?} */
DateTableComponent.prototype.activeDate;
/** @type {?} */
DateTableComponent.prototype.showWeek;
/** @type {?} */
DateTableComponent.prototype.disabledDate;
/** @type {?} */
DateTableComponent.prototype.dateCellRender;
/** @type {?} */
DateTableComponent.prototype.dateFullCellRender;
/** @type {?} */
DateTableComponent.prototype.dayHover;
/** @type {?} */
DateTableComponent.prototype.valueChange;
/**
* @type {?}
* @private
*/
DateTableComponent.prototype.i18n;
/**
* @type {?}
* @private
*/
DateTableComponent.prototype.dateHelper;
}
/**
* @record
*/
function WeekDayLabel() { }
if (false) {
/** @type {?} */
WeekDayLabel.prototype.short;
/** @type {?} */
WeekDayLabel.prototype.veryShort;
}
/**
* @record
*/
function DateCell() { }
if (false) {
/** @type {?} */
DateCell.prototype.value;
/** @type {?} */
DateCell.prototype.label;
/** @type {?} */
DateCell.prototype.title;
/** @type {?} */
DateCell.prototype.dateCellRender;
/** @type {?} */
DateCell.prototype.dateFullCellRender;
/** @type {?} */
DateCell.prototype.content;
/** @type {?|undefined} */
DateCell.prototype.isSelected;
/** @type {?|undefined} */
DateCell.prototype.isToday;
/** @type {?|undefined} */
DateCell.prototype.isDisabled;
/** @type {?|undefined} */
DateCell.prototype.isSelectedStartDate;
/** @type {?|undefined} */
DateCell.prototype.isSelectedEndDate;
/** @type {?|undefined} */
DateCell.prototype.isInRange;
/** @type {?|undefined} */
DateCell.prototype.classMap;
/**
* @param {?} date
* @return {?}
*/
DateCell.prototype.onClick = function (date) { };
/**
* @return {?}
*/
DateCell.prototype.onMouseEnter = function () { };
}
/**
* @record
*/
function WeekRow() { }
if (false) {
/** @type {?|undefined} */
WeekRow.prototype.isCurrent;
/** @type {?|undefined} */
WeekRow.prototype.isActive;
/** @type {?|undefined} */
WeekRow.prototype.weekNum;
/** @type {?|undefined} */
WeekRow.prototype.year;
/** @type {?|undefined} */
WeekRow.prototype.classMap;
/** @type {?} */
WeekRow.prototype.dateCells;
}
/**
* @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 MonthTableComponent {
/**
* @param {?} dateHelper
*/
constructor(dateHelper) {
this.dateHelper = dateHelper;
this.value = new CandyDate();
this.prefixCls = 'ant-fullcalendar';
this.valueChange = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.value || changes.disabledDate) {
this.render();
}
}
/**
* @param {?} _index
* @return {?}
*/
trackYear(_index) {
return this.value ? this.value.getYear() : _index;
}
/**
* @param {?} _index
* @param {?} monthData
* @return {?}
*/
trackPanelMonth(_index, monthData) {
return monthData.content;
}
/**
* @private
* @return {?}
*/
render() {
if (this.value) {
this.panelMonths = this.makePanelMonths();
}
}
/**
* @private
* @return {?}
*/
makePanelMonths() {
/** @type {?} */
const months = [];
/** @type {?} */
const currentMonth = this.value.getMonth();
/** @type {?} */
const today = new CandyDate();
/** @type {?} */
let monthValue = 0;
for (let rowIndex = 0; rowIndex < MAX_ROW; rowIndex++) {
months[rowIndex] = [];
for (let colIndex = 0; colIndex < MAX_COL; colIndex++) {
/** @type {?} */
const month = this.value.setMonth(monthValue);
/** @type {?} */
const disabled = this.disabledDate ? this.disabledDate(this.value.setMonth(monthValue).nativeDate) : false;
/** @type {?} */
const content = this.dateHelper.format(month.nativeDate, 'MMM');
/** @type {?} */
const cell = (months[rowIndex][colIndex] = {
value: month.nativeDate,
disabled,
content,
month: monthValue,
title: content,
classMap: null,
onClick: (/**
* @return {?}
*/
() => this.chooseMonth(cell.month)) // don't use monthValue here
});
cell.classMap = {
[`${this.prefixCls}-month-panel-cell`]: true,
[`${this.prefixCls}-month-panel-cell-disabled`]: disabled,
[`${this.prefixCls}-month-panel-selected-cell`]: monthValue === currentMonth,
[`${this.prefixCls}-month-panel-current-cell`]: today.getYear() === this.value.getYear() && monthValue === today.getMonth()
};
monthValue++;
}
}
return months;
}
/**
* @private
* @param {?} month
* @return {?}
*/
chooseMonth(month) {
this.value = this.value.setMonth(month);
this.valueChange.emit(this.value);
this.render();
}
}
MonthTableComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line:component-selector
selector: 'month-table',
exportAs: 'monthTable',
template: "<table class=\"{{ prefixCls }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n <tbody class=\"{{ prefixCls }}-month-panel-tbody\">\n <tr *ngFor=\"let row of panelMonths; trackBy: trackYear\" role=\"row\">\n <td *ngFor=\"let monthCell of row; trackBy: trackPanelMonth\" role=\"gridcell\" title=\"{{ monthCell.title }}\"\n (click)=\"monthCell.disabled ? null : monthCell.onClick()\" [ngClass]=\"monthCell.classMap\">\n <ng-container [ngSwitch]=\"prefixCls\">\n <ng-container *ngSwitchCase=\"'ant-fullcalendar'\">\n <div class=\"{{ prefixCls }}-month\">\n <ng-container *ngIf=\"monthFullCellRender else defaultCell\">\n <ng-container *ngTemplateOutlet=\"monthFullCellRender; context: { $implicit: monthCell.value }\">\n </ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <div class=\"{{prefixCls}}-value\">{{ monthCell.content }}</div>\n <div *ngIf=\"monthCellRender\" class=\"{{prefixCls}}-content\">\n <ng-container *ngTemplateOutlet=\"monthCellRender; context: { $implicit: monthCell.value }\">\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'ant-calendar'\">\n <a class=\"{{ prefixCls }}-month-panel-month\">{{ monthCell.content }}</a>\n </ng-container>\n </ng-container>\n </td>\n </tr>\n </tbody>\n</table>"
}] }
];
/** @nocollapse */
MonthTableComponent.ctorParameters = () => [
{ type: DateHelperService }
];
MonthTableComponent.propDecorators = {
value: [{ type: Input }],
prefixCls: [{ type: Input }],
monthCellRender: [{ type: Input }],
monthFullCellRender: [{ type: Input }],
valueChange: [{ type: Output }],
disabledDate: [{ type: Input }]
};
if (false) {
/** @type {?} */
MonthTableComponent.prototype.value;
/** @type {?} */
MonthTableComponent.prototype.prefixCls;
/** @type {?} */
MonthTableComponent.prototype.monthCellRender;
/** @type {?} */
MonthTableComponent.prototype.monthFullCellRender;
/** @type {?} */
MonthTableComponent.prototype.valueChange;
/** @type {?} */
MonthTableComponent.prototype.disabledDate;
/** @type {?} */
MonthTableComponent.prototype.panelMonths;
/**
* @type {?}
* @private
*/
MonthTableComponent.prototype.dateHelper;
}
/**
* @record
*/
function PanelMonthData() { }
if (false) {
/** @type {?} */
PanelMonthData.prototype.disabled;
/** @type {?} */
PanelMonthData.prototype.content;
/** @type {?} */
PanelMonthData.prototype.month;
/** @type {?} */
PanelMonthData.prototype.title;
/** @type {?} */
PanelMonthData.prototype.classMap;
/** @type {?} */
PanelMonthData.prototype.onClick;
/** @type {?} */
PanelMonthData.prototype.value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzDateCellDirective {
}
NzDateCellDirective.decorators = [
{ type: Directive, args: [{
selector: '[nzDateCell]',
exportAs: 'nzDateCell'
},] }
];
class NzMonthCellDirective {
}
NzMonthCellDirective.decorators = [
{ type: Directive, args: [{
selector: '[nzMonthCell]',
exportAs: 'nzMonthCell'
},] }
];
class NzDateFullCellDirective {
}
NzDateFullCellDirective.decorators = [
{ type: Directive, args: [{
selector: '[nzDateFullCell]',
exportAs: 'nzDateFullCell'
},] }
];
class NzMonthFullCellDirective {
}
NzMonthFullCellDirective.decorators = [
{ type: Directive, args: [{
selector: '[nzMonthFullCell]',
exportAs: 'nzMonthFullCell'
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCalendarHeaderComponent {
/**
* @param {?} i18n
* @param {?} dateHelper
*/
constructor(i18n, dateHelper) {
this.i18n = i18n;
this.dateHelper = dateHelper;
this.mode = 'month';
this.fullscreen = true;
this.modeChange = new EventEmitter();
this.activeDate = new CandyDate();
this.yearChange = new EventEmitter();
this.monthChange = new EventEmitter();
// @Output() readonly valueChange: EventEmitter<CandyDate> = new EventEmitter();
this.yearOffset = 10;
this.yearTotal = 20;
}
/**
* @return {?}
*/
get activeYear() {
return this.activeDate.getYear();
}
/**
* @return {?}
*/
get activeMonth() {
return this.activeDate.getMonth();
}
/**
* @return {?}
*/
get size() {
return this.fullscreen ? 'default' : 'small';
}
/**
* @return {?}
*/
get yearTypeText() {
return this.i18n.getLocale().Calendar.year;
}
/**
* @return {?}
*/
get monthTypeText() {
return this.i18n.getLocale().Calendar.month;
}
/**
* @return {?}
*/
ngOnInit() {
this.setUpYears();
this.setUpMonths();
}
/**
* @param {?} year
* @return {?}
*/
updateYear(year) {
this.yearChange.emit(year);
this.setUpYears(year);
}
/**
* @private
* @param {?=} year
* @return {?}
*/
setUpYears(year) {
/** @type {?} */
const start = (year || this.activeYear) - this.yearOffset;
/** @type {?} */
const end = start + this.yearTotal;
this.years = [];
for (let i = start; i < end; i++) {
this.years.push({ label: `${i}`, value: i });
}
}
/**
* @private
* @return {?}
*/
setUpMonths() {
this.months = [];
for (let i = 0; i < 12; i++) {
/** @type {?} */
const dateInMonth = this.activeDate.setMonth(i);
/** @type {?} */
const monthText = this.dateHelper.format(dateInMonth.nativeDate, 'MMM');
this.months.push({ label: monthText, value: i });
}
}
}
NzCalendarHeaderComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-calendar-header',
exportAs: 'nzCalendarHeader',
template: "<nz-select class=\"ant-fullcalendar-year-select\" [nzSize]=\"size\" [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"activeYear\" (ngModelChange)=\"updateYear($event)\"> \n <nz-option *ngFor=\"let year of years\" [nzLabel]=\"year.label\" [nzValue]=\"year.value\"></nz-option>\n</nz-select>\n\n<nz-select *ngIf=\"mode === 'month'\" class=\"ant-fullcalendar-month-select\" [nzSize]=\"size\" [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"activeMonth\" (ngModelChange)=\"monthChange.emit($event)\">\n <nz-option *ngFor=\"let month of months\" [nzLabel]=\"month.label\" [nzValue]=\"month.value\"></nz-option>\n</nz-select>\n\n<nz-radio-group [(ngModel)]=\"mode\" (ngModelChange)=\"modeChange.emit($event)\" [nzSize]=\"size\">\n <label nz-radio-button nzValue=\"month\">{{ monthTypeText }}</label>\n <label nz-radio-button nzValue=\"year\">{{ yearTypeText }}</label>\n</nz-radio-group>\n",
host: {
'[style.display]': `'block'`,
'[class.ant-fullcalendar-header]': `true`
}
}] }
];
/** @nocollapse */
NzCalendarHeaderComponent.ctorParameters = () => [
{ type: NzI18nService },
{ type: DateHelperService }
];
NzCalendarHeaderComponent.propDecorators = {
mode: [{ type: Input }],
fullscreen: [{ type: Input }],
modeChange: [{ type: Output }],
activeDate: [{ type: Input }],
yearChange: [{ type: Output }],
monthChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
NzCalendarHeaderComponent.prototype.mode;
/** @type {?} */
NzCalendarHeaderComponent.prototype.fullscreen;
/** @type {?} */
NzCalendarHeaderComponent.prototype.modeChange;
/** @type {?} */
NzCalendarHeaderComponent.prototype.activeDate;
/** @type {?} */
NzCalendarHeaderComponent.prototype.yearChange;
/** @type {?} */
NzCalendarHeaderComponent.prototype.monthChange;
/** @type {?} */
NzCalendarHeaderComponent.prototype.yearOffset;
/** @type {?} */
NzCalendarHeaderComponent.prototype.yearTotal;
/** @type {?} */
NzCalendarHeaderComponent.prototype.years;
/** @type {?} */
NzCalendarHeaderComponent.prototype.months;
/**
* @type {?}
* @private
*/
NzCalendarHeaderComponent.prototype.i18n;
/**
* @type {?}
* @private
*/
NzCalendarHeaderComponent.prototype.dateHelper;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCalendarComponent {
/**
* @param {?} cdr
*/
constructor(cdr) {
this.cdr = cdr;
this.activeDate = new CandyDate();
this.prefixCls = 'ant-fullcalendar';
this.onChangeFn = (/**
* @return {?}
*/
() => { });
this.onTouchFn = (/**
* @return {?}
*/
() => { });
this.nzMode = 'month';
this.nzModeChange = new EventEmitter();
this.nzPanelChange = new EventEmitter();
this.nzSelectChange = new EventEmitter();
this.nzValueChange = new EventEmitter();
this.nzFullscreen = true;
}
/**
* @param {?} value
* @return {?}
*/
set nzValue(value) {
this.updateDate(new CandyDate(value), false);
}
/**
* @return {?}
*/
get dateCell() {
return this.nzDateCell || this.nzDateCellChild;
}
/**
* @return {?}
*/
get dateFullCell() {
return this.nzDateFullCell || this.nzDateFullCellChild;
}
/**
* @return {?}
*/
get monthCell() {
return this.nzMonthCell || this.nzMonthCellChild;
}
/**
* @return {?}
*/
get monthFullCell() {
return this.nzMonthFullCell || this.nzMonthFullCellChild;
}
/**
* @deprecated use `[nzFullscreen]` instead.
* @param {?} value
* @return {?}
*/
set nzCard(value) {
warnDeprecation(`'nzCard' is going to be removed in 9.0.0. Please use 'nzFullscreen' instead.`);
this.nzFullscreen = !toBoolean(value);
}
/**
* @return {?}
*/
get nzCard() {
return !this.nzFullscreen;
}
/**
* @param {?} mode
* @return {?}
*/
onModeChange(mode) {
this.nzModeChange.emit(mode);
this.nzPanelChange.emit({ date: this.activeDate.nativeDate, mode });
}
/**
* @param {?} year
* @return {?}
*/
onYearSelect(year) {
/** @type {?} */
const date = this.activeDate.setYear(year);
this.updateDate(date);
}
/**
* @param {?} month
* @return {?}
*/
onMonthSelect(month) {
/** @type {?} */
const date = this.activeDate.setMonth(month);
this.updateDate(date);
}
/**
* @param {?} date
* @return {?}
*/
onDateSelect(date) {
// Only activeDate is enough in calendar
// this.value = date;
this.updateDate(date);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.updateDate(new CandyDate((/** @type {?} */ (value))), false);
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeFn = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchFn = fn;
}
/**
* @private
* @param {?} date
* @param {?=} touched
* @return {?}
*/
updateDate(date, touched = true) {
this.activeDate = date;
if (touched) {
this.onChangeFn(date.nativeDate);
this.onTouchFn();
this.nzSelectChange.emit(date.nativeDate);
this.nzValueChange.emit(date.nativeDate);
}
}
}
NzCalendarComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-calendar',
exportAs: 'nzCalendar',
template: "<nz-calendar-header [fullscreen]=\"nzFullscreen\" [activeDate]=\"activeDate\" [(mode)]=\"nzMode\"\n (modeChange)=\"onModeChange($event)\" (yearChange)=\"onYearSelect($event)\" (monthChange)=\"onMonthSelect($event)\">\n</nz-calendar-header>\n\n<div class=\"{{prefixCls}} {{prefixCls}}-full\" [class.ant-fullcalendar-fullscreen]=\"nzFullscreen\">\n <div class=\"{{prefixCls}}-calendar-body\">\n <ng-container *ngIf=\"nzMode === 'month' then monthModeTable else yearModeTable\"></ng-container>\n </div>\n</div>\n\n<ng-template #monthModeTable>\n <date-table [prefixCls]=\"prefixCls\" [value]=\"activeDate\" [dateCellRender]=\"dateCell\"\n [dateFullCellRender]=\"dateFullCell\" (valueChange)=\"onDateSelect($event)\"></date-table>\n</ng-template>\n\n<ng-template #yearModeTable>\n <month-table [prefixCls]=\"prefixCls\" [value]=\"activeDate\" [monthCellRender]=\"monthCell\"\n [monthFullCellRender]=\"monthFullCell\" (valueChange)=\"onDateSelect($event)\"></month-table>\n</ng-template>",
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/**
* @return {?}
*/
() => NzCalendarComponent)), multi: true }]
}] }
];
/** @nocollapse */
NzCalendarComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NzCalendarComponent.propDecorators = {
nzMode: [{ type: Input }],
nzModeChange: [{ type: Output }],
nzPanelChange: [{ type: Output }],
nzSelectChange: [{ type: Output }],
nzValue: [{ type: Input }],
nzValueChange: [{ type: Output }],
nzDateCell: [{ type: Input }],
nzDateCellChild: [{ type: ContentChild, args: [NzDateCellDirective, { static: false, read: TemplateRef },] }],
nzDateFullCell: [{ type: Input }],
nzDateFullCellChild: [{ type: ContentChild, args: [NzDateFullCellDirective, { static: false, read: TemplateRef },] }],
nzMonthCell: [{ type: Input }],
nzMonthCellChild: [{ type: ContentChild, args: [NzMonthCellDirective, { static: false, read: TemplateRef },] }],
nzMonthFullCell: [{ type: Input }],
nzMonthFullCellChild: [{ type: ContentChild, args: [NzMonthFullCellDirective, { static: false, read: TemplateRef },] }],
nzFullscreen: [{ type: Input }, { type: HostBinding, args: ['class.ant-fullcalendar--fullscreen',] }],
nzCard: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzCalendarComponent.prototype, "nzFullscreen", void 0);
if (false) {
/** @type {?} */
NzCalendarComponent.prototype.activeDate;
/** @type {?} */
NzCalendarComponent.prototype.prefixCls;
/**
* @type {?}
* @private
*/
NzCalendarComponent.prototype.onChangeFn;
/**
* @type {?}
* @private
*/
NzCalendarComponent.prototype.onTouchFn;
/** @type {?} */
NzCalendarComponent.prototype.nzMode;
/** @type {?} */
NzCalendarComponent.prototype.nzModeChange;
/** @type {?} */
NzCalendarComponent.prototype.nzPanelChange;
/** @type {?} */
NzCalendarComponent.prototype.nzSelectChange;
/** @type {?} */
NzCalendarComponent.prototype.nzValueChange;
/**
* Cannot use \@Input and \@ContentChild on one variable
* because { static: false } will make \@Input property get delayed
*
* @type {?}
*/
NzCalendarComponent.prototype.nzDateCell;
/** @type {?} */
NzCalendarComponent.prototype.nzDateCellChild;
/** @type {?} */
NzCalendarComponent.prototype.nzDateFullCell;
/** @type {?} */
NzCalendarComponent.prototype.nzDateFullCellChild;
/** @type {?} */
NzCalendarComponent.prototype.nzMonthCell;
/** @type {?} */
NzCalendarComponent.prototype.nzMonthCellChild;
/** @type {?} */
NzCalendarComponent.prototype.nzMonthFullCell;
/** @type {?} */
NzCalendarComponent.prototype.nzMonthFullCellChild;
/** @type {?} */
NzCalendarComponent.prototype.nzFullscreen;
/**
* @type {?}
* @private
*/
NzCalendarComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCalendarModule {
}
NzCalendarModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NzCalendarHeaderComponent,
NzCalendarComponent,
NzDateCellDirective,
NzDateFullCellDirective,
NzMonthCellDirective,
NzMonthFullCellDirective,
DateTableComponent,
DateTableCellComponent,
MonthTableComponent
],
exports: [
NzCalendarComponent,
NzDateCellDirective,
NzDateFullCellDirective,
NzMonthCellDirective,
NzMonthFullCellDirective,
DateTableComponent,
MonthTableComponent
],
imports: [CommonModule, FormsModule, NzI18nModule, NzRadioModule, NzSelectModule]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DateTableCellComponent, DateTableComponent, MonthTableComponent, NzCalendarComponent, NzCalendarHeaderComponent, NzCalendarModule, NzDateCellDirective, NzDateFullCellDirective, NzMonthCellDirective, NzMonthFullCellDirective };
//# sourceMappingURL=ng-zorro-antd-calendar.js.map