UNPKG

ng-zorro-antd

Version:

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

1,402 lines (1,391 loc) 128 kB
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 {?}