UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

1,109 lines (1,098 loc) 40.5 kB
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