ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,449 lines (1,441 loc) • 175 kB
JavaScript
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);