UNPKG

ng-zorro-antd

Version:

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

1,449 lines (1,441 loc) 175 kB
import { __assign, __decorate, __metadata, __extends, __read } from 'tslib'; import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay'; import { DOCUMENT, CommonModule } from '@angular/common'; import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, ChangeDetectorRef, ElementRef, Inject, ViewChild, ViewChildren, ContentChild, forwardRef, Renderer2, Host, Optional, NgModule, Directive } from '@angular/core'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { CandyDate, normalizeRangeValue, cloneDate, sortRangeValue } from 'ng-zorro-antd/core/time'; import { isTemplateRef, isNonEmptyString, toBoolean, valueFunctionProp, InputBoolean } from 'ng-zorro-antd/core/util'; import { DateHelperService, NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { warnDeprecation } from 'ng-zorro-antd/core/logger'; import { ReplaySubject, Subject, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { slideMotion } from 'ng-zorro-antd/core/animation'; /** * @fileoverview added by tsickle * Generated from: standard-types.ts * @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 */ /** * @record */ function PickerResultSingle() { } if (false) { /** @type {?} */ PickerResultSingle.prototype.date; /** @type {?} */ PickerResultSingle.prototype.dateString; } /** * @record */ function PickerResultRange() { } if (false) { /** @type {?} */ PickerResultRange.prototype.date; /** @type {?} */ PickerResultRange.prototype.dateString; } /** * @record */ function DisabledTimeConfig() { } if (false) { /** * @return {?} */ DisabledTimeConfig.prototype.nzDisabledHours = function () { }; /** * @param {?} hour * @return {?} */ DisabledTimeConfig.prototype.nzDisabledMinutes = function (hour) { }; /** * @param {?} hour * @param {?} minute * @return {?} */ DisabledTimeConfig.prototype.nzDisabledSeconds = function (hour, minute) { }; } /** * @record */ function SupportTimeOptions() { } if (false) { /** @type {?|undefined} */ SupportTimeOptions.prototype.nzFormat; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzHourStep; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzMinuteStep; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzSecondStep; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzHideDisabledOptions; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzDefaultOpenValue; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzAddOn; /** @type {?|undefined} */ SupportTimeOptions.prototype.nzUse12Hours; /** * @return {?} */ SupportTimeOptions.prototype.nzDisabledHours = function () { }; /** * @param {?} hour * @return {?} */ SupportTimeOptions.prototype.nzDisabledMinutes = function (hour) { }; /** * @param {?} hour * @param {?} minute * @return {?} */ SupportTimeOptions.prototype.nzDisabledSeconds = function (hour, minute) { }; } /** * @record */ function PresetRanges() { } /** * @fileoverview added by tsickle * Generated from: util.ts * @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 {?} */ var PREFIX_CLASS = 'ant-picker'; /** @type {?} */ var defaultDisabledTime = { nzDisabledHours: /** * @return {?} */ function () { return []; }, nzDisabledMinutes: /** * @return {?} */ function () { return []; }, nzDisabledSeconds: /** * @return {?} */ function () { return []; } }; /** * @param {?} value * @param {?} disabledTime * @return {?} */ function getTimeConfig(value, disabledTime) { /** @type {?} */ var disabledTimeConfig = disabledTime ? disabledTime(value && value.nativeDate) : ((/** @type {?} */ ({}))); disabledTimeConfig = __assign(__assign({}, defaultDisabledTime), disabledTimeConfig); return disabledTimeConfig; } /** * @param {?} value * @param {?} disabledTimeConfig * @return {?} */ function isTimeValidByConfig(value, disabledTimeConfig) { /** @type {?} */ var invalidTime = false; if (value) { /** @type {?} */ var hour = value.getHours(); /** @type {?} */ var minutes = value.getMinutes(); /** @type {?} */ var seconds = value.getSeconds(); /** @type {?} */ var disabledHours = disabledTimeConfig.nzDisabledHours(); if (disabledHours.indexOf(hour) === -1) { /** @type {?} */ var disabledMinutes = disabledTimeConfig.nzDisabledMinutes(hour); if (disabledMinutes.indexOf(minutes) === -1) { /** @type {?} */ var 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 {?} */ var disabledTimeConfig = getTimeConfig(value, disabledTime); return isTimeValidByConfig(value, disabledTimeConfig); } /** * @param {?} value * @param {?=} disabledDate * @param {?=} disabledTime * @return {?} */ function isAllowedDate(value, disabledDate, disabledTime) { if (!value) { return false; } if (disabledDate) { if (disabledDate(value.nativeDate)) { return false; } } if (disabledTime) { if (!isTimeValid(value, disabledTime)) { return false; } } return true; } /** * @fileoverview added by tsickle * Generated from: lib/util.ts * @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 */ /** * Compatible translate the moment-like format pattern to angular's pattern * Why? For now, we need to support the existing language formats in AntD, and AntD uses the default temporal syntax. * * TODO: compare and complete all format patterns * Each format docs as below: * @link https://momentjs.com/docs/#/displaying/format/ / https://angular.io/api/common/DatePipe#description * @param {?} format input format pattern * @return {?} */ function transCompatFormat(format) { return (format && format .replace(/Y/g, 'y') // only support y, yy, yyy, yyyy .replace(/D/g, 'd')); // d, dd represent of D, DD for momentjs, others are not support } /** * @fileoverview added by tsickle * Generated from: calendar-footer.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var CalendarFooterComponent = /** @class */ (function () { function CalendarFooterComponent(dateHelper) { this.dateHelper = dateHelper; this.showToday = false; this.hasTimePicker = false; this.isRange = false; this.okDisabled = false; this.clickOk = new EventEmitter(); this.clickToday = new EventEmitter(); this.prefixCls = PREFIX_CLASS; this.isTemplateRef = isTemplateRef; this.isNonEmptyString = isNonEmptyString; this.now = new CandyDate(); } /** * @param {?} changes * @return {?} */ CalendarFooterComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.disabledDate) { this.isTodayDisabled = this.disabledDate && this.disabledDate(this.now.nativeDate); } if (changes.locale) { // NOTE: Compat for DatePipe formatting rules /** @type {?} */ var dateFormat = transCompatFormat(this.locale.dateFormat); this.todayTitle = this.dateHelper.format(this.now.nativeDate, dateFormat); } }; /** * @return {?} */ CalendarFooterComponent.prototype.onClickToday = /** * @return {?} */ function () { this.clickToday.emit(this.now.clone()); // To prevent the "now" being modified from outside, we use clone }; CalendarFooterComponent.decorators = [ { type: Component, args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, // tslint:disable-next-line:component-selector selector: 'calendar-footer', exportAs: 'calendarFooter', template: "\n <div class=\"{{ prefixCls }}-footer\">\n <div *ngIf=\"extraFooter\" class=\"{{ prefixCls }}-footer-extra\">\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 <a\n *ngIf=\"showToday && !hasTimePicker\"\n class=\"{{ prefixCls }}-today-btn {{ isTodayDisabled ? prefixCls + '-today-btn-disabled' : '' }}\"\n role=\"button\"\n (click)=\"isTodayDisabled ? null : onClickToday()\"\n title=\"{{ todayTitle }}\"\n >\n {{ locale.today }}\n </a>\n <ul *ngIf=\"hasTimePicker || rangeQuickSelector\" class=\"{{ prefixCls }}-ranges\">\n <ng-container *ngTemplateOutlet=\"rangeQuickSelector\"></ng-container>\n <li *ngIf=\"hasTimePicker && !isRange\" class=\"{{ prefixCls }}-now\">\n <a class=\"{{ prefixCls }}-now-btn\" (click)=\"isTodayDisabled ? null : onClickToday()\">\n {{ locale.now }}\n </a>\n </li>\n <li *ngIf=\"hasTimePicker\" class=\"{{ prefixCls }}-ok\">\n <button\n nz-button\n type=\"button\"\n nzType=\"primary\"\n nzSize=\"small\"\n [disabled]=\"okDisabled\"\n (click)=\"okDisabled ? null : clickOk.emit()\"\n >\n {{ locale.ok }}\n </button>\n </li>\n </ul>\n </div>\n " }] } ]; /** @nocollapse */ CalendarFooterComponent.ctorParameters = function () { return [ { type: DateHelperService } ]; }; CalendarFooterComponent.propDecorators = { locale: [{ type: Input }], showToday: [{ type: Input }], hasTimePicker: [{ type: Input }], isRange: [{ type: Input }], okDisabled: [{ type: Input }], disabledDate: [{ type: Input }], extraFooter: [{ type: Input }], rangeQuickSelector: [{ type: Input }], clickOk: [{ type: Output }], clickToday: [{ type: Output }] }; return CalendarFooterComponent; }()); if (false) { /** @type {?} */ CalendarFooterComponent.prototype.locale; /** @type {?} */ CalendarFooterComponent.prototype.showToday; /** @type {?} */ CalendarFooterComponent.prototype.hasTimePicker; /** @type {?} */ CalendarFooterComponent.prototype.isRange; /** @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; /** @type {?} */ CalendarFooterComponent.prototype.isTodayDisabled; /** @type {?} */ CalendarFooterComponent.prototype.todayTitle; /** * @type {?} * @private */ CalendarFooterComponent.prototype.now; /** * @type {?} * @private */ CalendarFooterComponent.prototype.dateHelper; } /** * @fileoverview added by tsickle * Generated from: date-picker.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var DatePickerService = /** @class */ (function () { function DatePickerService() { this.activeInput = 'left'; this.arrowPositionStyle = {}; this.isRange = false; this.valueChange$ = new ReplaySubject(1); this.emitValue$ = new Subject(); this.inputPartChange$ = new Subject(); } /** * @return {?} */ DatePickerService.prototype.initValue = /** * @return {?} */ function () { if (this.isRange) { this.setActiveDate([]); this.value = this.initialValue = []; } else { this.value = this.initialValue = null; } }; /** * @param {?=} value * @return {?} */ DatePickerService.prototype.hasValue = /** * @param {?=} value * @return {?} */ function (value) { if (value === void 0) { value = this.value; } if (Array.isArray(value)) { return !!value[0] && !!value[1]; } else { return !!value; } }; /** * @param {?} value * @return {?} */ DatePickerService.prototype.makeValue = /** * @param {?} value * @return {?} */ function (value) { if (this.isRange) { return value ? ((/** @type {?} */ (value))).map((/** * @param {?} val * @return {?} */ function (val) { return new CandyDate(val); })) : []; } else { return value ? new CandyDate((/** @type {?} */ (value))) : null; } }; /** * @param {?} value * @param {?=} normalize * @return {?} */ DatePickerService.prototype.setActiveDate = /** * @param {?} value * @param {?=} normalize * @return {?} */ function (value, normalize) { if (normalize === void 0) { normalize = false; } if (this.isRange) { this.activeDate = normalize ? normalizeRangeValue((/** @type {?} */ (value))) : value; } else { this.activeDate = cloneDate(value); } }; /** * @param {?} value * @return {?} */ DatePickerService.prototype.setValue = /** * @param {?} value * @return {?} */ function (value) { this.value = value; this.valueChange$.next(this.value); }; /** * @param {?=} part * @return {?} */ DatePickerService.prototype.getActiveIndex = /** * @param {?=} part * @return {?} */ function (part) { if (part === void 0) { part = this.activeInput; } return { left: 0, right: 1 }[part]; }; /** * @return {?} */ DatePickerService.prototype.ngOnDestroy = /** * @return {?} */ function () { this.valueChange$.complete(); this.emitValue$.complete(); this.inputPartChange$.complete(); }; DatePickerService.decorators = [ { type: Injectable } ]; return DatePickerService; }()); if (false) { /** @type {?} */ DatePickerService.prototype.initialValue; /** @type {?} */ DatePickerService.prototype.value; /** @type {?} */ DatePickerService.prototype.activeDate; /** @type {?} */ DatePickerService.prototype.activeInput; /** @type {?} */ DatePickerService.prototype.arrowPositionStyle; /** @type {?} */ DatePickerService.prototype.isRange; /** @type {?} */ DatePickerService.prototype.valueChange$; /** @type {?} */ DatePickerService.prototype.emitValue$; /** @type {?} */ DatePickerService.prototype.inputPartChange$; } /** * @fileoverview added by tsickle * Generated from: date-range-popup.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var DateRangePopupComponent = /** @class */ (function () { function DateRangePopupComponent(datePickerService, cdr) { var _this = this; this.datePickerService = datePickerService; this.cdr = cdr; this.panelModeChange = new EventEmitter(); this.calendarChange = new EventEmitter(); this.resultOk = new EventEmitter(); // Emitted when done with date selecting // Emitted when done with date selecting this.prefixCls = PREFIX_CLASS; this.endPanelMode = 'date'; this.hoverValue = []; // Range ONLY // Range ONLY this.destroy$ = new Subject(); this.disabledStartTime = (/** * @param {?} value * @return {?} */ function (value) { return _this.disabledTime && _this.disabledTime(value, 'start'); }); this.disabledEndTime = (/** * @param {?} value * @return {?} */ function (value) { return _this.disabledTime && _this.disabledTime(value, 'end'); }); } Object.defineProperty(DateRangePopupComponent.prototype, "hasTimePicker", { get: /** * @return {?} */ function () { return !!this.showTime; }, enumerable: true, configurable: true }); Object.defineProperty(DateRangePopupComponent.prototype, "hasFooter", { get: /** * @return {?} */ function () { return this.showToday || this.hasTimePicker || !!this.extraFooter || !!this.ranges; }, enumerable: true, configurable: true }); /** * @return {?} */ DateRangePopupComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ function () { _this.initActiveDate(); _this.cdr.markForCheck(); })); }; /** * @param {?} changes * @return {?} */ DateRangePopupComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { // Parse showTime options if (changes.showTime || changes.disabledTime) { if (this.showTime) { this.buildTimeOptions(); } } if (changes.panelMode) { this.endPanelMode = this.panelMode; } }; /** * @return {?} */ DateRangePopupComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; /** * @return {?} */ DateRangePopupComponent.prototype.initActiveDate = /** * @return {?} */ function () { /** @type {?} */ var activeDate = this.datePickerService.hasValue() ? this.datePickerService.value : this.datePickerService.makeValue(this.defaultPickerValue); this.datePickerService.setActiveDate(activeDate, !this.showTime); }; /** * @return {?} */ DateRangePopupComponent.prototype.onClickOk = /** * @return {?} */ function () { /** @type {?} */ var otherPart = this.datePickerService.activeInput === 'left' ? 'right' : 'left'; /** @type {?} */ var selectedValue = this.datePickerService.value; if (this.isAllowed(selectedValue, true)) { this.resultOk.emit(); } else { if (this.isRange && this.isOneAllowed((/** @type {?} */ (selectedValue)))) { this.datePickerService.inputPartChange$.next(otherPart); } else { this.datePickerService.inputPartChange$.next(); } } }; /** * @param {?} value * @return {?} */ DateRangePopupComponent.prototype.onClickToday = /** * @param {?} value * @return {?} */ function (value) { this.changeValueFromSelect(value, !this.showTime); }; /** * @param {?} value * @return {?} */ DateRangePopupComponent.prototype.onDayHover = /** * @param {?} value * @return {?} */ function (value) { if (!this.isRange) { return; } /** @type {?} */ var otherInputIndex = { left: 1, right: 0 }[this.datePickerService.activeInput]; /** @type {?} */ var base = (/** @type {?} */ (((/** @type {?} */ (this.datePickerService.value)))[otherInputIndex])); if (base) { if (base.isBeforeDay(value)) { this.hoverValue = [base, value]; } else { this.hoverValue = [value, base]; } } }; /** * @param {?} mode * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.onPanelModeChange = /** * @param {?} mode * @param {?=} partType * @return {?} */ function (mode, partType) { if (this.isRange) { /** @type {?} */ var index = this.datePickerService.getActiveIndex(partType); if (index === 0) { this.panelMode = (/** @type {?} */ ([mode, this.panelMode[1]])); } else { this.panelMode = (/** @type {?} */ ([this.panelMode[0], mode])); } } else { this.panelMode = mode; } // this.cdr.markForCheck(); this.panelModeChange.emit(this.panelMode); }; /** * @param {?} value * @param {?} partType * @return {?} */ DateRangePopupComponent.prototype.onActiveDateChange = /** * @param {?} value * @param {?} partType * @return {?} */ function (value, partType) { if (this.isRange) { if (partType === 'left') { this.datePickerService.activeDate = [value, value.addMonths(1)]; } else { this.datePickerService.activeDate = [value.addMonths(-1), value]; } } else { this.datePickerService.activeDate = value; } }; /** * @param {?} value * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.onSelectTime = /** * @param {?} value * @param {?=} partType * @return {?} */ function (value, partType) { if (this.isRange) { /** @type {?} */ var newValue = (/** @type {?} */ (cloneDate(this.datePickerService.value))); /** @type {?} */ var index = this.datePickerService.getActiveIndex(partType); newValue[index] = this.overrideHms(value, newValue[index]); this.datePickerService.setValue(newValue); } else { /** @type {?} */ var newValue = this.overrideHms(value, (/** @type {?} */ (this.datePickerService.value))); this.datePickerService.setValue(newValue); // If not select a date currently, use today } this.datePickerService.inputPartChange$.next(); this.buildTimeOptions(); }; /** * @param {?} value * @param {?=} emitValue * @return {?} */ DateRangePopupComponent.prototype.changeValueFromSelect = /** * @param {?} value * @param {?=} emitValue * @return {?} */ function (value, emitValue) { if (emitValue === void 0) { emitValue = true; } if (this.isRange) { /** @type {?} */ var selectedValue = (/** @type {?} */ (cloneDate(this.datePickerService.value))); /** @type {?} */ var otherPart = void 0; if (this.datePickerService.activeInput === 'left') { otherPart = 'right'; selectedValue[0] = value; } else { otherPart = 'left'; selectedValue[1] = value; } selectedValue = sortRangeValue(selectedValue); this.hoverValue = selectedValue; this.datePickerService.setValue(selectedValue); this.datePickerService.setActiveDate(selectedValue, !this.showTime); this.datePickerService.inputPartChange$.next(); if (!this.isAllowed(selectedValue)) { return; } if (emitValue) { // If the other input has value if (this.isBothAllowed(selectedValue)) { this.calendarChange.emit(selectedValue); this.clearHoverValue(); this.datePickerService.emitValue$.next(); } else { this.calendarChange.emit([value.clone()]); this.datePickerService.inputPartChange$.next((/** @type {?} */ (otherPart))); } } } else { this.datePickerService.setValue(value); this.datePickerService.setActiveDate(value, !this.showTime); this.datePickerService.inputPartChange$.next(); if (!this.isAllowed(value)) { return; } if (emitValue) { this.datePickerService.emitValue$.next(); } } }; /** * @param {?} panelMode * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.getPanelMode = /** * @param {?} panelMode * @param {?=} partType * @return {?} */ function (panelMode, partType) { if (this.isRange) { return (/** @type {?} */ (panelMode[this.datePickerService.getActiveIndex(partType)])); } else { return (/** @type {?} */ (panelMode)); } }; // Get single value or part value of a range // Get single value or part value of a range /** * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.getValue = // Get single value or part value of a range /** * @param {?=} partType * @return {?} */ function (partType) { if (this.isRange) { return (((/** @type {?} */ (this.datePickerService.value))) || [])[this.datePickerService.getActiveIndex(partType)]; } else { return (/** @type {?} */ (this.datePickerService.value)); } }; /** * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.getActiveDate = /** * @param {?=} partType * @return {?} */ function (partType) { if (this.isRange) { return ((/** @type {?} */ (this.datePickerService.activeDate)))[this.datePickerService.getActiveIndex(partType)]; } else { return (/** @type {?} */ (this.datePickerService.activeDate)); } }; /** * @param {?} selectedValue * @return {?} */ DateRangePopupComponent.prototype.isOneAllowed = /** * @param {?} selectedValue * @return {?} */ function (selectedValue) { /** @type {?} */ var index = this.datePickerService.getActiveIndex(); /** @type {?} */ var disabledTimeArr = [this.disabledStartTime, this.disabledEndTime]; return isAllowedDate((/** @type {?} */ (selectedValue[index])), this.disabledDate, disabledTimeArr[index]); }; /** * @param {?} selectedValue * @return {?} */ DateRangePopupComponent.prototype.isBothAllowed = /** * @param {?} selectedValue * @return {?} */ function (selectedValue) { return (isAllowedDate((/** @type {?} */ (selectedValue[0])), this.disabledDate, this.disabledStartTime) && isAllowedDate((/** @type {?} */ (selectedValue[1])), this.disabledDate, this.disabledEndTime)); }; /** * @param {?} value * @param {?=} isBoth * @return {?} */ DateRangePopupComponent.prototype.isAllowed = /** * @param {?} value * @param {?=} isBoth * @return {?} */ function (value, isBoth) { if (isBoth === void 0) { isBoth = false; } if (this.isRange) { return isBoth ? this.isBothAllowed((/** @type {?} */ (value))) : this.isOneAllowed((/** @type {?} */ (value))); } else { return isAllowedDate((/** @type {?} */ (value)), this.disabledDate, this.disabledTime); } }; /** * @param {?=} partType * @return {?} */ DateRangePopupComponent.prototype.getTimeOptions = /** * @param {?=} partType * @return {?} */ function (partType) { if (this.showTime && this.timeOptions) { return this.timeOptions instanceof Array ? this.timeOptions[this.datePickerService.getActiveIndex(partType)] : this.timeOptions; } return null; }; /** * @param {?} val * @return {?} */ DateRangePopupComponent.prototype.onClickPresetRange = /** * @param {?} val * @return {?} */ function (val) { /** @type {?} */ var value = typeof val === 'function' ? val() : val; if (value) { this.datePickerService.setValue([new CandyDate(value[0]), new CandyDate(value[1])]); this.resultOk.emit(); } }; /** * @return {?} */ DateRangePopupComponent.prototype.onPresetRangeMouseLeave = /** * @return {?} */ function () { this.clearHoverValue(); }; /** * @param {?} val * @return {?} */ DateRangePopupComponent.prototype.onHoverPresetRange = /** * @param {?} val * @return {?} */ function (val) { if (typeof val !== 'function') { this.hoverValue = [new CandyDate(val[0]), new CandyDate(val[1])]; } }; /** * @param {?} obj * @return {?} */ DateRangePopupComponent.prototype.getObjectKeys = /** * @param {?} obj * @return {?} */ function (obj) { return obj ? Object.keys(obj) : []; }; /** * @param {?} partType * @return {?} */ DateRangePopupComponent.prototype.show = /** * @param {?} partType * @return {?} */ function (partType) { /** @type {?} */ var hide = this.showTime && this.isRange && this.datePickerService.activeInput !== partType; return !hide; }; /** * @private * @return {?} */ DateRangePopupComponent.prototype.clearHoverValue = /** * @private * @return {?} */ function () { this.hoverValue = []; }; /** * @private * @return {?} */ DateRangePopupComponent.prototype.buildTimeOptions = /** * @private * @return {?} */ function () { if (this.showTime) { /** @type {?} */ var showTime = typeof this.showTime === 'object' ? this.showTime : {}; if (this.isRange) { /** @type {?} */ var value = (/** @type {?} */ (this.datePickerService.value)); this.timeOptions = [this.overrideTimeOptions(showTime, value[0], 'start'), this.overrideTimeOptions(showTime, value[1], 'end')]; } else { this.timeOptions = this.overrideTimeOptions(showTime, (/** @type {?} */ (this.datePickerService.value))); } } else { this.timeOptions = null; } }; /** * @private * @param {?} origin * @param {?} value * @param {?=} partial * @return {?} */ DateRangePopupComponent.prototype.overrideTimeOptions = /** * @private * @param {?} origin * @param {?} value * @param {?=} partial * @return {?} */ function (origin, value, partial) { /** @type {?} */ var disabledTimeFn; if (partial) { disabledTimeFn = partial === 'start' ? this.disabledStartTime : this.disabledEndTime; } else { disabledTimeFn = this.disabledTime; } return __assign(__assign({}, origin), getTimeConfig(value, disabledTimeFn)); }; /** * @private * @param {?} newValue * @param {?} oldValue * @return {?} */ DateRangePopupComponent.prototype.overrideHms = /** * @private * @param {?} newValue * @param {?} oldValue * @return {?} */ function (newValue, oldValue) { // tslint:disable-next-line:no-parameter-reassignment newValue = newValue || new CandyDate(); // tslint:disable-next-line:no-parameter-reassignment oldValue = oldValue || new CandyDate(); return oldValue.setHms(newValue.getHours(), newValue.getMinutes(), newValue.getSeconds()); }; DateRangePopupComponent.decorators = [ { type: Component, args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, // tslint:disable-next-line:component-selector selector: 'date-range-popup', exportAs: 'dateRangePopup', template: "\n <ng-container *ngIf=\"isRange; else singlePanel\">\n <div class=\"{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper\">\n <div class=\"{{ prefixCls }}-range-arrow\" [ngStyle]=\"datePickerService?.arrowPositionStyle\"></div>\n <div class=\"{{ prefixCls }}-panel-container\">\n <div class=\"{{ prefixCls }}-panels\">\n <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'left' }\"></ng-container>\n <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'right' }\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"tplFooter\"></ng-container>\n </div>\n </div>\n </ng-container>\n <ng-template #singlePanel>\n <div\n class=\"{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }} {{\n hasTimePicker ? prefixCls + '-time' : ''\n }} {{ isRange ? prefixCls + '-range' : '' }}\"\n >\n <div class=\"{{ prefixCls }}-panel\" tabindex=\"-1\">\n <!-- Single ONLY -->\n <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n <ng-container *ngTemplateOutlet=\"tplFooter\"></ng-container>\n </div>\n </div>\n </ng-template>\n\n <ng-template #tplInnerPopup let-partType=\"partType\">\n <inner-popup\n *ngIf=\"show(partType)\"\n [showWeek]=\"showWeek\"\n [endPanelMode]=\"getPanelMode(endPanelMode, partType)\"\n [partType]=\"partType\"\n [locale]=\"locale\"\n [showTimePicker]=\"hasTimePicker\"\n [timeOptions]=\"getTimeOptions(partType)\"\n [panelMode]=\"getPanelMode(panelMode, partType)\"\n (panelModeChange)=\"onPanelModeChange($event, partType)\"\n [activeDate]=\"getActiveDate(partType)\"\n [value]=\"getValue(partType)\"\n [disabledDate]=\"disabledDate\"\n [dateRender]=\"dateRender\"\n [selectedValue]=\"datePickerService?.value\"\n [hoverValue]=\"hoverValue\"\n (dayHover)=\"onDayHover($event)\"\n (selectDate)=\"changeValueFromSelect($event, !showTime)\"\n (selectTime)=\"onSelectTime($event, partType)\"\n (headerChange)=\"onActiveDateChange($event, partType)\"\n ></inner-popup>\n </ng-template>\n\n <ng-template #tplFooter>\n <calendar-footer\n *ngIf=\"hasFooter\"\n [locale]=\"locale\"\n [isRange]=\"isRange\"\n [showToday]=\"showToday\"\n [hasTimePicker]=\"hasTimePicker\"\n [okDisabled]=\"!isAllowed(datePickerService?.value)\"\n [extraFooter]=\"extraFooter\"\n [rangeQuickSelector]=\"ranges ? tplRangeQuickSelector : null\"\n (clickOk)=\"onClickOk()\"\n (clickToday)=\"onClickToday($event)\"\n ></calendar-footer>\n </ng-template>\n\n <ng-template #tplRangePart let-partType=\"partType\">\n <div class=\"{{ prefixCls }}-panel\">\n <ng-container *ngTemplateOutlet=\"tplInnerPopup; context: { partType: partType }\"></ng-container>\n </div>\n </ng-template>\n\n <!-- Range ONLY: Range Quick Selector -->\n <ng-template #tplRangeQuickSelector>\n <li\n *ngFor=\"let name of getObjectKeys(ranges)\"\n class=\"{{ prefixCls }}-preset\"\n (click)=\"onClickPresetRange(ranges[name])\"\n (mouseenter)=\"onHoverPresetRange(ranges[name])\"\n (mouseleave)=\"onPresetRangeMouseLeave()\"\n >\n <span class=\"ant-tag ant-tag-blue\">{{ name }}</span>\n </li>\n </ng-template>\n " }] } ]; /** @nocollapse */ DateRangePopupComponent.ctorParameters = function () { return [ { type: DatePickerService }, { type: ChangeDetectorRef } ]; }; DateRangePopupComponent.propDecorators = { isRange: [{ type: Input }], showWeek: [{ type: Input }], locale: [{ type: Input }], format: [{ type: Input }], placeholder: [{ type: Input }], disabledDate: [{ type: Input }], disabledTime: [{ type: Input }], showToday: [{ type: Input }], showTime: [{ type: Input }], extraFooter: [{ type: Input }], ranges: [{ type: Input }], dateRender: [{ type: Input }], panelMode: [{ type: Input }], defaultPickerValue: [{ type: Input }], panelModeChange: [{ type: Output }], calendarChange: [{ type: Output }], resultOk: [{ type: Output }] }; return DateRangePopupComponent; }()); if (false) { /** @type {?} */ DateRangePopupComponent.prototype.isRange; /** @type {?} */ DateRangePopupComponent.prototype.showWeek; /** @type {?} */ DateRangePopupComponent.prototype.locale; /** @type {?} */ DateRangePopupComponent.prototype.format; /** @type {?} */ DateRangePopupComponent.prototype.placeholder; /** @type {?} */ DateRangePopupComponent.prototype.disabledDate; /** @type {?} */ DateRangePopupComponent.prototype.disabledTime; /** @type {?} */ DateRangePopupComponent.prototype.showToday; /** @type {?} */ DateRangePopupComponent.prototype.showTime; /** @type {?} */ DateRangePopupComponent.prototype.extraFooter; /** @type {?} */ DateRangePopupComponent.prototype.ranges; /** @type {?} */ DateRangePopupComponent.prototype.dateRender; /** @type {?} */ DateRangePopupComponent.prototype.panelMode; /** @type {?} */ DateRangePopupComponent.prototype.defaultPickerValue; /** @type {?} */ DateRangePopupComponent.prototype.panelModeChange; /** @type {?} */ DateRangePopupComponent.prototype.calendarChange; /** @type {?} */ DateRangePopupComponent.prototype.resultOk; /** @type {?} */ DateRangePopupComponent.prototype.prefixCls; /** @type {?} */ DateRangePopupComponent.prototype.endPanelMode; /** @type {?} */ DateRangePopupComponent.prototype.timeOptions; /** @type {?} */ DateRangePopupComponent.prototype.hoverValue; /** @type {?} */ DateRangePopupComponent.prototype.destroy$; /** @type {?} */ DateRangePopupComponent.prototype.disabledStartTime; /** @type {?} */ DateRangePopupComponent.prototype.disabledEndTime; /** @type {?} */ DateRangePopupComponent.prototype.datePickerService; /** @type {?} */ DateRangePopupComponent.prototype.cdr; } /** * @fileoverview added by tsickle * Generated from: picker.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzPickerComponent = /** @class */ (function () { function NzPickerComponent(elementRef, dateHelper, changeDetector, datePickerService, doc) { this.elementRef = elementRef; this.dateHelper = dateHelper; this.changeDetector = changeDetector; this.datePickerService = datePickerService; this.noAnimation = false; this.isRange = false; this.open = undefined; this.focusChange = new EventEmitter(); this.valueChange = new EventEmitter(); this.openChange = new EventEmitter(); // Emitted when overlay's open state change this.destroy$ = new Subject(); this.prefixCls = PREFIX_CLASS; this.activeBarStyle = { position: 'absolute' }; this.animationOpenState = false; this.overlayOpen = false; // Available when "open"=undefined // Available when "open"=undefined this.overlayPositions = (/** @type {?} */ ([ { // offsetX: -10, // TODO: What a pity, cdk/overlay current not support offset configs even though it already provide these properties // offsetY: -10, originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }, { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }, { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }, { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' } ])); this.currentPositionX = 'start'; this.currentPositionY = 'bottom'; this.document = doc; this.origin = new CdkOverlayOrigin(this.elementRef); this.updateInputValue(); } Object.defineProperty(NzPickerComponent.prototype, "realOpenState", { get: /** * @return {?} */ function () { // The value that really decide the open state of overlay return this.isOpenHandledByUser() ? !!this.open : this.overlayOpen; }, enumerable: true, configurable: true }); /** * @return {?} */ NzPickerComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this.inputSize = Math.max(10, this.format.length) + 2; this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ function () { _this.updateInputValue(); _this.changeDetector.markForCheck(); })); }; /** * @return {?} */ NzPickerComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; if (this.autoFocus) { this.focus(); } if (this.isRange) { this.resetInputWidthAndArrowLeft(); fromEvent(window, 'resize') .pipe(takeUntil(this.destroy$)) .subscribe((/** * @return {?} */ function () { _this.resetInputWidthAndArrowLeft(); })); } this.datePickerService.inputPartChange$.pipe(takeUntil(this.destroy$)).subscribe((/** * @param {?} partType * @return {?} */ function (partType) { var _a; if (partType) { _this.datePickerService.activeInput = partType; } _this.datePickerService.arrowPositionStyle = { left: _this.datePickerService.activeInput === 'left' ? '0px' : _this.arrowLeft + "px" }; _this.activeBarStyle = __assign(__assign(__assign({}, _this.activeBarStyle), _this.datePickerService.arrowPositionStyle), { width: _this.inputWidth + "px" }); if (_this.document.activeElement !== _this.getInput(_this.datePickerService.activeInput)) { _this.focus(); } (_a = _this.panel) === null || _a === void 0 ? void 0 : _a.cdr.markForCheck(); _this.changeDetector.markForCheck(); })); }; /** * @return {?} */ NzPickerComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; /** * @param {?} changes * @return {?} */ NzPickerComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.open) { this.animationStart(); } }; /** * @return {?} */ NzPickerComponent.prototype.resetInputWidthAndArrowLeft = /** * @return {?} */ function () { var _a, _b; this.inputWidth = ((_a = this.rangePickerInputs) === null || _a === void 0 ? void 0 : _a.first.nativeElement.offsetWidth) || 0; this.arrowLeft = this.inputWidth + ((_b = this.separatorElement) === null || _b === void 0 ? void 0 : _b.nativeElement.offsetWidth) || 0; }; /** * @param {?=} partType * @return {?} */ NzPickerComponent.prototype.getInput = /** * @param {?=} partType * @return {?} */ function (partType) { return this.isRange ? partType === 'left' ? this.rangePickerInputs.first.nativeElement : this.rangePickerInputs.last.nativeElement : this.pickerInput.nativeElement; }; /** * @return {?} */ NzPickerComponent.prototype.focus = /** * @return {?} */ function () { this.getInput(this.datePickerService.activeInput).focus(); // Focus on the first input }; /** * @param {?=} partType * @return {?} */ NzPickerComponent.prototype.onFocus = /** * @param {?=} partType * @return {?} */ function (partType) { if (partType) { this.datePickerService.inputPartChange$.next(partType); } this.focusChange.emit(true); }; /** * @return {?} */ NzPickerComponent.prototype.onBlur = /** * @return {?} */ function () { this.focusChange.emit(false); }; // Show overlay content // Show overlay content /** * @return {?} */ NzPickerComponent.prototype.showOverlay = // Show overlay content /** * @return {?} */ function () { var _this = this; if (!this.realOpenState) { this.overlayOpen = true; this.animationStart(); this.focus(); this.openChange.emit(true); setTimeout((/** * @return {?} */ function () { if (_this.cdkConnectedOverlay && _this.cdkConnectedOverlay.overlayRef) { _this.cdkConnectedOverlay.overlayRef.updatePosition(); } })); } }; /** * @return {?} */ NzPickerComponent.prototype.hideOverlay = /** * @return {?} */ function () { if (this.realOpenState) { this.overlayOpen = false; this.openChange.emit(false); this.focus(); } }; /** * @return {?} */ NzPickerComponent.prototype.showClear = /** * @return {?} */ function () { return !this.disabled && !this.isEmptyValue(this.datePickerService.value) && this.allowClear; }; /** * @param {?} event * @param {?=} partType * @return {?} */ NzPickerComponent.prototype.onClickInputBox = /** * @param {?} event * @param {?=} partType * @return {?} */ function (event, partType) { event.stopPropagation(); if (!this.disabled && !this.isOpenHandledByUser()) { this.showOverlay(); } this.onFocus(partType);